{% extends "base.html" %}
{% load i18n %}
{% load bengkel_tags %}

{% block title %}{% trans "Analisis Situasi" %} — {{ bengkel.title }}{% endblock %}

{% block breadcrumb %}
    <a href="{% url 'bengkel:dashboard' %}?tab=bengkel" class="text-blue-600 hover:underline text-xs font-bold">Laman Utama Peserta</a> <span class="mx-2 text-slate-400">/</span>
    <a href="{% url 'bengkel:peserta_lobi' pk=bengkel.pk %}" class="text-blue-600 hover:underline text-xs font-bold">Lobi Acara</a> <span class="mx-2 text-slate-400">/</span>
    <a href="{% url 'bengkel:peserta_overview' pk=bengkel.pk %}" class="text-blue-600 hover:underline text-xs font-bold">Peta Perjalanan Blueprint</a> <span class="mx-2 text-slate-400">/</span>
    <a href="{% url 'bengkel:peserta_spaf' pk=bengkel.pk %}" class="text-blue-600 hover:underline text-xs font-bold">Hab Tugasan SPAF</a> <span class="mx-2 text-slate-400">/</span>
    <span class="text-slate-500 font-medium text-xs">3. Analisis Situasi</span>
{% endblock %}

{% block content %}
<style>
    .ai-processing-bg { background: linear-gradient(270deg, #eff6ff, #dbeafe, #eff6ff); background-size: 200% 200%; animation: AIProcessing 3s ease infinite; }
    @keyframes AIProcessing { 0% {background-position: 0% 50%} 50% {background-position: 100% 50%} 100% {background-position: 0% 50%} }
    .fade-in { animation: fadeIn 0.4s ease-in-out; }
    @keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
</style>

<div class="animate-fade-up">
    <div class="bg-gradient-to-r from-blue-900 via-indigo-900 to-slate-900 shadow-lg relative z-20 rounded-3xl mb-8 overflow-hidden border border-slate-800">
        <div class="absolute inset-0 opacity-10" style="background-image:radial-gradient(rgba(255,255,255,.2) 1px,transparent 1px);background-size:20px 20px;"></div>
        <div class="px-6 py-5 relative flex flex-col sm:flex-row sm:items-center justify-between gap-6">
            <div class="flex items-center gap-4">
                <a href="{% url 'bengkel:peserta_spaf' 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 Hab SPAF">
                    <i class="fas fa-arrow-left"></i>
                </a>
                <div class="border-l border-white/20 pl-4 flex items-center gap-3">
                    <div class="w-10 h-10 rounded-full bg-white text-blue-900 flex items-center justify-center font-black text-xl shadow-md border-2 border-blue-300 uppercase shrink-0">
                        {{ user.first_name|first|default:user.username|first }}
                    </div>
                    <div>
                        <h1 class="text-xl font-black text-white tracking-wide">{{ user.get_full_name|default:user.username }}</h1>
                        <p class="text-indigo-200 text-xs mt-0.5 font-medium uppercase tracking-widest">SME Workspace • {{ bengkel.title }}</p>
                    </div>
                </div>
            </div>
            <div class="flex items-center gap-6 self-start sm:self-auto">
                <div class="text-left sm:text-right">
                    <div class="text-[10px] text-emerald-300 font-bold uppercase tracking-widest mb-0.5">Skor Sumbangan</div>
                    <div class="text-2xl font-black text-emerald-400 leading-none transition-all duration-500" id="skor-peserta">{% load bengkel_tags %}{% kira_skor_peserta request.user bengkel %} <span class="text-sm text-white/50">pts</span></div>
                </div>
            </div>
        </div>
    </div>

    <div class="flex flex-col gap-6 mb-8">
        
        <div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-6 md:p-8 relative overflow-hidden">
            <div class="absolute top-0 left-0 w-1 h-full bg-blue-500"></div>
            
            <div class="inline-flex items-center gap-1.5 bg-blue-50 border border-blue-200 text-blue-600 text-[10px] font-bold tracking-widest uppercase px-3 py-1 rounded-full mb-4">
                <i class="fas fa-globe"></i> Node 3: Pemetaan Situasi
            </div>
            
            <h2 class="text-xl md:text-2xl font-black text-slate-800 mb-2">Imbasan Persekitaran (Keadaan Semasa)</h2>
            <p class="text-sm text-slate-500 max-w-3xl">Analisis persekitaran semasa organisasi anda. Pilih rangka kerja strategik yang paling sesuai dengan kepakaran anda dan berikan konteksnya. AI akan mengagregatkan maklumat ini untuk membina penanda aras "As-Is".</p>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-12 gap-6 items-start">
            
            <div class="lg:col-span-7 bg-white rounded-2xl shadow-sm border border-slate-200 p-6">
                
                <div class="flex justify-between items-center mb-5 border-b border-slate-100 pb-4">
                    <h3 class="font-bold text-sm text-slate-800 flex items-center"><i class="fas fa-tasks text-blue-500 mr-2"></i> Pilih Rangka Kerja</h3>
                    <span class="text-[9px] text-slate-400 font-bold uppercase tracking-widest">Langkah Wajib</span>
                </div>

                <div class="grid grid-cols-2 md:grid-cols-4 gap-3 mb-6">
                    <label class="cursor-pointer group">
                        <input type="radio" name="framework" value="swot" class="peer sr-only" onchange="tukarBorang('swot')" checked>
                        <div class="text-center p-3 rounded-xl border-2 border-slate-200 peer-checked:bg-blue-50 peer-checked:border-blue-500 transition-all hover:bg-slate-50">
                            <i class="fas fa-chart-bar text-xl mb-1 text-slate-400 peer-checked:text-blue-500"></i>
                            <div class="text-xs font-black text-slate-600 peer-checked:text-blue-700">SWOT</div>
                        </div>
                    </label>
                    <label class="cursor-pointer group">
                        <input type="radio" name="framework" value="pestel" class="peer sr-only" onchange="tukarBorang('pestel')">
                        <div class="text-center p-3 rounded-xl border-2 border-slate-200 peer-checked:bg-emerald-50 peer-checked:border-emerald-500 transition-all hover:bg-slate-50">
                            <i class="fas fa-globe text-xl mb-1 text-slate-400 peer-checked:text-emerald-500"></i>
                            <div class="text-xs font-black text-slate-600 peer-checked:text-emerald-700">PESTEL</div>
                        </div>
                    </label>
                    <label class="cursor-pointer group">
                        <input type="radio" name="framework" value="soar" class="peer sr-only" onchange="tukarBorang('soar')">
                        <div class="text-center p-3 rounded-xl border-2 border-slate-200 peer-checked:bg-cyan-50 peer-checked:border-cyan-500 transition-all hover:bg-slate-50">
                            <i class="fas fa-rocket text-xl mb-1 text-slate-400 peer-checked:text-cyan-500"></i>
                            <div class="text-xs font-black text-slate-600 peer-checked:text-cyan-700">SOAR</div>
                        </div>
                    </label>
                    <label class="cursor-pointer group">
                        <input type="radio" name="framework" value="5c" class="peer sr-only" onchange="tukarBorang('5c')">
                        <div class="text-center p-3 rounded-xl border-2 border-slate-200 peer-checked:bg-amber-50 peer-checked:border-amber-500 transition-all hover:bg-slate-50">
                            <i class="fas fa-handshake text-xl mb-1 text-slate-400 peer-checked:text-amber-500"></i>
                            <div class="text-xs font-black text-slate-600 peer-checked:text-amber-700">5C</div>
                        </div>
                    </label>
                </div>

                {% if not bengkel.is_locked %}
                <form id="form-situational" onsubmit="hantarAnalisis(event)">
                    <div id="ruang-input-dinamik" class="space-y-4 mb-6"></div>
                    <button type="submit" id="btn-submit" class="w-full bg-blue-600 text-white text-sm font-bold py-3 rounded-xl shadow-sm hover:bg-blue-700 transition flex items-center justify-center">
                        <i class="fas fa-paper-plane mr-2"></i> Hantar Imbasan ke Enjin AI
                    </button>
                </form>
                {% else %}
                <div id="ruang-input-dinamik" class="space-y-4 mb-6"></div>
                <div class="bg-rose-50/50 border border-rose-100 rounded-xl p-5 text-center">
                    <i class="fas fa-lock text-rose-500 text-xl mb-2"></i>
                    <p class="text-xs font-black text-rose-800">Sesi Penyerahan Ditutup</p>
                    <p class="text-[10px] text-rose-600 mt-1">Sistem di bawah mod paparan arkib sahaja.</p>
                </div>
                {% endif %}
            </div>

            <div class="lg:col-span-5 bg-white rounded-2xl shadow-sm border border-slate-200 flex flex-col h-full overflow-hidden">
                <div class="p-6 border-b border-slate-100 flex flex-col md:flex-row md:justify-between md:items-center gap-4 bg-slate-50/50 shrink-0">
                    <div class="flex items-center gap-3">
                        <h3 class="font-bold text-sm text-slate-800 flex items-center"><i class="fas fa-history text-blue-500 mr-2"></i> Imbasan Saya</h3>
                        <span class="text-[10px] bg-slate-200 text-slate-600 px-2 py-1 rounded font-bold uppercase tracking-wider"><span id="kiraan-scan">0</span> Rekod</span>
                    </div>
                    <!-- Paginasi Peserta -->
                    <div class="flex gap-2">
                        <button type="button" onclick="pindahMukaScan(-1)" class="w-8 h-8 rounded-xl bg-white border border-slate-200 text-slate-500 hover:bg-blue-50 hover:text-blue-600 hover:border-blue-200 transition flex items-center justify-center disabled:opacity-30 disabled:cursor-not-allowed shadow-sm" id="btn-prev-s"><i class="fas fa-chevron-left text-xs"></i></button>
                        <span id="page-info-s" class="text-xs font-bold text-blue-600 flex items-center px-2 bg-blue-50 rounded-xl border border-blue-100">1/1</span>
                        <button type="button" onclick="pindahMukaScan(1)" class="w-8 h-8 rounded-xl bg-white border border-slate-200 text-slate-500 hover:bg-blue-50 hover:text-blue-600 hover:border-blue-200 transition flex items-center justify-center disabled:opacity-30 disabled:cursor-not-allowed shadow-sm" id="btn-next-s"><i class="fas fa-chevron-right text-xs"></i></button>
                    </div>
                </div>
                
                <div class="flex-1 p-6 flex flex-col gap-4 min-h-[350px] content-start" id="senarai-scan">
                    {% if swot_list or pestel_list or soar_list or fivec_list %}
                        {% for item in swot_list %}
                            <div class="kad-scan-item bg-white border border-slate-200 rounded-xl p-4 relative shadow-sm animate-fade-up">
                                <div class="absolute top-4 right-4 text-[9px] font-black uppercase px-2 py-0.5 rounded bg-blue-50 text-blue-600 border border-blue-100">SWOT</div>
                                <h4 class="font-bold text-sm text-slate-700 mb-2">Imbasan Situasi</h4>
                                <p class="text-xs text-slate-600"><strong>Kekuatan:</strong> {{ item.kekuatan|truncatechars:50 }}</p>
                                <p class="text-xs text-slate-600"><strong>Kelemahan:</strong> {{ item.kelemahan|truncatechars:50 }}</p>
                            </div>
                        {% endfor %}
                        
                        {% for item in pestel_list %}
                            <div class="kad-scan-item bg-white border border-slate-200 rounded-xl p-4 relative shadow-sm animate-fade-up">
                                <div class="absolute top-4 right-4 text-[9px] font-black uppercase px-2 py-0.5 rounded bg-emerald-50 text-emerald-600 border border-emerald-100">PESTEL</div>
                                <h4 class="font-bold text-sm text-slate-700 mb-2">Imbasan Situasi</h4>
                                <p class="text-xs text-slate-600"><strong>Politik:</strong> {{ item.politik|truncatechars:50 }}</p>
                                <p class="text-xs text-slate-600"><strong>Teknologi:</strong> {{ item.teknologi|truncatechars:50 }}</p>
                            </div>
                        {% endfor %}
                        
                        {% for item in soar_list %}
                            <div class="kad-scan-item bg-white border border-slate-200 rounded-xl p-4 relative shadow-sm animate-fade-up">
                                <div class="absolute top-4 right-4 text-[9px] font-black uppercase px-2 py-0.5 rounded bg-cyan-50 text-cyan-600 border border-cyan-100">SOAR</div>
                                <h4 class="font-bold text-sm text-slate-700 mb-2">Imbasan Situasi</h4>
                                <p class="text-xs text-slate-600"><strong>Kekuatan:</strong> {{ item.kekuatan|truncatechars:50 }}</p>
                                <p class="text-xs text-slate-600"><strong>Peluang:</strong> {{ item.peluang|truncatechars:50 }}</p>
                            </div>
                        {% endfor %}
                        
                        {% for item in fivec_list %}
                            <div class="kad-scan-item bg-white border border-slate-200 rounded-xl p-4 relative shadow-sm animate-fade-up">
                                <div class="absolute top-4 right-4 text-[9px] font-black uppercase px-2 py-0.5 rounded bg-amber-50 text-amber-600 border border-amber-100">5C</div>
                                <h4 class="font-bold text-sm text-slate-700 mb-2">Imbasan Situasi</h4>
                                <p class="text-xs text-slate-600"><strong>Agensi:</strong> {{ item.syarikat|truncatechars:50 }}</p>
                                <p class="text-xs text-slate-600"><strong>Pelanggan:</strong> {{ item.pelanggan|truncatechars:50 }}</p>
                            </div>
                        {% endfor %}

                        {% else %}
                        <div class="text-center text-slate-400 text-xs py-12 border-2 border-dashed border-slate-200 rounded-xl kad-scan-item hidden" id="mesej-kosong">Belum ada imbasan direkodkan.<br>Mulakan analisis pertama anda!</div>
                    {% endif %}
                </div>
            </div>

<script>
    // LOGIK PAGINASI DINAMIK KAD SCAN (PESERTA)
    let currentSPage = 0;
    const cardsPerSPage = 3; // Papar 3 rekod serentak ke bawah

    function kemaskiniPaginasiScan() {
        const allSCards = document.querySelectorAll('.kad-scan-item:not(#mesej-kosong)');
        let totalSPages = Math.ceil(allSCards.length / cardsPerSPage);
        if (totalSPages === 0) totalSPages = 1;
        
        if (currentSPage >= totalSPages) currentSPage = totalSPages - 1;
        if (currentSPage < 0) currentSPage = 0;

        allSCards.forEach(c => c.style.display = 'none'); 
        
        let mula = currentSPage * cardsPerSPage;
        let tamat = mula + cardsPerSPage;
        
        for(let i=mula; i<tamat && i<allSCards.length; i++) {
            allSCards[i].style.display = 'block'; 
        }
        
        document.getElementById('page-info-s').innerText = `${currentSPage + 1} / ${totalSPages}`;
        document.getElementById('btn-prev-s').disabled = currentSPage === 0;
        document.getElementById('btn-next-s').disabled = currentSPage === totalSPages - 1;
    }

    function pindahMukaScan(arah) {
        const allSCards = document.querySelectorAll('.kad-scan-item:not(#mesej-kosong)');
        let totalSPages = Math.ceil(allSCards.length / cardsPerSPage);
        if (totalSPages === 0) totalSPages = 1;

        currentSPage += arah;
        if(currentSPage < 0) currentSPage = 0;
        if(currentSPage >= totalSPages) currentSPage = totalSPages - 1;
        kemaskiniPaginasiScan();
    }

    window.addEventListener('DOMContentLoaded', () => {
        const mesejKosong = document.getElementById('mesej-kosong');
        const allSCards = document.querySelectorAll('.kad-scan-item:not(#mesej-kosong)');
        
        if(allSCards.length === 0 && mesejKosong) {
            mesejKosong.style.display = 'block';
            document.getElementById('page-info-s').innerText = `1 / 1`;
            document.getElementById('btn-prev-s').disabled = true;
            document.getElementById('btn-next-s').disabled = true;
        } else {
            kemaskiniPaginasiScan();
        }
    });
</script>

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

<div class="mt-8 flex items-center justify-between bg-white p-4 rounded-2xl shadow-sm border border-slate-200">
        <a href="{% url 'bengkel:peserta_problem' pk=bengkel.pk %}" class="bg-amber-600 hover:bg-amber-700 text-white font-bold px-8 py-3 rounded-xl shadow-md transition flex items-center gap-2">
            <i class="fas fa-arrow-left"></i> Kembali: Pernyataan Masalah
        </a>
        
        {% if bengkel.spaf_current_step >= 4 %}
        <button id="btn-next-step" onclick="window.location.href='{% url 'bengkel:peserta_rca' pk=bengkel.pk %}'" 
            class="bg-amber-500 hover:bg-amber-600 text-white font-bold px-8 py-3 rounded-xl shadow-md transition flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed" 
            {% if not swot_list and not pestel_list and not soar_list and not fivec_list and not bengkel.is_locked %}disabled{% endif %}>
            Seterusnya: Analisis Punca (RCA) <i class="fas fa-arrow-right"></i>
        </button>
        {% else %}
        <button disabled class="bg-slate-100 text-slate-400 font-bold px-8 py-3 rounded-xl border border-slate-200 cursor-not-allowed flex items-center gap-2">
            <i class="fas fa-lock"></i> Menunggu Penganjur Membuka Modul 4
        </button>
        {% endif %}
    </div>

<script>
    let scanCount = 0;
    let skorSekarang = {% kira_skor_peserta request.user bengkel %};

    const frameworkConfig = {
        'swot': {
            color: 'blue',
            fields: [
                { id: 'S', name: 'Kekuatan (Strengths)', desc: 'Faktor positif dalaman (cth: Staf terlatih)' },
                { id: 'W', name: 'Kelemahan (Weaknesses)', desc: 'Faktor negatif dalaman (cth: Perisian lapuk)' },
                { id: 'O', name: 'Peluang (Opportunities)', desc: 'Faktor positif luaran (cth: Geran baharu)' },
                { id: 'T', name: 'Ancaman (Threats)', desc: 'Faktor negatif luaran (cth: Serangan siber)' }
            ]
        },
        'pestel': {
            color: 'emerald',
            fields: [
                { id: 'P', name: 'Politikal', desc: 'Dasar kerajaan, pertukaran kepimpinan' },
                { id: 'E', name: 'Ekonomi', desc: 'Dana, inflasi, pemotongan bajet' },
                { id: 'S', name: 'Sosial', desc: 'Trend budaya, demografi staf' },
                { id: 'T', name: 'Teknologi', desc: 'Inovasi, infrastruktur, automasi' },
                { id: 'L', name: 'Perundangan (Legal)', desc: 'PDPA, peraturan kesihatan, pematuhan' },
                { id: 'En', name: 'Alam Sekitar (Environmental)', desc: 'Ruang fizikal, kelestarian' }
            ]
        },
        'soar': {
            color: 'cyan',
            fields: [
                { id: 'S', name: 'Kekuatan (Strengths)', desc: 'Apakah aset terbesar kita?' },
                { id: 'O', name: 'Peluang (Opportunities)', desc: 'Apakah peluang pasaran terbaik?' },
                { id: 'A', name: 'Aspirasi (Aspirations)', desc: 'Apakah masa depan idaman kita?' },
                { id: 'R', name: 'Hasil (Results)', desc: 'Apakah hasil yang boleh diukur?' }
            ]
        },
        '5c': {
            color: 'amber',
            fields: [
                { id: 'C1', name: 'Syarikat/Agensi (Company)', desc: 'Sumber dalaman, keupayaan' },
                { id: 'C2', name: 'Rakan Kerjasama (Collaborators)', desc: 'Rakan kongsi, vendor, pembekal' },
                { id: 'C3', name: 'Pelanggan (Customers)', desc: 'Pesakit, pengguna akhir sistem' },
                { id: 'C4', name: 'Pesaing (Competitors)', desc: 'Penyelesaian alternatif, sektor swasta' },
                { id: 'C5', name: 'Iklim (Climate)', desc: 'Persekitaran kawal selia dan teknologi' }
            ]
        }
    };

    function tukarBorang(jenis) {
        const container = document.getElementById('ruang-input-dinamik');
        const config = frameworkConfig[jenis];
        let html = '';

        config.fields.forEach(field => {
            html += `
                <div class="fade-in">
                    <label class="block text-xs font-bold text-slate-700 mb-1 flex justify-between">
                        <span>${field.name}</span>
                        <span class="text-[9px] font-normal text-slate-400">${field.desc}</span>
                    </label>
                    <textarea required rows="2" class="w-full bg-slate-50 border border-slate-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-${config.color}-500 focus:ring-1 focus:ring-${config.color}-500 text-slate-700 resize-none input-nilai" data-label="${field.name}"></textarea>
                </div>
            `;
        });

        container.innerHTML = html;
    }

    function hantarAnalisis(event) {
        event.preventDefault();

        const btn = document.getElementById('btn-submit');
        const mesejKosong = document.getElementById('mesej-kosong');
        if (mesejKosong) mesejKosong.remove();

        const frameworkTerpilih = document.querySelector('input[name="framework"]:checked').value;
        const configT = frameworkConfig[frameworkTerpilih];
        const warna = configT.color;

        const inputs = document.querySelectorAll('.input-nilai');
        let dataHtml = '';
        let inputValues = []; // Array untuk dihantar ke backend
        
        for(let i=0; i < inputs.length; i++) {
            inputValues.push(inputs[i].value); // Masukkan semua teks
            
            // Paparkan 2 nilai teratas di kad UI
            if(i < 2 && inputs[i].value.trim() !== '') {
                dataHtml += `
                    <div class="text-xs">
                        <span class="font-bold text-slate-800">${inputs[i].getAttribute('data-label')}:</span> <span class="text-slate-600">${inputs[i].value}</span>
                    </div>
                `;
            }
        }

        btn.innerHTML = '<i class="fas fa-circle-notch fa-spin mr-2"></i> {% trans "Menyimpan ke Pangkalan Data..." %}';
        btn.disabled = true;
        btn.classList.replace('bg-blue-600', 'bg-slate-400');
        btn.classList.replace('hover:bg-blue-700', 'hover:bg-slate-400');

        // PANGGILAN AJAX KE BACKEND
        fetch("{% url 'bengkel:simpan_situational_ajax' pk=bengkel.pk %}", {
            method: 'POST',
            headers: {
                'X-CSRFToken': '{{ csrf_token }}',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                jenis: frameworkTerpilih,
                inputs: inputValues
            })
        })
        .then(res => res.json())
        .then(data => {
            if(data.success) {
                // JIKA AI KESAN SEBAGAI SAMPAH
                if(data.status === "spam") {
                    alert("Imbasan anda ditolak oleh AI kerana ia berbentuk teks rawak atau tidak berkaitan (spam). Sila berikan analisis yang munasabah.");
                    return; // Henti paksa, tiada markah, UI tak berubah
                }

                scanCount++;
                
                const btnNext = document.getElementById('btn-next-step');
                if (btnNext) {
                    btnNext.disabled = false; // BUKA KUNCI
                }
                
                const senarai = document.getElementById('senarai-scan');
                const kadBaru = document.createElement('div');
                kadBaru.className = "kad-scan-item border border-blue-200 rounded-xl p-4 relative ai-processing-bg transition-colors duration-1000 animate-fade-up";
                
                kadBaru.innerHTML = `
                    <div class="absolute top-4 right-4 text-[9px] font-black uppercase px-2 py-0.5 rounded bg-${warna}-50 text-${warna}-600 border border-${warna}-100">${frameworkTerpilih.toUpperCase()}</div>
                    <h4 class="font-bold text-sm text-slate-700 mb-2 pr-16">Imbasan Situasi #${scanCount}</h4>
                    
                    <div class="space-y-2 mt-3">
                        ${dataHtml}
                        <div class="text-[10px] text-slate-400 italic">+ elemen penting berjaya dipetakan</div>
                    </div>
                    
                    <div class="mt-4 pt-3 border-t border-slate-200 flex items-center justify-between" id="ai-status-${scanCount}">
                        <div class="flex items-center gap-2">
                            <i class="fas fa-check-circle text-emerald-500 text-xs"></i>
                            <span class="text-[10px] text-emerald-600 font-bold">Disimpan dalam Pangkalan Data</span>
                        </div>
                        <strong class="text-xs text-emerald-600 bg-emerald-50 px-2 py-0.5 rounded border border-emerald-200">+${data.mata_diperoleh} pts</strong>
                    </div>
                `;
                
                senarai.insertBefore(kadBaru, senarai.firstChild);
                document.getElementById('kiraan-scan').innerText = scanCount;

                currentSPage = 0; 
                if (typeof kemaskiniPaginasiScan === "function") kemaskiniPaginasiScan();

                inputs.forEach(input => input.value = '');

                // LOGIK GAMIFIKASI (Tambah mata dari AI)
                const elemenSkor = document.getElementById('skor-peserta');
                elemenSkor.classList.add('text-yellow-400', 'scale-125');
                
                let skorTarget = skorSekarang + data.mata_diperoleh;
                let interval = setInterval(() => {
                    skorSekarang++;
                    elemenSkor.innerHTML = skorSekarang + ' <span class="text-sm text-white/50">pts</span>';
                    if(skorSekarang >= skorTarget) {
                        clearInterval(interval);
                        setTimeout(() => { elemenSkor.classList.remove('text-yellow-400', 'scale-125'); }, 500);
                    }
                }, 40);

                setTimeout(() => {
                    kadBaru.classList.remove('ai-processing-bg', 'border-blue-200');
                    kadBaru.classList.add('bg-white', 'border-slate-200', 'hover:border-slate-300');
                }, 1000);

            } else {
                alert("Gagal menyimpan: " + data.error);
            }
        })
        .catch(err => {
            console.error("Ralat JS/Network dikesan:", err);
            alert("Ralat UI/Rangkaian dikesan. Pelayan mungkin sibuk.");
        })
        .finally(() => {
            btn.innerHTML = '<i class="fas fa-paper-plane mr-2"></i> {% trans "Hantar Imbasan ke Enjin AI" %}';
            btn.disabled = false;
            btn.classList.replace('bg-slate-400', 'bg-blue-600');
            btn.classList.replace('hover:bg-slate-400', 'hover:bg-blue-700');
        });
    }

    window.onload = () => {
        tukarBorang('swot'); // Borang default
        
        // Baca jumlah rekod dari Django context
        const jumlahSediaAda = parseInt("{{ jumlah_hantar|default:0 }}");
        scanCount = jumlahSediaAda;
        document.getElementById('kiraan-scan').innerText = scanCount;

        // Jika sudah pernah hantar, buka kunci butang Seterusnya
        if(scanCount > 0) {
            document.getElementById('btn-next-step').disabled = false;
        }
    };
</script>
{% endblock %}