{% extends "base.html" %}
{% load i18n %}
{% block title %}{% trans "Senarai Jemputan" %} — {{ bengkel.title }}{% endblock %}
{% block breadcrumb %}
  <a href="{% url 'bengkel:list' %}" class="text-blue-600 hover:underline text-xs font-bold">Pustaka Bengkel</a> <span class="mx-2 text-slate-400">/</span>
  <a href="{% url 'bengkel:detail' pk=bengkel.pk %}" class="text-blue-600 hover:underline text-xs font-bold">{{ bengkel.title|truncatechars:30 }}</a> <span class="mx-2 text-slate-400">/</span>
  <span class="text-slate-500 font-medium text-xs">Senarai Jemputan</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; }
    
    /* Hover Effects untuk Butang Tindakan */
    .action-btn { transition: all 0.2s; display: inline-flex; items-center; justify-center; width: 32px; height: 32px; border-radius: 8px; }
</style>

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

    <div class="bg-gradient-to-br from-slate-900 via-[#1e3a8a] to-slate-900 rounded-3xl p-8 mb-6 shadow-sm border border-slate-800 flex flex-col md:flex-row md:items-center justify-between gap-6 relative overflow-hidden">
        <div class="absolute right-0 top-0 opacity-5 transform translate-x-1/4 -translate-y-1/4">
            <i class="fas fa-users text-[200px] text-blue-400"></i>
        </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-3">
                Pengurusan Peserta
            </div>
            <h1 class="text-2xl md:text-3xl font-black text-white leading-tight mb-2 tracking-tight">{{ bengkel.title }}</h1>
            <p class="text-blue-200/70 text-sm font-medium flex items-center gap-2">
                <i class="far fa-calendar-alt"></i> {{ bengkel.tarikh|date:"d M Y" }} <span class="mx-1">|</span> 
                <i class="fas fa-map-marker-alt"></i> {{ bengkel.lokasi_nama }}
            </p>
        </div>

        <div class="relative z-10 shrink-0">
            <a href="{% url 'bengkel:jemput' pk=bengkel.pk %}" class="flex items-center justify-center gap-2 bg-amber-500 hover:bg-amber-600 text-amber-950 px-6 py-3.5 rounded-xl font-bold shadow-lg shadow-amber-500/30 transition-all hover:-translate-y-1 active:scale-[0.98]">
                <i class="fas fa-user-plus text-lg"></i> Tambah Jemputan Baru
            </a>
        </div>
    </div>

    {% if messages %}
        <div class="mb-6 space-y-2">
            {% for msg in messages %}
            <div class="flex items-start gap-3 px-5 py-4 rounded-2xl text-sm font-bold shadow-sm border 
                {% if msg.tags == 'success' %}bg-emerald-50 text-emerald-700 border-emerald-200
                {% elif msg.tags == 'warning' %}bg-amber-50 text-amber-700 border-amber-200
                {% else %}bg-rose-50 text-rose-700 border-rose-200{% endif %}">
                <i class="fas {% if msg.tags == 'success' %}fa-check-circle text-emerald-500{% elif msg.tags == 'warning' %}fa-exclamation-triangle text-amber-500{% else %}fa-times-circle text-rose-500{% endif %} mt-0.5"></i>
                <div class="break-all">{{ msg }}</div>
            </div>
            {% endfor %}
        </div>
    {% endif %}

    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
        <div class="bg-white rounded-2xl border border-slate-200 shadow-sm p-5 flex flex-col justify-center items-center text-center group hover:border-slate-300 transition-all">
            <div class="text-3xl font-black text-slate-800">{{ bengkel.jumlah_jemputan }}</div>
            <div class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mt-1">Dijemput</div>
        </div>
        <div class="bg-emerald-50 rounded-2xl border border-emerald-200 shadow-sm p-5 flex flex-col justify-center items-center text-center group hover:border-emerald-300 transition-all">
            <div class="text-3xl font-black text-emerald-600">{{ bengkel.jumlah_diterima }}</div>
            <div class="text-[10px] font-bold text-emerald-500 uppercase tracking-widest mt-1">Diterima</div>
        </div>
        <div class="bg-rose-50 rounded-2xl border border-rose-200 shadow-sm p-5 flex flex-col justify-center items-center text-center group hover:border-rose-300 transition-all">
            <div class="text-3xl font-black text-rose-600">{{ bengkel.jumlah_ditolak }}</div>
            <div class="text-[10px] font-bold text-rose-500 uppercase tracking-widest mt-1">Ditolak</div>
        </div>
        <div class="bg-blue-50 rounded-2xl border border-blue-200 shadow-sm p-5 flex flex-col justify-center items-center text-center group hover:border-blue-300 transition-all">
            <div class="text-3xl font-black text-blue-600">{{ bengkel.jumlah_hadir }}</div>
            <div class="text-[10px] font-bold text-blue-500 uppercase tracking-widest mt-1">Telah Hadir</div>
        </div>
    </div>

    <div class="bg-white rounded-3xl border border-slate-200 shadow-sm p-6 mb-8 flex flex-col md:flex-row md:items-center justify-between gap-6 relative overflow-hidden">
        <div class="flex-1 min-w-0">
            <div class="flex items-center gap-3 mb-2">
                <h3 class="text-sm font-black text-slate-800 uppercase tracking-widest">Pautan Pendaftaran Terbuka</h3>
                {% if bengkel.reg_enabled %}
                    <span class="px-2.5 py-1 rounded-full text-[9px] font-black bg-emerald-100 text-emerald-700 flex items-center gap-1.5"><span class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse"></span> AKTIF</span>
                {% else %}
                    <span class="px-2.5 py-1 rounded-full text-[9px] font-black bg-slate-100 text-slate-500 flex items-center gap-1.5"><span class="w-1.5 h-1.5 rounded-full bg-slate-400"></span> TIDAK AKTIF</span>
                {% endif %}
            </div>
            
            {% if bengkel.reg_enabled %}
                <div class="flex flex-col sm:flex-row items-center gap-3">
                    <div class="relative w-full">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"><i class="fas fa-link text-slate-400 text-xs"></i></div>
                        <input id="regLinkInput" type="text" readonly value="{{ request.scheme }}://{{ request.get_host }}{% url 'bengkel:open_reg' reg_token=bengkel.reg_token %}" class="w-full pl-8 pr-3 py-2.5 rounded-xl border border-slate-200 text-xs text-slate-600 font-mono bg-slate-50 truncate focus:outline-none focus:border-blue-400 transition-colors" />
                    </div>
                    <button onclick="copyRegLink()" class="w-full sm:w-auto px-5 py-2.5 rounded-xl border border-slate-200 bg-white text-xs font-bold text-slate-600 hover:bg-slate-50 hover:text-blue-600 transition-all shadow-sm shrink-0 flex items-center justify-center gap-2">
                        <i class="fas fa-copy"></i> Salin
                    </button>
                </div>
                {% if bengkel.reg_had > 0 %}
                    <p class="text-[10px] font-bold text-slate-400 mt-2 uppercase"><i class="fas fa-info-circle text-blue-400"></i> Had Kapasiti: {{ bengkel.reg_had }} pendaftar</p>
                {% else %}
                    <p class="text-[10px] font-bold text-slate-400 mt-2 uppercase"><i class="fas fa-info-circle text-blue-400"></i> Tiada had pendaftar ditetapkan.</p>
                {% endif %}
            {% else %}
                <p class="text-xs text-slate-500 font-medium">Aktifkan modul ini untuk menjana satu pautan awam (URL) yang boleh dikongsi ke kumpulan WhatsApp atau diletakkan pada poster acara.</p>
            {% endif %}
        </div>

        <div class="flex items-center gap-3 shrink-0 border-t md:border-t-0 md:border-l border-slate-100 pt-4 md:pt-0 md:pl-6">
            <form method="post" action="{% url 'bengkel:reg_toggle' pk=bengkel.pk %}">
                {% csrf_token %}
                {% if bengkel.reg_enabled %}
                    <input type="hidden" name="reg_had" value="{{ bengkel.reg_had }}" />
                    <button type="submit" class="px-5 py-2.5 rounded-xl text-xs font-bold border border-rose-200 text-rose-600 bg-rose-50 hover:bg-rose-600 hover:text-white transition-all shadow-sm">
                        <i class="fas fa-power-off mr-1"></i> Nyahaktifkan
                    </button>
                {% else %}
                    <button type="submit" class="px-5 py-2.5 rounded-xl text-xs font-bold text-white bg-gradient-to-r from-emerald-500 to-teal-600 hover:from-emerald-600 hover:to-teal-700 transition-all shadow-md shadow-emerald-500/20 active:scale-[0.98]">
                        <i class="fas fa-play-circle mr-1"></i> Aktifkan Pendaftaran
                    </button>
                {% endif %}
            </form>

            {% if bengkel.reg_enabled %}
            <form method="post" action="{% url 'bengkel:reg_reset' pk=bengkel.pk %}" onsubmit="return confirm('{% trans "AMARAN: Mengeset semula pautan akan menyebabkan pautan lama tidak lagi sah. Teruskan?" %}')">
                {% csrf_token %}
                <button type="submit" class="px-4 py-2.5 rounded-xl text-xs font-bold border border-slate-200 text-slate-500 hover:bg-slate-100 transition-all shadow-sm" title="Tukar URL Pautan">
                    <i class="fas fa-sync-alt"></i> Reset
                </button>
            </form>
            {% endif %}
        </div>
    </div>

    {% if not jemputan %}
        <div class="bg-white rounded-3xl border-2 border-dashed border-slate-200 px-8 py-16 text-center">
            <div class="w-20 h-20 bg-slate-50 text-slate-300 rounded-full flex items-center justify-center text-3xl mx-auto mb-4 border border-slate-100"><i class="fas fa-envelope-open-text"></i></div>
            <h3 class="text-lg font-black text-slate-700 mb-1">Tiada Jemputan Lagi</h3>
            <p class="text-sm text-slate-500 mb-6">Anda belum menjemput sesiapa. Mulakan dengan menjana jemputan pertama.</p>
            <a href="{% url 'bengkel:jemput' pk=bengkel.pk %}" class="inline-flex items-center gap-2 px-6 py-3 rounded-xl font-bold text-sm bg-blue-50 text-blue-600 hover:bg-blue-600 hover:text-white transition-colors">
                <i class="fas fa-plus"></i> Tambah Jemputan
            </a>
        </div>
    {% else %}
        <div class="bg-white rounded-3xl border border-slate-200 shadow-sm overflow-hidden">
            <div class="px-6 py-5 bg-slate-50/50 border-b border-slate-100 flex items-center justify-between">
                <h3 class="font-black text-slate-700 text-sm"><i class="fas fa-list text-blue-500 mr-2"></i> Rekod Peserta & Jemputan</h3>
                <span class="bg-white border border-slate-200 px-3 py-1 rounded-md text-[10px] font-bold text-slate-500 uppercase tracking-widest shadow-sm">Total: {{ jemputan|length }}</span>
            </div>
            
            <div class="overflow-x-auto">
                <table class="w-full text-left border-collapse whitespace-nowrap">
                    <thead>
                        <tr class="bg-slate-50 text-slate-400 text-[10px] uppercase tracking-widest border-b border-slate-200">
                            <th class="px-6 py-4 font-bold text-center w-12">#</th>
                            <th class="px-4 py-4 font-bold">Profil Peserta</th>
                            <th class="px-4 py-4 font-bold">Agensi / Organisasi</th>
                            <th class="px-4 py-4 font-bold text-center">Status</th>
                            <th class="px-4 py-4 font-bold text-center">Kehadiran</th>
                            <th class="px-6 py-4 font-bold text-right">Tindakan Logik</th>
                        </tr>
                    </thead>
                    <tbody class="text-sm divide-y divide-slate-100">
                        {% for j in jemputan %}
                        <tr class="hover:bg-slate-50/60 transition-colors group">
                            <td class="px-6 py-4 text-center font-bold text-slate-400 text-xs">{{ forloop.counter }}</td>
                            
                            <td class="px-4 py-4">
                                <div class="font-bold text-slate-800 text-[13px]">{{ j.nama }}</div>
                                <div class="text-[11px] text-slate-500 mt-0.5"><a href="mailto:{{ j.email }}" class="hover:text-blue-600 hover:underline">{{ j.email }}</a></div>
                                {% if j.jawatan %}<div class="text-[10px] font-semibold text-slate-400 uppercase tracking-wide mt-1">{{ j.jawatan }}</div>{% endif %}
                            </td>
                            
                            <td class="px-4 py-4">
                                <span class="text-xs font-semibold text-slate-600">{{ j.organisasi|default:"-" }}</span>
                            </td>
                            
                            <td class="px-4 py-4 text-center">
                                <span class="px-2.5 py-1 rounded-md text-[9px] font-black uppercase tracking-widest
                                    {% if j.status == 'accepted' %}bg-emerald-50 text-emerald-600 border border-emerald-200
                                    {% elif j.status == 'rejected' %}bg-rose-50 text-rose-600 border border-rose-200
                                    {% else %}bg-amber-50 text-amber-600 border border-amber-200{% endif %}">
                                    {{ j.get_status_display }}
                                </span>
                            </td>
                            
                            <td class="px-4 py-4 text-center">
                                {% if j.sudah_hadir %}
                                    <span class="inline-flex items-center gap-1 bg-blue-50 text-blue-600 border border-blue-200 px-2 py-1 rounded-md text-[10px] font-black uppercase tracking-widest"><i class="fas fa-check-circle"></i> Hadir</span>
                                {% else %}
                                    <span class="text-slate-300 text-xs font-bold">-</span>
                                {% endif %}
                            </td>
                            
                            <td class="px-6 py-4 text-right">
                                <div class="flex items-center justify-end gap-1.5 opacity-80 group-hover:opacity-100 transition-opacity">
                                    
                                    {% if j.status == 'pending' %}
                                        <form method="post" action="{% url 'bengkel:jemputan_approve' jid=j.pk %}" class="m-0 p-0 flex">
                                            {% csrf_token %}
                                            <button type="submit" title="Luluskan" class="w-8 h-8 flex items-center justify-center rounded-lg bg-emerald-500 text-white hover:bg-emerald-600 shadow-sm transition-all active:scale-95">
                                                <i class="fas fa-check text-xs"></i>
                                            </button>
                                        </form>
                                        <form method="post" action="{% url 'bengkel:jemputan_reject' jid=j.pk %}" onsubmit="return confirm('{% trans "Tolak permohonan" %} {{ j.nama }}?')" class="m-0 p-0 flex">
                                            {% csrf_token %}
                                            <button type="submit" title="Tolak" class="w-8 h-8 flex items-center justify-center rounded-lg bg-rose-500 text-white hover:bg-rose-600 shadow-sm transition-all active:scale-95">
                                                <i class="fas fa-times text-xs"></i>
                                            </button>
                                        </form>
                                        <div class="w-px h-5 bg-slate-200 mx-1"></div>
                                    {% endif %}
                                    
                                    <button onclick="copyLink('{{ base_url }}/bengkel/i/{{ j.token }}/')" title="Salin URL Jemputan" class="w-8 h-8 flex items-center justify-center rounded-lg bg-white border border-slate-200 text-slate-500 hover:bg-slate-100 hover:text-slate-800 shadow-sm transition-all">
                                        <i class="fas fa-link text-xs"></i>
                                    </button>
                                    
                                    <form method="post" action="{% url 'bengkel:jemputan_send_email' jid=j.pk %}" onsubmit="return confirm('{% trans "Hantar e-mel jemputan kepada" %} {{ j.nama }}?')" class="m-0 p-0 flex">
                                        {% csrf_token %}
                                        <button type="submit" title="Hantar E-mel" class="w-8 h-8 flex items-center justify-center rounded-lg bg-white border border-slate-200 text-teal-500 hover:bg-teal-50 hover:border-teal-300 shadow-sm transition-all">
                                            <i class="fas fa-envelope text-xs"></i>
                                        </button>
                                    </form>
                                    
                                    <a href="{{ base_url }}/bengkel/i/{{ j.token }}/" target="_blank" title="Buka Halaman Jemputan" class="w-8 h-8 flex items-center justify-center rounded-lg bg-white border border-slate-200 text-indigo-500 hover:bg-indigo-50 hover:border-indigo-300 shadow-sm transition-all">
                                        <i class="fas fa-external-link-alt text-xs"></i>
                                    </a>
                                    
                                    <div class="w-px h-5 bg-slate-200 mx-1"></div>

                                    <form method="post" action="{% url 'bengkel:jemputan_delete' jid=j.pk %}" onsubmit="return confirm('{% trans "Padam rekod" %} {{ j.nama }}?')" class="m-0 p-0 flex">
                                        {% csrf_token %}
                                        <button type="submit" title="Padam Rekod" class="w-8 h-8 flex items-center justify-center rounded-lg bg-white border border-rose-200 text-rose-500 hover:bg-rose-500 hover:text-white shadow-sm transition-all">
                                            <i class="fas fa-trash-alt text-xs"></i>
                                        </button>
                                    </form>
                                    
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    {% endif %}

</div>

<div id="copyToast" class="fixed bottom-8 right-8 bg-slate-900/90 backdrop-blur-sm border border-slate-700 text-white text-sm font-bold px-5 py-3 rounded-xl shadow-2xl transition-all duration-300 transform translate-y-20 opacity-0 z-50 flex items-center gap-2">
    <i class="fas fa-check-circle text-emerald-400"></i> Pautan berjaya disalin!
</div>

<script>
var _currentQrLink = '';

// Fungsi Papar Toast
function showToast() {
    var t = document.getElementById('copyToast');
    t.classList.remove('translate-y-20', 'opacity-0');
    setTimeout(function(){ t.classList.add('translate-y-20', 'opacity-0'); }, 2500);
}

function copyLink(url) {
    navigator.clipboard.writeText(url).then(showToast);
}

function copyRegLink() {
    var inp = document.getElementById('regLinkInput');
    if (!inp) return;
    navigator.clipboard.writeText(inp.value).then(showToast);
}

</script>
{% endblock %}