{% extends "base.html" %}
{% block title %}Analisis Indikator (KPI) — {{ 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>
    <a href="{% url 'bengkel:overview_map' pk=bengkel.pk %}" class="text-blue-600 hover:underline text-xs font-bold">Pusat Kawalan AI</a> <span class="mx-2 text-slate-400">/</span>
    <span class="text-slate-500 font-medium text-xs">Langkah 7: Indikator (KPI)</span>
{% endblock %}

{% block content %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<style>
    .radar-bg { background-image: radial-gradient(circle at center, #fdf4ff 0%, transparent 70%); }
</style>

<div class="animate-fade-up min-h-screen pb-10">
    <div class="max-w-[1600px] w-full mx-auto">
        
        <div class="relative overflow-hidden bg-gradient-to-br from-fuchsia-900 via-purple-900 to-slate-900 rounded-2xl px-8 py-7 mb-8 shadow-lg">
            <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 flex flex-wrap justify-between items-center gap-4">
                <div class="flex items-center gap-4">
                    <a href="{% url 'bengkel:overview_map' 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 Pusat Kawalan">
                        <i class="fas fa-arrow-left"></i>
                    </a>
                    <div>
                        <div class="inline-flex items-center gap-1.5 bg-fuchsia-500/20 border border-fuchsia-400/30 text-fuchsia-200 text-[10px] font-bold tracking-widest uppercase px-3 py-1 rounded-full mb-3">
                            <i class="fas fa-chart-line"></i> Monitoring & Evaluation
                        </div>
                        <h1 class="text-2xl md:text-3xl font-extrabold text-white leading-tight">Key Performance Indicators (M&E)</h1>
                        <p class="text-white/70 text-sm mt-1">Implementation of Monitoring & Evaluation to track system achievements and compliance.</p>
                    </div>
                </div>
                <div class="flex items-center gap-3">
                    <div class="bg-fuchsia-500/20 border border-fuchsia-400/30 text-fuchsia-100 text-xs font-bold px-4 py-2.5 rounded-xl backdrop-blur-sm flex items-center shadow-inner">
                        <i class="fas fa-satellite-dish text-fuchsia-400 mr-2"></i> M&E Tracking Active
                    </div>
                </div>
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
            <div id="btn-jana-indikator" onclick="janaIndikatorAI()" class="bg-fuchsia-50 p-5 rounded-xl shadow-sm border-2 border-fuchsia-200 cursor-pointer hover:border-fuchsia-500 hover:shadow-md transition group relative overflow-hidden">
                <div class="absolute -right-4 -bottom-4 opacity-10 group-hover:opacity-20 transition"><i class="fas fa-satellite-dish text-8xl text-fuchsia-500"></i></div>
                <div class="text-fuchsia-600 text-[10px] font-black uppercase tracking-widest mb-1 flex justify-between items-center relative z-10">
                    Tindakan Penganjur
                    <span class="text-[8px] bg-fuchsia-500 text-white px-1.5 py-0.5 rounded opacity-100 transition"><i class="fas fa-bolt"></i> Live AI</span>
                </div>
                <div class="text-2xl font-black text-fuchsia-800 relative z-10 mt-2">Jana KPI AI</div>
                <div class="text-[10px] text-fuchsia-600 font-bold mt-1 relative z-10">Tetapkan Sasaran (M&E)</div>
            </div>
            
            <div class="bg-white p-5 rounded-xl shadow-sm border border-slate-200 relative overflow-hidden">
                <div class="absolute -right-4 -bottom-4 opacity-5"><i class="fas fa-bullseye text-8xl text-emerald-500"></i></div>
                <div class="text-slate-400 text-[10px] font-bold uppercase tracking-widest mb-1 relative z-10">Participant Ideas (KPI)</div>
                <div class="text-3xl font-black text-emerald-600 relative z-10">{{ jumlah_idea_kpi }}</div>
                <div class="text-[10px] text-slate-500 mt-1 font-medium relative z-10">Dicadangkan oleh SME</div>
            </div>
            
            <div class="bg-white p-5 rounded-xl shadow-sm border border-slate-200 relative overflow-hidden">
                <div class="absolute -right-4 -bottom-4 opacity-5"><i class="fas fa-chart-bar text-8xl text-purple-500"></i></div>
                <div class="text-slate-400 text-[10px] font-bold uppercase tracking-widest mb-1 relative z-10">Active KPIs Tracked</div>
                <div class="text-3xl font-black text-purple-600 relative z-10">{{ jumlah_kpi }}</div>
                <div class="text-[10px] text-purple-500 mt-1 font-bold relative z-10">Petunjuk Prestasi Dirangka</div>
            </div>
            
            <div class="bg-gradient-to-br from-fuchsia-50 to-purple-50 p-5 rounded-xl shadow-sm border border-fuchsia-100 cursor-pointer hover:shadow-md transition" onclick="maraKeFasaLapan()">
                <div class="text-fuchsia-800 text-[10px] font-bold uppercase tracking-widest mb-1 flex items-center gap-1.5">
                    Next: Resource Mapping <i class="fas fa-lock-open text-[9px] text-emerald-500"></i>
                </div>
                <div class="text-3xl font-black text-fuchsia-700">Sedia</div>
                <div class="text-[10px] text-fuchsia-500 mt-1 font-bold"><i class="fas fa-arrow-right"></i> Proceed to Allocation</div>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 lg:gap-8 mb-8">
            
            <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-200 radar-bg flex flex-col h-full min-h-[350px]">
                <div class="flex justify-between items-center mb-2 border-b border-slate-100 pb-3">
                    <h3 class="font-bold text-sm text-slate-800"><i class="fas fa-clipboard-check text-fuchsia-500 mr-2"></i> Provider Compliance</h3>
                    <span class="text-[9px] bg-fuchsia-50 text-fuchsia-600 border border-fuchsia-100 font-bold px-2 py-1 rounded uppercase tracking-wider">Proj.</span>
                </div>
                <p class="text-[10px] text-slate-400 mb-4 text-center">API standard compliance rate projection.</p>
                <div class="relative flex-1 w-full flex items-center justify-center">
                    <canvas id="grafCompliance"></canvas>
                </div>
            </div>

            <div class="bg-slate-800 rounded-xl shadow-sm border border-slate-700 overflow-hidden flex flex-col text-white h-full min-h-[350px]">
                <div class="bg-slate-900 p-4 border-b border-slate-700">
                    <h3 class="font-bold text-sm text-slate-200"><i class="fas fa-satellite text-fuchsia-400 mr-2"></i> LKB M&E Engine</h3>
                    <p class="text-[10px] text-slate-400 mt-1">How AI tracks achievements automatically.</p>
                </div>
                <div class="p-6 space-y-6 flex-1 flex flex-col justify-center">
                    <div class="border-l-2 border-fuchsia-400 pl-4">
                        <h4 class="text-xs font-black text-fuchsia-300 uppercase tracking-widest mb-2">Target Setting</h4>
                        <p class="text-[11px] text-slate-300 leading-relaxed">AI membina sasaran pengukuran dengan menyerap {{ jumlah_idea_kpi }} cadangan realistik dari SME bagi mengelakkan KPI yang mustahil.</p>
                    </div>
                    <div class="border-l-2 border-purple-400 pl-4">
                        <h4 class="text-xs font-black text-purple-300 uppercase tracking-widest mb-2">Telemetry Scanning</h4>
                        <p class="text-[11px] text-slate-300 leading-relaxed">Engine continuously pings connected EMR systems to verify PDPA compliance in real-time (Future Capability).</p>
                    </div>
                </div>
            </div>

            <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-200 flex flex-col h-full min-h-[350px]">
                <div class="flex justify-between items-center mb-2 border-b border-slate-100 pb-3">
                    <h3 class="font-bold text-sm text-slate-800"><i class="fas fa-tachometer-alt text-fuchsia-600 mr-2"></i> AI Tools Pipeline</h3>
                    <span class="text-[9px] bg-purple-50 text-purple-600 border border-purple-100 font-bold px-2 py-1 rounded uppercase tracking-wider">Proj.</span>
                </div>
                <p class="text-[10px] text-slate-400 mb-4 text-center">Approval pipeline projection for digital tools.</p>
                <div class="relative flex-1 w-full flex items-center justify-center">
                    <canvas id="grafAITools"></canvas>
                </div>
            </div>

        </div>

        <div class="bg-white p-6 md:p-8 rounded-xl shadow-sm border border-slate-200 w-full mb-8">
            <div class="flex justify-between items-center mb-6 border-b border-slate-100 pb-4">
                <div>
                    <h3 class="font-black text-xl text-slate-800 flex items-center"><i class="fas fa-list-ul text-fuchsia-600 mr-3"></i> AI-Generated KPI Directives</h3>
                    <p class="text-xs text-slate-500 mt-1">Meter Realiti: Perbandingan Cadangan AI lawan Realiti SME Lapangan.</p>
                </div>
                <div class="bg-fuchsia-50 px-3 py-1.5 rounded-lg border border-fuchsia-200 text-fuchsia-800 text-xs font-bold shadow-sm">
                    {{ jumlah_kpi }} Petunjuk Strategik
                </div>
            </div>

            <div class="relative w-full overflow-x-auto custom-scrollbar pb-8 pt-4">
                <div class="absolute top-[36px] left-0 w-[3000px] h-2 bg-slate-100 rounded-full z-0"></div>
                
                <div class="flex gap-6 relative z-10 w-max px-2">
                    {% for kpi in senarai_kpi %}
                    {% cycle 'fuchsia' 'purple' 'pink' as warna silent %}
                    
                    <div class="w-[380px] flex flex-col shrink-0 group">
                        
                        <div class="flex items-center mb-6 relative">
                            <div class="w-12 h-12 bg-white border-4 border-{{ warna }}-500 rounded-full flex items-center justify-center shadow-lg group-hover:scale-125 transition-transform duration-300 relative z-10">
                                <i class="fas fa-bullseye text-{{ warna }}-600"></i>
                            </div>
                            <div class="absolute top-1/2 left-6 h-2 w-[380px] bg-gradient-to-r from-{{ warna }}-500 to-transparent scale-x-0 group-hover:scale-x-100 origin-left transition-transform duration-700 rounded-full -translate-y-1/2 z-0 opacity-40"></div>
                        </div>

                        <div class="bg-white border-2 border-{{ warna }}-100 rounded-2xl p-6 shadow-sm group-hover:shadow-2xl group-hover:border-{{ warna }}-400 group-hover:-translate-y-3 transition-all duration-500 relative overflow-hidden flex flex-col h-full min-h-[400px]">
                            
                            <div class="flex justify-between items-start mb-4">
                                <span class="bg-{{ warna }}-500 text-white font-black px-2 py-1 rounded-md text-[9px] uppercase shadow-md">{{ kpi.action_plan.strategi.fasa }}</span>
                                <div class="text-right">
                                    <div class="text-[8px] font-bold text-slate-400 uppercase mb-1.5 tracking-widest">SME Reality:</div>
                                    <div class="flex gap-0.5 h-1.5 w-24 bg-slate-100 rounded-full overflow-hidden ml-auto">
                                        <div class="bg-emerald-500 w-[60%]" title="60% Setuju"></div>
                                        <div class="bg-rose-500 w-[30%]" title="30% Terlalu Ambitious"></div>
                                        <div class="bg-amber-400 w-[10%]" title="10% Terlalu Rendah"></div>
                                    </div>
                                </div>
                            </div>

                            <h4 class="font-black text-slate-800 text-sm mb-4 leading-snug">{{ kpi.kpi_tajuk }}</h4>

                            <div class="bg-slate-50 border border-slate-100 p-3 rounded-xl mb-4 text-[10px] flex items-center gap-3">
                                <div class="shrink-0 w-8 h-8 bg-white rounded-full flex items-center justify-center border border-slate-200 shadow-sm">
                                    <i class="fas fa-tasks text-{{ warna }}-500"></i>
                                </div>
                                <p class="text-slate-500 leading-tight"><span class="font-bold text-slate-700">Tugas:</span> {{ kpi.action_plan.tajuk|truncatechars:60 }}</p>
                            </div>

                            <div class="flex flex-col justify-between bg-{{ warna }}-900 text-white p-4 rounded-xl shadow-lg mt-auto">
                                <div class="mb-3 border-b border-{{ warna }}-700 pb-3">
                                    <span class="text-[8px] font-bold uppercase tracking-widest text-{{ warna }}-300">Sasaran Rasmi (AI):</span>
                                    <p class="text-base font-black mt-1">{{ kpi.sasaran }}</p>
                                </div>
                                <div class="flex justify-between items-center">
                                    <div>
                                        <span class="text-[8px] font-bold uppercase tracking-widest text-{{ warna }}-300">Kekerapan:</span>
                                        <p class="text-xs font-bold">{{ kpi.kekerapan_ukuran }}</p>
                                    </div>
                                    <div class="text-right">
                                        <span class="text-[8px] font-bold uppercase tracking-widest text-{{ warna }}-300">SME (Munasabah):</span>
                                        <p class="text-xs font-black text-emerald-400">75%</p>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    {% empty %}
                    <div class="py-12 text-center w-full">
                        <i class="fas fa-robot text-4xl text-slate-300 mb-3 block"></i>
                        <p class="text-slate-500 font-bold">Tiada KPI Dijana.</p>
                        <p class="text-xs text-slate-400">Sila tekan butang 'Jana KPI AI' di atas.</p>
                    </div>
                    {% endfor %}
                </div>
            </div>
            
        </div>
    </div>
</div>

<script>
    async function janaIndikatorAI() {
        const btn = document.getElementById('btn-jana-indikator');
        if(!confirm("Arahkan AI mensintesis Pelan Tindakan kepada Petunjuk Prestasi Utama (KPI) sekarang?")) return;
        
        const originalContent = btn.innerHTML;
        btn.innerHTML = `<div class="text-center pt-2"><i class="fas fa-circle-notch fa-spin text-3xl text-fuchsia-500 mb-2"></i><br><span class="text-xs font-bold text-fuchsia-800">AI Menjana Sasaran KPI...</span></div>`;
        btn.style.pointerEvents = "none";

        try {
            const response = await fetch("{% url 'bengkel:jana_indikator_penganjur_ajax' pk=bengkel.pk %}", {
                method: 'POST',
                headers: { 
                    'X-CSRFToken': '{{ csrf_token }}',
                    'Content-Type': 'application/json'
                }
            });
            const data = await response.json();
            
            if(data.success) {
                alert("Berjaya! " + data.mesej);
                location.reload(); 
            } else {
                alert("Ralat AI: " + data.error);
                btn.innerHTML = originalContent;
                btn.style.pointerEvents = "auto";
            }
        } catch (error) {
            alert("Ralat rangkaian.");
            btn.innerHTML = originalContent;
            btn.style.pointerEvents = "auto";
        }
    }

    // Fungsi Gatekeeper Penganjur membuka Langkah 8 (Peruntukan) bagi pihak peserta
    window.maraKeFasaLapan = function() {
        fetch("{% url 'bengkel:unlock_blueprint_step' pk=bengkel.pk %}", {
            method: 'POST',
            headers: { 'X-CSRFToken': '{{ csrf_token }}', 'Content-Type': 'application/json' },
            body: JSON.stringify({ step: 8 })
        })
        .then(() => {
            window.location.href = "{% url 'bengkel:analisis_peruntukan' pk=bengkel.pk %}";
        })
        .catch(err => console.error("Gagal mengemas kini pintu sekatan makro fasa 8: ", err));
    };

    window.onload = () => {
        // Graf Doughnut untuk Compliance
        const grafCompliance = JSON.parse('{{ graf_compliance_json|escapejs }}');
        const ctxCompliance = document.getElementById('grafCompliance').getContext('2d');
        new Chart(ctxCompliance, {
            type: 'doughnut',
            data: {
                labels: ['Fully Compliant', 'Partial (Pending Upgrades)', 'Non-Compliant'],
                datasets: [{
                    data: grafCompliance,
                    backgroundColor: ['rgba(192, 38, 211, 0.8)', 'rgba(147, 51, 234, 0.6)', 'rgba(226, 232, 240, 0.9)'],
                    borderWidth: 2, borderColor: '#ffffff', hoverOffset: 4
                }]
            },
            options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'bottom', labels: { boxWidth: 12, font: { size: 10 } } } }, cutout: '65%' }
        });

        // Graf Bar untuk AI Tools
        const grafSub = JSON.parse('{{ graf_tools_sub_json|escapejs }}');
        const grafApp = JSON.parse('{{ graf_tools_app_json|escapejs }}');
        const ctxAITools = document.getElementById('grafAITools').getContext('2d');
        new Chart(ctxAITools, {
            type: 'bar',
            data: {
                labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
                datasets: [
                    { label: 'Submitted for Review', data: grafSub, backgroundColor: 'rgba(203, 213, 225, 0.6)' },
                    { label: 'Approved Under Framework', data: grafApp, backgroundColor: 'rgba(217, 70, 239, 0.8)' }
                ]
            },
            options: { responsive: true, maintainAspectRatio: false, scales: { y: { beginAtZero: true, grid: { color: '#f1f5f9' } }, x: { grid: { display: false } } }, plugins: { legend: { position: 'top', labels: { boxWidth: 10, font: { size: 10 } } } } }
        });
    };
</script>
{% endblock %}