{% extends "base.html" %}
{% load i18n %}
{% load bengkel_tags %}
{% block title %}{% trans "Analisis Punca (RCA)" %} — {{ 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">4. Analisis Punca (RCA)</span>
{% endblock %}

{% block content %}
<style>
    .ai-processing-bg { background: linear-gradient(270deg, #fffbeb, #fef3c7, #fffbeb); 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">{% 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-amber-500"></div>
            <div class="inline-flex items-center gap-1.5 bg-amber-50 border border-amber-200 text-amber-600 text-[10px] font-bold tracking-widest uppercase px-3 py-1 rounded-full mb-4">
                <i class="fas fa-sitemap"></i> Node 4: Analisis Punca (RCA)
            </div>
            <h2 class="text-xl md:text-2xl font-black text-slate-800 mb-2">Laksanakan Root Cause Analysis</h2>
            <p class="text-sm text-slate-500 max-w-3xl">Pilih salah satu Pernyataan Masalah AI. Kemudian, gunakan rangka kerja RCA pilihan anda untuk menggali punca sebenar yang menyebabkan masalah tersebut.</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">
                {% if not bengkel.is_locked %}
                <form id="form-rca" onsubmit="hantarRCA(event)">
                    <div class="mb-6 bg-slate-50 p-4 rounded-xl border border-slate-200">
                        <label class="block text-xs font-bold text-slate-700 mb-2"><i class="fas fa-bullseye text-rose-500 mr-1"></i> Sasaran Pernyataan Masalah <span class="text-rose-500">*</span></label>
                        <select id="input-ps" required class="w-full bg-white border border-slate-300 rounded-lg px-3 py-2.5 text-sm font-medium focus:outline-none focus:border-amber-500 focus:ring-1 focus:ring-amber-500 text-slate-700">
                            <option value="" disabled selected>Pilih masalah utama untuk dianalisis...</option>
                            
                            {% if senarai_master %}
                                {% for ps in senarai_master %}
                                    <option value="PS-0{{ forloop.counter }}: {{ ps.skop }}">
                                        PS-0{{ forloop.counter }}: {{ ps.masalah_utama }}
                                    </option>
                                {% endfor %}
                            {% else %}
                                <option value="" disabled>Tiada Pernyataan Masalah ditemui. Minta penganjur jana dahulu.</option>
                            {% endif %}
                            
                        </select>
                    </div>

                    <div class="flex justify-between items-center mb-4 border-b border-slate-100 pb-3">
                        <h3 class="font-bold text-sm text-slate-800 flex items-center"><i class="fas fa-tools text-amber-500 mr-2"></i> Pilih Metodologi RCA</h3>
                    </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_rca" value="ishikawa" class="peer sr-only" onchange="tukarBorangRCA('ishikawa')" checked>
                            <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-fish 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">Ishikawa</div>
                            </div>
                        </label>
                        <label class="cursor-pointer group">
                            <input type="radio" name="framework_rca" value="5whys" class="peer sr-only" onchange="tukarBorangRCA('5whys')">
                            <div class="text-center p-3 rounded-xl border-2 border-slate-200 peer-checked:bg-orange-50 peer-checked:border-orange-500 transition-all hover:bg-slate-50">
                                <i class="fas fa-question-circle text-xl mb-1 text-slate-400 peer-checked:text-orange-500"></i>
                                <div class="text-xs font-black text-slate-600 peer-checked:text-orange-700">5-Whys</div>
                            </div>
                        </label>
                        <label class="cursor-pointer group">
                            <input type="radio" name="framework_rca" value="fmea" class="peer sr-only" onchange="tukarBorangRCA('fmea')">
                            <div class="text-center p-3 rounded-xl border-2 border-slate-200 peer-checked:bg-indigo-50 peer-checked:border-indigo-500 transition-all hover:bg-slate-50">
                                <i class="fas fa-clipboard-list text-xl mb-1 text-slate-400 peer-checked:text-indigo-500"></i>
                                <div class="text-xs font-black text-slate-600 peer-checked:text-indigo-700">FMEA</div>
                            </div>
                        </label>
                        <label class="cursor-pointer group">
                            <input type="radio" name="framework_rca" value="fta" class="peer sr-only" onchange="tukarBorangRCA('fta')">
                            <div class="text-center p-3 rounded-xl border-2 border-slate-200 peer-checked:bg-teal-50 peer-checked:border-teal-500 transition-all hover:bg-slate-50">
                                <i class="fas fa-project-diagram text-xl mb-1 text-slate-400 peer-checked:text-teal-500"></i>
                                <div class="text-xs font-black text-slate-600 peer-checked:text-teal-700">FTA</div>
                            </div>
                        </label>
                    </div>

                    <div id="ruang-input-rca" class="space-y-4 mb-6"></div>

                    <button type="submit" id="btn-submit-rca" class="w-full bg-amber-500 text-white text-sm font-bold py-3 rounded-xl shadow-sm hover:bg-amber-600 transition flex items-center justify-center">
                        <i class="fas fa-paper-plane mr-2"></i> Hantar RCA ke Enjin AI
                    </button>
                </form>
                {% else %}
                <div class="bg-amber-50/50 border border-amber-200 rounded-xl p-5 text-center">
                    <i class="fas fa-lock text-amber-500 text-2xl mb-2"></i>
                    <p class="text-xs font-black text-amber-800">Sesi Penghantaran RCA Ditutup</p>
                    <p class="text-[10px] text-amber-600 mt-1">Acara telah ditamatkan oleh penganjur. Anda berada dalam mod baca 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-amber-500 mr-2"></i> Log RCA 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-rca">{{ rca_list|length }}</span> Rekod</span>
                    </div>
                    <div class="flex gap-2">
                        <button type="button" onclick="pindahMukaRCA(-1)" class="w-8 h-8 rounded-xl bg-white border border-slate-200 text-slate-500 hover:bg-amber-50 hover:text-amber-600 hover:border-amber-200 transition flex items-center justify-center disabled:opacity-30 disabled:cursor-not-allowed shadow-sm" id="btn-prev-r"><i class="fas fa-chevron-left text-xs"></i></button>
                        <span id="page-info-r" class="text-xs font-bold text-amber-600 flex items-center px-2 bg-amber-50 rounded-xl border border-amber-100">1/1</span>
                        <button type="button" onclick="pindahMukaRCA(1)" class="w-8 h-8 rounded-xl bg-white border border-slate-200 text-slate-500 hover:bg-amber-50 hover:text-amber-600 hover:border-amber-200 transition flex items-center justify-center disabled:opacity-30 disabled:cursor-not-allowed shadow-sm" id="btn-next-r"><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-rca">
                    {% if rca_list %}
                        {% for rca in rca_list %}
                        <div class="kad-rca-item bg-white border border-slate-200 rounded-xl p-4 relative shadow-sm animate-fade-up">
                            <div class="inline-block bg-slate-100 text-slate-600 px-2 py-0.5 rounded text-[9px] font-bold mb-2 border border-slate-200">Sasaran: {{ rca.masalah }}</div>
                            <p class="text-xs text-slate-800 font-bold mb-1">{{ rca.punca_utama }}</p>
                            <p class="text-[10px] text-slate-500 whitespace-pre-line leading-relaxed">{{ rca.punca_penyumbang }}</p>
                            <div class="mt-3 pt-2 border-t border-slate-100 flex items-center gap-2">
                                <i class="fas fa-check-circle text-emerald-500 text-xs"></i>
                                <span class="text-[9px] text-emerald-600 font-bold">Disahkan AI</span>
                            </div>
                        </div>
                        {% endfor %}
                    {% else %}
                        <div id="rca-kosong" class="text-center py-12 border-2 border-dashed border-slate-200 rounded-xl kad-rca-item hidden">
                            <i class="fas fa-inbox text-4xl text-slate-300 mb-3"></i>
                            <p class="text-xs text-slate-400">Belum ada RCA direkodkan.<br>Pilih masalah dan mula analisis.</p>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

<script>
    // LOGIK PAGINASI DINAMIK KAD RCA (PESERTA)
    let currentRPage = 0;
    const cardsPerRPage = 3; // Papar 3 rekod RCA serentak ke bawah

    function kemaskiniPaginasiRCA() {
        const allRCards = document.querySelectorAll('.kad-rca-item:not(#rca-kosong)');
        let totalRPages = Math.ceil(allRCards.length / cardsPerRPage);
        if (totalRPages === 0) totalRPages = 1;
        
        if (currentRPage >= totalRPages) currentRPage = totalRPages - 1;
        if (currentRPage < 0) currentRPage = 0;

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

    function pindahMukaRCA(arah) {
        const allRCards = document.querySelectorAll('.kad-rca-item:not(#rca-kosong)');
        let totalRPages = Math.ceil(allRCards.length / cardsPerRPage);
        if (totalRPages === 0) totalRPages = 1;

        currentRPage += arah;
        if(currentRPage < 0) currentRPage = 0;
        if(currentRPage >= totalRPages) currentRPage = totalRPages - 1;
        kemaskiniPaginasiRCA();
    }

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

    <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_situational' pk=bengkel.pk %}" class="bg-green-600 hover:bg-green-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: Analisis Situasi
        </a>
        
        {% if bengkel.spaf_current_step >= 5 %}
        <button id="btn-next-step" onclick="window.location.href='{% url 'bengkel:peserta_rca_validation' pk=bengkel.pk %}'" 
            class="bg-emerald-600 hover:bg-emerald-700 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 rca_list and not bengkel.is_locked %}disabled{% endif %}>
            Seterusnya: Pengesahan Punca <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 5
        </button>
        {% endif %}
    </div>

    <script>
        let rcaCount = 0; let skorSekarang = {% kira_skor_peserta request.user bengkel %};
        const rcaConfig = {
            'ishikawa': { color: 'amber', icon: 'fa-fish', fields: [ { name: 'Teknologi / Sistem', desc: 'Sistem sangkut, bug perisian' }, { name: 'Proses / Polisi', desc: 'SOP lapuk, kerenah birokrasi' }, { name: 'Manusia / Budaya', desc: 'Kurang latihan, penolakan sistem' }, { name: 'Persekitaran', desc: 'Infrastruktur fizikal, pelayan' } ] },
            '5whys': { color: 'orange', icon: 'fa-question-circle', fields: [ { name: 'Kenapa #1?', desc: 'Kenapa masalah ini berlaku?' }, { name: 'Kenapa #2?', desc: 'Kenapa punca #1 terjadi?' }, { name: 'Kenapa #3?', desc: 'Terus menggali punca...' }, { name: 'Kenapa #4?', desc: 'Gali lagi...' }, { name: 'Kenapa #5?', desc: 'Punca dasar sebenar.' } ] },
            'fmea': { color: 'indigo', icon: 'fa-clipboard-list', fields: [ { name: 'Mod Kegagalan', desc: 'Bagaimana sistem boleh gagal?' }, { name: 'Kesan Berpotensi', desc: 'Apa impak kepada pesakit/agensi?' }, { name: 'Kawalan Semasa', desc: 'Cara kita halang sekarang?' } ] },
            'fta': { color: 'teal', icon: 'fa-project-diagram', fields: [ { name: 'Kejadian Atas', desc: 'Definisi kegagalan kritikal' }, { name: 'Kejadian Asas 1', desc: 'Syarat pertama kegagalan' }, { name: 'Kejadian Asas 2', desc: 'Syarat kedua kegagalan' } ] }
        };

        function tukarBorangRCA(jenis) {
            const container = document.getElementById('ruang-input-rca'); const config = rcaConfig[jenis]; let html = '';
            config.fields.forEach((field, index) => {
                let isRequired = (jenis === '5whys' && index < 3) ? 'required' : (jenis !== '5whys' ? 'required' : '');
                html += `<div class="fade-in"><label class="block text-xs font-bold text-slate-700 mb-1 flex justify-between items-end"><span>${field.name} ${isRequired ? '<span class="text-rose-500">*</span>' : ''}</span><span class="text-[9px] font-normal text-slate-400">${field.desc}</span></label><input type="text" ${isRequired} class="w-full bg-slate-50 border border-slate-200 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:border-${config.color}-500 focus:ring-1 focus:ring-${config.color}-500 text-slate-700 input-rca" data-label="${field.name}" placeholder="..."></div>`;
            });
            container.innerHTML = html;
        }

        function hantarRCA(event) {
            event.preventDefault();
            const targetPS = document.getElementById('input-ps').value; 
            const btn = document.getElementById('btn-submit-rca');
            const rcaTerpilih = document.querySelector('input[name="framework_rca"]:checked').value;
            const configT = rcaConfig[rcaTerpilih]; 
            const warna = configT.color;
            const inputs = document.querySelectorAll('.input-rca'); 
            
            let dataHtml = ''; 
            let validCount = 0;
            let inputValues = []; // Array untuk hantar ke Backend

            inputs.forEach(input => { 
                if(input.value.trim() !== '') { 
                    validCount++; 
                    inputValues.push({ label: input.getAttribute('data-label'), value: input.value });
                    
                    if(validCount <= 2) { 
                        dataHtml += `<div class="text-xs mb-1"><span class="font-bold text-slate-800">${input.getAttribute('data-label')}:</span> <span class="text-slate-600">${input.value}</span></div>`; 
                    } 
                } 
            });

            if(inputValues.length === 0) return alert("{% trans 'Sila isi sekurang-kurangnya satu punca.' %}");

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

            // HANTAR AJAX KE BACKEND
            fetch("{% url 'bengkel:simpan_rca_ajax' pk=bengkel.pk %}", {
                method: 'POST',
                headers: {
                    'X-CSRFToken': '{{ csrf_token }}',
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    masalah: targetPS,
                    framework: rcaTerpilih,
                    inputs: inputValues
                })
            })
            .then(res => res.json())
            .then(data => {
                if(data.success) {
                    // JIKA AI KESAN SEBAGAI SAMPAH (TENDANG KELUAR)
                    if(data.status === "spam") {
                        alert("Analisis punca anda ditolak oleh AI kerana ia berbentuk teks rawak atau tidak berkaitan (spam). Sila berikan punca yang munasabah.");
                        return;
                    }

                    rcaCount++; 
                    document.getElementById('rca-kosong')?.remove();
                    
                    const btnNext = document.getElementById('btn-next-step');
                    if (btnNext) {
                        btnNext.disabled = false;
                    }
                    
                    const senarai = document.getElementById('senarai-rca'); 
                    const kadBaru = document.createElement('div');
                    kadBaru.className = `kad-rca-item border border-${warna}-200 rounded-xl p-4 relative ai-processing-bg transition-colors duration-1000 animate-fade-up`;
                    
                    // UI Kad Baharu beserta Lencana Markah
                    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"><i class="fas ${configT.icon} mr-1"></i> ${rcaTerpilih}</div>
                        <div class="inline-block bg-slate-100 text-slate-600 px-2 py-0.5 rounded text-[9px] font-bold mb-2 border border-slate-200">Sasaran: ${targetPS.substring(0, 30)}...</div>
                        <div class="mt-2 bg-white/50 p-2 rounded border border-${warna}-100">
                            ${dataHtml} ${validCount > 2 ? `<div class="text-[9px] text-slate-400 italic mt-1">+ ${validCount - 2} lagi berjaya dipeta</div>` : ''}
                        </div>
                        <div class="mt-3 pt-3 border-t border-slate-200 flex items-center justify-between" id="ai-status-rca-${rcaCount}">
                            <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-rca').innerText = rcaCount;
                    
                    currentRPage = 0; 
                    if (typeof kemaskiniPaginasiRCA === "function") kemaskiniPaginasiRCA();

                    document.getElementById('input-ps').value = ''; 
                    inputs.forEach(input => input.value = '');

                    // Animasi Skor Dinamik 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-${warna}-200`); 
                        kadBaru.classList.add('bg-white', 'border-slate-200', 'hover:border-slate-300'); 
                    }, 1000);
                } else {
                    alert("Gagal menyimpan RCA: " + data.error);
                }
            })
            .catch(err => {
                console.error("Ralat JS/Network dikesan pada RCA:", err);
                alert("{% trans 'Ralat Rangkaian/Sistem dikesan. Sila muat semula halaman.' %}");
            })
            .finally(() => {
                btn.innerHTML = '<i class="fas fa-paper-plane mr-2"></i> {% trans "Hantar RCA ke Enjin AI" %}'; 
                btn.disabled = false;
                btn.classList.replace('bg-slate-400', 'bg-amber-500'); 
                btn.classList.replace('hover:bg-slate-400', 'hover:bg-amber-600');
            });
        }
        window.onload = () => { 
            tukarBorangRCA('ishikawa'); 
            
            // Logik buka kunci jika data sudah wujud atau bengkel dikunci
            rcaCount = parseInt("{{ rca_list|length|default:0 }}");
            if(rcaCount > 0 || "{{ bengkel.is_locked }}" === "True") document.getElementById('btn-next-step').disabled = false;
        };
    </script>
{% endblock %}