{% extends "base.html" %}
{% load i18n %}
{% block title %}{% trans "Direktori Peserta Penganjur" %} — {{ user.username }}{% endblock %}

{% block content %}
<div class="animate-fade-up pb-12">

    <div class="relative overflow-hidden bg-gradient-to-br from-[#0f172a] via-[#1e3a8a] to-[#134e4a] rounded-2xl px-8 py-10 mb-8 shadow-lg border border-slate-800">
        <div class="absolute inset-0 opacity-10" style="background-image:radial-gradient(rgba(255,255,255,.12) 1px,transparent 1px);background-size:24px 24px;"></div>
        
        <div class="relative z-10 flex flex-col lg:flex-row justify-between lg:items-center gap-8">
            <div class="max-w-2xl">
                <div class="inline-flex items-center gap-1.5 bg-emerald-500/20 border border-emerald-400/30 text-emerald-300 text-[10px] font-bold tracking-widest uppercase px-3 py-1 rounded-full mb-3">
                    <i class="fas fa-database"></i> Pangkalan Data Berpusat
                </div>
                <h1 class="text-3xl md:text-4xl font-extrabold text-white leading-tight mb-3">Direktori Peserta Anda</h1>
                <p class="text-white/70 text-sm leading-relaxed">
                    Pantau kehadiran, cari maklumat spesifik, dan saring ratusan peserta yang mendaftar di bawah mana-mana bengkel seliaan anda dari satu tempat.
                </p>
            </div>
            
            <div class="flex gap-4 shrink-0">
                <div class="bg-white/10 backdrop-blur-md border border-white/20 rounded-2xl p-5 text-center min-w-[120px] shadow-inner">
                    <div class="text-3xl font-black text-white mb-1">{{ jemputan.count|default:"0" }}</div>
                    <div class="text-[10px] font-bold text-blue-200 uppercase tracking-widest">Total Peserta</div>
                </div>
                <div class="bg-white/10 backdrop-blur-md border border-white/20 rounded-2xl p-5 text-center min-w-[120px] shadow-inner">
                    <div class="text-3xl font-black text-emerald-400 mb-1">{{ bengkel_list.count|default:"0" }}</div>
                    <div class="text-[10px] font-bold text-emerald-200 uppercase tracking-widest">Acara/Bengkel</div>
                </div>
            </div>
        </div>
    </div>

    <form method="GET" class="bg-white p-4 rounded-2xl shadow-sm border border-slate-200 mb-8 flex flex-col md:flex-row gap-4 items-center">
        
        <div class="relative flex-1 w-full">
            <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                <i class="fas fa-search text-slate-400"></i>
            </div>
            <input type="text" name="cari" value="{{ cari }}" placeholder="Cari nama, e-mel, atau organisasi..." 
                   class="w-full pl-11 pr-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition font-medium text-slate-700">
        </div>

        <div class="relative w-full md:w-64 shrink-0">
            <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                <i class="fas fa-building text-slate-400"></i>
            </div>
            <select name="bengkel" class="w-full pl-11 pr-10 py-3 bg-white border border-slate-200 rounded-xl text-sm focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition font-medium text-slate-700 appearance-none cursor-pointer">
                <option value="">Semua Bengkel</option>
                {% for b in bengkel_list %}
                    <option value="{{ b.pk }}" {% if bengkel_filter == b.pk|stringformat:"s" %}selected{% endif %}>
                        {{ b.title|truncatechars:35 }}
                    </option>
                {% endfor %}
            </select>
            <div class="absolute inset-y-0 right-0 pr-4 flex items-center pointer-events-none">
                <i class="fas fa-chevron-down text-slate-400 text-xs"></i>
            </div>
        </div>

        <div class="relative w-full md:w-48 shrink-0">
            <select name="status" class="w-full pl-4 pr-10 py-3 bg-white border border-slate-200 rounded-xl text-sm focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition font-medium text-slate-700 appearance-none cursor-pointer">
                <option value="">Semua Status</option>
                <option value="pending" {% if status_filter == 'pending' %}selected{% endif %}>Menunggu</option>
                <option value="accepted" {% if status_filter == 'accepted' %}selected{% endif %}>Diterima (Sah)</option>
                <option value="rejected" {% if status_filter == 'rejected' %}selected{% endif %}>Ditolak</option>
            </select>
            <div class="absolute inset-y-0 right-0 pr-4 flex items-center pointer-events-none">
                <i class="fas fa-chevron-down text-slate-400 text-xs"></i>
            </div>
        </div>

        <button type="submit" class="w-full md:w-auto bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-xl font-bold shadow-md transition-all active:scale-95 flex items-center justify-center shrink-0">
            <i class="fas fa-search"></i>
        </button>
        
        {% if cari or bengkel_filter or status_filter %}
        <a href="{% url 'bengkel:peserta_saya' %}" class="w-full md:w-auto bg-slate-100 hover:bg-slate-200 text-slate-600 px-4 py-3 rounded-xl font-bold transition-all flex items-center justify-center shrink-0" title="Kosongkan Carian">
            <i class="fas fa-times"></i>
        </a>
        {% endif %}
    </form>

    <div class="bg-white rounded-3xl shadow-sm border border-slate-200 overflow-hidden">
        <div class="px-6 py-5 border-b border-slate-100 flex justify-between items-center bg-slate-50/50">
            <h2 class="text-sm font-black text-slate-800 flex items-center gap-2"><i class="fas fa-address-book text-blue-500"></i> Rekod Terperinci Peserta</h2>
            <span class="text-[10px] font-bold bg-white border border-slate-200 text-slate-500 px-3 py-1.5 rounded-lg shadow-sm uppercase tracking-wider">
                Memaparkan {{ jemputan.count }} Data
            </span>
        </div>

        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse whitespace-nowrap">
                <thead>
                    <tr class="bg-white border-b border-slate-100 text-[10px] font-black text-slate-400 uppercase tracking-widest">
                        <th class="py-4 px-6 text-center w-12">#</th>
                        <th class="py-4 px-6" data-sort="1">Profil Peserta</th>
                        <th class="py-4 px-6" data-sort="2">Agensi & Jawatan</th>
                        <th class="py-4 px-6" data-sort="3">Pautan Bengkel</th>
                        <th class="py-4 px-6 text-center" data-sort="4">Status</th>
                        <th class="py-4 px-6 text-center">Tindakan Logik</th>
                    </tr>
                </thead>
                <tbody class="text-sm divide-y divide-slate-50">
                    {% for j in jemputan %}
                    <tr class="hover:bg-slate-50/80 transition-colors group">
                        <td class="py-4 px-6 text-center font-bold text-slate-400 text-xs">{{ forloop.counter }}</td>
                        
                        <td class="py-4 px-6">
                            {% if j.user %}
                            <a href="{% url 'bengkel:profil_kognitif' uid=j.user.id %}" class="flex items-center gap-3 cursor-pointer block">
                                <div class="w-10 h-10 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center font-black text-sm group-hover:bg-blue-600 group-hover:text-white transition-colors">
                                    {{ j.nama|slice:":1"|upper }}
                                </div>
                                <div>
                                    <div class="font-bold text-slate-800 group-hover:text-blue-600 transition-colors">{{ j.nama|default:"-" }}</div>
                                    <div class="text-[11px] text-slate-500">{{ j.email|default:"-" }}</div>
                                </div>
                            </a>
                            {% else %}
                            <div class="flex items-center gap-3 opacity-60">
                                <div class="w-10 h-10 rounded-full bg-slate-100 text-slate-400 flex items-center justify-center font-black text-sm">
                                    {{ j.nama|slice:":1"|upper }}
                                </div>
                                <div>
                                    <div class="font-bold text-slate-800 flex items-center gap-1.5">
                                        {{ j.nama|default:"-" }}
                                        <i class="fas fa-exclamation-triangle text-amber-500 text-[10px]" title="Tiada Akaun Sistem"></i>
                                    </div>
                                    <div class="text-[11px] text-slate-500">{{ j.email|default:"-" }}</div>
                                </div>
                            </div>
                            {% endif %}
                        </td>
                        
                        <td class="py-4 px-6">
                            <div class="font-bold text-slate-700 text-xs">{{ j.organisasi|default:"-" }}</div>
                            <div class="text-[10px] text-slate-400 mt-0.5">{{ j.jawatan|default:"Peserta Umum" }}</div>
                        </td>
                        
                        <td class="py-4 px-6">
                            <a href="{% url 'bengkel:detail' pk=j.bengkel.pk %}" class="text-xs font-bold text-blue-600 hover:text-blue-800 hover:underline transition-colors flex items-center gap-1.5">
                                {{ j.bengkel.title|truncatechars:35 }} <i class="fas fa-external-link-alt text-[10px]"></i>
                            </a>
                        </td>
                        
                        <td class="py-4 px-6 text-center">
                            {% if j.status == 'accepted' %}
                                <span class="bg-emerald-50 text-emerald-600 border border-emerald-200 px-2.5 py-1 rounded text-[10px] font-black uppercase tracking-wider">Diterima</span>
                                {% if j.sudah_hadir %}
                                    <div class="text-[9px] font-bold text-emerald-500 mt-1"><i class="fas fa-check-circle"></i> Telah Hadir</div>
                                {% endif %}
                            {% elif j.status == 'rejected' %}
                                <span class="bg-rose-50 text-rose-600 border border-rose-200 px-2.5 py-1 rounded text-[10px] font-black uppercase tracking-wider">Ditolak</span>
                            {% else %}
                                <span class="bg-amber-50 text-amber-600 border border-amber-200 px-2.5 py-1 rounded text-[10px] font-black uppercase tracking-wider">Menunggu</span>
                            {% endif %}
                        </td>
                        
                        <td class="py-4 px-6">
                            <div class="flex items-center justify-center gap-2">
                                <a href="{% url 'bengkel:jemputan_info' jid=j.pk %}" class="w-8 h-8 rounded-lg bg-white border border-slate-200 text-slate-400 hover:text-blue-600 hover:border-blue-300 hover:bg-blue-50 flex items-center justify-center transition-all shadow-sm" title="Pautan / Resit RSVP">
                                    <i class="fas fa-qrcode"></i>
                                </a>
                                <form method="post" action="{% url 'bengkel:jemputan_send_email' jid=j.pk %}" class="inline">
                                    {% csrf_token %}
                                    <button type="submit" class="w-8 h-8 rounded-lg bg-white border border-slate-200 text-slate-400 hover:text-emerald-600 hover:border-emerald-300 hover:bg-emerald-50 flex items-center justify-center transition-all shadow-sm" title="{% trans 'Hantar Semula E-mel' %}">
                                        <i class="fas fa-envelope"></i>
                                    </button>
                                </form>
                                <form method="post" action="{% url 'bengkel:jemputan_delete' jid=j.pk %}" onsubmit="return confirm('{% trans "Padam jemputan ini?" %}');" class="inline border-l border-slate-200 pl-2">
                                    {% csrf_token %}
                                    <button type="submit" class="w-8 h-8 rounded-lg bg-white border border-rose-200 text-rose-400 hover:text-white hover:bg-rose-500 flex items-center justify-center transition-all shadow-sm" title="{% trans 'Padam Jemputan' %}">
                                        <i class="fas fa-trash-alt text-xs"></i>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="6" class="py-12 text-center text-slate-400">
                            <div class="w-16 h-16 bg-slate-50 rounded-full flex items-center justify-center mx-auto mb-3">
                                <i class="fas fa-search text-2xl text-slate-300"></i>
                            </div>
                            <p class="font-medium">Tiada rekod peserta dijumpai berdasarkan carian anda.</p>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

</div>
{% endblock %}