{% extends "base.html" %}
{% load i18n %}
{% block title %}{% trans "Laporan Eksekutif (2-Page)" %} — {{ bengkel.title }}{% endblock %}

{% block content %}
<style>
    /* KONFIGURASI CETAKAN A4 (LEBIH STABIL & PATUH BROWSER) */
    @page {
        size: A4 portrait;
        margin: 0;
    }
    
    body {
        background-color: #f1f5f9; /* Latar belakang luar kertas */
    }

    .a4-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2rem;
        padding-top: 2rem;
        padding-bottom: 4rem;
    }

    .a4-page {
        width: 210mm;
        min-height: 297mm; /* Ditukar ke min-height supaya flexible */
        background-color: white;
        box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
        position: relative;
        display: flex;
        flex-direction: column;
        /* overflow dibuang supaya teks tidak terpotong */
    }

    @media print {
        body { background-color: white !important; -webkit-print-color-adjust: exact; color-adjust: exact; }
        .no-print { display: none !important; }
        .a4-wrapper { gap: 0 !important; padding: 0 !important; display: block !important; }
        .a4-page { 
            box-shadow: none !important; 
            margin: 0 !important; 
            page-break-after: always !important; 
            min-height: 297mm !important; 
            height: auto !important; /* Biar pelayar web tentukan page breaks secara automatik */
            display: block !important;
        }
        
        /* Memaksa warna dicetak */
        .bg-blue-50 { background-color: #eff6ff !important; }
        .bg-white { background-color: white !important; }
        .roadmap-path { border-color: #cbd5e1 !important; }
        
        /* OVERRIDE KHAS UNTUK MUKA SURAT 2 SEMASA CETAKAN (HITAM PEKAT STANDARD) */
        .page-2-print { background-color: #ffffff !important; }
        .page-2-print * { 
            color: #000000 !important; 
            -webkit-text-fill-color: #000000 !important; /* Paksa webkit Chrome/Edge jadi hitam */
            opacity: 1 !important; /* Buang sebarang efek lutsinar/pudar */
            text-shadow: none !important;
            border-color: #cbd5e1 !important; 
        }
        /* Kecuali untuk watermark kecil di bawah */
        .page-2-print .watermark-ai { 
            color: #64748b !important; 
            -webkit-text-fill-color: #64748b !important; 
        }
    }
</style>

<!-- Refinement Reka Bentuk Nav Bar Terapung IPES (DNA Color) -->
<div class="no-print bg-gradient-to-r from-blue-900/95 via-indigo-900/95 to-slate-900/95 backdrop-blur-md text-white p-4 sticky top-4 z-50 shadow-2xl flex justify-between items-center px-6 rounded-2xl mb-6 border border-indigo-500/30 border-b-4 border-b-amber-500 max-w-[210mm] mx-auto w-full transition-all duration-300">
    <a href="{% url 'bengkel:overview_map' pk=bengkel.pk %}" class="bg-white/10 hover:bg-white/20 text-white px-5 py-2.5 rounded-lg border border-white/20 backdrop-blur-sm shadow-sm transition font-bold flex items-center gap-2 cursor-pointer">
        <i class="fas fa-arrow-left"></i> Kembali ke Pusat Kawalan
    </a>
    
    <div class="flex items-center gap-3">
        {% if not bengkel.is_locked %}
        <button type="button" onclick="kunciBengkel()" class="bg-rose-600 hover:bg-rose-500 text-white px-6 py-2.5 rounded-lg font-bold shadow-lg transition flex items-center gap-2 cursor-pointer border border-rose-500">
            <i class="fas fa-lock"></i> Sahkan & Tamatkan Acara
        </button>
        {% else %}
        <span class="bg-slate-800 text-slate-400 px-4 py-2.5 rounded-lg font-bold border border-slate-700 flex items-center gap-2">
            <i class="fas fa-lock"></i> Acara Telah Ditamatkan
        </span>
        {% endif %}

        <button type="button" onclick="setTimeout(function(){ window.print(); }, 300);" class="bg-blue-600 hover:bg-blue-500 text-white px-6 py-2.5 rounded-lg font-bold shadow-lg transition flex items-center gap-2 cursor-pointer border border-blue-500">
            <i class="fas fa-print"></i> Cetak Dokumen A4
        </button>
    </div>
</div>

<script>
function kunciBengkel() {
    if(confirm("{% trans 'AWAS: Tindakan ini tidak boleh dipadam! Adakah anda pasti mahu menamatkan acara ini? Peserta tidak akan boleh lagi menyumbang idea dan hanya akan menerima mod Baca Sahaja.' %}")) {
        fetch("{% url 'bengkel:kunci_bengkel_ajax' pk=bengkel.pk %}", {
            method: "POST",
            headers: {
                "X-CSRFToken": "{{ csrf_token }}",
                "Content-Type": "application/json"
            }
        })
        .then(res => res.json())
        .then(data => {
            if(data.success) {
                alert(data.mesej);
                window.location.reload();
            } else {
                alert("{% trans 'Ralat:' %} " + data.error);
            }
        });
    }
}
</script>

<div class="a4-wrapper animate-fade-up">
    
    <div class="a4-page p-[15mm]">
        
        <div class="flex flex-col items-center justify-center border-b-[3px] border-slate-300 pb-4 mb-5 shrink-0 relative">
            
            <div class="flex items-center justify-center gap-6 mb-4 w-full">
                <img src="/static/img/logo.png" class="h-16 object-contain" alt="IPES Logo">
                <div class="h-12 w-[2px] bg-slate-300"></div>
                <img src="/static/img/hpu_logo.png" onerror="this.style.display='none'" class="h-16 object-contain" alt="HPU Logo">
            </div>
            
            <div class="text-center w-full flex flex-col items-center">
                <p class="text-[10px] font-black text-blue-600 uppercase tracking-[0.25em] mb-1 text-center">Dokumen Ringkasan Eksekutif Nasional</p>
                <h1 class="text-2xl font-black text-slate-900 uppercase leading-tight tracking-tight mb-1 text-center w-full">{{ bengkel.title }}</h1>
                <p class="text-[10px] text-slate-500 font-bold uppercase tracking-widest text-center">Rangka Tindakan Strategik & Penilaian Sumber Pintar</p>
            </div>
        </div>

        <div class="grid grid-cols-5 gap-2 mb-5 shrink-0">
            <div class="bg-blue-50 p-2.5 rounded-lg text-center border border-blue-100">
                <div class="text-xl font-black text-blue-700">{{ senarai_peserta|length }}</div>
                <div class="text-[8px] font-bold text-slate-500 uppercase tracking-widest mt-0.5">Pakar SME</div>
            </div>
            <div class="bg-slate-50 p-2.5 rounded-lg text-center border border-slate-200">
                <div class="text-xl font-black text-slate-700">{{ dokumen_rujukan|length|default:"0" }}</div>
                <div class="text-[8px] font-bold text-slate-500 uppercase tracking-widest mt-0.5">Rujukan Dasar</div>
            </div>
            <div class="bg-slate-50 p-2.5 rounded-lg text-center border border-slate-200">
                <div class="text-xl font-black text-slate-700">{{ stats.jumlah_strategi|default:"0" }}</div>
                <div class="text-[8px] font-bold text-slate-500 uppercase tracking-widest mt-0.5">Strategi (Fasa)</div>
            </div>
            <div class="bg-slate-50 p-2.5 rounded-lg text-center border border-slate-200">
                <div class="text-xl font-black text-slate-700">{{ stats.jumlah_kpi|default:"0" }}</div>
                <div class="text-[8px] font-bold text-slate-500 uppercase tracking-widest mt-0.5">Sasaran KPI</div>
            </div>
            <div class="bg-slate-50 p-2.5 rounded-lg text-center border border-slate-200">
                <div class="text-xl font-black text-slate-700">{{ stats.jumlah_sumber|default:"0" }}</div>
                <div class="text-[8px] font-bold text-slate-500 uppercase tracking-widest mt-0.5">Profil Sumber</div>
            </div>
        </div>

        <div class="mb-5 shrink-0">
            <h2 class="text-[11px] font-black text-slate-800 uppercase tracking-widest mb-2 border-b border-slate-200 pb-1 text-center">Metodologi S.P.A.F (Perjalanan Analitik)</h2>
            <div class="flex items-center justify-between text-[9px] font-bold text-slate-700 bg-white rounded-xl p-3 border border-slate-200 shadow-sm">
                <div class="text-center flex-1 px-1"><i class="fas fa-user-injured text-rose-500 block mb-1.5 text-[16px]"></i> 1. Isu (<span class="text-blue-600">{{ stats.jumlah_aduan }} Aduan</span>)</div>
                <i class="fas fa-chevron-right text-slate-300"></i>
                <div class="text-center flex-1 px-1"><i class="fas fa-microscope text-orange-500 block mb-1.5 text-[16px]"></i> 2. Skop Masalah (<span class="text-blue-600">{{ stats.jumlah_skop_ai }} Kluster</span>)</div>
                <i class="fas fa-chevron-right text-slate-300"></i>
                <div class="text-center flex-1 px-1"><i class="fas fa-project-diagram text-amber-500 block mb-1.5 text-[16px]"></i> 3. Punca Akar (<span class="text-blue-600">{{ stats.jumlah_rca }} RCA</span>)</div>
                <i class="fas fa-chevron-right text-slate-300"></i>
                <div class="text-center flex-1 px-1"><i class="fas fa-clipboard-check text-emerald-500 block mb-1.5 text-[16px]"></i> 4. Validasi Punca (<span class="text-blue-600">{{ stats.kadar_konsensus }}% Setuju</span>)</div>
                <i class="fas fa-chevron-right text-slate-300"></i>
                <div class="text-center flex-1 px-1"><i class="fas fa-balance-scale-right text-blue-500 block mb-1.5 text-[16px]"></i> 5. Analisis Risiko (<span class="text-blue-600">{{ stats.jumlah_risiko }} Unjuran</span>)</div>
            </div>
        </div>

        <div class="grid grid-cols-2 gap-6 mb-6 shrink-0">
            <div class="bg-slate-50 p-3 rounded-lg border border-slate-200">
                <h2 class="text-[10px] font-black text-slate-800 uppercase tracking-widest mb-2 border-b border-slate-200 pb-1"><i class="fas fa-cube text-blue-500 mr-1"></i> Teras Utama (Pillars)</h2>
                <ul class="space-y-1.5">
                    {% for pillar in pillars|slice:":4" %}
                    <li class="flex items-start gap-1.5 text-[9px] text-slate-700 leading-tight">
                        <i class="fas fa-check text-slate-400 mt-0.5"></i> <span>{{ pillar.teras|truncatechars:80 }}</span>
                    </li>
                    {% empty %}
                    <li class="text-[9px] text-slate-400 italic">Tiada Teras Dijana.</li>
                    {% endfor %}
                </ul>
            </div>
            <div class="bg-slate-50 p-3 rounded-lg border border-slate-200">
                <h2 class="text-[10px] font-black text-slate-800 uppercase tracking-widest mb-2 border-b border-slate-200 pb-1"><i class="fas fa-layer-group text-indigo-500 mr-1"></i> Tema (Themes)</h2>
                <ul class="space-y-1.5">
                    {% for theme in themes|slice:":4" %}
                    <li class="flex items-start gap-1.5 text-[9px] text-slate-700 leading-tight">
                        <i class="fas fa-check text-slate-400 mt-0.5"></i> <span>{{ theme.tema|truncatechars:80 }}</span>
                    </li>
                    {% empty %}
                    <li class="text-[9px] text-slate-400 italic">Tiada Tema Dijana.</li>
                    {% endfor %}
                </ul>
            </div>
        </div>

        <div class="flex-1 flex flex-col">
            <h2 class="text-[12px] font-black text-slate-900 uppercase tracking-widest mb-2 text-center bg-slate-100 py-1.5 rounded">Master Blueprint Roadmap</h2>
            
            <div class="w-full relative mt-4 pb-4">
                <div class="grid grid-cols-2 gap-8 relative z-10">
                    {% for strat in strategies %}
                    <div class="bg-white border-[3px] border-slate-800 rounded-xl p-4 shadow-sm text-center relative flex flex-col h-full">
                        <div class="absolute -top-4 left-1/2 transform -translate-x-1/2 w-8 h-8 bg-slate-900 text-white rounded-full flex items-center justify-center text-[14px] font-black border-[3px] border-white shadow">
                            {{ forloop.counter }}
                        </div>
                        
                        <h3 class="text-[11px] font-black text-blue-700 mt-4 mb-1 uppercase tracking-wider">{{ strat.fasa }}</h3>
                        <p class="text-[10px] font-bold text-slate-800 leading-snug mb-4">{{ strat.tajuk }}</p>
                        
                        <div class="bg-slate-50 border border-slate-200 rounded-lg p-3 text-left w-full flex-1">
                            <div class="text-[9px] font-black text-slate-600 mb-2 border-b border-slate-200 pb-1.5"><i class="fas fa-bullseye text-amber-500 mr-1"></i> Senarai Penuh Tindakan:</div>
                            <ul class="list-none space-y-2">
                                {% for ap in strat.action_plans.all %}
                                <li class="text-[9px] font-semibold text-slate-700 leading-relaxed flex items-start gap-1.5">
                                    <i class="fas fa-check text-blue-500 mt-0.5 text-[8px] shrink-0"></i> <span>{{ ap.tajuk }}</span>
                                </li>
                                {% empty %}
                                <li class="text-[9px] italic text-slate-400">Tiada butiran tindakan dijana.</li>
                                {% endfor %}
                            </ul>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>

    </div>

    <div class="a4-page flex flex-col justify-center items-center bg-slate-50 p-[15mm] page-2-print">
        
        <div class="absolute inset-[15mm] border-[3px] border-slate-300 rounded-2xl pointer-events-none"></div>

        <div class="text-center mb-8 relative z-10 mt-6">
            <i class="fas fa-award text-5xl text-amber-500 mb-3"></i>
            <h2 class="font-black text-2xl uppercase tracking-[0.3em] mb-2 text-blue-900">Watikah Kepakaran</h2>
            <p class="text-[10px] font-bold text-slate-600 uppercase tracking-widest max-w-lg mx-auto leading-relaxed">
                Blueprint Perancangan Strategik ini dibina berteraskan DNA dan pengesahan realiti (reality check) daripada barisan Subject Matter Experts (SME) dan VVIP berikut:
            </p>
        </div>

        <div class="w-full px-10 mb-8 relative z-10">
            <h3 class="text-center font-black text-amber-600 tracking-[0.2em] uppercase text-[10px] mb-6">Penaung & Penasihat Utama</h3>
            <div class="flex flex-col justify-center items-center gap-5 text-center">
                <div>
                    <div class="text-[12px] font-black text-slate-900 tracking-wider uppercase">KSU</div>
                    <div class="text-[8px] font-bold text-slate-500 uppercase tracking-widest mt-0.5">Ketua Setiausaha KKM</div>
                </div>
                <div>
                    <div class="text-[12px] font-black text-slate-900 tracking-wider uppercase">TKSU</div>
                    <div class="text-[8px] font-bold text-slate-500 uppercase tracking-widest mt-0.5">Timbalan KSU</div>
                </div>
                <div>
                    <div class="text-[12px] font-black text-slate-900 tracking-wider uppercase">KPK</div>
                    <div class="text-[8px] font-bold text-slate-500 uppercase tracking-widest mt-0.5">Ketua Pengarah Kesihatan</div>
                </div>
                <div>
                    <div class="text-[12px] font-black text-slate-900 tracking-wider uppercase">Pengarah HPU</div>
                    <div class="text-[8px] font-bold text-slate-500 uppercase tracking-widest mt-0.5">Health Performance Unit</div>
                </div>
            </div>
        </div>

        <div class="w-full px-10 mb-auto relative z-10">
            <h3 class="text-center font-black text-amber-600 tracking-[0.2em] uppercase text-[9px] mb-4">Barisan Subject Matter Experts (SME)</h3>
            <div class="grid grid-cols-4 gap-x-6 gap-y-4 text-center">
                {% for peserta in senarai_peserta %}
                <div class="border-b border-slate-300 pb-1">
                    <div class="text-[10px] font-black text-slate-900 tracking-wider uppercase truncate">
                        {{ peserta.get_full_name|default:peserta.username }}
                    </div>
                    <div class="text-[7px] font-bold text-slate-500 uppercase tracking-widest truncate mt-0.5">
                        {{ peserta.profile.jabatan|default:peserta.profile.organisasi|default:"Pakar Rujuk (SME)" }}
                    </div>
                </div>
                {% empty %}
                <div class="col-span-4 text-xs text-slate-600 italic py-6">
                    Senarai peserta sedang dikemaskini.
                </div>
                {% endfor %}
            </div>
        </div>

        <div class="w-full px-10 mt-6 flex justify-between items-end border-t-2 border-slate-300 pt-6 relative z-10 mb-6">
            <div class="text-left">
                <div class="w-10 h-10 border-2 border-slate-400 bg-white rounded flex items-center justify-center text-slate-800 text-[10px] font-black mb-2">AI</div>
                <p class="text-[8px] font-black uppercase text-slate-900 tracking-widest mb-1">Disintesis Oleh: LKB Engine</p>
                <p class="text-[7px] text-slate-500 uppercase tracking-widest watermark-ai">Sistem IPES Integrasi</p>
            </div>
            
            <div class="text-center pb-1">
                <img src="/static/img/logo.png" onerror="this.src='https://via.placeholder.com/100?text=Logo'" class="h-10 opacity-70" alt="Logo Watermark">
            </div>

            <div class="text-right pb-1">
                <p class="text-base font-black text-slate-900 uppercase tracking-widest mb-1">{% now "d F Y" %}</p>
                <p class="text-[7px] text-slate-500 uppercase tracking-widest watermark-ai">Tarikh Pengesahan Final</p>
            </div>
        </div>

    </div>

</div>
{% endblock %}