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

{% block title %}{{ b.title }} — Detail Bengkel{% endblock %}
{% block nav_bengkel %}active{% endblock %}
{% block page_title %}Detail Bengkel{% endblock %}

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

    <div class="relative overflow-hidden bg-gradient-to-br from-slate-900 via-[#1e3a8a] to-[#134e4a] rounded-3xl p-8 md:p-10 mb-8 shadow-xl border border-slate-800">
        <div class="absolute inset-0 opacity-10" style="background-image:radial-gradient(rgba(255,255,255,.15) 1px,transparent 1px);background-size:24px 24px;"></div>
        
        <div class="relative z-10 flex flex-col lg:flex-row gap-8 justify-between lg:items-end">
            <div class="flex-1">
                <a href="{% url 'superadmin:semua_bengkel' %}" class="inline-flex items-center gap-2 px-4 py-2 bg-white/10 hover:bg-white/20 border border-white/20 rounded-full text-white/80 hover:text-white text-xs font-bold transition-all mb-6 backdrop-blur-sm">
                    <i class="fas fa-arrow-left"></i> Kembali ke Senarai
                </a>
                <h1 class="text-3xl md:text-4xl font-black text-white leading-tight mb-2 tracking-tight">{{ b.title }}</h1>
                <div class="flex flex-wrap items-center gap-4 text-sm text-blue-100/80">
                    <span class="flex items-center gap-1.5"><i class="far fa-calendar-alt text-blue-400"></i> {{ b.tarikh|date:"d M Y, h:i A" }} {% if b.tarikh_tamat %}— {{ b.tarikh_tamat|date:"d M Y, h:i A" }}{% endif %}</span>
                    <span class="hidden md:inline text-slate-500">|</span>
                    <span class="flex items-center gap-1.5"><i class="fas fa-map-marker-alt text-rose-400"></i> {{ b.lokasi_nama }}</span>
                </div>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
        <div class="bg-white rounded-3xl border border-slate-200 shadow-sm p-6 lg:col-span-1 flex flex-col justify-center">
            <h3 class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-4 flex items-center gap-2"><i class="fas fa-user-tie text-blue-500"></i> Profil Penganjur</h3>
            <div class="space-y-4">
                <div>
                    <div class="text-[10px] font-bold text-slate-500 uppercase tracking-wide">Akaun Sistem</div>
                    <div class="font-bold text-slate-800 text-sm mt-0.5">{{ b.created_by.get_full_name|default:b.created_by.username|default:"Sistem" }}</div>
                    {% if b.created_by %}<div class="text-xs text-slate-400">{{ b.created_by.email }}</div>{% endif %}
                </div>
                <div>
                    <div class="text-[10px] font-bold text-slate-500 uppercase tracking-wide">Maklumat Rasmi Agensi</div>
                    <div class="font-bold text-slate-800 text-sm mt-0.5">{{ b.organizer_nama|default:"Tidak Dinyatakan" }}</div>
                    <div class="text-xs text-slate-400">{% if b.organizer_email %}{{ b.organizer_email }}{% endif %} {% if b.organizer_telefon %}| {{ b.organizer_telefon }}{% endif %}</div>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-3xl border border-slate-200 shadow-sm p-6 lg:col-span-2">
            <h3 class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-4 flex items-center gap-2"><i class="fas fa-chart-bar text-emerald-500"></i> Metrik Kehadiran & Jemputan</h3>
            <div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
                <div class="bg-slate-50 border border-slate-100 rounded-2xl p-4 text-center">
                    <div class="text-2xl font-black text-slate-700">{{ b.jumlah_jemputan }}</div>
                    <div class="text-[10px] font-bold text-slate-500 uppercase mt-1">Jemputan</div>
                </div>
                <div class="bg-emerald-50 border border-emerald-100 rounded-2xl p-4 text-center">
                    <div class="text-2xl font-black text-emerald-600">{{ b.jumlah_diterima }}</div>
                    <div class="text-[10px] font-bold text-emerald-600 uppercase mt-1">Diterima</div>
                </div>
                <div class="bg-blue-50 border border-blue-100 rounded-2xl p-4 text-center">
                    <div class="text-2xl font-black text-blue-600">{{ b.jumlah_hadir }}</div>
                    <div class="text-[10px] font-bold text-blue-600 uppercase mt-1">Hadir</div>
                </div>
                <div class="bg-purple-50 border border-purple-100 rounded-2xl p-4 text-center">
                    <div class="text-2xl font-black text-purple-600">{{ b.contributions.count }}</div>
                    <div class="text-[10px] font-bold text-purple-600 uppercase mt-1">Sumbangan</div>
                </div>
            </div>
        </div>
    </div>

    <div class="bg-white rounded-3xl shadow-sm border border-slate-200 overflow-hidden mb-8">
        
        <div class="bg-slate-50/80 border-b border-slate-100 p-3">
            <div class="grid grid-cols-2 md:grid-cols-4 xl:grid-cols-8 gap-2 w-full">
                <button onclick="showTab('tab-rujukan', this)" class="blueprint-tab active-tab w-full">
                    <span class="text-[9px] uppercase tracking-widest block mb-0.5 opacity-60">Langkah 1</span> Rujukan
                </button>
                <button onclick="showTab('tab-spaf', this)" class="blueprint-tab w-full">
                    <span class="text-[9px] uppercase tracking-widest block mb-0.5 opacity-60">Langkah 2</span> Analisis SPAF
                </button>
                <button onclick="showTab('tab-tema', this)" class="blueprint-tab w-full">
                    <span class="text-[9px] uppercase tracking-widest block mb-0.5 opacity-60">Langkah 3</span> Tema
                </button>
                <button onclick="showTab('tab-teras', this)" class="blueprint-tab w-full">
                    <span class="text-[9px] uppercase tracking-widest block mb-0.5 opacity-60">Langkah 4</span> Teras
                </button>
                <button onclick="showTab('tab-strategi', this)" class="blueprint-tab w-full">
                    <span class="text-[9px] uppercase tracking-widest block mb-0.5 opacity-60">Langkah 5</span> Strategi
                </button>
                <button onclick="showTab('tab-tindakan', this)" class="blueprint-tab w-full">
                    <span class="text-[9px] uppercase tracking-widest block mb-0.5 opacity-60">Langkah 6</span> Tindakan
                </button>
                <button onclick="showTab('tab-indikator', this)" class="blueprint-tab w-full">
                    <span class="text-[9px] uppercase tracking-widest block mb-0.5 opacity-60">Langkah 7</span> KPI
                </button>
                <button onclick="showTab('tab-peruntukan', this)" class="blueprint-tab w-full">
                    <span class="text-[9px] uppercase tracking-widest block mb-0.5 opacity-60">Langkah 8</span> Sumber
                </button>
            </div>
        </div>

        <div class="p-6 md:p-8">
            <div id="tab-rujukan" class="blueprint-panel">
                <div class="mb-6">
                    <h3 class="font-black text-lg text-slate-800">Dokumen Rujukan Peserta</h3>
                    <p class="text-sm text-slate-500">Koleksi fail yang dimuat naik oleh peserta sebelum bengkel bermula.</p>
                </div>
                {% if jemputan_list %}
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                        {% for j in jemputan_list %}
                            {% if j.contribution and j.contribution.files.all %}
                                <div class="bg-slate-50 border border-slate-200 rounded-2xl p-5 hover:border-blue-300 transition-colors">
                                    <div class="flex items-center gap-3 mb-4 border-b border-slate-200 pb-3">
                                        <div class="w-8 h-8 rounded-full bg-blue-100 text-blue-600 font-black text-xs flex items-center justify-center shrink-0">{{ j.nama|slice:":1"|upper }}</div>
                                        <div class="min-w-0">
                                            <div class="font-bold text-slate-700 text-sm truncate">{{ j.nama|default:j.email }}</div>
                                            <div class="text-[10px] text-slate-400 truncate">{{ j.organisasi|default:"-" }}</div>
                                        </div>
                                    </div>
                                    <div class="space-y-2">
                                        {% for f in j.contribution.files.all %}
                                            <a href="{{ f.file.url }}" target="_blank" class="flex items-center gap-2 bg-white border border-slate-200 p-2.5 rounded-xl hover:border-blue-400 hover:shadow-sm transition-all group">
                                                <i class="fas fa-file-pdf text-rose-500 text-lg"></i>
                                                <div class="min-w-0 flex-1">
                                                    <div class="text-xs font-bold text-blue-600 group-hover:text-blue-800 truncate">{{ f.original_name }}</div>
                                                    {% if f.summary %}<div class="text-[10px] text-slate-400 truncate italic">{{ f.summary }}</div>{% endif %}
                                                </div>
                                            </a>
                                        {% endfor %}
                                    </div>
                                </div>
                            {% endif %}
                        {% endfor %}
                    </div>
                {% else %}
                    <div class="text-center py-12 bg-slate-50 rounded-2xl border-2 border-dashed border-slate-200">
                        <i class="fas fa-folder-open text-4xl text-slate-300 mb-3"></i>
                        <p class="text-slate-500 font-medium">Tiada fail rujukan dimuat naik setakat ini.</p>
                    </div>
                {% endif %}
            </div>

            <div id="tab-spaf" class="blueprint-panel hidden">
                <div class="mb-6">
                    <h3 class="font-black text-lg text-slate-800">Analisis SPAF Keseluruhan</h3>
                    <p class="text-sm text-slate-500">Kiraan input Situational Problem Analysis Framework daripada peserta.</p>
                </div>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mb-6">
                    <div class="bg-gradient-to-br from-blue-50 to-indigo-50 border border-blue-100 rounded-3xl p-8 text-center shadow-sm">
                        <div class="text-5xl font-black text-blue-600 mb-2">{{ spaf_pain_count }}</div>
                        <div class="text-xs font-bold text-blue-800 uppercase tracking-widest">Pain Points Diterima</div>
                    </div>
                    <div class="bg-gradient-to-br from-emerald-50 to-teal-50 border border-emerald-100 rounded-3xl p-8 text-center shadow-sm">
                        <div class="text-5xl font-black text-emerald-600 mb-2">{{ spaf_ps_count }}</div>
                        <div class="text-xs font-bold text-emerald-800 uppercase tracking-widest">Problem Statements Diterima</div>
                    </div>
                </div>
            </div>

            <div id="tab-tema" class="blueprint-panel hidden">
                <div class="flex items-start justify-between gap-4 mb-6">
                    <div>
                        <h3 class="font-black text-lg text-slate-800">Pengenalpastian Tema (AI)</h3>
                        <p class="text-sm text-slate-500">Tema yang telah dijana oleh AI penganjur berdasarkan input SPAF.</p>
                    </div>
                    <span class="bg-amber-100 text-amber-700 border border-amber-200 px-3 py-1.5 rounded-lg text-[10px] font-bold flex items-center gap-2"><i class="fas fa-eye"></i> Pandangan Admin</span>
                </div>
                
                {% if themes %}
                    <div class="space-y-4">
                        {% for t in themes %}
                        <div class="bg-white border border-slate-200 rounded-2xl p-6 shadow-sm hover:border-purple-300 transition-colors">
                            <div class="flex items-center gap-3 mb-3">
                                <span class="bg-purple-600 text-white text-[10px] font-black px-3 py-1 rounded-full uppercase tracking-widest shadow-sm">Tema {{ t.urutan }}</span>
                                <h4 class="font-bold text-base text-slate-800">{{ t.tema }}</h4>
                            </div>
                            <p class="text-sm text-slate-600 leading-relaxed mb-4">{{ t.penerangan }}</p>
                            {% if t.kata_kunci %}
                                <div class="flex flex-wrap gap-2">
                                    {% for kw in t.senarai_kata_kunci %}
                                        <span class="bg-purple-50 border border-purple-100 text-purple-700 text-[10px] font-bold px-3 py-1.5 rounded-lg shadow-sm">{{ kw }}</span>
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </div>
                        {% endfor %}
                    </div>
                {% else %}
                    <div class="text-center py-16 bg-slate-50 rounded-3xl border-2 border-dashed border-slate-200">
                        <i class="fas fa-robot text-5xl text-purple-300 mb-4 animate-bounce"></i>
                        <h4 class="font-black text-slate-700 text-lg mb-2">Tema Belum Dijana</h4>
                        <p class="text-sm text-slate-500 max-w-md mx-auto">Penganjur belum menjana tema melalui enjin AI pada masa ini.</p>
                    </div>
                {% endif %}
            </div>

            <div id="tab-teras" class="blueprint-panel hidden">
                <div class="mb-6 flex justify-between items-center border-b pb-4 border-slate-100">
                    <div>
                        <h3 class="font-black text-lg text-slate-800">Teras Strategik Kebangsaan</h3>
                        <p class="text-sm text-slate-500">Pecahan Teras utama berserta sokongan (endorsement) and idea skop daripada peserta.</p>
                    </div>
                </div>
                {% if pillars %}
                    <div class="space-y-6">
                        {% for p in pillars %}
                        <div class="bg-white border border-slate-200 rounded-2xl p-6 shadow-sm">
                            <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 border-b border-slate-100 pb-3 mb-3">
                                <div class="flex items-center gap-3">
                                    <span class="bg-emerald-600 text-white text-[10px] font-black px-3 py-1 rounded-full uppercase">Teras {{ p.urutan }}</span>
                                    <h4 class="font-bold text-base text-slate-800">{{ p.teras }}</h4>
                                </div>
                                <span class="bg-emerald-50 border border-emerald-200 text-emerald-700 text-xs font-bold px-3 py-1.5 rounded-lg">
                                    <i class="fas fa-heart text-emerald-500 mr-1"></i> {{ p.votes.count }} Sokongan
                                </span>
                            </div>
                            <p class="text-sm text-slate-600 mb-4">{{ p.penerangan }}</p>
                            
                            <div class="bg-slate-50 p-4 rounded-xl border border-slate-100">
                                <div class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2"><i class="fas fa-comments text-emerald-500"></i> Suntikan Skop Peserta (DNA)</div>
                                <div class="space-y-2">
                                    {% for idea in p.ideas.all %}
                                        <div class="text-xs text-slate-700 bg-white p-2.5 rounded-lg border border-slate-200 shadow-sm">
                                            <strong>{{ idea.user.get_full_name|default:idea.user.username }}:</strong> "{{ idea.idea }}"
                                        </div>
                                    {% empty %}
                                        <div class="text-xs text-slate-400 italic">Tiada cadangan skop tambahan.</div>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                {% else %}
                    <div class="text-center py-12 bg-slate-50 rounded-2xl border border-dashed border-slate-200">
                        <i class="fas fa-folder-open text-3xl text-slate-300 mb-2"></i>
                        <p class="text-slate-500 text-sm">Modul Teras Strategik belum dijana oleh penganjur.</p>
                    </div>
                {% endif %}
            </div>

            <div id="tab-strategi" class="blueprint-panel hidden">
                <div class="mb-6">
                    <h3 class="font-black text-lg text-slate-800">Pelan Strategik Berfasa (Roadmap)</h3>
                    <p class="text-sm text-slate-500">Garis masa strategi transformasi kesihatan digital berserta inisiatif projek daripada peserta.</p>
                </div>
                {% if strategies %}
                    <div class="space-y-6">
                        {% for s in strategies %}
                        <div class="bg-white border border-slate-200 rounded-2xl p-6 shadow-sm">
                            <div class="flex items-center gap-3 border-b border-slate-100 pb-3 mb-3">
                                <span class="bg-blue-600 text-white text-[10px] font-black px-3 py-1 rounded-full uppercase">{{ s.fasa }}</span>
                                <h4 class="font-bold text-base text-slate-800">{{ s.tajuk }}</h4>
                            </div>
                            <p class="text-sm text-slate-600 mb-4">{{ s.penerangan }}</p>
                            
                            <div class="bg-slate-50 p-4 rounded-xl border border-slate-100">
                                <div class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2"><i class="fas fa-rocket text-blue-500"></i> Cadangan Inisiatif Projek Peserta</div>
                                <div class="space-y-2">
                                    {% for idea in s.ideas.all %}
                                        <div class="text-xs text-slate-700 bg-white p-2.5 rounded-lg border border-slate-200 shadow-sm">
                                            <strong>{{ idea.user.get_full_name|default:idea.user.username }}:</strong> "{{ idea.idea }}"
                                        </div>
                                    {% empty %}
                                        <div class="text-xs text-slate-400 italic">Tiada inisiatif projek dicadangkan.</div>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                {% else %}
                    <div class="text-center py-12 bg-slate-50 rounded-2xl border border-dashed border-slate-200">
                        <i class="fas fa-lock text-3xl text-slate-300 mb-2"></i>
                        <p class="text-slate-500 text-sm">Modul Strategi Berfasa belum dimulakan.</p>
                    </div>
                {% endif %}
            </div>

            <div id="tab-tindakan" class="blueprint-panel hidden">
                <div class="mb-6">
                    <h3 class="font-black text-lg text-slate-800">Pelan Tindakan Terperinci (Action Items)</h3>
                    <p class="text-sm text-slate-500">Senarai tugasan pelaksanaan berserta maklum balas cadangan indikator awal peserta.</p>
                </div>
                {% if action_plans %}
                    <div class="space-y-4">
                        {% for ap in action_plans %}
                        <div class="bg-white border border-slate-200 rounded-2xl p-5 shadow-sm">
                            <div class="flex justify-between text-xs text-slate-400 mb-2">
                                <span class="font-bold text-blue-500">{{ ap.strategi.fasa }}</span>
                                <span class="font-mono bg-slate-100 px-2 py-0.5 rounded">{{ ap.tahun_pelaksanaan|default:"Segera" }}</span>
                            </div>
                            <h4 class="font-black text-slate-800 text-base mb-1">{{ ap.tajuk }}</h4>
                            <p class="text-xs text-slate-500 leading-relaxed mb-4">{{ ap.penerangan }}</p>
                            
                            <div class="bg-slate-50 p-3 rounded-xl border border-slate-100">
                                <div class="text-[9px] font-black text-slate-400 uppercase tracking-widest mb-1.5"><i class="fas fa-bullseye text-indigo-500"></i> Idea Pengukuran Kejayaan (KPI) dari Peserta</div>
                                <ul class="space-y-1 text-xs text-slate-600 list-disc pl-4">
                                    {% for idea in ap.ideas.all %}
                                        <li><strong>{{ idea.user.username }}:</strong> {{ idea.idea }}</li>
                                    {% empty %}
                                        <li class="list-none text-slate-400 italic">Tiada data KPI disuntik.</li>
                                    {% endfor %}
                                </ul>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                {% else %}
                    <div class="text-center py-12 bg-slate-50 rounded-2xl border border-dashed border-slate-200">
                        <i class="fas fa-folder-open text-3xl text-slate-300 mb-2"></i>
                        <p class="text-slate-500 text-sm">Modul Pelan Tindakan belum dijana.</p>
                    </div>
                {% endif %}
            </div>

            <div id="tab-indikator" class="blueprint-panel hidden">
                <div class="mb-6">
                    <h3 class="font-black text-lg text-slate-800">Indikator Prestasi Utama (KPI Master List)</h3>
                    <p class="text-sm text-slate-500">Standard pengukuran kejayaan yang telah dikalibrasi untuk memantau keberhasilan blueprint.</p>
                </div>
                {% if indicators %}
                    <div class="overflow-x-auto border border-slate-200 rounded-2xl bg-white shadow-sm">
                        <table class="w-full text-left border-collapse whitespace-nowrap">
                            <thead>
                                <tr class="bg-slate-50 text-[10px] uppercase font-bold text-slate-400 border-b border-slate-200">
                                    <th class="py-3 px-5 w-12 text-center">No</th>
                                    <th class="py-3 px-5">Nama Indikator / KPI</th>
                                    <th class="py-3 px-5">Sasaran Kejayaan</th>
                                    <th class="py-3 px-5 text-center">Kekerapan Ukuran</th>
                                </tr>
                            </thead>
                            <tbody class="text-xs text-slate-700 divide-y divide-slate-100">
                                {% for ind in indicators %}
                                <tr class="hover:bg-slate-50">
                                    <td class="py-3 px-5 text-center font-mono text-slate-400">{{ forloop.counter }}</td>
                                    <td class="py-3 px-5 font-bold text-slate-800">{{ ind.kpi_tajuk }}</td>
                                    <td class="py-3 px-5"><span class="bg-indigo-50 border border-indigo-100 text-indigo-700 px-2 py-0.5 rounded font-bold">{{ ind.sasaran }}</span></td>
                                    <td class="py-3 px-5 text-center text-slate-500">{{ ind.kekerapan_ukuran }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                {% else %}
                    <div class="text-center py-12 bg-slate-50 rounded-2xl border border-dashed border-slate-200">
                        <i class="fas fa-bullseye text-3xl text-slate-300 mb-2"></i>
                        <p class="text-slate-500 text-sm">Modul Indikator KPI belum dimurnikan.</p>
                    </div>
                {% endif %}
            </div>

            <div id="tab-peruntukan" class="blueprint-panel hidden">
                <div class="mb-6">
                    <h3 class="font-black text-lg text-slate-800">Peruntukan Sumber & Justifikasi Bajet</h3>
                    <p class="text-sm text-slate-500">Anggaran keperluan aset (Kewangan, Manusia, Fasiliti) berserta maklum balas logistik peserta.</p>
                </div>
                {% if allocations %}
                    <div class="space-y-6">
                        {% for al in allocations %}
                        <div class="bg-white border border-slate-200 rounded-2xl p-6 shadow-sm">
                            <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 border-b border-slate-100 pb-3 mb-3">
                                <div class="flex items-center gap-2.5">
                                    <span class="w-2.5 h-2.5 rounded-full {% if al.kategori_sumber == 'Kewangan' %}bg-amber-500{% elif al.kategori_sumber == 'Teknologi' %}bg-blue-500{% else %}bg-purple-500{% endif %}"></span>
                                    <h4 class="font-black text-base text-slate-800">{{ al.kategori_sumber }} — <span class="text-sm font-medium text-slate-500">{{ al.action_plan.tajuk|truncatechars:40 }}</span></h4>
                                </div>
                            </div>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-xs mb-4">
                                <div class="bg-slate-50 p-3 rounded-xl border border-slate-100"><strong>Fokus Keperluan:</strong> <p class="text-slate-600 mt-1">{{ al.anggaran_keperluan }}</p></div>
                                <div class="bg-slate-50 p-3 rounded-xl border border-slate-100"><strong>Justifikasi Sektor:</strong> <p class="text-slate-600 mt-1">{{ al.justifikasi }}</p></div>
                            </div>
                            
                            <div class="bg-slate-50 p-3 rounded-xl border border-slate-100">
                                <div class="text-[9px] font-black text-slate-400 uppercase tracking-widest mb-1.5"><i class="fas fa-coins text-amber-500"></i> Suara Keperluan Logistik dari Peserta</div>
                                <div class="space-y-1.5">
                                    {% for idea in al.action_plan.allocation_ideas.all %}
                                        <div class="bg-white p-2 rounded border border-slate-200 text-slate-700 text-xs">
                                            <strong>{{ idea.user.username }}:</strong> {{ idea.idea_sumber }}
                                        </div>
                                    {% empty %}
                                        <div class="text-slate-400 italic text-xs">Tiada aduan/cadangan sumber.</div>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                {% else %}
                    <div class="text-center py-12 bg-slate-50 rounded-2xl border border-dashed border-slate-200">
                        <i class="fas fa-coins text-3xl text-slate-300 mb-2"></i>
                        <p class="text-slate-500 text-sm">Modul Peruntukan Sumber belum dimurnikan oleh penganjur.</p>
                    </div>
                {% endif %}
            </div>

        </div>
    </div>

    <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 items-center justify-between bg-slate-50/50">
            <h3 class="font-black text-slate-800 flex items-center gap-2"><i class="fas fa-users text-blue-500"></i> Pengurusan Peserta</h3>
            <span class="text-[11px] font-bold text-slate-500 bg-white border border-slate-200 px-3 py-1.5 rounded-lg shadow-sm">Total: {{ jemputan_list|length }} peserta</span>
        </div>

        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse whitespace-nowrap">
                <thead>
                    <tr class="text-slate-400 text-[10px] uppercase tracking-widest border-b border-slate-200 bg-white">
                        <th class="py-4 px-6 font-bold w-12 text-center">#</th>
                        <th class="py-4 px-6 font-bold">Profil Peserta</th>
                        <th class="py-4 px-6 font-bold text-center">Status</th>
                        <th class="py-4 px-6 font-bold text-center">Kehadiran</th>
                        <th class="py-4 px-6 font-bold">Komen / Aduan</th>
                        <th class="py-4 px-6 font-bold text-center">Tindakan Fail</th>
                    </tr>
                </thead>
                <tbody class="text-sm divide-y divide-slate-50">
                    {% for j in jemputan_list %}
                    <tr class="hover:bg-slate-50 transition-colors">
                        <td class="py-4 px-6 text-center font-bold text-slate-400 text-xs">{{ forloop.counter }}</td>
                        <td class="py-4 px-6">
                            <div class="flex items-center gap-3">
                                <div class="w-10 h-10 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center font-black text-sm">{{ j.nama|slice:":1"|upper|default:"?" }}</div>
                                <div>
                                    <div class="font-bold text-slate-800">{{ j.nama|default:"Tidak Dinamakan" }}</div>
                                    <div class="text-[10px] text-slate-500">{{ j.organisasi|default:"Tiada Organisasi" }}</div>
                                </div>
                            </div>
                        </td>
                        <td class="py-4 px-6 text-center">
                            {% if j.status == "accepted" %}
                                <span class="bg-emerald-100 text-emerald-700 border border-emerald-200 px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider">Diterima</span>
                            {% elif j.status == "rejected" %}
                                <span class="bg-rose-100 text-rose-700 border border-rose-200 px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider">Ditolak</span>
                            {% else %}
                                <span class="bg-amber-100 text-amber-700 border border-amber-200 px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider">Menunggu</span>
                            {% endif %}
                        </td>
                        <td class="py-4 px-6 text-center">
                            {% if j.sudah_hadir %}
                                <div class="text-emerald-500 font-bold text-[10px] uppercase tracking-widest"><i class="fas fa-check-circle mr-1"></i> Hadir</div>
                            {% else %}
                                <div class="text-slate-400 font-bold text-[10px] uppercase tracking-widest"><i class="fas fa-times-circle mr-1"></i> Tidak Hadir</div>
                            {% endif %}
                        </td>
                        <td class="py-4 px-6 max-w-[250px] truncate text-xs text-slate-600">
                            {{ j.contribution.comment|default:"-" }}
                        </td>
                        <td class="py-4 px-6 text-center">
                            <div class="text-xs font-bold text-slate-500">{{ j.contribution.files.count|default:"0" }} Fail</div>
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="6" class="py-12 text-center text-slate-500 font-medium">Tiada jemputan untuk bengkel ini lagi.</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

</div>

<style>
    .blueprint-tab {
        padding: 10px 24px;
        border-radius: 14px;
        font-weight: 800;
        font-size: 13px;
        color: #64748b;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        text-align: center;
    }
    .blueprint-tab:hover { background-color: rgba(255,255,255,0.8); color: #0f172a; }
    .blueprint-tab.active-tab { background-color: #ffffff; color: #2563eb; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03); }
    .hide-scrollbar::-webkit-scrollbar { display: none; }
    .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
</style>

<script>
    function showTab(id, btn) {
        document.querySelectorAll('.blueprint-panel').forEach(p => p.classList.add('hidden'));
        document.querySelectorAll('.blueprint-tab').forEach(b => b.classList.remove('active-tab'));
        document.getElementById(id).classList.remove('hidden');
        btn.classList.add('active-tab');
    }
</script>

{% endblock %}