{% extends "base.html" %}
{% block title %}Analisis Peruntukan — {{ 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 8: Peruntukan Sumber</span>
{% endblock %}

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

<style>
    .radar-bg { background-image: radial-gradient(circle at center, #f8fafc 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-slate-800 via-slate-700 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-slate-500/20 border border-slate-400/30 text-slate-200 text-[10px] font-bold tracking-widest uppercase px-3 py-1 rounded-full mb-3">
                            <i class="fas fa-wallet"></i> Execution Readiness
                        </div>
                        <h1 class="text-2xl md:text-3xl font-extrabold text-white leading-tight">Resource Allocation & Mapping</h1>
                        <p class="text-white/70 text-sm mt-1">AI-driven resource estimation (Financial, Human, Tech) to fund the action plans.</p>
                    </div>
                </div>
                <div class="flex items-center gap-3">
                    <div class="bg-emerald-500/20 border border-emerald-400/30 text-emerald-100 text-xs font-bold px-4 py-2.5 rounded-xl backdrop-blur-sm flex items-center shadow-inner">
                        <i class="fas fa-flag-checkered text-emerald-400 mr-2"></i> Blueprint Cycle Complete
                    </div>
                </div>
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
            <div id="btn-jana-peruntukan" onclick="janaPeruntukanAI()" class="bg-rose-50 p-5 rounded-xl shadow-sm border-2 border-rose-200 cursor-pointer hover:border-rose-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-coins text-8xl text-rose-500"></i></div>
                <div class="text-rose-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-rose-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-rose-800 relative z-10 mt-2">Jana Peruntukan AI</div>
                <div class="text-[10px] text-rose-600 font-bold mt-1 relative z-10">Rangka Keperluan Sumber</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-money-bill-wave text-8xl text-slate-500"></i></div>
                <div class="text-slate-400 text-[10px] font-bold uppercase tracking-widest mb-1 relative z-10">AI Resource Allocations</div>
                <div class="text-3xl font-black text-slate-700 relative z-10">{{ jumlah_peruntukan }}</div>
                <div class="text-[10px] text-slate-500 font-bold mt-1 relative z-10">Anggaran Sumber Dirangka AI</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-hand-holding-usd text-8xl text-blue-500"></i></div>
                <div class="text-slate-400 text-[10px] font-bold uppercase tracking-widest mb-1 relative z-10">Participant SME Ideas</div>
                <div class="text-3xl font-black text-blue-600 relative z-10">{{ jumlah_idea_sumber }}</div>
                <div class="text-[10px] text-slate-500 mt-1 font-medium relative z-10">Cadangan Sumber Diterima</div>
            </div>
            
            <div class="bg-gradient-to-br from-emerald-50 to-teal-50 p-5 rounded-xl shadow-sm border border-emerald-200 cursor-pointer hover:shadow-md transition" onclick="window.location.href='{% url 'bengkel:laporan_eksekutif' pk=bengkel.pk %}'">
                <div class="text-emerald-800 text-[10px] font-bold uppercase tracking-widest mb-1">Grand Finale</div>
                <div class="text-2xl font-black text-emerald-700 mt-1">Laporan Penuh</div>
                <div class="text-[10px] text-emerald-600 mt-2 font-bold"><i class="fas fa-file-pdf mr-1"></i> Lihat Laporan Eksekutif Blueprint</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-[380px]">
                <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-chart-pie text-slate-500 mr-2"></i> Taburan Kategori Sumber</h3>
                    <span class="text-[9px] bg-slate-100 text-slate-600 border border-slate-200 font-bold px-2 py-1 rounded uppercase tracking-wider">Live</span>
                </div>
                <p class="text-[10px] text-slate-400 mb-4 text-center">Nisbah keperluan jenis sumber mengikut pelan tindakan.</p>
                <div class="relative flex-1 w-full flex items-center justify-center">
                    <canvas id="grafKategoriSumber"></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-[380px]">
                <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-coins text-rose-400 mr-2"></i> LKB Projection Engine</h3>
                    <p class="text-[10px] text-slate-400 mt-1">Sintesis keperluan sumber berasaskan input SME.</p>
                </div>
                <div class="p-6 space-y-6 flex-1 flex flex-col justify-center">
                    <div class="border-l-2 border-rose-400 pl-4">
                        <h4 class="text-xs font-black text-rose-300 uppercase tracking-widest mb-2">Demand-Based Synthesis</h4>
                        <p class="text-[11px] text-slate-300 leading-relaxed">AI mengambil kira {{ jumlah_idea_sumber }} data "DNA" dari peserta untuk memberikan profil skala (Besar/Kecil) yang realistik, bukan sekadar teori bajet.</p>
                    </div>
                    <div class="border-l-2 border-slate-400 pl-4">
                        <h4 class="text-xs font-black text-slate-300 uppercase tracking-widest mb-2">Resource Categorization</h4>
                        <p class="text-[11px] text-slate-300 leading-relaxed">Memecahkan keperluan kepada Kewangan (Bajet), Tenaga Manusia, Teknologi, atau Fasiliti untuk memudahkan perundingan bersama MOF/JPA.</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-[380px]">
                <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-chart-line text-slate-600 mr-2"></i> Resource Intensity Mapping</h3>
                    <span class="text-[9px] bg-slate-100 text-slate-600 border border-slate-200 font-bold px-2 py-1 rounded uppercase tracking-wider">Projection</span>
                </div>
                <p class="text-[10px] text-slate-400 mb-4 text-center">Unjuran beban sumber (CAPEX/OPEX) merentas fasa.</p>
                <div class="relative flex-1 w-full flex items-center justify-center">
                    <canvas id="grafPhases"></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-cubes text-rose-600 mr-3"></i> AI Resource Allocations by Phase</h3>
                    <p class="text-xs text-slate-500 mt-1">Meter Realiti Bajet: Konsensus pakar lapangan terhadap profil peruntukan AI.</p>
                </div>
                <div class="bg-rose-50 px-3 py-1.5 rounded-lg border border-rose-200 text-rose-800 text-xs font-bold shadow-sm">
                    {{ jumlah_peruntukan }} Profil Peruntukan
                </div>
            </div>

            {% if jumlah_peruntukan > 0 %}
            <div class="relative w-full overflow-x-auto custom-scrollbar pb-8 pt-4">
                <div class="absolute top-[36px] left-0 w-[4000px] h-2 bg-slate-100 rounded-full z-0"></div>
                
                <div class="flex gap-6 relative z-10 w-max px-2">
                    {% for strategi in senarai_strategi %}
                    {% cycle 'rose' 'pink' 'orange' 'amber' as warna silent %}
                        
                        {% for ap in strategi.action_plans.all %}
                        <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-coins 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-[450px]">
                                
                                <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">{{ strategi.fasa }}</span>
                                    <div class="text-right">
                                        <div class="text-[8px] font-bold text-slate-400 uppercase mb-1.5 tracking-widest">SME Reality Check:</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-[70%]" title="70% Bersetuju"></div>
                                            <div class="bg-rose-500 w-[20%]" title="20% Terlalu Tinggi"></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"><span class="text-slate-400 text-xs font-medium block mb-1">Tugasan:</span> {{ ap.tajuk }}</h4>

                                <div class="flex-1">
                                    {% for alloc in ap.allocations.all %}
                                    <div class="p-3 rounded-xl bg-{{ warna }}-50/50 border border-{{ warna }}-100 mb-3 relative group/alloc">
                                        <div class="flex justify-between items-center mb-2">
                                            <span class="text-[8px] font-black text-{{ warna }}-600 uppercase tracking-widest">Unjuran AI:</span>
                                            
                                            <div class="flex items-center gap-2">
                                                <button onclick="murnikanPeruntukan(this, '{{ alloc.id }}')" class="bg-white border border-{{ warna }}-300 hover:bg-{{ warna }}-100 text-{{ warna }}-700 text-[8px] font-bold px-2 py-0.5 rounded shadow-sm transition flex items-center">
                                                    <i class="fas fa-magic mr-1"></i> Refine
                                                </button>
                                                <span class="bg-white border border-{{ warna }}-200 text-{{ warna }}-700 text-[8px] font-bold px-1.5 py-0.5 rounded shadow-sm">{{ alloc.kategori_sumber }}</span>
                                            </div>
                                        </div>
                                        <p class="text-sm font-black text-slate-800 mb-1">{{ alloc.anggaran_keperluan }}</p>
                                        <p class="text-[10px] text-slate-500 italic leading-tight">{{ alloc.justifikasi|truncatechars:100 }}</p>
                                    </div>
                                    {% endfor %}
                                </div>

                                {% if ap.allocation_ideas.all %}
                                <div class="bg-slate-50 p-3 rounded-xl border border-slate-100 text-[9px] mt-auto">
                                    <strong class="text-slate-700 block mb-2 uppercase tracking-widest text-[8px]"><i class="fas fa-users mr-1"></i> Idea Sumber Dari SME:</strong>
                                    <ul class="space-y-1 text-slate-500">
                                        {% for idea in ap.allocation_ideas.all|slice:":2" %}
                                        <li class="flex gap-2 items-start italic">
                                            <i class="fas fa-comment-dots text-slate-300 mt-0.5"></i>
                                            <span>"{{ idea.idea_sumber|truncatechars:50 }}"</span>
                                        </li>
                                        {% endfor %}
                                    </ul>
                                </div>
                                {% endif %}

                            </div>
                        </div>
                        {% endfor %}
                        
                    {% endfor %}
                </div>
            </div>
            {% else %}
            <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 Peruntukan Dijana.</p>
                <p class="text-xs text-slate-400">Sila tekan butang 'Jana Peruntukan AI' di atas.</p>
            </div>
            {% endif %}
            
        </div>
    </div>
</div>

<script>
    async function janaPeruntukanAI() {
        const btn = document.getElementById('btn-jana-peruntukan');
        if(!confirm("Arahkan AI merangka peruntukan sumber (kewangan, manusia, teknologi) bagi setiap Pelan Tindakan 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-rose-500 mb-2"></i><br><span class="text-xs font-bold text-rose-800">AI Merangka Sumber...</span></div>`;
        btn.style.pointerEvents = "none";

        try {
            const response = await fetch("{% url 'bengkel:jana_peruntukan_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";
        }
    }

    // 3. CHART JS FUNCTIONS
        window.onload = () => {
            // Graf Donut Kategori Sumber
            const grafLabels = JSON.parse('{{ kategori_labels_json|escapejs }}');
            const grafData = JSON.parse('{{ kategori_data_json|escapejs }}');

            const ctxKategori = document.getElementById('grafKategoriSumber').getContext('2d');
            new Chart(ctxKategori, {
                type: 'doughnut',
                data: {
                    labels: grafLabels,
                    datasets: [{
                        data: grafData,
                        backgroundColor: [
                            'rgba(148, 163, 184, 0.9)', // Slate
                            'rgba(59, 130, 246, 0.8)',  // Blue
                            'rgba(16, 185, 129, 0.8)',  // Emerald
                            'rgba(244, 63, 94, 0.8)'    // Rose
                        ],
                        borderWidth: 2, borderColor: '#ffffff', hoverOffset: 4
                    }]
                },
                options: { responsive: true, maintainAspectRatio: false, cutout: '60%', plugins: { legend: { position: 'bottom', labels: { boxWidth: 12, font: { size: 10 } } } } }
            });

            // --- GRAF BAR CAPEX & OPEX (DIKEMBALIKAN) ---
            const phasesLabels = JSON.parse('{{ graf_phases_labels_json|escapejs }}');
            const capexData = JSON.parse('{{ graf_capex_json|escapejs }}');
            const opexData = JSON.parse('{{ graf_opex_json|escapejs }}');

            const ctxPhases = document.getElementById('grafPhases').getContext('2d');
            new Chart(ctxPhases, {
                type: 'bar',
                data: {
                    labels: phasesLabels,
                    datasets: [
                        { label: 'CAPEX Projection', data: capexData, backgroundColor: 'rgba(51, 65, 85, 0.9)' },
                        { label: 'OPEX Projection', data: opexData, backgroundColor: 'rgba(148, 163, 184, 0.7)' }
                    ]
                },
                options: {
                    responsive: true, maintainAspectRatio: false,
                    scales: {
                        y: { stacked: true, grid: { color: '#f1f5f9' }, title: {display: true, text: 'RM Juta (Anggaran)', font: {size: 10}} },
                        x: { stacked: true, grid: { display: false }, ticks: {font: {weight: 'bold'}} }
                    },
                    plugins: { legend: { position: 'top', labels: { boxWidth: 10, font: { size: 10 } } } }
                }
            });
        };

        async function murnikanPeruntukan(btn, allocId) {
        if(!confirm("Arahkan AI menyerap bantahan/cadangan SME dan menulis semula anggaran sumber ini?")) return;
        
        const originalHTML = btn.innerHTML;
        btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i> Upg...';
        btn.disabled = true;

        try {
            const response = await fetch("{% url 'bengkel:murnikan_peruntukan_ai_ajax' pk=bengkel.pk %}", {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'X-CSRFToken': '{{ csrf_token }}' },
                body: JSON.stringify({ 'alloc_id': allocId })
            });
            const data = await response.json();
            
            if(data.success) {
                alert("Profil peruntukan berjaya dimurnikan!");
                location.reload(); 
            } else {
                alert("Info: " + data.error);
                btn.innerHTML = originalHTML;
                btn.disabled = false;
            }
        } catch (error) {
            alert("Ralat rangkaian.");
            btn.innerHTML = originalHTML;
            btn.disabled = false;
        }
    }
</script>
{% endblock %}