{% extends "base.html" %}
{% load i18n %}
{% block title %}{{ bengkel.title }} — {% trans "Pusat Kawalan Bengkel" %}{% 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>
    <span class="text-slate-500 font-medium text-xs">{{ bengkel.title|truncatechars:30 }}</span>
{% endblock %}

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

    <div class="bg-gradient-to-br from-slate-900 via-[#1e3a8a] to-slate-900 rounded-3xl p-8 md:p-10 shadow-xl relative overflow-hidden border border-slate-800 mb-8">
        <div class="absolute right-0 top-0 opacity-10 transform translate-x-1/4 -translate-y-1/4">
            <i class="fas fa-microchip text-[250px] text-blue-400"></i>
        </div>
        
        <div class="relative z-10 flex flex-col xl:flex-row xl:items-start justify-between gap-8">
            <div class="flex-1">
                <div class="inline-flex items-center gap-2 px-3 py-1 bg-blue-500/20 border border-blue-400/30 text-blue-200 text-[10px] font-black uppercase tracking-widest rounded-full mb-4">
                    <i class="fas fa-server"></i> Bengkel ID: {{ bengkel.pk }}
                </div>
                <h1 class="text-3xl md:text-4xl font-black text-white leading-tight mb-3 tracking-tight">{{ bengkel.title }}</h1>
                {% if bengkel.description %}
                    <p class="text-blue-100/70 text-sm leading-relaxed max-w-3xl">{{ bengkel.description }}</p>
                {% endif %}
                <div class="mt-4 flex items-center gap-2 text-xs font-semibold text-slate-400">
                    <span class="w-6 h-6 rounded-full bg-slate-700 flex items-center justify-center text-white text-[10px]"><i class="fas fa-user"></i></span>
                    Dicipta oleh: <span class="text-slate-300">{{ bengkel.created_by.username|default:"Sistem" }}</span>
                </div>
            </div>

            <div class="flex flex-wrap gap-3 shrink-0">
                <a href="{% url 'bengkel:papar_master_qr' pk=bengkel.pk %}" class="flex items-center gap-2 bg-gradient-to-r from-indigo-500 to-blue-600 hover:from-indigo-600 hover:to-blue-700 text-white px-5 py-3 rounded-xl font-bold shadow-lg shadow-indigo-500/30 transition-all hover:-translate-y-1">
                    <i class="fas fa-projector text-lg"></i> Papar Skrin QR
                </a>
                <a href="{% url 'bengkel:jemput' pk=bengkel.pk %}" class="flex items-center gap-2 bg-amber-500 hover:bg-amber-600 text-amber-950 px-5 py-3 rounded-xl font-bold shadow-lg shadow-amber-500/30 transition-all hover:-translate-y-1">
                    <i class="fas fa-user-plus text-lg"></i> Tambah Jemputan
                </a>
                <a href="{% url 'bengkel:edit' pk=bengkel.pk %}" class="flex items-center gap-2 bg-white/10 hover:bg-white/20 border border-white/20 text-white px-5 py-3 rounded-xl font-bold backdrop-blur-sm transition-all">
                    <i class="fas fa-edit"></i> Edit
                </a>
            </div>
        </div>
    </div>

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

    <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 mb-8">
        
        <div class="lg:col-span-5 space-y-8">
            <div class="bg-white rounded-3xl border border-slate-200 shadow-sm p-8 relative overflow-hidden h-full">
                <div class="absolute -right-6 -top-6 text-slate-50 opacity-50"><i class="fas fa-info-circle text-9xl"></i></div>
                <h2 class="text-sm font-black text-slate-800 uppercase tracking-widest mb-6 relative z-10 flex items-center gap-2"><i class="fas fa-calendar-alt text-blue-500"></i> Maklumat Rasmi</h2>
                
                <div class="space-y-5 relative z-10">
                    <div class="flex items-start gap-4">
                        <div class="w-10 h-10 rounded-xl bg-blue-50 text-blue-500 flex items-center justify-center shrink-0"><i class="fas fa-clock"></i></div>
                        <div>
                            <div class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Jadual Masa</div>
                            <div class="text-sm font-bold text-slate-700 mt-0.5">{{ bengkel.tarikh|date:"d M Y, h:i A" }}</div>
                            {% if bengkel.tarikh_tamat %}<div class="text-xs text-slate-500 mt-0.5">Hingga: {{ bengkel.tarikh_tamat|date:"d M Y, h:i A" }}</div>{% endif %}
                        </div>
                    </div>
                    <div class="flex items-start gap-4">
                        <div class="w-10 h-10 rounded-xl bg-rose-50 text-rose-500 flex items-center justify-center shrink-0"><i class="fas fa-map-marker-alt"></i></div>
                        <div>
                            <div class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Lokasi</div>
                            <div class="text-sm font-bold text-slate-700 mt-0.5">{{ bengkel.lokasi_nama }}</div>
                            {% if bengkel.lokasi_alamat %}<div class="text-xs text-slate-500 mt-0.5 leading-relaxed pr-4">{{ bengkel.lokasi_alamat }}</div>{% endif %}
                        </div>
                    </div>
                    <div class="flex items-start gap-4">
                        <div class="w-10 h-10 rounded-xl bg-amber-50 text-amber-600 flex items-center justify-center shrink-0"><i class="fas fa-building"></i></div>
                        <div>
                            <div class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Penganjur</div>
                            <div class="text-sm font-bold text-slate-700 mt-0.5">{{ bengkel.organizer_nama }}</div>
                            {% if bengkel.organizer_email %}<a href="mailto:{{ bengkel.organizer_email }}" class="text-xs text-blue-500 hover:underline block mt-0.5">{{ bengkel.organizer_email }}</a>{% endif %}
                            {% if bengkel.organizer_telefon %}<div class="text-xs text-slate-500 mt-0.5"><i class="fas fa-phone-alt mr-1"></i> {{ bengkel.organizer_telefon }}</div>{% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="lg:col-span-7 space-y-6">
            
            <div class="bg-gradient-to-br from-indigo-900 via-purple-900 to-slate-900 rounded-3xl border border-indigo-500/30 shadow-lg overflow-hidden relative group h-[220px] flex items-center">
                <div class="absolute inset-0 opacity-20" style="background-image:radial-gradient(rgba(255,255,255,.2) 1px,transparent 1px);background-size:20px 20px;"></div>
                <div class="absolute -right-4 -bottom-10 opacity-10 transform group-hover:scale-110 transition-transform duration-700">
                    <i class="fas fa-project-diagram text-[200px] text-indigo-300"></i>
                </div>

                <div class="p-8 relative z-10 flex flex-col md:flex-row items-center justify-between gap-6 w-full">
                    <div class="flex-1">
                        <div class="w-12 h-12 bg-indigo-500/20 border border-indigo-400/50 rounded-full flex items-center justify-center mb-4 shadow-[0_0_20px_rgba(99,102,241,0.3)] animate-pulse">
                            <i class="fas fa-satellite-dish text-xl text-indigo-300"></i>
                        </div>
                        <h2 class="text-2xl font-black text-white mb-2 tracking-tight">Pusat Kawalan AI <span class="text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-400">(Live)</span></h2>
                        <p class="text-indigo-200 text-xs max-w-sm leading-relaxed">Papan pemuka (skrin besar) untuk dibentangkan kepada audiens dewan.</p>
                    </div>
                    <a href="{% url 'bengkel:overview_map' pk=bengkel.pk %}" class="shrink-0 inline-flex items-center justify-center gap-2 bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-500 hover:to-indigo-500 text-white font-black text-sm px-6 py-3.5 rounded-xl shadow-[0_0_30px_rgba(147,51,234,0.4)] hover:shadow-[0_0_40px_rgba(147,51,234,0.6)] transition-all">
                        <i class="fas fa-play-circle text-lg"></i> Lancarkan (Bentang)
                    </a>
                </div>
            </div>

            <div class="bg-gradient-to-br from-blue-900 to-cyan-900 rounded-3xl border border-blue-500/30 shadow-lg overflow-hidden relative group h-[220px] flex items-center">
                <div class="absolute inset-0 opacity-20" style="background-image:radial-gradient(rgba(255,255,255,.2) 1px,transparent 1px);background-size:20px 20px;"></div>
                <div class="absolute -right-4 -bottom-6 opacity-10 transform group-hover:scale-110 transition-transform duration-700">
                    <i class="fas fa-users text-[180px] text-blue-300"></i>
                </div>
                <div class="p-8 relative z-10 flex flex-col md:flex-row items-center justify-between gap-6 w-full">
                    <div class="flex-1">
                        <h3 class="text-2xl font-black text-white mb-2">Dashboard SME & Logistik</h3>
                        <p class="text-blue-200 text-xs max-w-sm leading-relaxed">Pantau Peta Minda kehadiran, direktori kepakaran, dan pelan lantai dewan.</p>
                    </div>
                    <a href="{% url 'bengkel:analitik_sme' pk=bengkel.pk %}" class="shrink-0 inline-flex items-center justify-center gap-2 bg-blue-500 hover:bg-blue-400 text-white font-black text-sm px-6 py-3.5 rounded-xl shadow-lg transition-all hover:-translate-y-1">
                        <i class="fas fa-chart-pie text-lg"></i> Buka Analitik SME
                    </a>
                </div>
            </div>

        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-8">
        
        <div class="lg:col-span-1 bg-white rounded-3xl border border-slate-200 shadow-sm overflow-hidden h-full">
            <div class="px-6 py-4 border-b border-slate-100 bg-slate-50/50 flex justify-between items-center gap-2">
                <h2 class="text-sm font-black text-slate-800 uppercase tracking-widest flex items-center gap-1.5"><i class="fas fa-list-ol text-indigo-500"></i> Aturcara Acara</h2>
                <div class="flex items-center gap-2">
                    <!-- Paginasi Aturcara Penganjur -->
                    <div class="flex gap-1">
                        <button type="button" onclick="pindahMukaOrgTentative(-1)" class="w-6 h-6 rounded-lg bg-white border border-slate-200 text-slate-500 hover:bg-blue-50 hover:text-blue-600 transition flex items-center justify-center disabled:opacity-30 disabled:cursor-not-allowed shadow-sm" id="btn-prev-org-t"><i class="fas fa-chevron-left text-[9px]"></i></button>
                        <span id="page-info-org-t" class="text-[10px] font-bold text-blue-600 flex items-center px-1.5 bg-blue-50 rounded-lg border border-blue-100">1/1</span>
                        <button type="button" onclick="pindahMukaOrgTentative(1)" class="w-6 h-6 rounded-lg bg-white border border-slate-200 text-slate-500 hover:bg-blue-50 hover:text-blue-600 transition flex items-center justify-center disabled:opacity-30 disabled:cursor-not-allowed shadow-sm" id="btn-next-org-t"><i class="fas fa-chevron-right text-[9px]"></i></button>
                    </div>
                    <a href="{% url 'bengkel:tentative' pk=bengkel.pk %}" class="text-[10px] font-bold text-blue-600 hover:underline bg-white border border-slate-200 px-2.5 py-1 rounded-lg shrink-0">Urus</a>
                </div>
            </div>
            <div class="p-6">
                {% with items=bengkel.tentative.all %}
                    {% if items %}
                    <div class="relative border-l-2 border-indigo-100 ml-3">
                        {% for item in items %}
                        <div class="relative pl-6 mb-6 org-tentative-item animate-fade-up">
                            <div class="absolute -left-[9px] top-1 w-4 h-4 rounded-full border-2 border-white {% if forloop.first %}bg-indigo-500{% else %}bg-slate-300{% endif %}"></div>
                            <div class="inline-block px-2 py-0.5 bg-indigo-50 text-indigo-600 font-bold font-mono text-[10px] rounded-md mb-1">{{ item.masa }}</div>
                            <div class="text-sm font-bold text-slate-800">{{ item.aktiviti }}</div>
                            {% if item.penerangan %}<p class="text-xs text-slate-500 mt-1">{{ item.penerangan }}</p>{% endif %}
                        </div>
                        {% endfor %}
                    </div>
                    {% else %}
                    <div class="text-center py-6">
                        <i class="fas fa-clipboard-list text-3xl text-slate-300 mb-2"></i>
                        <p class="text-xs text-slate-500">Aturcara belum dimuat naik.</p>
                    </div>
                    {% endif %}
                {% endwith %}
            </div>
        </div>

        <div class="lg:col-span-2 grid grid-cols-1 sm:grid-cols-2 gap-6 h-full">
            <div class="bg-white rounded-3xl border border-slate-200 shadow-sm p-6 flex flex-col">
                <h3 class="text-[11px] font-black text-slate-400 uppercase tracking-widest mb-4"><i class="fab fa-youtube text-rose-500 mr-1"></i> Video Ucapan</h3>
                {% if bengkel.video_ucapan_embed %}
                    <div class="rounded-xl overflow-hidden aspect-video border border-slate-100 shadow-sm w-full h-full min-h-[200px]">
                        <iframe src="{{ bengkel.video_ucapan_embed }}" class="w-full h-full" frameborder="0" allowfullscreen></iframe>
                    </div>
                {% else %}
                    <div class="flex-1 min-h-[200px] bg-slate-50 border-2 border-dashed border-slate-200 rounded-xl flex items-center justify-center text-xs text-slate-400 font-medium">Tiada Video Dimuat Naik</div>
                {% endif %}
            </div>
            
            <div class="bg-white rounded-3xl border border-slate-200 shadow-sm p-6 flex flex-col">
                <h3 class="text-[11px] font-black text-slate-400 uppercase tracking-widest mb-4"><i class="fas fa-route text-teal-500 mr-1"></i> Video Arah Laluan</h3>
                {% if bengkel.video_arah_embed %}
                    <div class="rounded-xl overflow-hidden aspect-video border border-slate-100 shadow-sm w-full h-full min-h-[200px]">
                        <iframe src="{{ bengkel.video_arah_embed }}" class="w-full h-full" frameborder="0" allowfullscreen></iframe>
                    </div>
                {% else %}
                    <div class="flex-1 min-h-[200px] bg-slate-50 border-2 border-dashed border-slate-200 rounded-xl flex items-center justify-center text-xs text-slate-400 font-medium">Tiada Video Dimuat Naik</div>
                {% endif %}
            </div>
        </div>
    </div>

    <div class="bg-rose-50 border border-rose-200 rounded-3xl p-6 md:p-8 flex flex-col md:flex-row items-center justify-between gap-6 shadow-sm">
        <div>
            <h3 class="font-black text-rose-800 text-sm">Zon Bahaya: Padam Bengkel</h3>
            <p class="text-xs text-rose-600 mt-1 max-w-lg">Tindakan ini adalah kekal. Semua data, rekod kehadiran, fail rujukan, dan jemputan peserta akan dipadam sepenuhnya dari pangkalan data.</p>
        </div>
        <form method="post" action="{% url 'bengkel:delete' pk=bengkel.pk %}" onsubmit="return confirm('{% trans "AMARAN: Adakah anda benar-benar pasti mahu memadamkan bengkel ini?" %}')" class="shrink-0">
            {% csrf_token %}
            <button type="submit" class="bg-rose-600 hover:bg-rose-700 text-white font-bold px-6 py-3.5 rounded-xl shadow-lg shadow-rose-600/30 transition-all flex items-center gap-2">
                <i class="fas fa-trash-alt"></i> Padam Selamanya
            </button>
        </form>
    </div>

</div>

<script>
    // LOGIK PAGINASI ATURCARA DASHBOARD PENGANJUR
    let currentOrgTPage = 0;
    const itemsPerOrgTPage = 3; // Hadkan kepada 3 aturcara sahaja satu paparan

    function kemaskiniPaginasiOrgTentative() {
        const allOrgTItems = document.querySelectorAll('.org-tentative-item');
        let totalOrgTPages = Math.ceil(allOrgTItems.length / itemsPerOrgTPage);
        if (totalOrgTPages === 0) totalOrgTPages = 1;
        
        if (currentOrgTPage >= totalOrgTPages) currentOrgTPage = totalOrgTPages - 1;
        if (currentOrgTPage < 0) currentOrgTPage = 0;

        allOrgTItems.forEach(item => item.style.display = 'none'); 
        
        let mula = currentOrgTPage * itemsPerOrgTPage;
        let tamat = mula + itemsPerOrgTPage;
        
        for(let i = mula; i < tamat && i < allOrgTItems.length; i++) {
            allOrgTItems[i].style.display = 'block'; 
        }
        
        const infoEl = document.getElementById('page-info-org-t');
        const prevBtn = document.getElementById('btn-prev-org-t');
        const nextBtn = document.getElementById('btn-next-org-t');
        
        if (infoEl) infoEl.innerText = `${currentOrgTPage + 1} / ${totalOrgTPages}`;
        if (prevBtn) prevBtn.disabled = currentOrgTPage === 0;
        if (nextBtn) nextBtn.disabled = currentOrgTPage === totalOrgTPages - 1;
    }

    function pindahMukaOrgTentative(arah) {
        currentOrgTPage += arah;
        kemaskiniPaginasiOrgTentative();
    }

    // Auto run apabila halaman dimuatkan sepenuhnya
    window.addEventListener('DOMContentLoaded', () => {
        if (document.querySelectorAll('.org-tentative-item').length > 0) {
            kemaskiniPaginasiOrgTentative();
        }
    });
</script>
{% endblock %}