{% extends 'superadmin/base.html' %}

{% block title %}Dashboard | Superadmin{% endblock %}
{% block page_title %}Dashboard Analitik Keseluruhan{% endblock %}
{% block nav_dashboard %}active{% endblock %}

{% block content %}

<style>
    .fade-up-item { opacity: 0; animation: fadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
    @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
</style>

<div class="grid grid-cols-2 xl:grid-cols-4 gap-3 md:gap-6 mb-8">
    
    <div class="bg-white rounded-2xl p-6 shadow-sm border border-slate-200 relative overflow-hidden group hover:border-blue-400 hover:shadow-md transition-all fade-up-item" style="animation-delay: 0.1s;">
        <div class="absolute -right-6 -top-6 w-24 h-24 bg-blue-50 rounded-full group-hover:scale-150 transition-transform duration-500 ease-out z-0"></div>
        <div class="relative z-10">
            <div class="text-slate-400 text-[10px] font-black uppercase tracking-widest mb-2 flex items-center gap-2">
                <i class="fas fa-layer-group text-blue-500 text-sm"></i> Jumlah Bengkel
            </div>
            <div class="text-4xl font-black text-slate-800 mb-1">{{ stats.total_bengkel|default:"0" }}</div>
            <div class="text-xs font-semibold text-blue-600 bg-blue-50 inline-block px-2 py-0.5 rounded">{{ stats.bengkel_aktif|default:"0" }} program aktif</div>
        </div>
    </div>

    <div class="bg-white rounded-2xl p-6 shadow-sm border border-slate-200 relative overflow-hidden group hover:border-emerald-400 hover:shadow-md transition-all fade-up-item" style="animation-delay: 0.2s;">
        <div class="absolute -right-6 -top-6 w-24 h-24 bg-emerald-50 rounded-full group-hover:scale-150 transition-transform duration-500 ease-out z-0"></div>
        <div class="relative z-10">
            <div class="text-slate-400 text-[10px] font-black uppercase tracking-widest mb-2 flex items-center gap-2">
                <i class="fas fa-building text-emerald-500 text-sm"></i> Penganjur Aktif
            </div>
            <div class="text-4xl font-black text-slate-800 mb-1">{{ stats.total_penganjur|default:"0" }}</div>
            <div class="text-xs font-semibold text-emerald-600 bg-emerald-50 inline-block px-2 py-0.5 rounded">Akaun agensi</div>
        </div>
    </div>

    <div class="bg-white rounded-2xl p-6 shadow-sm border border-slate-200 relative overflow-hidden group hover:border-purple-400 hover:shadow-md transition-all fade-up-item" style="animation-delay: 0.3s;">
        <div class="absolute -right-6 -top-6 w-24 h-24 bg-purple-50 rounded-full group-hover:scale-150 transition-transform duration-500 ease-out z-0"></div>
        <div class="relative z-10">
            <div class="text-slate-400 text-[10px] font-black uppercase tracking-widest mb-2 flex items-center gap-2">
                <i class="fas fa-users text-purple-500 text-sm"></i> Peserta Daftar
            </div>
            <div class="text-4xl font-black text-slate-800 mb-1">{{ stats.total_peserta|default:"0" }}</div>
            <div class="text-xs font-semibold text-purple-600 bg-purple-50 inline-block px-2 py-0.5 rounded">{{ stats.total_hadir|default:"0" }} sudah hadir</div>
        </div>
    </div>

    <div class="bg-white rounded-2xl p-6 shadow-sm border border-slate-200 relative overflow-hidden group hover:border-amber-400 hover:shadow-md transition-all fade-up-item" style="animation-delay: 0.4s;">
        <div class="absolute -right-6 -top-6 w-24 h-24 bg-amber-50 rounded-full group-hover:scale-150 transition-transform duration-500 ease-out z-0"></div>
        <div class="relative z-10">
            <div class="text-slate-400 text-[10px] font-black uppercase tracking-widest mb-2 flex items-center gap-2">
                <i class="fas fa-exclamation-circle text-amber-500 text-sm"></i> Pernyataan (Isu)
            </div>
            <div class="text-4xl font-black text-slate-800 mb-1">{{ stats.total_pernyataan|default:"0" }}</div>
            <div class="text-xs font-semibold text-amber-600 bg-amber-50 inline-block px-2 py-0.5 rounded">Masalah dihantar</div>
        </div>
    </div>

</div>

<div class="grid grid-cols-2 lg:grid-cols-4 gap-3 md:gap-6 mb-8 fade-up-item" style="animation-delay: 0.5s;">
    
    <a href="{% url 'superadmin:semua_bengkel' %}" class="flex items-center gap-4 bg-white p-5 rounded-2xl shadow-sm border border-slate-200 hover:shadow-md hover:border-blue-300 transition group">
        <div class="w-12 h-12 rounded-xl bg-blue-50 text-blue-600 flex items-center justify-center text-xl group-hover:bg-blue-600 group-hover:text-white transition">
            <i class="fas fa-calendar-alt"></i>
        </div>
        <div>
            <h3 class="font-black text-slate-800 text-sm">Urus Bengkel</h3>
            <p class="text-[10px] font-medium text-slate-400 uppercase tracking-wide mt-0.5">Lihat semua program</p>
        </div>
    </a>

    <a href="{% url 'superadmin:semua_pengguna' %}" class="flex items-center gap-4 bg-white p-5 rounded-2xl shadow-sm border border-slate-200 hover:shadow-md hover:border-emerald-300 transition group">
        <div class="w-12 h-12 rounded-xl bg-emerald-50 text-emerald-600 flex items-center justify-center text-xl group-hover:bg-emerald-600 group-hover:text-white transition">
            <i class="fas fa-user-shield"></i>
        </div>
        <div>
            <h3 class="font-black text-slate-800 text-sm">Urus Pengguna</h3>
            <p class="text-[10px] font-medium text-slate-400 uppercase tracking-wide mt-0.5">Naik taraf peranan</p>
        </div>
    </a>

    <a href="{% url 'superadmin:semua_pernyataan' %}" class="flex items-center gap-4 bg-white p-5 rounded-2xl shadow-sm border border-slate-200 hover:shadow-md hover:border-amber-300 transition group">
        <div class="w-12 h-12 rounded-xl bg-amber-50 text-amber-600 flex items-center justify-center text-xl group-hover:bg-amber-600 group-hover:text-white transition">
            <i class="fas fa-file-alt"></i>
        </div>
        <div>
            <h3 class="font-black text-slate-800 text-sm">Masalah</h3>
            <p class="text-[10px] font-medium text-slate-400 uppercase tracking-wide mt-0.5">Pantau aduan</p>
        </div>
    </a>

    <div class="bg-rose-50 p-5 rounded-2xl shadow-sm border border-rose-200 flex items-center gap-4 group">
        <div class="w-12 h-12 rounded-xl bg-rose-100 text-rose-600 flex items-center justify-center text-xl group-hover:bg-rose-600 group-hover:text-white transition shrink-0">
            <i class="fas fa-brain"></i>
        </div>
        <div class="flex-1">
            <h3 class="font-black text-rose-800 text-sm">Cache AI</h3>
            <form method="post" action="{% url 'superadmin:reset_chromadb' %}" onsubmit="return confirm('AMARAN KRITIKAL:\n\nTindakan ini akan memadam seluruh pangkalan data vektor (otak AI). Semua fail PDF perlu di-upload semula untuk dibaca.\n\nAdakah anda pasti?');">
                {% csrf_token %}
                <button type="submit" class="mt-1 text-[10px] font-bold text-white bg-rose-500 hover:bg-rose-600 px-3 py-1.5 rounded-lg shadow-sm transition-all flex items-center gap-1.5 w-full justify-center">
                    <i class="fas fa-trash-alt"></i> Cuci Memori AI
                </button>
            </form>
        </div>
    </div>

</div>

<div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden flex flex-col fade-up-item" style="animation-delay: 0.6s;">
    
    <div class="px-6 py-5 border-b border-slate-100 flex justify-between items-center bg-slate-50/50">
        <h3 class="font-black text-slate-800 text-sm flex items-center gap-2">
            <i class="fas fa-clock text-blue-500"></i> Bengkel Terkini
        </h3>
        <a href="{% url 'superadmin:semua_bengkel' %}" class="text-[11px] font-bold text-blue-600 hover:text-blue-800 bg-blue-50 px-3 py-1.5 rounded-lg hover:bg-blue-100 transition">
            Lihat semua <i class="fas fa-arrow-right ml-1"></i>
        </a>
    </div>

    <div class="p-6">
        {% if bengkels_terkini %}
            <div class="overflow-x-auto">
                <table class="w-full text-left border-collapse">
                    <thead>
                        <tr class="text-slate-400 text-[10px] uppercase tracking-widest border-b border-slate-200 bg-slate-50">
                            <th class="p-3 font-bold rounded-tl-lg">Nama Bengkel</th>
                            <th class="p-3 font-bold">Tarikh</th>
                            <th class="p-3 font-bold">Penganjur</th>
                            <th class="p-3 font-bold rounded-tr-lg">Status</th>
                        </tr>
                    </thead>
                    <tbody class="text-sm">
                        {% for bengkel in bengkels_terkini %}
                        <tr class="border-b border-slate-100 hover:bg-slate-50 transition cursor-pointer" onclick="window.location.href='{% url 'superadmin:detail_bengkel' bid=bengkel.pk %}'">
                            <td class="p-3 font-bold text-slate-700">{{ bengkel.title }}</td>
                            <td class="p-3 text-slate-500 text-xs">{{ bengkel.tarikh|date:"d M Y" }}</td>
                            <td class="p-3 text-slate-500 text-xs">{{ bengkel.created_by.username|default:"Sistem" }}</td>
                            <td class="p-3">
                                {% if bengkel.is_active %}
                                    <span class="bg-emerald-100 text-emerald-700 px-2.5 py-1 rounded-md text-[10px] font-bold uppercase">Aktif</span>
                                {% else %}
                                    <span class="bg-slate-100 text-slate-600 px-2.5 py-1 rounded-md text-[10px] font-bold uppercase">Selesai</span>
                                {% endif %}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        {% else %}
            <div class="flex flex-col items-center justify-center py-12 px-4 text-center border-2 border-dashed border-slate-200 rounded-xl bg-slate-50/50">
                <div class="w-16 h-16 bg-white rounded-full flex items-center justify-center shadow-sm border border-slate-100 mb-3 text-slate-300 text-3xl">
                    <i class="fas fa-folder-open"></i>
                </div>
                <h4 class="font-bold text-slate-700 text-sm">Tiada bengkel didaftarkan lagi</h4>
                <p class="text-xs text-slate-500 mt-1 max-w-sm">Penganjur belum mencipta sebarang bengkel atau program dalam sistem pada masa ini.</p>
            </div>
        {% endif %}
    </div>

</div>

{% endblock %}