{% extends "admin/layout.html" %}

{% block title %}Dashboard | Admin Albab Store{% endblock %}
{% block topbar_title %}Dashboard{% endblock %}

{% block content %}

<!-- Kartu statistik -->
<div class="stat-grid">
    <div class="stat-card">
        <span class="stat-icon">🗂️</span>
        <p class="stat-value">{{ counts.products }}</p>
        <p class="stat-label">Jumlah Produk</p>
        <a href="{{ url_for('admin_products') }}">Kelola →</a>
    </div>
    <div class="stat-card">
        <span class="stat-icon">🏷️</span>
        <p class="stat-value">{{ counts.categories }}</p>
        <p class="stat-label">Jumlah Kategori</p>
        <a href="{{ url_for('admin_categories') }}">Kelola →</a>
    </div>
    <div class="stat-card">
        <span class="stat-icon">🎬</span>
        <p class="stat-value">{{ counts.demos }}</p>
        <p class="stat-label">Jumlah Demo</p>
        <a href="{{ url_for('demo', slug='pondok') }}" target="_blank">Lihat demo →</a>
    </div>
    <div class="stat-card">
        <span class="stat-icon">💌</span>
        <p class="stat-value">{{ counts.messages }}</p>
        <p class="stat-label">Jumlah Pesan</p>
        <a href="{{ url_for('admin_messages') }}">Lihat pesan →</a>
    </div>
</div>

<!-- Pesan terbaru -->
<div class="admin-card">
    <div class="admin-card-head">
        <h2>Pesan Terbaru</h2>
        <a class="btn btn-outline btn-sm" href="{{ url_for('admin_messages') }}">Semua Pesan</a>
    </div>

    {% if recent_messages %}
    <div class="table-wrap">
        <table class="admin-table">
            <thead>
                <tr>
                    <th>Nama</th>
                    <th>WhatsApp</th>
                    <th>Pesan</th>
                    <th>Tanggal</th>
                </tr>
            </thead>
            <tbody>
                {% for msg in recent_messages %}
                <tr>
                    <td>{{ msg.name }}</td>
                    <td>{{ msg.phone }}</td>
                    <td class="table-msg">{{ msg.message[:60] }}{% if msg.message|length > 60 %}…{% endif %}</td>
                    <td>{{ msg.created_at[:16] }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <p class="empty-state">Belum ada pesan masuk.</p>
    {% endif %}
</div>

<!-- Aksi cepat -->
<div class="admin-card">
    <div class="admin-card-head">
        <h2>Aksi Cepat</h2>
    </div>
    <div class="quick-actions">
        <a class="btn btn-primary" href="{{ url_for('admin_product_add') }}">➕ Tambah Website</a>
        <a class="btn btn-outline" href="{{ url_for('admin_categories') }}">🏷️ Tambah Kategori</a>
        <a class="btn btn-outline" href="{{ url_for('admin_settings') }}">⚙️ Ubah Pengaturan</a>
    </div>
</div>

{% endblock %}