{% extends "base.html" %}
{% load i18n %}
{% block title %}{% trans "Dashboard Penganjur" %} — {{ user.get_full_name|default:user.username }}{% endblock %}
{% block breadcrumb %}<span class="text-slate-500 font-bold text-xs">{% trans "Laman Utama Penganjur" %}</span>{% endblock %}

{% block content %}
<style>
    @keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
    .animate-fade-up { animation: fadeUp 0.5s ease-out forwards; }
</style>

<div class="animate-fade-up max-w-[1400px] mx-auto pb-12">

    <div class="bg-gradient-to-br from-slate-900 via-[#1e3a8a] to-[#0f172a] rounded-3xl p-8 md:p-10 mb-8 shadow-lg border border-slate-800 flex flex-col md:flex-row md:items-center justify-between gap-8 relative overflow-hidden">
        <div class="absolute right-0 top-0 opacity-10 transform translate-x-1/4 -translate-y-1/4 pointer-events-none">
            <i class="fas fa-home text-[200px] text-blue-400"></i>
        </div>
        <div class="absolute inset-0 opacity-10" style="background-image:radial-gradient(rgba(255,255,255,0.5) 1px,transparent 1px);background-size:24px 24px;"></div>
        
        <div class="relative z-10">
            <div class="inline-flex items-center gap-2 px-3 py-1 bg-blue-500/20 border border-blue-400/30 text-blue-200 text-[10px] font-black uppercase tracking-widest rounded-full mb-4 shadow-sm">
                {% trans "Panel Pengurusan IPES" %}
            </div>
            <h1 class="text-3xl md:text-4xl font-black text-white leading-tight mb-2 tracking-tight">
                {% trans "Selamat kembali" %}, {{ user.get_full_name|default:user.username }}
            </h1>
            <p class="text-blue-100/70 text-sm font-medium max-w-xl leading-relaxed">
                {% trans "Ini adalah pusat kawalan anda. Uruskan bengkel, pantau kehadiran peserta, dan hasilkan laporan strategik menggunakan teknologi AI secara berpusat." %}
            </p>
        </div>

        <div class="relative z-10 shrink-0">
            <a href="{% url 'bengkel:create' %}" class="flex items-center justify-center gap-2 bg-amber-500 hover:bg-amber-600 text-amber-950 px-8 py-4 rounded-xl font-black shadow-lg shadow-amber-500/30 transition-all hover:-translate-y-1 active:scale-[0.98]">
                <i class="fas fa-plus-circle text-lg"></i> {% trans "Cipta Bengkel Baharu" %}
            </a>
        </div>
    </div>

    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6 mb-8">
        <div class="bg-white rounded-3xl border border-slate-200 shadow-sm p-6 flex flex-col items-center justify-center text-center group hover:border-slate-300 transition-colors">
            <div class="w-12 h-12 rounded-full bg-slate-100 text-slate-500 flex items-center justify-center mb-3 group-hover:scale-110 transition-transform"><i class="fas fa-box-open text-lg"></i></div>
            <div class="text-3xl font-black text-slate-800">{{ total_bengkel }}</div>
            <div class="text-[10px] font-black text-slate-400 uppercase tracking-widest mt-1">{% trans "Jumlah Acara" %}</div>
        </div>
        <div class="bg-white rounded-3xl border border-slate-200 shadow-sm p-6 flex flex-col items-center justify-center text-center group hover:border-blue-300 transition-colors">
            <div class="w-12 h-12 rounded-full bg-blue-50 text-blue-500 flex items-center justify-center mb-3 group-hover:scale-110 transition-transform"><i class="fas fa-users text-lg"></i></div>
            <div class="text-3xl font-black text-blue-600">{{ total_peserta }}</div>
            <div class="text-[10px] font-black text-blue-400 uppercase tracking-widest mt-1">{% trans "Total Peserta" %}</div>
        </div>
        <div class="bg-white rounded-3xl border border-slate-200 shadow-sm p-6 flex flex-col items-center justify-center text-center group hover:border-emerald-300 transition-colors">
            <div class="w-12 h-12 rounded-full bg-emerald-50 text-emerald-500 flex items-center justify-center mb-3 group-hover:scale-110 transition-transform"><i class="fas fa-user-check text-lg"></i></div>
            <div class="text-3xl font-black text-emerald-600">{{ total_diterima }}</div>
            <div class="text-[10px] font-black text-emerald-500 uppercase tracking-widest mt-1">{% trans "Kehadiran Sah" %}</div>
        </div>
        <div class="bg-white rounded-3xl border border-slate-200 shadow-sm p-6 flex flex-col items-center justify-center text-center group hover:border-amber-300 transition-colors">
            <div class="w-12 h-12 rounded-full bg-amber-50 text-amber-500 flex items-center justify-center mb-3 group-hover:scale-110 transition-transform"><i class="fas fa-id-badge text-lg"></i></div>
            <div class="text-3xl font-black text-amber-600">{{ total_hadir }}</div>
            <div class="text-[10px] font-black text-amber-500 uppercase tracking-widest mt-1">{% trans "Telah Hadir" %}</div>
        </div>
    </div>

    <div class="grid grid-cols-1 xl:grid-cols-3 gap-8">

        <div class="xl:col-span-2 space-y-8">
            
            <div class="bg-white rounded-3xl border border-slate-200 shadow-sm overflow-hidden">
                <div class="px-6 py-5 border-b border-slate-100 bg-slate-50/50 flex items-center justify-between">
                    <h2 class="text-sm font-black text-slate-800 uppercase tracking-widest flex items-center gap-2"><i class="fas fa-calendar-alt text-blue-500"></i> {% trans "Acara Akan Datang" %}</h2>
                    <a href="{% url 'bengkel:list' %}" class="text-[10px] font-bold text-blue-600 hover:text-white hover:bg-blue-600 bg-white border border-slate-200 px-3 py-1.5 rounded-lg shadow-sm transition-colors">{% trans "Lihat Semua" %}</a>
                </div>

                <div class="divide-y divide-slate-100">
                    {% if akan_datang %}
                        {% for b in akan_datang %}
                        <a href="{% url 'bengkel:detail' pk=b.pk %}" class="flex items-center gap-4 sm:gap-6 p-5 sm:p-6 hover:bg-slate-50 transition-colors group">
                            <div class="shrink-0 w-14 h-14 sm:w-16 sm:h-16 rounded-2xl bg-gradient-to-br from-blue-600 to-indigo-600 text-white flex flex-col items-center justify-center shadow-md shadow-blue-500/20 group-hover:scale-105 transition-transform">
                                <span class="text-xl sm:text-2xl font-black leading-none">{{ b.tarikh|date:"d" }}</span>
                                <span class="text-[9px] font-bold uppercase tracking-widest mt-0.5">{{ b.tarikh|date:"M" }}</span>
                            </div>
                            
                            <div class="flex-1 min-w-0">
                                <h3 class="font-black text-slate-800 text-sm sm:text-base truncate group-hover:text-blue-600 transition-colors mb-1">{{ b.title }}</h3>
                                <div class="text-xs text-slate-500 flex items-center gap-1.5 truncate"><i class="fas fa-map-marker-alt text-rose-400 shrink-0"></i> {{ b.lokasi_nama }}</div>
                            </div>
                            
                            <div class="shrink-0 flex items-center gap-5">
                                <div class="text-right hidden sm:block">
                                    <div class="text-base font-black text-slate-700">{{ b.jumlah_jemputan }}</div>
                                    <div class="text-[9px] font-bold uppercase tracking-widest text-slate-400 mt-0.5">{% trans "Peserta" %}</div>
                                </div>
                                <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-slate-100 flex items-center justify-center text-slate-400 group-hover:bg-blue-100 group-hover:text-blue-600 transition-colors">
                                    <i class="fas fa-chevron-right text-xs sm:text-sm"></i>
                                </div>
                            </div>
                        </a>
                        {% endfor %}
                    {% else %}
                        <div class="p-12 text-center border-2 border-dashed border-slate-100 m-6 rounded-2xl bg-slate-50">
                            <div class="w-16 h-16 rounded-full bg-white flex items-center justify-center mx-auto mb-4 shadow-sm border border-slate-100"><i class="far fa-calendar-times text-2xl text-slate-300"></i></div>
                            <p class="text-sm text-slate-500 font-bold">{% trans "Tiada bengkel dijadualkan buat masa ini." %}</p>
                            <a href="{% url 'bengkel:create' %}" class="inline-block mt-3 text-xs font-bold text-blue-600 hover:underline">{% trans "Sila cipta bengkel baharu." %}</a>
                        </div>
                    {% endif %}
                </div>
            </div>

            {% if sudah_lepas %}
            <div class="bg-white rounded-3xl border border-slate-200 shadow-sm overflow-hidden">
                <div class="px-6 py-5 border-b border-slate-100 bg-slate-50/50 flex items-center justify-between">
                    <h2 class="text-sm font-black text-slate-800 uppercase tracking-widest flex items-center gap-2"><i class="fas fa-history text-slate-500"></i> {% trans "Rekod Acara Lepas" %}</h2>
                </div>
                <div class="divide-y divide-slate-100">
                    {% for b in sudah_lepas|slice:":3" %}
                    <a href="{% url 'bengkel:detail' pk=b.pk %}" class="flex items-center gap-5 p-5 hover:bg-slate-50 transition-colors group opacity-80 hover:opacity-100">
                        <div class="shrink-0 w-12 h-12 rounded-xl bg-slate-100 text-slate-500 flex flex-col items-center justify-center border border-slate-200">
                            <span class="text-lg font-black leading-none">{{ b.tarikh|date:"d" }}</span>
                            <span class="text-[8px] font-bold uppercase tracking-widest mt-0.5">{{ b.tarikh|date:"M" }}</span>
                        </div>
                        <div class="flex-1 min-w-0">
                            <h3 class="font-bold text-slate-700 text-sm truncate group-hover:text-blue-600 transition-colors">{{ b.title }}</h3>
                            <div class="text-[11px] text-slate-400 mt-1 truncate">{{ b.lokasi_nama }}</div>
                        </div>
                        <div class="shrink-0 flex items-center gap-4">
                            <div class="text-right">
                                <div class="text-xs font-black text-slate-600">{{ b.jumlah_hadir }} / {{ b.jumlah_jemputan }}</div>
                                <div class="text-[8px] font-bold uppercase tracking-widest text-slate-400 mt-0.5">{% trans "Kehadiran" %}</div>
                            </div>
                            <i class="fas fa-chevron-right text-slate-300 group-hover:text-blue-500 text-xs transition-colors"></i>
                        </div>
                    </a>
                    {% endfor %}
                </div>
            </div>
            {% endif %}

        </div>

        <div class="space-y-8">
            
            <div class="bg-white rounded-3xl border border-slate-200 shadow-sm p-6 relative overflow-hidden">
                <div class="absolute top-0 right-0 w-32 h-32 bg-blue-50 rounded-bl-full -z-10 border-b border-l border-blue-100/50"></div>
                
                <div class="flex items-center gap-4 mb-6">
                    <div class="w-16 h-16 rounded-full bg-gradient-to-br from-blue-600 to-indigo-600 flex items-center justify-center text-2xl font-black text-white shadow-md border-4 border-white shrink-0">
                        {{ user.get_full_name|default:user.username|first|upper }}
                    </div>
                    <div class="min-w-0">
                        <h3 class="font-black text-slate-800 text-base truncate">{{ user.get_full_name|default:user.username }}</h3>
                        <p class="text-[11px] font-bold text-slate-500 truncate">{{ user.email }}</p>
                    </div>
                </div>
                
                <div class="space-y-3 mb-6 bg-slate-50 p-4 rounded-2xl border border-slate-100">
                    {% if user.profile.organisasi %}
                    <div class="flex items-start gap-3 text-xs text-slate-600 font-medium">
                        <i class="fas fa-building text-slate-400 mt-0.5"></i>
                        <span class="leading-snug">{{ user.profile.organisasi }}</span>
                    </div>
                    {% endif %}
                    {% if user.profile.jabatan %}
                    <div class="flex items-start gap-3 text-xs text-slate-600 font-medium">
                        <i class="fas fa-id-card-alt text-slate-400 mt-0.5"></i>
                        <span class="leading-snug">{{ user.profile.jabatan }}</span>
                    </div>
                    {% endif %}
                </div>
                
                <div class="pt-4 border-t border-slate-100 flex items-center justify-between">
                    <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[9px] font-black uppercase tracking-widest bg-emerald-50 text-emerald-600 border border-emerald-200">
                        <span class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse"></span> {% trans "Penganjur Aktif" %}
                    </span>
                    <a href="{% url 'bengkel:edit_profile' %}" class="text-[10px] font-bold text-blue-600 hover:text-white hover:bg-blue-600 border border-blue-100 bg-blue-50 px-3 py-1.5 rounded-lg transition-colors">{% trans "Edit Profil" %}</a>
                </div>
            </div>

            <div class="bg-white rounded-3xl border border-slate-200 shadow-sm overflow-hidden">
                <div class="px-6 py-5 border-b border-slate-100 bg-slate-50/50">
                    <h2 class="text-sm font-black text-slate-800 uppercase tracking-widest flex items-center gap-2"><i class="fas fa-bolt text-amber-500"></i> {% trans "Pintasan Modul" %}</h2>
                </div>
                <div class="p-4 flex flex-col gap-3">
                    <a href="{% url 'bengkel:create' %}" class="flex items-center gap-4 px-5 py-4 rounded-2xl font-bold text-xs text-white transition-all hover:scale-[1.02]" style="background:linear-gradient(135deg,#1e40af,#2563eb);box-shadow:0 4px 12px rgba(37,99,235,.3)">
                        <div class="w-8 h-8 rounded-full bg-white/20 flex items-center justify-center shrink-0"><i class="fas fa-plus"></i></div>
                        {% trans "Cipta Bengkel Baharu" %}
                    </a>
                    <a href="{% url 'bengkel:peserta_saya' %}" class="flex items-center gap-4 px-5 py-4 rounded-2xl font-bold text-xs text-slate-700 bg-slate-50 hover:bg-slate-100 transition-colors border border-slate-100 hover:border-slate-200 group">
                        <div class="w-8 h-8 rounded-full bg-white flex items-center justify-center text-indigo-500 shadow-sm shrink-0 group-hover:scale-110 transition-transform"><i class="fas fa-users"></i></div>
                        {% trans "Direktori Peserta Anda" %}
                    </a>
                    <a href="{% url 'bengkel:list' %}" class="flex items-center gap-4 px-5 py-4 rounded-2xl font-bold text-xs text-slate-700 bg-slate-50 hover:bg-slate-100 transition-colors border border-slate-100 hover:border-slate-200 group">
                        <div class="w-8 h-8 rounded-full bg-white flex items-center justify-center text-teal-500 shadow-sm shrink-0 group-hover:scale-110 transition-transform"><i class="fas fa-folder-open"></i></div>
                        {% trans "Pustaka Bengkel Utama" %}
                    </a>
                </div>
            </div>

        </div>

    </div>

</div>
{% endblock %}