{% extends "base.html" %}
{% load i18n %}
{% block title %}{% trans "Analitik SME" %} — {{ 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">Dashboard SME & Logistik</span>
{% endblock %}

{% block content %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wordcloud2.js/1.2.2/wordcloud2.min.js"></script>
<style>
    .accordion-content { transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out; max-height: 0; opacity: 0; overflow: hidden; }
    .accordion-content.open { max-height: 500px; opacity: 1; overflow-y: auto; }
</style>

<div class="animate-fade-up pb-10">
    <div class="max-w-[1600px] w-full mx-auto">
        
        <div class="relative overflow-hidden bg-gradient-to-br from-[#0f172a] via-[#1e3a8a] to-[#134e4a] rounded-2xl px-8 py-7 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 flex flex-wrap justify-between items-center gap-4">
                <div class="flex items-center gap-4">
                    <a href="{% url 'bengkel:detail' pk=bengkel.pk %}" class="text-white/70 hover:text-white bg-white/10 hover:bg-white/20 w-10 h-10 rounded-full flex items-center justify-center transition shadow-sm border border-white/20 backdrop-blur-sm" title="Kembali ke Bilik Persiapan">
                        <i class="fas fa-arrow-left"></i>
                    </a>
                    <div>
                        <div class="inline-flex items-center gap-1.5 bg-blue-500/20 border border-blue-400/30 text-blue-200 text-[10px] font-bold tracking-widest uppercase px-3 py-1 rounded-full mb-2">
                            <i class="fas fa-chart-pie"></i> Analitik Eksekutif Penganjur
                        </div>
                        <h1 class="text-2xl md:text-3xl font-extrabold text-white leading-tight">Prestasi SME & Pemetaan Logistik</h1>
                        <p class="text-white/60 text-sm mt-1">Laporan komprehensif penglibatan agensi, pelan lantai, dan metrik input peserta.</p>
                    </div>
                </div>
                <div class="flex items-center gap-3">
                    <button class="bg-white/10 hover:bg-white/20 border border-white/20 text-white text-sm font-bold px-4 py-2.5 rounded-xl backdrop-blur-sm transition shadow-sm flex items-center">
                        <i class="fas fa-print mr-2 text-blue-300"></i> Cetak Laporan
                    </button>
                </div>
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
            <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-200 relative overflow-hidden cursor-pointer hover:border-blue-400 hover:shadow-md transition group" onclick="bukaSMEInsight()">
                <div class="absolute -right-4 -bottom-4 opacity-5 group-hover:opacity-10 transition"><i class="fas fa-users text-8xl"></i></div>
                <div class="text-slate-500 text-[11px] font-bold uppercase tracking-widest mb-1.5 flex items-center relative z-10">
                    <i class="fas fa-users mr-2 text-blue-400"></i>Jumlah Peserta Aktif
                    <span class="ml-auto text-[9px] bg-blue-50 text-blue-600 px-2 py-0.5 rounded border border-blue-100 opacity-0 group-hover:opacity-100 transition">Klik Untuk Insight</span>
                </div>
                <div class="text-4xl font-black text-blue-600 relative z-10">{{ jumlah_pax }} <span class="text-sm text-slate-400 font-medium ml-1">Pax</span></div>
            </div>
            
            <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-200 relative overflow-hidden cursor-pointer hover:border-emerald-400 hover:shadow-md transition group" onclick="bukaEksplorasiKorpus()">
                <div class="absolute -right-4 -bottom-4 opacity-5 group-hover:opacity-10 transition"><i class="fas fa-database text-8xl"></i></div>
                <div class="text-slate-500 text-[11px] font-bold uppercase tracking-widest mb-1.5 flex items-center relative z-10">
                    <i class="fas fa-book-open mr-2 text-emerald-500"></i>Volum Korpus Data AI
                    <span class="ml-auto text-[9px] bg-emerald-50 text-emerald-600 px-2 py-0.5 rounded border border-emerald-100 opacity-0 group-hover:opacity-100 transition">Klik Untuk Eksplorasi</span>
                </div>
                <div class="text-4xl font-black text-emerald-600 relative z-10">{{ volum_korpus }} <span class="text-sm text-slate-400 font-medium ml-1">Perkataan</span></div>
            </div>
            
            <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-200 relative overflow-hidden cursor-pointer hover:border-purple-400 hover:shadow-md transition group" onclick="bukaAuditAI()">
                <div class="absolute -right-4 -bottom-4 opacity-5 group-hover:opacity-10 transition"><i class="fas fa-microchip text-8xl"></i></div>
                <div class="text-slate-500 text-[11px] font-bold uppercase tracking-widest mb-1.5 flex items-center relative z-10">
                    <i class="fas fa-brain mr-2 text-purple-500"></i>Kadar Indeks Fail AI
                    <span class="ml-auto text-[9px] bg-purple-50 text-purple-600 px-2 py-0.5 rounded border border-purple-100 opacity-0 group-hover:opacity-100 transition">Klik Untuk Audit</span>
                </div>
                <div class="text-4xl font-black text-purple-600 relative z-10">{{ kadar_indeks_ai }}%</div>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-12 gap-4 lg:gap-6 mb-8 items-start">
            
            <div class="lg:col-span-3 flex flex-col gap-4 h-full">
                <div class="bg-white p-4 rounded-xl shadow-sm border border-slate-200">
                    <h3 class="font-bold text-sm mb-2 text-slate-700">Peratusan Penglibatan Agensi</h3>
                    <div class="relative h-44 w-full"><canvas id="grafPersona"></canvas></div>
                </div>
                <div class="bg-white p-4 rounded-xl shadow-sm border border-slate-200">
                    <h3 class="font-bold text-sm mb-3 text-slate-700">Pecahan Format Fail</h3>
                    <div class="grid grid-cols-2 gap-3 h-[164px] content-start">
                        <div class="flex items-center gap-3 p-3 bg-rose-50 border border-rose-100 rounded-xl transition hover:shadow-md">
                            <i class="fas fa-file-pdf text-3xl text-rose-500"></i>
                            <div>
                                <div class="text-xl font-black text-rose-700 leading-none" id="val-pdf">0</div>
                                <div class="text-[9px] font-bold text-rose-500 uppercase tracking-widest mt-1">PDF</div>
                            </div>
                        </div>
                        <div class="flex items-center gap-3 p-3 bg-blue-50 border border-blue-100 rounded-xl transition hover:shadow-md">
                            <i class="fas fa-file-word text-3xl text-blue-500"></i>
                            <div>
                                <div class="text-xl font-black text-blue-700 leading-none" id="val-word">0</div>
                                <div class="text-[9px] font-bold text-blue-500 uppercase tracking-widest mt-1">Word</div>
                            </div>
                        </div>
                        <div class="flex items-center gap-3 p-3 bg-emerald-50 border border-emerald-100 rounded-xl transition hover:shadow-md">
                            <i class="fas fa-file-excel text-3xl text-emerald-500"></i>
                            <div>
                                <div class="text-xl font-black text-emerald-700 leading-none" id="val-excel">0</div>
                                <div class="text-[9px] font-bold text-emerald-500 uppercase tracking-widest mt-1">Excel</div>
                            </div>
                        </div>
                        <div class="flex items-center gap-3 p-3 bg-slate-50 border border-slate-200 rounded-xl transition hover:shadow-md">
                            <i class="fas fa-file-alt text-3xl text-slate-500"></i>
                            <div>
                                <div class="text-xl font-black text-slate-700 leading-none" id="val-txt">0</div>
                                <div class="text-[9px] font-bold text-slate-500 uppercase tracking-widest mt-1">Lain-lain</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bg-white p-4 rounded-xl shadow-sm border border-slate-200">
                    <h3 class="font-bold text-sm mb-2 text-slate-700 flex justify-between items-center">
                        <span>Sumbangan Rujukan</span>
                    </h3>
                    <div class="relative h-44 w-full"><canvas id="grafAI"></canvas></div>
                </div>
                <div class="bg-white p-4 rounded-xl shadow-sm border border-slate-200 flex-1 flex flex-col">
                    <h3 class="font-bold text-sm mb-2 text-slate-700 flex items-center justify-between">
                        <span><i class="fas fa-thermometer-half text-rose-500 mr-2"></i> Sentimen Isu (Kritikaliti)</span>
                    </h3>
                    <div class="relative w-full flex-1 min-h-[120px]"><canvas id="grafSentimen"></canvas></div>
                </div>
            </div>

            <div class="lg:col-span-6 flex flex-col h-full">
                <div class="bg-white p-5 rounded-xl shadow-sm border border-slate-200 flex-1 flex flex-col">
                    <div class="flex justify-between items-center mb-4 border-b border-slate-100 pb-3">
                        <h3 class="font-bold text-sm text-slate-700"><i class="fas fa-project-diagram mr-2 text-blue-500"></i>Peta Taburan Agensi (Mind Map)</h3>
                        <div class="flex gap-2">
                            <button onclick="bukaDirektoriSME()" class="text-[10px] font-bold bg-blue-600 text-white px-3 py-1.5 rounded-full shadow-sm hover:bg-blue-700 transition flex items-center">
                                <i class="fas fa-address-book mr-1"></i>Direktori Peserta
                            </button>
                            <button onclick="bukaSeatingPlan()" class="text-[10px] font-bold bg-indigo-600 text-white px-3 py-1.5 rounded-full shadow-sm hover:bg-indigo-700 transition flex items-center">
                                <i class="fas fa-chair mr-1"></i>Pelan Lantai
                            </button>
                        </div>
                    </div>
                    
                    <div class="flex flex-col items-center w-full pb-2 flex-1">
                        <div class="flex flex-col items-center">
                            <button onclick="tapisDataMinda('Semua')" class="bg-gradient-to-br from-blue-800 to-blue-900 text-white font-black py-3 px-6 rounded-2xl shadow-md border-2 border-blue-300 relative z-10 text-center w-36 transition transform hover:scale-105 text-xs">
                                <i class="fas fa-users text-xl mb-1 opacity-80"></i><br>{{ jumlah_pax }} Pax
                            </button>
                            <div class="w-1 h-6 bg-slate-300 rounded-b-full"></div>
                        </div>
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-x-3 gap-y-4 w-full relative pt-3 border-t-2 border-slate-300 rounded-t-xl mt-[-2px]" id="mind-map-branches">
                        </div>
                    </div>
                </div>
            </div>

            <div class="lg:col-span-3 flex flex-col gap-4">
                
                <div class="bg-white rounded-xl shadow-sm border border-indigo-200 overflow-hidden flex-1 flex flex-col">
                    <div class="p-3 border-b border-indigo-200 bg-indigo-50/80 flex justify-between items-center">
                        <h3 class="font-bold text-[11px] text-indigo-900"><i class="fas fa-medal text-indigo-500 mr-1"></i> Papan Pendahulu SME</h3>
                        
                        <select id="sort-leaderboard" onchange="renderLeaderboard(this.value)" class="text-[9px] font-bold text-indigo-700 bg-white border border-indigo-200 rounded px-2 py-1 outline-none cursor-pointer shadow-sm">
                            <option value="desc">Skor Tertinggi ⬇</option>
                            <option value="asc">Skor Terendah ⬆</option>
                        </select>
                    </div>
                    
                    <div class="overflow-y-auto max-h-[300px] flex-1 bg-white custom-scrollbar">
                        <table class="w-full text-left border-collapse">
                            <tbody class="text-[11px]" id="leaderboard-body">
                                </tbody>
                        </table>
                    </div>
                </div>

                <div class="bg-white rounded-xl shadow-sm border border-blue-200 overflow-hidden flex-1 flex flex-col mt-3">
                    <div class="p-3 border-b border-blue-200 bg-blue-50 flex justify-between items-center">
                        <h3 class="font-bold text-[11px] text-blue-900"><i class="fas fa-hashtag text-blue-500 mr-1"></i> Topik Hangat (AI Kata Kunci)</h3>
                    </div>
                    <div class="p-4 flex-1 bg-white flex flex-wrap content-start gap-2 overflow-y-auto max-h-[150px] custom-scrollbar">
                        {% for kw, weight in trending_keywords %}
                            {% if forloop.counter <= 2 %}
                                <span class="inline-flex items-center px-2.5 py-1.5 rounded-md text-xs font-black bg-rose-100 text-rose-700 border border-rose-200 shadow-sm"><i class="fas fa-fire mr-1.5 text-rose-500"></i> {{ kw }}</span>
                            {% elif forloop.counter <= 5 %}
                                <span class="inline-flex items-center px-2.5 py-1 rounded-md text-[11px] font-bold bg-amber-50 text-amber-700 border border-amber-200">{{ kw }}</span>
                            {% else %}
                                <span class="inline-flex items-center px-2 py-1 rounded-md text-[10px] font-medium bg-slate-50 text-slate-600 border border-slate-200">{{ kw }}</span>
                            {% endif %}
                        {% empty %}
                            <div class="w-full text-center py-4">
                                <i class="fas fa-spinner fa-spin text-slate-300 mb-2"></i>
                                <p class="text-xs text-slate-400 italic">Analitik teks sedang diproses...</p>
                            </div>
                        {% endfor %}
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

<div id="modal-direktori" class="fixed inset-0 bg-slate-900 bg-opacity-80 z-[1200] flex justify-center items-center backdrop-blur-sm p-4 opacity-0 pointer-events-none transition-opacity duration-300">
    <div class="bg-slate-50 rounded-2xl shadow-2xl w-full max-w-6xl max-h-[90vh] flex flex-col overflow-hidden transform scale-95 transition-transform duration-300" id="direktori-box">
        <div class="bg-gradient-to-r from-blue-900 via-blue-800 to-indigo-900 p-5 flex justify-between items-center text-white border-b-4 border-blue-500">
            <div>
                <h2 class="text-xl font-black flex items-center gap-3"><i class="fas fa-address-book text-blue-400"></i> Direktori Peserta SME</h2>
            </div>
            <button onclick="tutupDirektoriSME()" class="bg-white/10 hover:bg-red-500 w-9 h-9 rounded-full transition flex items-center justify-center"><i class="fas fa-times"></i></button>
        </div>
        
        <div class="bg-white border-b border-slate-200 p-4 flex gap-4 items-center shadow-sm z-10">
            <div class="relative flex-1">
                <i class="fas fa-search absolute left-4 top-1/2 -translate-y-1/2 text-slate-400"></i>
                <input type="text" id="carian-direktori" onkeyup="tapisDirektori()" placeholder="Cari nama, agensi, atau kumpulan..." class="w-full bg-slate-50 border border-slate-200 rounded-xl pl-11 pr-4 py-3 text-sm focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition">
            </div>
            <div class="text-xs font-bold text-slate-400 bg-slate-100 px-3 py-2 rounded-lg border border-slate-200">
                Jumlah: <span id="kiraan-peserta" class="text-blue-600">0</span>
            </div>
        </div>
        <div class="p-6 overflow-y-auto flex-1 bg-slate-50" id="senarai-direktori"></div>
    </div>
</div>

<div id="modal-audit-ai" class="fixed inset-0 bg-slate-900 bg-opacity-80 z-[1100] flex justify-center items-center backdrop-blur-sm p-4 opacity-0 pointer-events-none transition-opacity duration-300">
    <div class="bg-slate-50 rounded-2xl shadow-2xl w-full max-w-4xl max-h-[90vh] flex flex-col overflow-hidden transform scale-95 transition-transform duration-300" id="audit-box">
        <div class="bg-gradient-to-r from-purple-900 to-indigo-900 p-5 flex justify-between items-center text-white border-b-4 border-purple-500">
            <div><h2 class="text-xl font-black"><i class="fas fa-microchip mr-2 text-purple-300"></i>Audit Pengekstrakan Data AI</h2></div>
            <button onclick="tutupAuditAI()" class="bg-white/10 hover:bg-red-500 w-9 h-9 rounded-full transition flex items-center justify-center"><i class="fas fa-times"></i></button>
        </div>
        <div class="p-8 overflow-y-auto flex-1 bg-gray-50">
            <div class="h-64 w-full"><canvas id="grafAuditAgensi"></canvas></div>
        </div>
    </div>
</div>

<div id="modal-eksplorasi-korpus" class="fixed inset-0 bg-slate-900 bg-opacity-80 z-[1100] flex justify-center items-center backdrop-blur-sm p-4 opacity-0 pointer-events-none transition-opacity duration-300">
    <div class="bg-white rounded-2xl shadow-2xl w-full max-w-5xl max-h-[90vh] flex flex-col overflow-hidden transform scale-95 transition-transform duration-300" id="korpus-box">
        <div class="bg-gradient-to-r from-emerald-900 via-teal-900 to-slate-900 p-6 flex justify-between items-center text-white border-b-4 border-emerald-500">
            <div><h2 class="text-2xl font-black flex items-center gap-3"><i class="fas fa-brain text-emerald-400"></i> Eksplorasi Korpus Data</h2></div>
            <button onclick="tutupEksplorasiKorpus()" class="bg-white/10 hover:bg-red-500 w-10 h-10 rounded-full transition flex items-center justify-center"><i class="fas fa-times"></i></button>
        </div>
        <div class="flex-1 overflow-y-hidden p-8 bg-white relative flex flex-col items-center justify-center">
            <p class="text-xs font-bold text-emerald-800 mb-6 bg-emerald-50 px-5 py-3 rounded-xl border border-emerald-200 shadow-sm w-full text-center">
                <i class="fas fa-info-circle mr-2 text-emerald-600"></i> Peta minda ini diekstrak AI daripada keseluruhan aduan SPAF dan dokumen rujukan peserta. Semakin besar saiz perkataan, semakin kritikal kekerapan isu tersebut.
            </p>
            <div id="wordCloudContainer" class="w-full h-[400px] md:h-[500px] relative flex justify-center items-center">
                <canvas id="wordCloudCanvas" class="w-full h-full"></canvas>
            </div>
        </div>
    </div>
</div>

<div id="modal-sme-insight" class="fixed inset-0 bg-slate-900 bg-opacity-80 z-[1100] flex justify-center items-center backdrop-blur-sm p-4 opacity-0 pointer-events-none transition-opacity duration-300">
    <div class="bg-white rounded-2xl shadow-2xl w-full max-w-4xl max-h-[90vh] flex flex-col overflow-hidden transform scale-95 transition-transform duration-300" id="sme-box">
        <div class="bg-gradient-to-r from-blue-900 via-blue-800 to-indigo-900 p-6 flex justify-between items-center text-white border-b-4 border-blue-500">
            <div><h2 class="text-2xl font-black flex items-center gap-3"><i class="fas fa-users text-blue-400"></i> Demografi Kepakaran SME</h2></div>
            <button onclick="tutupSMEInsight()" class="bg-white/10 hover:bg-red-500 w-10 h-10 rounded-full transition flex items-center justify-center"><i class="fas fa-times"></i></button>
        </div>
        <div class="flex-1 overflow-y-auto p-8 bg-slate-50">
            <div class="h-64 w-full"><canvas id="grafKepakaran"></canvas></div>
        </div>
    </div>
</div>

<div id="modal-forum" class="fixed inset-0 bg-slate-900 bg-opacity-80 z-[1300] flex justify-center items-center backdrop-blur-sm p-4 opacity-0 pointer-events-none transition-opacity duration-300">
    <div class="bg-white rounded-2xl shadow-2xl w-full max-w-5xl max-h-[90vh] flex flex-col overflow-hidden transform scale-95 transition-transform duration-300" id="forum-box">
        <div class="bg-gradient-to-r from-indigo-900 via-indigo-800 to-purple-900 p-5 flex justify-between items-center text-white border-b-4 border-indigo-500">
            <div><h2 class="text-xl font-black flex items-center gap-3"><i class="fas fa-comments text-indigo-400"></i> Forum Kolaborasi SME</h2></div>
            <button onclick="tutupForumSME()" class="bg-white/10 hover:bg-red-500 w-9 h-9 rounded-full transition flex items-center justify-center"><i class="fas fa-times"></i></button>
        </div>
        <div class="flex-1 overflow-y-auto p-8 bg-slate-50 text-center text-slate-500">Logik Papan Perbincangan Masa Nyata (Live Forum) sedia dimuatkan di sini.</div>
    </div>
</div>

<script>
    const hierarkiAgensi = JSON.parse('{{ hierarki_json|escapejs|safe }}');
    const labelDinamik = JSON.parse('{{ labels_json|escapejs|safe }}');
    const dataPenglibatanDinamik = JSON.parse('{{ penglibatan_json|escapejs|safe }}');
    const dataSumbanganDinamik = JSON.parse('{{ sumbangan_json|escapejs|safe }}');
    const dataFailDinamik = JSON.parse('{{ fail_json|escapejs|safe }}');

    const warnaKategori = ['#2563eb', '#0891b2', '#059669', '#84cc16', '#d97706', '#dc2626', '#7c3aed', '#db2777'];
    let cartaPersona, cartaAI, cartaFail, cartaTrend, cartaAudit, cartaKepakaran;

    // --- FUNGSI BINA PETA MINDA ---
    function renderMindMap() {
        const container = document.getElementById('mind-map-branches');
        let html = '';
        
        if(hierarkiAgensi.length === 0) {
            container.innerHTML = '<div class="col-span-2 text-center py-8 text-slate-400 text-sm">Belum ada peserta yang mengesahkan kehadiran.</div>';
            return;
        }

        hierarkiAgensi.forEach((agensi, index) => {
            let subHtml = '';
            agensi.cawangan.forEach((cawangan, subIndex) => {
                let ahliHtml = '';
                if(cawangan.ahli.length > 0) {
                    ahliHtml = `
                        <div class="p-3 text-center bg-slate-50 border-b border-slate-100">
                            <button onclick="bukaDirektoriSME('${cawangan.nama}')" class="text-[11px] font-bold text-blue-600 hover:text-blue-800 bg-blue-50 hover:bg-blue-100 py-2 px-4 rounded-lg border border-blue-200 transition-colors w-full shadow-sm flex justify-center items-center">
                                <i class="fas fa-users mr-2"></i> Lihat ${cawangan.ahli.length} Peserta
                            </button>
                        </div>
                    `;
                } else {
                    ahliHtml = `<div class="text-[10px] text-slate-400 py-3 px-6 italic text-center bg-slate-50 border-b border-slate-100">Tiada wakil</div>`;
                }

                subHtml += `
                    <div class="flex flex-col w-full border-b border-slate-100 last:border-0">
                        <button onclick="toggleAccordion('acc-${index}-${subIndex}', this)" class="bg-slate-50 text-slate-600 text-[11px] font-semibold py-2.5 px-3 hover:bg-blue-50 hover:text-blue-700 transition-all flex items-center justify-between text-left w-full">
                            <div class="flex items-center"><i class="fas fa-caret-right text-blue-400 mr-2 transition-transform duration-200 acc-icon"></i> ${cawangan.nama}</div>
                            <span class="bg-white text-blue-600 px-1.5 rounded border border-slate-200 shadow-sm">${cawangan.ahli.length}</span>
                        </button>
                        <div id="acc-${index}-${subIndex}" class="accordion-content bg-white shadow-inner">
                            ${ahliHtml}
                        </div>
                    </div>
                `;
            });

            html += `
                <div class="flex flex-col items-center relative w-full mt-2">
                    <div class="absolute -top-4 w-1 h-4 bg-slate-300 hidden md:block"></div>
                    <button onclick="tapisDataMinda('${agensi.kategori}')" class="w-full ${agensi.warnaBg} text-white font-bold text-sm py-3 px-4 rounded-t-xl shadow-sm border border-white/20 flex justify-between items-center transition hover:opacity-90">
                        <span class="truncate pr-2">${agensi.kategori}</span>
                        <span class="bg-black/20 text-[10px] px-2 py-0.5 rounded-full shrink-0">${agensi.pax}</span>
                    </button>
                    <div class="w-full bg-white border-x border-b border-slate-200 rounded-b-xl overflow-hidden shadow-sm">
                        ${subHtml}
                    </div>
                </div>
            `;
        });
        container.innerHTML = html;
    }

    // --- FUNGSI LUKIS GRAF ---
    function renderSemuaGraf() {
        const ctxP = document.getElementById('grafPersona').getContext('2d');
        cartaPersona = new Chart(ctxP, {
            type: 'doughnut', data: { labels: labelDinamik, datasets: [{ data: dataPenglibatanDinamik, backgroundColor: warnaKategori, borderWidth: 2 }] },
            options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'right', labels: { boxWidth: 12, font: { size: 10 } } } } }
        });

        const ctxA = document.getElementById('grafAI').getContext('2d');
        cartaAI = new Chart(ctxA, {
            type: 'bar', data: { labels: labelDinamik, datasets: [{ data: dataSumbanganDinamik, backgroundColor: warnaKategori, borderRadius: 6 }] },
            options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { x: { display: false } } }
        });

        // Masukkan data terus ke dalam Grid Kad Ikonik
        document.getElementById('val-pdf').innerText = dataFailDinamik[0] || 0;
        document.getElementById('val-word').innerText = dataFailDinamik[1] || 0;
        document.getElementById('val-excel').innerText = dataFailDinamik[2] || 0;
        document.getElementById('val-txt').innerText = dataFailDinamik[3] || 0;

        const ctxS = document.getElementById('grafSentimen').getContext('2d');
        const sentimenLabels = JSON.parse('{{ sentimen_labels_json|escapejs|safe }}');
        const sentimenData = JSON.parse('{{ sentimen_data_json|escapejs|safe }}');
        
        let cartaSentimen = new Chart(ctxS, {
            type: 'bar', 
            data: { 
                labels: sentimenLabels, 
                datasets: [{ 
                    data: sentimenData, 
                    backgroundColor: ['#e11d48', '#f59e0b', '#3b82f6'], 
                    borderRadius: 4 
                }] 
            },
            options: { 
                indexAxis: 'y', // Graf melintang (Horizontal Bar)
                responsive: true, 
                maintainAspectRatio: false, 
                plugins: { legend: { display: false } }, 
                scales: { 
                    x: { display: false, beginAtZero: true },
                    y: { grid: { display: false }, border: { display: false }, ticks: { font: { size: 10, weight: 'bold' }, color: '#475569' } }
                } 
            }
        });
    }

    // --- FUNGSI DIREKTORI PESERTA ---
    function bukaDirektoriSME(filterCawangan = '') {
        const modal = document.getElementById('modal-direktori');
        const box = document.getElementById('direktori-box');
        modal.classList.remove('pointer-events-none', 'opacity-0');
        box.classList.remove('scale-95');

        renderSenaraiDirektori();
        const searchBox = document.getElementById('carian-direktori');
        searchBox.value = filterCawangan; 
        tapisDirektori();
    }

    function tutupDirektoriSME() {
        const modal = document.getElementById('modal-direktori');
        const box = document.getElementById('direktori-box');
        modal.classList.add('opacity-0');
        box.classList.add('scale-95');
        setTimeout(() => { modal.classList.add('pointer-events-none'); }, 300);
    }

    function renderSenaraiDirektori() {
        const container = document.getElementById('senarai-direktori');
        let html = '<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">';
        let totalPeserta = 0;
        
        hierarkiAgensi.forEach(agensi => {
            agensi.cawangan.forEach(caw => {
                caw.ahli.forEach(orang => {
                    totalPeserta++;
                    let warnaSkor = orang.skor >= 80 ? 'text-emerald-600' : (orang.skor >= 65 ? 'text-amber-500' : 'text-rose-500');

                    html += `
                        <div class="kad-peserta bg-white border border-slate-200 rounded-xl p-4 flex items-center gap-3 hover:shadow-md hover:border-blue-400 transition cursor-pointer group" 
                             onclick="bukaProfilSME(${orang.id})" 
                             data-nama="${orang.nama.toLowerCase()}" 
                             data-agensi="${agensi.kategori.toLowerCase()}" 
                             data-cawangan="${caw.nama.toLowerCase()}" 
                             data-kumpulan="${orang.kumpulan.toLowerCase()}">
                            
                            <div class="w-12 h-12 rounded-full ${agensi.warnaBg} text-white flex items-center justify-center font-black text-lg flex-shrink-0 shadow-inner group-hover:scale-110 transition-transform">
                                ${orang.abjad}
                            </div>
                            <div class="flex-1 min-w-0">
                                <h4 class="font-bold text-slate-800 text-xs truncate group-hover:text-blue-600 transition-colors">${orang.nama}</h4>
                                <p class="text-[9px] text-slate-500 truncate mb-1">${caw.nama}</p>
                                <span class="bg-slate-100 text-slate-600 border border-slate-200 px-1.5 py-0.5 rounded text-[8px] font-bold uppercase tracking-wider">${orang.kumpulan}</span>
                            </div>
                            <div class="flex flex-col items-center justify-center pl-3 border-l border-slate-100">
                                <span class="text-[8px] font-bold text-slate-400 uppercase tracking-widest">Skor</span>
                                <span class="text-sm font-black ${warnaSkor}">${orang.skor}</span>
                            </div>
                        </div>
                    `;
                });
            });
        });
        html += '</div>';
        container.innerHTML = html;
        document.getElementById('kiraan-peserta').innerText = totalPeserta;
    }

    function tapisDirektori() {
        const input = document.getElementById('carian-direktori').value.toLowerCase();
        const kadPeserta = document.querySelectorAll('.kad-peserta');
        let kiraanAktif = 0;
        
        kadPeserta.forEach(kad => {
            const nama = kad.getAttribute('data-nama');
            const agensi = kad.getAttribute('data-agensi');
            const cawangan = kad.getAttribute('data-cawangan');
            const kumpulan = kad.getAttribute('data-kumpulan');
            
            if(nama.includes(input) || agensi.includes(input) || cawangan.includes(input) || kumpulan.includes(input)) {
                kad.style.display = "flex";
                kiraanAktif++;
            } else {
                kad.style.display = "none";
            }
        });
        document.getElementById('kiraan-peserta').innerText = kiraanAktif;
    }

    function bukaProfilSME(userId) {
        // Hantar URL kembali dan '#direktori' supaya modal automatik terbuka bila tekan back
        const urlKembali = "{% url 'bengkel:analitik_sme' pk=bengkel.pk %}#direktori";
        window.location.href = `/bengkel/profil-kognitif/${userId}/?kembali=${encodeURIComponent(urlKembali)}`;
    }

    // --- FUNGSI MODAL LAIN ---
    function toggleAccordion(id, btn) {
        const content = document.getElementById(id);
        const icon = btn.querySelector('.acc-icon');
        if (content.classList.contains('open')) { content.classList.remove('open'); icon.style.transform = "rotate(0deg)"; } 
        else { content.classList.add('open'); icon.style.transform = "rotate(90deg)"; }
    }
    
    function tapisDataMinda(kategori) { const canvasP = document.getElementById('grafPersona'); canvasP.style.transform = "scale(1.05)"; setTimeout(() => canvasP.style.transform = "scale(1)", 200); }
    
    // --- FUNGSI TOGGLE MOD PELANCARAN ---
    let isModPelancaran = false;
    
    function toggleVVIPMode() {
        isModPelancaran = !isModPelancaran;
        const btn = document.getElementById('btnTukarMod');
        if (btn) {
            btn.innerHTML = isModPelancaran 
                ? '<i class="fas fa-exchange-alt"></i> Kembali ke Mod Bengkel' 
                : '<i class="fas fa-exchange-alt"></i> Tukar ke Mod Pelancaran';
            btn.className = isModPelancaran 
                ? 'bg-emerald-600 hover:bg-emerald-500 text-white text-xs font-bold py-2 px-4 rounded-lg shadow-md border border-emerald-400 transition flex items-center gap-2'
                : 'bg-indigo-600 hover:bg-indigo-500 text-white text-xs font-bold py-2 px-4 rounded-lg shadow-md border border-indigo-400 transition flex items-center gap-2';
        }
        bukaSeatingPlan(); // Lukis semula pelan lantai
    }

    // --- FUNGSI KEDUDUKAN KERUSI RENTAS AGENSI (FLOOR PLAN) ---
    function bukaSeatingPlan() {
        if (!document.getElementById('modal-seating')) {
            const modalHtml = `
            <div id="modal-seating" class="fixed inset-0 bg-slate-900 bg-opacity-90 z-[1250] flex justify-center items-center backdrop-blur-md p-4 opacity-0 transition-opacity duration-300 pointer-events-none">
                <div class="bg-gray-100 rounded-2xl shadow-2xl w-full max-w-[95vw] h-[90vh] flex flex-col border border-gray-300 overflow-hidden transform scale-95 transition-transform duration-300" id="seating-box">
                    
                    <div class="bg-gradient-to-br from-[#0f172a] via-[#1e3a8a] to-[#134e4a] p-4 md:p-6 flex justify-between items-start md:items-center text-white border-b-4 border-blue-500 shadow-md relative z-10 overflow-hidden shrink-0">
                        <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 md:flex-row md:items-center gap-4">
                            <div class="mr-4">
                                <h2 class="text-xl md:text-2xl font-black"><i class="fas fa-map-marked-alt mr-3 text-blue-400"></i>Pelan Lantai Pintar (Auto-Generated)</h2>
                                <p class="text-blue-200 text-xs md:text-sm mt-1 hidden md:block">Susun atur automatik merangkumi Meja Utama (VVIP), Meja Peserta, dan Sekretariat.</p>
                            </div>
                            <div class="flex gap-2">
                                <button onclick="bukaTetapanMeja()" class="bg-slate-600 hover:bg-slate-500 text-white text-[10px] md:text-xs font-bold py-2 px-3 md:px-4 rounded-lg shadow-sm border border-slate-400 transition flex items-center gap-2">
                                    <i class="fas fa-cogs"></i> Tetapan Meja
                                </button>
                                <button onclick="toggleVVIPMode()" id="btnTukarMod" class="bg-indigo-600 hover:bg-indigo-500 text-white text-[10px] md:text-xs font-bold py-2 px-3 md:px-4 rounded-lg shadow-sm border border-indigo-400 transition flex items-center gap-2">
                                    <i class="fas fa-exchange-alt"></i> Tukar ke Mod Pelancaran
                                </button>
                                <button onclick="cetakPelanLantai()" id="btnCetakPDF" class="bg-rose-600 hover:bg-rose-500 text-white text-[10px] md:text-xs font-bold py-2 px-3 md:px-4 rounded-lg shadow-sm border border-rose-400 transition flex items-center gap-2">
                                    <i class="fas fa-file-pdf"></i> Cetak PDF
                                </button>
                            </div>
                        </div>
                        <button onclick="tutupSeatingPlan()" class="relative z-10 text-white/60 hover:text-white bg-white/10 hover:bg-red-500 border border-white/20 w-10 h-10 rounded-full transition flex items-center justify-center shadow-sm backdrop-blur-sm shrink-0"><i class="fas fa-times text-xl"></i></button>
                    </div>
                    
                    <div id="kawasan-cetakan-pelan" class="flex-1 flex flex-col overflow-y-auto bg-gray-100">
                        <div class="p-6 md:p-10 flex-1 relative shadow-inner" id="seating-container"></div>
                        <div class="bg-white p-4 border-t border-slate-200 text-[11px] flex justify-center gap-4 flex-wrap shadow-inner z-10 shrink-0" id="seating-legend"></div>
                    </div>
                    
                    <div id="panel-tetapan-meja" class="absolute top-20 right-6 bg-white rounded-xl shadow-2xl border border-slate-200 p-5 w-72 z-[1300] transform scale-0 opacity-0 origin-top-right transition-all duration-300 pointer-events-none">
                        <div class="flex justify-between items-center mb-4 border-b pb-2">
                            <h3 class="font-black text-slate-700 text-sm"><i class="fas fa-sliders-h mr-2 text-slate-500"></i>Tetapan Logistik Dewan</h3>
                            <button onclick="tutupTetapanMeja()" class="text-slate-400 hover:text-red-500"><i class="fas fa-times"></i></button>
                        </div>
                        
                        <div class="mb-4">
                            <label class="block text-[10px] font-bold text-slate-500 mb-1 uppercase tracking-wider">Kapasiti Peserta Se-meja</label>
                            <div class="flex items-center gap-3">
                                <input type="range" id="slider-kerusi" min="4" max="15" value="${memoriKapasitiMeja}" class="w-full h-2 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-blue-600" oninput="kemaskiniLabelKerusi()">
                                <span id="label-kerusi" class="font-black text-blue-600 text-lg w-8 text-center">${memoriKapasitiMeja}</span>
                            </div>
                            <p class="text-[9px] text-slate-400 mt-1 italic">*Jumlah meja akan dikira secara automatik berdasarkan jumlah peserta.</p>
                        </div>
                        
                        <button onclick="janaSemulaPelanLantai()" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold text-xs py-2.5 rounded-lg shadow-sm transition">
                            <i class="fas fa-sync-alt mr-1"></i> Susun Semula Kedudukan
                        </button>
                    </div>

                </div>
            </div>`;
            document.body.insertAdjacentHTML('beforeend', modalHtml);
        }

        const container = document.getElementById('seating-container');
        const legend = document.getElementById('seating-legend');
        
        const MAX_TABLES = 100; 
        // Arahkan sistem membaca dari memori global
        const SEATS_PER_TABLE = typeof memoriKapasitiMeja !== 'undefined' ? memoriKapasitiMeja : 10;
        const legendWarna = {};
        let mejaSME = []; 
        let semuaPeserta = [];

        // 1. Kumpul Peserta Sebenar (Kekalkan Fungsi Asal Tarik Data)
        hierarkiAgensi.forEach(agensi => {
            legendWarna[agensi.kategori] = agensi.warnaBg; 
            agensi.cawangan.forEach(caw => {
                caw.ahli.forEach(orang => {
                    semuaPeserta.push({
                        ...orang, agensiNama: agensi.kategori, cawanganNama: caw.nama, warna: agensi.warnaBg
                    });
                });
            });
        });

        // 2. Kod Dummy Diaktifkan/Dibuang (Kini Membaca Data Real-Time Pangkalan Data)

        // 3. MENGGAUL PESERTA (DETERMINISTIC SHUFFLE) - Kedudukan statik tetapi bercampur agensi
        semuaPeserta.sort((a, b) => {
            // Gunakan kombinasi nama dan ID untuk mencipta corak susunan rawak tapi tetap
            const valA = (a.nama.length * 10) + (a.id ? a.id : a.nama.charCodeAt(0));
            const valB = (b.nama.length * 10) + (b.id ? b.id : b.nama.charCodeAt(0));
            return valA - valB;
        });

        // 4. Pecahkan kepada Meja-Meja (10 orang per meja) dengan nama meja rawak
        let tableCounter = 1;
        for (let i = 0; i < semuaPeserta.length; i += SEATS_PER_TABLE) {
            mejaSME.push({
                no: tableCounter,
                kluster: "MEJA " + String(tableCounter).padStart(2, '0'), // Contoh: MEJA 01
                ahli: semuaPeserta.slice(i, i + SEATS_PER_TABLE)
            });
            tableCounter++;
        }

        // Penuhkan Dewan supaya bentuknya simetri
        while (mejaSME.length < 15 && mejaSME.length < MAX_TABLES) {
            mejaSME.push({ no: tableCounter++, kluster: "Kerusi Kosong", ahli: [] });
        }

        // Fungsi Pembantu 1: Lukis Meja Bulat (Untuk VVIP & SME)
        const renderMeja = (noMeja, label, senaraiAhli, isVIP = false) => {
            let kerusiHtml = '';
            const totalKerusi = isVIP ? 7 : SEATS_PER_TABLE;
            const radiusKerusi = isVIP ? '-5.5rem' : '-4.5rem'; 
            
            for (let i = 0; i < totalKerusi; i++) {
                const orang = senaraiAhli[i];
                let rotation = isVIP ? (90 + (i * (180 / (totalKerusi - 1)))) : (i * (360 / totalKerusi)); 
                const transformCss = `transform: rotate(${rotation}deg) translateY(${radiusKerusi}) rotate(-${rotation}deg);`;

                if (orang) {
                    // --- LOGIK STATUS KEHADIRAN (NO-SHOW) ---
                    // VVIP dikecualikan dari semakan check-in (sentiasa papar warna penuh).
                    // Bagi SME, jika mereka belum hadir (sudah_hadir == false), jadikan kerusi mereka lutsinar kelabu.
                    const belumHadir = !isVIP && orang.sudah_hadir === false;
                    const warnaAsal = belumHadir ? 'bg-slate-200 text-slate-400 border-slate-300 border-dashed opacity-70' : `${orang.warna} text-white border-white`;
                    const statusLabel = belumHadir ? `<div class="bg-rose-500 text-white text-[8px] px-2 py-0.5 mt-1 rounded uppercase tracking-wider font-bold text-center">Belum Daftar Masuk</div>` : `<div class="bg-emerald-500 text-white text-[8px] px-2 py-0.5 mt-1 rounded uppercase tracking-wider font-bold text-center">Hadir (Sedia)</div>`;
                    
                    kerusiHtml += `
                        <div class="absolute ${isVIP ? 'w-12 h-12 text-sm' : 'w-9 h-9 md:w-10 md:h-10 text-xs'} rounded-full ${warnaAsal} flex items-center justify-center font-bold shadow-md border-2 cursor-pointer group hover:scale-125 hover:shadow-xl hover:z-50 transition-all z-20" style="${transformCss}" ${orang.id && !belumHadir ? `onclick="bukaProfilSME(${orang.id})"` : ''}>
                            ${orang.abjad || orang.nama.charAt(0)}
                            <div class="absolute bottom-full mb-2 hidden group-hover:block bg-slate-800 text-white text-[11px] p-0 rounded-lg w-48 text-center z-[100] shadow-2xl pointer-events-none overflow-hidden before:content-[''] before:absolute before:top-full before:left-1/2 before:-translate-x-1/2 before:border-4 before:border-transparent before:border-t-slate-800">
                                <div class="bg-slate-700/80 p-2 border-b border-slate-600">
                                    <div class="font-bold text-amber-300 mb-0.5 text-[11px] truncate">${orang.nama}</div>
                                    <div class="text-slate-300 text-[9px] leading-tight truncate">${orang.cawanganNama || ''} <span class="opacity-70">(${orang.agensiNama || 'VVIP'})</span></div>
                                    ${statusLabel}
                                </div>
                                <div class="flex bg-slate-800 p-2 justify-between items-center text-[10px]">
                                    <div class="flex flex-col items-start">
                                        <span class="text-slate-400 text-[8px] uppercase">Peranan</span>
                                        <span class="font-bold text-blue-300">${orang.kumpulan || 'SME'}</span>
                                    </div>
                                    <div class="flex flex-col items-end border-l border-slate-600 pl-2">
                                        <span class="text-slate-400 text-[8px] uppercase">Prestasi AI</span>
                                        <span class="font-black ${orang.skor >= 80 ? 'text-emerald-400' : (orang.skor >= 65 ? 'text-amber-400' : 'text-rose-400')}">${orang.skor || 0}/100</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    `;
                } else {
                    // Kerusi memang sengaja dikosongkan (Bukan sebab tak hadir, tapi sebab meja tak cukup orang)
                    kerusiHtml += `
                        <div class="absolute ${isVIP ? 'w-10 h-10' : 'w-8 h-8 md:w-9 md:h-9'} rounded-full bg-slate-50 text-slate-200 flex items-center justify-center font-bold text-[10px] shadow-inner border border-dashed border-slate-200 z-10" style="${transformCss}" title="Kerusi Bebas / Tambahan">
                            <i class="fas fa-plus opacity-30"></i>
                        </div>
                    `;
                }
            }

            let warnaBorderMeja = isVIP ? 'border-amber-300 bg-amber-50' : 'border-slate-200 bg-white';
            let warnaLabelMeja = isVIP ? 'text-amber-900 bg-amber-200 border-amber-300' : 'text-indigo-900 bg-white/90 border-indigo-100';

            return `
                <div class="flex flex-col items-center">
                    <div class="relative ${isVIP ? 'w-32 h-32 md:w-36 md:h-36' : 'w-24 h-24 md:w-28 md:h-28'} rounded-full border-8 ${warnaBorderMeja} shadow-xl flex flex-col items-center justify-center text-center p-2 z-0 transition-colors">
                        ${!isVIP ? `<span class="text-slate-300 font-black text-2xl opacity-20 absolute pointer-events-none">M${noMeja}</span>` : ''}
                        <span class="font-bold text-[9px] md:text-[10px] leading-tight z-10 px-2 py-0.5 rounded shadow-sm border ${warnaLabelMeja}">${label}</span>
                        ${kerusiHtml}
                    </div>
                </div>
            `;
        };

        // Fungsi Pembantu 2: Lukis Meja Segi Empat (Untuk AJK)
        const renderMejaSegiEmpat = (label, senaraiAhli) => {
            let atasHtml = '';
            let bawahHtml = '';
            
            for (let i = 0; i < 10; i++) {
                const orang = senaraiAhli[i];
                const kerusiMarkup = orang ? `
                    <div class="w-8 h-8 md:w-9 md:h-9 rounded-full ${orang.warna} text-white flex items-center justify-center font-bold text-[10px] shadow-md border-2 border-white cursor-pointer group relative hover:scale-125 hover:z-50 transition-all z-20">
                        ${orang.abjad || orang.nama.charAt(0)}
                        <div class="absolute bottom-full mb-2 hidden group-hover:block bg-slate-800 text-white text-[11px] px-3 py-2 rounded-lg w-44 text-center z-[100] shadow-2xl pointer-events-none before:content-[''] before:absolute before:top-full before:left-1/2 before:-translate-x-1/2 before:border-4 before:border-transparent before:border-t-slate-800">
                            <div class="font-bold text-amber-300 mb-0.5 text-xs">${orang.nama}</div>
                            <div class="text-slate-300 text-[10px] leading-tight">${orang.agensiNama}</div>
                        </div>
                    </div>
                ` : `
                    <div class="w-8 h-8 md:w-9 md:h-9 rounded-full bg-slate-100 text-slate-300 flex items-center justify-center font-bold text-[10px] shadow-inner border border-dashed border-slate-400 z-10" title="Kerusi Kosong">
                        <i class="fas fa-chair opacity-40"></i>
                    </div>
                `;
                
                if (i < 5) atasHtml += kerusiMarkup; // 5 kerusi hadapan
                else bawahHtml += kerusiMarkup;      // 5 kerusi belakang
            }

            return `
                <div class="flex flex-col items-center gap-2">
                    <div class="flex gap-2">${atasHtml}</div>
                    <div class="w-60 h-14 md:w-64 md:h-16 bg-slate-200 border-4 border-slate-300 shadow-md rounded-xl flex items-center justify-center text-center p-2 z-0 relative">
                        <span class="font-bold text-[9px] md:text-[10px] leading-tight z-10 px-3 py-1 rounded shadow-sm border border-slate-400 text-slate-800 bg-slate-300">${label}</span>
                    </div>
                    <div class="flex gap-2">${bawahHtml}</div>
                </div>
            `;
        };

        // Fungsi Pembantu 3: Lukis Meja Segi Empat Panjang (Khas Mod Pelancaran 5 Kerusi)
        const renderMejaPelancaran = (label, senaraiAhli) => {
            let kerusiHtml = '';
            for (let i = 0; i < 5; i++) {
                const orang = senaraiAhli[i];
                if (orang) {
                    kerusiHtml += `
                        <div class="w-10 h-10 md:w-12 md:h-12 rounded-full ${orang.warna} text-white flex items-center justify-center font-bold text-xs md:text-sm shadow-md border-2 border-slate-300 cursor-pointer group relative hover:scale-110 hover:z-50 transition-all z-20">
                            ${orang.abjad}
                            <div class="absolute bottom-full mb-2 hidden group-hover:block bg-slate-800 text-white text-[10px] px-3 py-2 rounded-lg w-40 text-center z-[100] shadow-2xl pointer-events-none border border-slate-600">
                                <div class="font-bold text-amber-300 mb-0.5 text-[11px]">${orang.nama}</div>
                                <div class="text-slate-300 text-[9px] leading-tight">${orang.agensiNama}</div>
                            </div>
                        </div>
                    `;
                }
            }
            return `
                <div class="flex flex-col items-center">
                    <div class="flex gap-4 md:gap-10 mb-4">${kerusiHtml}</div>
                    <div class="text-slate-400 font-bold text-[10px] uppercase tracking-[0.4em] border-t border-slate-300 pt-2 px-10">Zon Kenamaan Pelancaran</div>
                </div>
            `;
        };

        const vvipAhliBengkel = [
            { nama: "Tetamu Kehormat 1", abjad: "VIP", warna: "bg-slate-800", agensiNama: "Jemputan Khas" },
            { nama: "Tetamu Kehormat 2", abjad: "VIP", warna: "bg-slate-700", agensiNama: "Jemputan Khas" },
            { nama: "YBhg. Datuk Dr. Mahathar bin Abd Wahab", abjad: "KPK", warna: "bg-amber-500", agensiNama: "Ketua Pengarah Kesihatan, KKM" },
            { nama: "YBhg. Datuk Seri Hj. Hasnol Zam Zam bin Hj. Ahmad", abjad: "KSU", warna: "bg-amber-600", agensiNama: "Ketua Setiausaha, KKM" },
            { nama: "YBhg. Dato' Sri Zahrul Hakim bin Abdullah", abjad: "TKSU", warna: "bg-yellow-500", agensiNama: "TKSU (Kewangan), KKM" },
            { nama: "Penganjur / Urusetia HPU", abjad: "HPU", warna: "bg-blue-600", agensiNama: "Penganjur Utama" },
            { nama: "Tetamu Kehormat 3", abjad: "VIP", warna: "bg-slate-800", agensiNama: "Jemputan Khas" }
        ];

        const vvipAhliPelancaran = [
            { nama: "Tetamu Kehormat", abjad: "VIP", warna: "bg-slate-800", agensiNama: "Jemputan Khas" },
            { nama: "YBhg. Datuk Dr. Mahathar bin Abd Wahab", abjad: "KPK", warna: "bg-amber-500", agensiNama: "Ketua Pengarah Kesihatan, KKM" },
            { nama: "YBhg. Datuk Seri Hj. Hasnol Zam Zam bin Hj. Ahmad", abjad: "KSU", warna: "bg-amber-600", agensiNama: "Ketua Setiausaha, KKM" },
            { nama: "YBhg. Dato' Sri Zahrul Hakim bin Abdullah", abjad: "TKSU", warna: "bg-yellow-500", agensiNama: "TKSU (Kewangan), KKM" },
            { nama: "Penganjur / Urusetia HPU", abjad: "HPU", warna: "bg-blue-600", agensiNama: "Penganjur Utama" }
        ];
        const ajkAhli1 = Array(10).fill({ nama: "Sekretariat / Teknikal", abjad: "AJK", warna: "bg-slate-600", agensiNama: "Urusetia" });
        const ajkAhli2 = Array(10).fill({ nama: "Sekretariat / Logistik", abjad: "AJK", warna: "bg-slate-600", agensiNama: "Urusetia" });

        // Render Petunjuk Warna (Legend)
        let legHtml = '<div class="font-black text-slate-500 uppercase tracking-widest mr-2 flex items-center"><i class="fas fa-palette mr-2"></i> Petunjuk Warna:</div>';
        for (const [kat, warna] of Object.entries(legendWarna)) {
            // Betulkan masalah ralat background class Tailwind
            const warnaBersih = warna.split(' ')[0];
            legHtml += `<div class="flex items-center gap-1.5 bg-slate-50 px-2 py-1 rounded-md border border-slate-200"><div class="w-3.5 h-3.5 rounded-full ${warnaBersih} shadow-sm border border-black/10"></div> <span class="font-bold text-slate-600 text-[10px] uppercase">${kat}</span></div>`;
        }
        legend.innerHTML = legHtml;

        // --- BINA KESELURUHAN PELAN LANTAI DEWAN ---
        let floorHtml = `
            <div class="bg-white rounded-3xl shadow-sm border border-gray-200 p-8 md:p-12 mx-auto max-w-[100rem] relative mb-10">
            
                <div class="w-full max-w-4xl mx-auto bg-gradient-to-b from-[#1e3a8a] to-[#0f172a] text-white text-center py-5 rounded-b-3xl font-black text-2xl tracking-[0.3em] mb-16 shadow-2xl border-x-8 border-b-8 border-blue-400 relative overflow-hidden -mt-8 md:-mt-12">
                    <div class="absolute inset-0 opacity-20 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-white via-transparent to-transparent"></div>
                    <i class="fas fa-microphone-alt mr-3 text-blue-300 relative z-10"></i> <span class="relative z-10">PENTAS UTAMA</span>
                </div>
                
                <div class="flex justify-center mb-32 mt-4 relative">
                    <div class="absolute -inset-10 bg-amber-100 opacity-20 rounded-[50%] blur-2xl pointer-events-none"></div>
                    ${isModPelancaran 
                        ? renderMejaPelancaran('MEJA VVIP (SESI PELANCARAN / FORUM)', vvipAhliPelancaran)
                        : renderMeja('VIP', 'MEJA VVIP (BENTUK U)', vvipAhliBengkel, true)}
                </div>

                <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-y-24 gap-x-8 pb-20 pt-8 border-b-4 border-dashed border-gray-200">
        `;
        
        mejaSME.forEach(meja => {
            floorHtml += renderMeja(meja.no, meja.kluster.substring(0,25), meja.ahli, false);
        });
        
        floorHtml += `
                </div>

                <div class="pt-16 pb-4 flex flex-col xl:flex-row justify-between items-center gap-10 xl:gap-0">
                    
                    <div class="flex flex-col items-center w-48">
                        <div class="w-40 h-4 bg-blue-500 rounded-t-lg shadow-[0_-10px_20px_rgba(59,130,246,0.3)]"></div>
                        <div class="text-blue-700 font-black tracking-widest text-sm mt-2"><i class="fas fa-sign-in-alt mr-1"></i> PINTU MASUK UTAMA</div>
                    </div>

                    <div class="flex flex-col md:flex-row gap-10 lg:gap-16 justify-center flex-1">
                        ${renderMejaSegiEmpat('SEKRETARIAT (PENDAFTARAN)', ajkAhli1)}
                    </div>

                    <div class="flex flex-col items-center opacity-70 w-48">
                        <div class="w-32 h-4 bg-green-500 rounded-t-lg"></div>
                        <div class="text-green-700 font-black tracking-widest text-xs mt-2"><i class="fas fa-door-open mr-1"></i> PINTU KECEMASAN</div>
                    </div>

                </div>
            </div> `;

        container.innerHTML = floorHtml;

        // Buka Modal
        const modal = document.getElementById('modal-seating');
        const box = document.getElementById('seating-box');
        modal.classList.remove('pointer-events-none');
        setTimeout(() => { modal.classList.remove('opacity-0'); box.classList.remove('scale-95'); }, 10);
    }

    function tutupSeatingPlan() {
        const modal = document.getElementById('modal-seating');
        const box = document.getElementById('seating-box');
        modal.classList.add('opacity-0');
        box.classList.add('scale-95');
        setTimeout(() => { modal.classList.add('pointer-events-none'); }, 300);
    }
    
    function bukaAuditAI() { 
        document.getElementById('modal-audit-ai').classList.remove('pointer-events-none', 'opacity-0'); 
        document.getElementById('audit-box').classList.remove('scale-95');
        if(!cartaAudit) {
            cartaAudit = new Chart(document.getElementById('grafAuditAgensi').getContext('2d'), {
                type: 'bar', 
                data: { 
                    labels: ['Status Pengekstrakan Teks'], 
                    datasets: [
                        { label: 'Berjaya Diindeks', data: [{{ fail_berjaya }}], backgroundColor: '#10b981' }, 
                        { label: 'Gagal (Ralat Format)', data: [{{ fail_gagal }}], backgroundColor: '#f43f5e' }
                    ] 
                },
                options: { indexAxis: 'y', responsive: true, maintainAspectRatio: false, scales: { x: { stacked: true }, y: { stacked: true } } }
            });
        }
    }
    function tutupAuditAI() { document.getElementById('modal-audit-ai').classList.add('opacity-0'); document.getElementById('audit-box').classList.add('scale-95'); setTimeout(() => { document.getElementById('modal-audit-ai').classList.add('pointer-events-none'); }, 300); }

    // Sediakan data untuk Word Cloud (Dari gelung Python)
    const dataWordCloud = [
        {% for kw, weight in trending_keywords %}
            ["{{ kw|escapejs }}", {{ weight|default:1 }}], 
        {% endfor %}
    ];
    let wordCloudRendered = false;

    function bukaEksplorasiKorpus() { 
        document.getElementById('modal-eksplorasi-korpus').classList.remove('pointer-events-none', 'opacity-0'); 
        document.getElementById('korpus-box').classList.remove('scale-95'); 
        
        // Render Word Cloud hanya bila modal dibuka (supaya saiz canvas betul-betul fit ke skrin)
        if (!wordCloudRendered && dataWordCloud.length > 0) {
            setTimeout(() => {
                const canvas = document.getElementById('wordCloudCanvas');
                const container = document.getElementById('wordCloudContainer');
                
                // Set resolusi piksel fizikal sama dengan resolusi kotak UI
                canvas.width = container.offsetWidth;
                canvas.height = container.offsetHeight;
                
                // 🤖 ALGORITMA SKALA DINAMIK: Mengira saiz huruf secara auto ikut kepadatan kata kunci
                let maxWeight = 1;
                dataWordCloud.forEach(function(item) {
                    if (item[1] > maxWeight) maxWeight = item[1];
                });

                // Tentukan target saiz tulisan maksima berdasarkan jumlah perkataan dalam tatasusunan (Array)
                let targetMaxFont = 80; 
                if (dataWordCloud.length <= 3) {
                    targetMaxFont = 140; // Besarkan gila-gila kalau perkataan terlalu sedikit supaya memenuhi ruang skrin kosong
                } else if (dataWordCloud.length <= 8) {
                    targetMaxFont = 110; // Sederhana besar bagi kumpulan kata kunci sederhana
                } else if (dataWordCloud.length > 25) {
                    targetMaxFont = 55;  // Kecilkan sikit saiz maksimum jika lambakan perkataan terlalu padat (Biar fit)
                }

                let dynamicWeightFactor = targetMaxFont / maxWeight;
                
                WordCloud(canvas, {
                    list: dataWordCloud,
                    gridSize: dataWordCloud.length <= 5 ? 4 : 8, // Grid lebih kecil untuk perkataan sikit supaya fleksibel mengembang
                    weightFactor: function (size) {
                        return size * dynamicWeightFactor; 
                    },
                    fontFamily: 'Inter, sans-serif',
                    color: function () {
                        // Variasi warna Korporat KKM
                        const colors = ['#0f172a', '#1e3a8a', '#134e4a', '#0ea5e9', '#10b981', '#64748b', '#d97706'];
                        return colors[Math.floor(Math.random() * colors.length)];
                    },
                    rotateRatio: dataWordCloud.length <= 3 ? 0 : 0.3, // Kekalkan mod melintang jika perkataan terlalu sikit supaya selesa dibaca
                    rotationSteps: 2,
                    backgroundColor: '#ffffff',
                    shape: 'circle',
                    drawOutOfBound: false,
                    shrinkToFit: true
                });
                wordCloudRendered = true;
            }, 400); // Tunggu animasi UI modal siap mengembang
        } else if (dataWordCloud.length === 0) {
            document.getElementById('wordCloudContainer').innerHTML = '<div class="text-slate-400 py-20 text-center"><i class="fas fa-box-open text-5xl mb-4 opacity-50"></i><br><span class="font-medium text-sm">Tiada kata kunci AI yang mencukupi untuk menjana peta minda.</span></div>';
        }
    }
    
    function tutupEksplorasiKorpus() { 
        document.getElementById('modal-eksplorasi-korpus').classList.add('opacity-0'); 
        document.getElementById('korpus-box').classList.add('scale-95'); 
        setTimeout(() => { document.getElementById('modal-eksplorasi-korpus').classList.add('pointer-events-none'); }, 300); 
    }

    const labelKepakaran = JSON.parse('{{ kepakaran_labels_json|escapejs|safe }}');
    const dataKepakaran = JSON.parse('{{ kepakaran_data_json|escapejs|safe }}');

    function bukaSMEInsight() { 
        document.getElementById('modal-sme-insight').classList.remove('pointer-events-none', 'opacity-0'); document.getElementById('sme-box').classList.remove('scale-95'); 
        if(!cartaKepakaran) {
            cartaKepakaran = new Chart(document.getElementById('grafKepakaran').getContext('2d'), { 
                type: 'pie', 
                data: { 
                    labels: labelKepakaran, 
                    datasets: [{ data: dataKepakaran, backgroundColor: ['#0ea5e9', '#8b5cf6', '#10b981', '#f59e0b', '#64748b'] }] 
                }, 
                options: { responsive: true, maintainAspectRatio: false } 
            });
        }
    }
    function tutupSMEInsight() { document.getElementById('modal-sme-insight').classList.add('opacity-0'); document.getElementById('sme-box').classList.add('scale-95'); setTimeout(() => { document.getElementById('modal-sme-insight').classList.add('pointer-events-none'); }, 300); }

    function bukaForumSME() { document.getElementById('modal-forum').classList.remove('pointer-events-none', 'opacity-0'); document.getElementById('forum-box').classList.remove('scale-95'); }
    function tutupForumSME() { document.getElementById('modal-forum').classList.add('opacity-0'); document.getElementById('forum-box').classList.add('scale-95'); setTimeout(() => { document.getElementById('modal-forum').classList.add('pointer-events-none'); }, 300); }
    
    // --- FUNGSI CETAK PDF (FIT-TO-PAGE LANSKAP) ---
    function cetakPelanLantai() {
        const btn = document.getElementById('btnCetakPDF');
        const originalText = btn.innerHTML;
        btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Memproses...';
        btn.disabled = true;

        const captureArea = document.getElementById('kawasan-cetakan-pelan');
        
        // Simpan gaya asal
        const originalOverflow = captureArea.style.overflow;
        const originalHeight = captureArea.style.height;
        
        // Ubah gaya sementara supaya keseluruhan pelan ditangkap penuh tanpa ada bahagian yang terpotong dek scrollbar
        captureArea.style.overflow = 'visible';
        captureArea.style.height = 'auto';

        html2canvas(captureArea, {
            scale: 2, // Resolusi tinggi untuk cetakan (supaya teks tidak kabur)
            useCORS: true,
            backgroundColor: '#f3f4f6' // Warna latar belakang yang sepadan
        }).then(canvas => {
            // Pulihkan gaya asal pelayar (browser)
            captureArea.style.overflow = originalOverflow;
            captureArea.style.height = originalHeight;

            const imgData = canvas.toDataURL('image/png');
            const { jsPDF } = window.jspdf;
            
            // Cipta fail PDF berformat A4 secara Melintang (Landscape)
            const pdf = new jsPDF('l', 'mm', 'a4');
            const pdfWidth = pdf.internal.pageSize.getWidth();
            const pdfHeight = pdf.internal.pageSize.getHeight();
            
            const imgProps = pdf.getImageProperties(imgData);
            const margin = 10; // Tinggalkan 10mm margin putih di setiap tepi kertas
            const availableWidth = pdfWidth - (margin * 2);
            const availableHeight = pdfHeight - (margin * 2);

            // Kira nisbah (ratio) untuk Fit-to-Screen supaya gambar tidak leper atau lonjong
            const ratio = Math.min(availableWidth / imgProps.width, availableHeight / imgProps.height);
            
            const finalWidth = imgProps.width * ratio;
            const finalHeight = imgProps.height * ratio;
            
            // Pastikan gambar berada betul-betul di tengah kertas (Center Alignment)
            const x = (pdfWidth - finalWidth) / 2;
            const y = (pdfHeight - finalHeight) / 2;

            pdf.addImage(imgData, 'PNG', x, y, finalWidth, finalHeight);
            
            // Nama fail berbeza ikut Mod VVIP yang sedang aktif
            let namaFail = isModPelancaran ? 'Pelan_Lantai_Sesi_Pelancaran.pdf' : 'Pelan_Lantai_Sesi_Bengkel.pdf';
            pdf.save(namaFail);

            // Pulihkan butang asal
            btn.innerHTML = originalText;
            btn.disabled = false;
        }).catch(err => {
            console.error(err);
            alert("{% trans 'Ralat semasa menjana PDF. Sila cuba lagi.' %}");
            btn.innerHTML = originalText;
            btn.disabled = false;
        });
    }

    // --- FUNGSI PAPAN PENDAHULU (LEADERBOARD) ---
    function renderLeaderboard(sortOrder = 'desc') {
        const tbody = document.getElementById('leaderboard-body');
        let semuaPeserta = [];
        
        // Kumpul semua peserta dari JSON hierarkiAgensi yang sedia ada
        hierarkiAgensi.forEach(agensi => {
            agensi.cawangan.forEach(caw => {
                caw.ahli.forEach(orang => {
                    semuaPeserta.push(orang);
                });
            });
        });

        // Susun tatasusunan (Array) berdasarkan arahan Dropdown
        semuaPeserta.sort((a, b) => {
            return sortOrder === 'desc' ? b.skor - a.skor : a.skor - b.skor;
        });

        let html = '';
        if (semuaPeserta.length === 0) {
            html = '<tr><td class="py-6 text-center text-slate-400 italic">Belum ada peserta yang mendaftar.</td></tr>';
        } else {
            semuaPeserta.forEach((p, index) => {
                // Tentukan warna berdasarkan markah (Hijau = Cemerlang, Kuning = Sederhana, Merah = Pasif)
                let bgWarna = p.skor >= 80 ? 'bg-emerald-50 text-emerald-700' : (p.skor >= 50 ? 'bg-amber-50 text-amber-700' : 'bg-rose-50 text-rose-700');
                
                // Letak ikon mahkota untuk top 3 (Hanya jika disingkap dari tertinggi)
                let ikonTop = (sortOrder === 'desc' && index < 3) ? '<i class="fas fa-crown text-amber-400 mr-1 drop-shadow-sm"></i>' : '';
                
                html += `
                <tr class="hover:bg-slate-50 transition border-b border-slate-100 cursor-pointer group" onclick="bukaProfilSME(${p.id})">
                    <td class="py-3 px-3 font-bold text-slate-700 group-hover:text-blue-600">
                        <div class="flex items-center gap-2">
                            <span class="text-slate-400 text-[9px] w-4">${index + 1}.</span>
                            <div class="truncate w-36">${ikonTop} ${p.nama}</div>
                        </div>
                    </td>
                    <td class="py-3 px-3 font-black text-right text-xs w-12 ${bgWarna}">${p.skor}</td>
                </tr>`;
            });
        }
        tbody.innerHTML = html;
    }

    window.onload = () => {
        renderLeaderboard('desc'); // Render Leaderboard secara automatik semasa mula-mula load
        renderMindMap();
        renderSemuaGraf();
        
        // Buka modal direktori secara automatik jika URL mempunyai hashtag #direktori
        if(window.location.hash === '#direktori') {
            bukaDirektoriSME();
            
            // PEMBAIKAN: Padam hashtag dari URL secara senyap tanpa me-reload halaman
            // Ini memastikan jika Penganjur 'refresh' (F5) selepas ini, tetingkap tidak akan timbul lagi
            history.replaceState(null, null, window.location.pathname + window.location.search);
        }
    };
    // --- FUNGSI KAWALAN TETAPAN LOGISTIK DINAMIK ---
    function bukaTetapanMeja() {
        const panel = document.getElementById('panel-tetapan-meja');
        if(panel) {
            panel.classList.remove('scale-0', 'opacity-0', 'pointer-events-none');
            panel.classList.add('scale-100', 'opacity-100');
        }
    }

    function tutupTetapanMeja() {
        const panel = document.getElementById('panel-tetapan-meja');
        if(panel) {
            panel.classList.remove('scale-100', 'opacity-100');
            panel.classList.add('scale-0', 'opacity-0');
            setTimeout(() => panel.classList.add('pointer-events-none'), 300);
        }
    }

    // Mengambil nilai kapasiti semeja yang rasmi dari pangkalan data Django
    let memoriKapasitiMeja = parseInt('{{ bengkel.kapasiti_semeja|default:10 }}');

    function kemaskiniLabelKerusi() {
        const slider = document.getElementById('slider-kerusi');
        const label = document.getElementById('label-kerusi');
        if(slider && label) { 
            label.innerText = slider.value; 
            memoriKapasitiMeja = parseInt(slider.value); 
        }
    }

    function janaSemulaPelanLantai() {
        tutupTetapanMeja();
        const container = document.getElementById('seating-container');
        if (container) {
            container.innerHTML = '<div class="flex justify-center items-center h-full"><i class="fas fa-spinner fa-spin text-4xl text-blue-500"></i></div>';
        }

        // Hantar perubahan nilai ke Pelayan (Django) menggunakan AJAX POST
        fetch(`/bengkel/kemaskini-kapasiti-meja-ajax/{{ bengkel.pk }}/`, {
            method: 'POST',
            headers: {
                'X-CSRFToken': '{{ csrf_token }}',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ kapasiti: memoriKapasitiMeja })
        })
        .then(res => res.json())
        .then(data => {
            if(data.success) {
                // Selepas pelayan berjaya menyimpan data, lukis semula pelan lantai visual
                setTimeout(() => {
                    const modalLama = document.getElementById('modal-seating');
                    if(modalLama) modalLama.remove();
                    bukaSeatingPlan();
                }, 500);
            } else {
                alert("{% trans 'Ralat Pangkalan Data:' %} " + data.error);
                if (container) container.innerHTML = '';
            }
        })
        .catch(err => {
            alert("{% trans 'Ralat sambungan komunikasi pelayan.' %}");
            if (container) container.innerHTML = '';
        });
    }
</script>
{% endblock %}