{% extends "base.html" %}
{% load i18n %}
{% load bengkel_tags %}
{% block title %}{% trans "Pengesahan Teras" %} — {{ 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>
    <span class="text-slate-500 font-medium text-xs">Langkah 4: Pengesahan Teras</span>
{% endblock %}

{% block content %}
<style>
    .voted-card { border-color: #10b981 !important; background-color: #ecfdf5 !important; }
    .voted-btn { background-color: #10b981 !important; color: white !important; border-color: #10b981 !important; }
    .progress-bar-animated { transition: width 1.5s ease-in-out; }
</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_overview' 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">
                    <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">
                <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" 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="bg-white rounded-2xl shadow-sm border border-slate-200 p-6 md:p-8 mb-8 relative overflow-hidden">
        <div class="absolute top-0 left-0 w-1 h-full bg-emerald-500"></div>
        <div class="flex flex-col md:flex-row md:items-start justify-between gap-6 relative z-10">
            <div class="flex-1">
                <div class="inline-flex items-center gap-1.5 bg-emerald-50 border border-emerald-200 text-emerald-600 text-[10px] font-bold tracking-widest uppercase px-3 py-1 rounded-full mb-4">
                    <i class="fas fa-check-double"></i> Node 4: Penilaian Teras Bebas
                </div>
                <h2 class="text-xl md:text-2xl font-black text-slate-800 mb-2">Nilai Teras Strategik AI</h2>
                <p class="text-sm text-slate-500 leading-relaxed">Anda <strong>bebas</strong> untuk menyokong mana-mana teras yang mantap. Jika struktur teras ini pincang atau skopnya tertinggal, gunakan butang <strong>Bantah & Perbetul AI</strong>. Maklum balas anda sangat bernilai dan diberikan ganjaran mata tinggi.</p>
            </div>
            <div class="bg-slate-50 p-4 rounded-xl border border-slate-200 text-center min-w-[180px] shadow-sm">
                <div class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1">Tema Disokong Anda</div>
                <div class="text-3xl font-black text-emerald-600"><span id="kiraan-undi">{{ baki_undi }}</span></div>
            </div>
        </div>
    </div>

    <div class="flex justify-between items-center mb-5 bg-white p-3 rounded-2xl shadow-sm border border-slate-200">
        <h3 class="font-bold text-sm text-slate-500 uppercase tracking-widest px-3">Halaman Eksplorasi Teras</h3>
        <div class="flex gap-2">
            <button onclick="pindahMukaPeserta(-1)" class="w-9 h-9 rounded-xl bg-slate-100 text-slate-500 hover:bg-emerald-100 hover:text-emerald-600 transition flex items-center justify-center disabled:opacity-30 disabled:cursor-not-allowed" id="btn-prev-p"><i class="fas fa-chevron-left"></i></button>
            <span id="page-info-p" class="text-sm font-bold text-emerald-600 flex items-center px-2 bg-emerald-50 rounded-xl border border-emerald-100">1/1</span>
            <button onclick="pindahMukaPeserta(1)" class="w-9 h-9 rounded-xl bg-slate-100 text-slate-500 hover:bg-emerald-100 hover:text-emerald-600 transition flex items-center justify-center disabled:opacity-30 disabled:cursor-not-allowed" id="btn-next-p"><i class="fas fa-chevron-right"></i></button>
        </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-stretch min-h-[350px]">
        {% for p in pillars_data %}
        <div class="kad-peserta bg-white rounded-xl shadow-sm border-2 {% if p.is_voted %}voted-card{% else %}border-slate-200{% endif %} p-6 flex flex-col transition-all duration-300 relative group animate-fade-up" id="kad-pillar-{{ p.id }}">
            <div class="flex justify-between items-center mb-4">
                <div class="flex items-center gap-2">
                    <span class="bg-emerald-100 text-emerald-700 font-black px-2 py-0.5 rounded text-[10px]">TERAS-0{{ p.urutan }}</span>
                    <span class="bg-emerald-100 text-emerald-700 border border-emerald-200 text-[8px] font-bold px-1.5 py-0.5 rounded uppercase tracking-wider animate-pulse"><i class="fas fa-unlock mr-1"></i> Dibuka</span>
                </div>
                <span class="text-[10px] font-bold text-slate-400"><i class="fas fa-users mr-1"></i> <span id="sokong-count-{{ p.id }}" class="text-slate-600">{{ p.total_votes }}</span> Sokongan</span>
            </div>
            <h3 class="font-black text-xl text-slate-800 mb-3">{{ p.teras }}</h3>
            <p class="text-sm text-slate-500 mb-4 flex-1">{{ p.penerangan }}</p>
            
            <div class="mb-6 bg-slate-50 p-3 rounded-lg border border-slate-100">
                <span class="text-[9px] font-black text-slate-400 uppercase tracking-widest block mb-2">Merangkumi Tema AI:</span>
                <div class="flex flex-wrap gap-2">
                    {% for tema_nama in p.tema_list %}
                    <span class="bg-blue-50 text-blue-600 text-[10px] font-bold px-2 py-1 rounded border border-blue-100">{{ tema_nama }}</span>
                    {% endfor %}
                </div>
            </div>

            <div class="flex flex-col gap-2 mt-auto">
                <button id="btn-sokong-{{ p.id }}" 
                        {% if not bengkel.is_locked %}onclick="hantarSokongan('{{ p.id }}')"{% else %}disabled{% endif %} 
                        class="w-full {% if p.is_voted %}voted-btn{% else %}bg-slate-50 text-slate-500{% endif %} font-bold py-2.5 rounded-xl border border-slate-200 {% if not bengkel.is_locked %}hover:border-emerald-300 hover:bg-slate-100 hover:shadow-sm{% else %}cursor-not-allowed{% endif %} transition flex items-center justify-center text-sm">
                    {% if p.is_voted %}
                        <i class="fas fa-check-circle mr-2"></i> Disokong (+2 pts)
                    {% else %}
                        {% if not bengkel.is_locked %}<i class="fas fa-thumbs-up mr-2"></i> Sokong Teras Ini{% else %}<i class="fas fa-lock mr-2"></i> Pengesahan Ditutup{% endif %}
                    {% endif %}
                </button>
                
                {% if not bengkel.is_locked %}
                <div class="grid grid-cols-2 gap-2 mt-1.5">
                    <button type="button" onclick="bukaRuangIdea('{{ p.id }}', false)" class="text-[10px] font-bold text-slate-500 hover:text-emerald-600 bg-white border border-slate-200 py-2 rounded-lg transition shadow-sm hover:shadow flex items-center justify-center">
                        <i class="fas fa-plus mr-1"></i> Tambah Skop
                    </button>
                    <button type="button" onclick="bukaRuangIdea('{{ p.id }}', true)" class="text-[10px] font-bold text-rose-500 hover:text-white hover:bg-rose-500 hover:border-rose-500 bg-rose-50 border border-rose-200 py-2 rounded-lg transition shadow-sm hover:shadow flex items-center justify-center">
                        <i class="fas fa-hand-paper mr-1"></i> Bantah & Perbetul
                    </button>
                </div>
                {% else %}
                <span class="w-full text-center text-[11px] text-slate-400 font-medium italic py-1 mt-1"><i class="fas fa-archive"></i> Pusingan Draf Disahkan</span>
                {% endif %}
                
                <!-- 📜 RUANGAN LOG SUMBANGAN SAYA (Kekal Walaupun Refresh) -->
                <div id="log-idea-box-{{ p.id }}" class="mt-4 pt-3 border-t border-slate-100 space-y-1.5 {% if not p.my_ideas %}hidden{% endif %}">
                    <span class="text-[8px] font-black uppercase text-slate-400 tracking-widest block"><i class="fas fa-history"></i> Sumbangan Saya Pada Teras Ini:</span>
                    <div id="log-list-{{ p.id }}" class="space-y-1.5 max-h-24 overflow-y-auto custom-scrollbar pr-1">
                        {% for idea in p.my_ideas %}
                        <div class="flex items-center justify-between p-1.5 bg-slate-50 border border-slate-100 rounded-lg text-[10px] text-slate-600 fade-in">
                            <span class="truncate flex-1 italic" title="{{ idea.idea }}">
                                {% if "[BANTAHAN STRATEGIK]" in idea.idea %}
                                    <strong class="text-rose-500">[BANTAH]</strong> {{ idea.idea|slice:"21:" }}
                                {% else %}
                                    <strong class="text-emerald-500">[IDEA]</strong> {{ idea.idea|slice:"20:" }}
                                {% endif %}
                            </span>
                            <span class="text-[9px] font-black text-emerald-600 bg-emerald-50 px-1.5 py-0.5 rounded ml-2 border border-emerald-100 shrink-0">
                                +{% if idea.skor_relevansi > 0 %}{{ idea.skor_relevansi|floatformat:0 }}{% else %}8{% endif %} pts
                            </span>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>

            <div id="ruang-idea-{{ p.id }}" class="hidden mt-4 pt-4 border-t border-slate-100">
                <div id="label-idea-{{ p.id }}" class="text-[10px] font-black uppercase tracking-widest mb-2 text-slate-500">Skop Cadangan Tambahan</div>
                <textarea id="teks-idea-{{ p.id }}" rows="3" placeholder="..." class="w-full bg-slate-50 border border-slate-200 rounded-lg px-3 py-2 text-xs focus:outline-none text-slate-700 resize-none mb-3 transition-colors shadow-inner"></textarea>
                
                <div class="flex gap-2">
                    <button onclick="tutupRuangIdea('{{ p.id }}')" class="px-4 py-2 bg-slate-100 border border-slate-200 text-slate-600 rounded-lg text-[10px] font-bold hover:bg-slate-200 transition">Batal</button>
                    <button id="btn-hantar-idea-{{ p.id }}" onclick="hantarIdea('{{ p.id }}')" class="flex-1 bg-slate-800 text-white text-[10px] font-bold py-2 rounded-lg shadow-sm hover:bg-slate-900 transition flex justify-center items-center">
                        Suntik ke Pembelajaran AI
                    </button>
                </div>
            </div>
        </div>
        {% empty %}
        <div class="col-span-2 py-12 text-center bg-white rounded-2xl border border-dashed border-slate-300 kad-peserta hidden">
            <p class="text-slate-400 font-bold">Teras Strategik belum dirumuskan. Sila tunggu penganjur menyatukan Tema.</p>
        </div>
        {% endfor %}
    </div>
</div>

<script>
    // LOGIK PAGINASI KAD (PESERTA)
    let currentPPage = 0;
    const cardsPerPPage = 2; // Papar 2 kad selari untuk pillar
    const allPCards = document.querySelectorAll('.kad-peserta:not(.hidden)');
    const totalPPages = Math.ceil(allPCards.length / cardsPerPPage);

    function tunjukMukaSuratPeserta() {
        if(allPCards.length === 0) return;
        allPCards.forEach(c => c.style.display = 'none'); 
        
        let mula = currentPPage * cardsPerPPage;
        let tamat = mula + cardsPerPPage;
        
        for(let i=mula; i<tamat && i<allPCards.length; i++) {
            allPCards[i].style.display = 'flex'; 
        }
        
        document.getElementById('page-info-p').innerText = `${currentPPage + 1} / ${totalPPages}`;
        document.getElementById('btn-prev-p').disabled = currentPPage === 0;
        document.getElementById('btn-next-p').disabled = currentPPage === totalPPages - 1;
    }

    function pindahMukaPeserta(arah) {
        currentPPage += arah;
        if(currentPPage < 0) currentPPage = 0;
        if(currentPPage >= totalPPages) currentPPage = totalPPages - 1;
        tunjukMukaSuratPeserta();
    }

    window.addEventListener('DOMContentLoaded', () => tunjukMukaSuratPeserta());
</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_overview' 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">
        <i class="fas fa-arrow-left"></i> Kembali ke Hab
    </a>
    
    {% if bengkel.blueprint_current_step >= 5 %}
    <button onclick="window.location.href='{% url 'bengkel:peserta_strategi' 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">
        Seterusnya: Semakan Strategi <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 Langkah 5
    </button>
    {% endif %}
</div>

<script>
    async function hantarSokongan(pillarId) {
        const btn = document.getElementById(`btn-sokong-${pillarId}`);
        const kad = document.getElementById(`kad-pillar-${pillarId}`);
        const bakiElemen = document.getElementById('kiraan-undi'); // Kini menjadi Jumlah Disokong
        
        btn.disabled = true;
        const originalHTML = btn.innerHTML;
        btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Merekod...';

        try {
            const response = await fetch("{% url 'bengkel:sokong_pillar_ajax' pk=bengkel.pk %}", {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'X-CSRFToken': '{{ csrf_token }}' },
                body: JSON.stringify({ 'pillar_id': pillarId })
            });

            const data = await response.json();

            if (data.success) {
                let jumlahSokongSemasa = parseInt(bakiElemen.innerText) || 0;

                if (data.status === 'voted') {
                    btn.classList.add('voted-btn');
                    btn.classList.remove('bg-slate-50', 'text-slate-500', 'hover:bg-slate-100');
                    btn.innerHTML = '<i class="fas fa-check-circle mr-2"></i> {% trans "Disokong (+2 pts)" %}';
                    kad.classList.add('voted-card');
                    
                    jumlahSokongSemasa++;
                    tambahSkor(2); // Ganjaran gamifikasi
                } else if (data.status === 'unvoted') {
                    btn.classList.remove('voted-btn');
                    btn.classList.add('bg-slate-50', 'text-slate-500', 'hover:bg-slate-100');
                    btn.innerHTML = '<i class="fas fa-thumbs-up mr-2"></i> Sokong Teras Ini';
                    kad.classList.remove('voted-card');

                    jumlahSokongSemasa = Math.max(0, jumlahSokongSemasa - 1);
                    tolakSkor(2); // Tarik balik ganjaran gamifikasi secara live
                }
                
                bakiElemen.innerText = jumlahSokongSemasa;
                document.getElementById(`sokong-count-${pillarId}`).innerText = data.total_votes;
            } else {
                alert("{% trans 'Ralat:' %} " + data.error);
                btn.innerHTML = originalHTML;
            }
        } catch (error) {
            alert("{% trans 'Ralat komunikasi pelayan.' %}");
            btn.innerHTML = originalHTML;
        } finally {
            btn.disabled = false;
        }
    }

    let isModeBantahan = {};

    function bukaRuangIdea(id, isBantah) {
        isModeBantahan[id] = isBantah;
        const ruang = document.getElementById(`ruang-idea-${id}`);
        const teksArea = document.getElementById(`teks-idea-${id}`);
        const label = document.getElementById(`label-idea-${id}`);
        const btnHantar = document.getElementById(`btn-hantar-idea-${id}`);
        
        ruang.classList.remove('hidden');
        
        if(isBantah) {
            label.innerHTML = '<i class="fas fa-exclamation-triangle text-rose-500 mr-1"></i> Bantahan Kritikal & Pembetulan AI (+10 Pts)';
            label.className = 'text-[10px] font-black uppercase tracking-widest mb-2 text-rose-600';
            teksArea.classList.add('focus:border-rose-500', 'bg-rose-50/50');
            teksArea.classList.remove('focus:border-emerald-500', 'bg-slate-50');
            teksArea.placeholder = "Nyatakan mengapa struktur Teras ini lemah atau tidak logik untuk jangka panjang...";
            btnHantar.className = 'flex-1 bg-rose-600 text-white text-[10px] font-bold py-2 rounded-lg shadow-sm hover:bg-rose-700 transition flex justify-center items-center';
        } else {
            label.innerHTML = '<i class="fas fa-lightbulb text-emerald-500 mr-1"></i> Skop Tambahan (+10 Pts)';
            label.className = 'text-[10px] font-black uppercase tracking-widest mb-2 text-emerald-600';
            teksArea.classList.add('focus:border-emerald-500', 'bg-slate-50');
            teksArea.classList.remove('focus:border-rose-500', 'bg-rose-50/50');
            teksArea.placeholder = "Cadangkan skop atau inisiatif spesifik untuk menguatkan teras ini...";
            btnHantar.className = 'flex-1 bg-slate-800 text-white text-[10px] font-bold py-2 rounded-lg shadow-sm hover:bg-slate-900 transition flex justify-center items-center';
        }
        
        setTimeout(() => teksArea.focus(), 50);
    }

    function tutupRuangIdea(id) {
        document.getElementById(`ruang-idea-${id}`).classList.add('hidden');
        document.getElementById(`teks-idea-${id}`).value = '';
    }

    async function hantarIdea(pillarId) {
        const teksArea = document.getElementById(`teks-idea-${pillarId}`);
        const idea = teksArea.value.trim();
        const isBantah = isModeBantahan[pillarId] || false;
        
        if(!idea) return alert("Sila nyatakan huraian/alasan anda sebelum menghantar.");

        const btn = document.getElementById(`btn-hantar-idea-${pillarId}`);
        btn.disabled = true;
        btn.innerHTML = '<i class="fas fa-circle-notch fa-spin mr-2"></i> Memproses...';

        const controller = new AbortController();
        const timeoutId = setTimeout(() => controller.abort(), 25000);

        try {
            const response = await fetch("{% url 'bengkel:simpan_idea_pillar_ajax' pk=bengkel.pk %}", {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'X-CSRFToken': '{{ csrf_token }}' },
                body: JSON.stringify({ 
                    'pillar_id': pillarId, 
                    'idea': idea,
                    'is_bantahan': isBantah 
                }),
                signal: controller.signal
            });

            if (!response.ok) throw new Error("HTTP " + response.status);
            const data = await response.json();
            
            clearTimeout(timeoutId);

            if(data.success) {
                if(data.status === "spam") {
                    alert("Komen anda ditolak oleh AI kerana berbentuk teks rawak atau tidak berkaitan (spam). Sila beri ulasan yang munasabah.");
                    btn.disabled = false;
                    btn.innerHTML = "Suntik ke Pembelajaran AI";
                    return;
                }

                btn.innerHTML = `<i class="fas fa-check-circle mr-1"></i> Berjaya (+${data.mata_diperoleh} pts)`;
                btn.classList.remove('bg-rose-600', 'bg-slate-800');
                btn.classList.add('bg-emerald-500');
                
                tambahSkor(data.mata_diperoleh); 

                // 📜 SUNTIKAN LIVE: Log idea ke dalam senarai bawah
                const logBox = document.getElementById(`log-idea-box-${pillarId}`);
                const logList = document.getElementById(`log-list-${pillarId}`);
                
                if (logBox) logBox.classList.remove('hidden');
                
                if (logList) {
                    const tagTeks = isBantah ? '<strong class="text-rose-500">[BANTAH]</strong>' : '<strong class="text-emerald-500">[IDEA]</strong>';
                    const itemBaru = document.createElement('div');
                    itemBaru.className = "flex items-center justify-between p-1.5 bg-slate-50 border border-slate-100 rounded-lg text-[10px] text-slate-600 fade-in mb-1.5";
                    itemBaru.innerHTML = `
                        <span class="truncate flex-1 italic" title="${idea}">${tagTeks} ${idea}</span>
                        <span class="text-[9px] font-black text-emerald-600 bg-emerald-50 px-1.5 py-0.5 rounded ml-2 border border-emerald-100 shrink-0">+${data.mata_diperoleh} pts</span>
                    `;
                    logList.insertBefore(itemBaru, logList.firstChild);
                }

                setTimeout(() => {
                    tutupRuangIdea(pillarId);
                    btn.innerHTML = "Suntik ke Pembelajaran AI";
                    btn.className = isBantah ? 'flex-1 bg-rose-600 text-white text-[10px] font-bold py-2 rounded-lg shadow-sm hover:bg-rose-700 transition flex justify-center items-center' : 'flex-1 bg-slate-800 text-white text-[10px] font-bold py-2 rounded-lg shadow-sm hover:bg-slate-900 transition flex justify-center items-center';
                    btn.disabled = false;
                }, 1500);
            } else {
                alert("Ralat pelayan: " + data.error);
                btn.disabled = false;
                btn.innerHTML = "Cuba Semula";
            }
        } catch (error) {
            clearTimeout(timeoutId);
            if (error.name === 'AbortError') {
                alert("Ralat: Pelayan OpenAI terlalu lambat membalas (Lebih 25 saat).");
            } else {
                alert("Rangkaian terputus atau ralat sistem.");
            }
            btn.disabled = false;
            btn.innerHTML = "Cuba Semula";
        }
    }

    let skorSekarang = {% kira_skor_peserta request.user bengkel %};
    
    function tambahSkor(mata) {
        const elemenSkor = document.getElementById('skor-peserta');
        elemenSkor.classList.add('text-yellow-400', 'scale-125');
        let skorTarget = skorSekarang + mata;
        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);
            }
        }, 50);
    }

    function tolakSkor(mata) {
        const elemenSkor = document.getElementById('skor-peserta');
        elemenSkor.classList.add('text-rose-400', 'scale-90');
        let skorTarget = skorSekarang - mata;
        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-rose-400', 'scale-90'); }, 500);
            }
        }, 50);
    }
</script>
{% endblock %}