{% extends "base.html" %}
{% load i18n %}
{% block title %}{% trans "Pengimbas QR" %} — {{ 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>
  <span class="text-slate-500 font-medium text-xs">Pengimbas QR Kehadiran</span>
{% endblock %}

{% block content %}
<style>
    @keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
    .animate-fade-up { animation: fadeUp 0.5s ease-out forwards; }
    
    /* Override gaya default dari library html5-qrcode supaya nampak premium */
    #reader { border: none !important; background: #0f172a; border-radius: 1rem; overflow: hidden; }
    #reader__scan_region { background: #0f172a; }
    #reader__dashboard_section_csr button { background: #0d9488 !important; color: white !important; border: none !important; padding: 8px 16px !important; border-radius: 8px !important; font-weight: bold !important; font-size: 12px !important; cursor: pointer; transition: 0.2s; }
    #reader__dashboard_section_csr button:hover { background: #0f766e !important; }
    #reader__dashboard_section_swaplink { color: #5eead4 !important; text-decoration: none !important; font-weight: bold !important; }
</style>

<div class="animate-fade-up max-w-[1200px] mx-auto pb-12">

    <div class="bg-gradient-to-br from-slate-900 via-teal-900 to-slate-900 rounded-3xl p-8 mb-8 shadow-sm border border-slate-800 flex flex-col md:flex-row md:items-center justify-between gap-6 relative overflow-hidden">
        <div class="absolute right-0 top-0 opacity-10 transform translate-x-1/4 -translate-y-1/4 pointer-events-none">
            <i class="fas fa-qrcode text-[200px] text-teal-400"></i>
        </div>
        
        <div class="relative z-10 flex items-center gap-5">
            <div class="w-14 h-14 rounded-2xl bg-teal-500/20 backdrop-blur-sm border border-teal-400/30 flex items-center justify-center text-3xl text-teal-300 shadow-inner shrink-0">
                <i class="fas fa-camera"></i>
            </div>
            <div>
                <div class="inline-flex items-center gap-2 px-3 py-1 bg-teal-500/20 border border-teal-400/30 text-teal-200 text-[10px] font-black uppercase tracking-widest rounded-full mb-1">
                    <span class="w-1.5 h-1.5 rounded-full bg-teal-400 animate-pulse"></span> Modul Pendaftaran Masuk
                </div>
                <h1 class="text-2xl md:text-3xl font-black text-white leading-tight tracking-tight">{{ bengkel.title|truncatechars:40 }}</h1>
            </div>
        </div>

        <div class="relative z-10 shrink-0 text-right">
            <div class="text-teal-200/70 text-[10px] font-bold uppercase tracking-widest mb-1">Status Kamera</div>
            <div class="text-white font-black text-sm bg-black/30 px-4 py-2 rounded-xl border border-white/10 flex items-center gap-2">
                <i class="fas fa-video text-emerald-400"></i> Bersiapsedia
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-12 gap-8">

        <div class="lg:col-span-7 space-y-6">
            <div class="bg-white rounded-3xl border border-slate-200 shadow-sm overflow-hidden p-6 md:p-8">
                <div class="flex items-center justify-between mb-6">
                    <h2 class="font-black text-slate-800 text-lg flex items-center gap-2"><i class="fas fa-expand text-blue-500"></i> Imbas Tiket QR</h2>
                    <span class="text-[10px] font-bold uppercase tracking-widest text-slate-400">Hala kamera pada tiket</span>
                </div>

                <div class="p-2 bg-slate-900 rounded-2xl shadow-inner border-[6px] border-slate-100 relative">
                    <div class="absolute inset-0 pointer-events-none z-10 p-6 flex flex-col justify-between">
                        <div class="flex justify-between"><div class="w-8 h-8 border-t-4 border-l-4 border-white/50 rounded-tl-lg"></div><div class="w-8 h-8 border-t-4 border-r-4 border-white/50 rounded-tr-lg"></div></div>
                        <div class="flex justify-between"><div class="w-8 h-8 border-b-4 border-l-4 border-white/50 rounded-bl-lg"></div><div class="w-8 h-8 border-b-4 border-r-4 border-white/50 rounded-br-lg"></div></div>
                    </div>
                    
                    <div id="reader" class="w-full" style="min-height:300px"></div>
                </div>

                <div id="scanResult" class="mt-6 rounded-2xl px-5 py-4 hidden shadow-sm transition-all duration-300"></div>

                <div class="border-t border-slate-100 my-6"></div>

                <div class="bg-slate-50 border border-slate-200 rounded-2xl p-5">
                    <h3 class="text-xs font-black uppercase tracking-widest text-slate-500 mb-3"><i class="fas fa-keyboard mr-1"></i> Kamera Gagal? Daftar Manual</h3>
                    <div class="flex flex-col sm:flex-row gap-3">
                        <input id="manualToken" type="text" placeholder="Tampal Token / UUID Peserta di sini..." class="flex-1 px-4 py-3 border border-slate-200 rounded-xl text-sm font-mono text-slate-700 focus:outline-none focus:border-teal-400 focus:ring-2 focus:ring-teal-400/20 transition-all bg-white" />
                        <button onclick="processToken(document.getElementById('manualToken').value)" class="px-6 py-3 rounded-xl font-bold text-sm text-white transition-all bg-slate-800 hover:bg-slate-900 shadow-md shrink-0 flex items-center justify-center gap-2 active:scale-[0.98]">
                            <i class="fas fa-check"></i> Sahkan
                        </button>
                    </div>
                </div>

                {% csrf_token %}
            </div>
        </div>

        <div class="lg:col-span-5">
            <div class="bg-white rounded-3xl border border-slate-200 shadow-sm overflow-hidden flex flex-col h-full max-h-[800px]">
                
                <div class="px-6 py-5 border-b border-slate-100 bg-slate-50/50 flex items-center justify-between">
                    <h2 class="font-black text-slate-800 text-sm flex items-center gap-2"><i class="fas fa-clipboard-check text-emerald-500"></i> Log Kehadiran Lintas Langsung</h2>
                    <div class="flex items-center gap-2">
                        <span class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span>
                        <span id="hadirCounter" class="text-[10px] font-black text-slate-600 bg-white border border-slate-200 px-2.5 py-1 rounded-lg uppercase tracking-widest shadow-sm">{{ kehadiran_list.count }} Hadir</span>
                    </div>
                </div>

                <div id="checkinList" class="flex-1 overflow-y-auto divide-y divide-slate-50 p-2">
                    {% if not kehadiran_list %}
                        <div class="px-6 py-16 text-center" id="emptyState">
                            <div class="w-16 h-16 bg-slate-50 border border-slate-100 rounded-full flex items-center justify-center text-3xl text-slate-300 mx-auto mb-4"><i class="fas fa-user-clock"></i></div>
                            <p class="text-slate-500 text-sm font-medium">Tiada rekod kehadiran lagi.<br>Sila mula mengimbas tiket QR peserta.</p>
                        </div>
                    {% else %}
                        {% for k in kehadiran_list %}
                        <div class="p-4 flex items-center gap-4 hover:bg-slate-50 transition-colors rounded-xl mx-2 my-1">
                            <div class="w-10 h-10 rounded-xl bg-emerald-50 text-emerald-600 flex items-center justify-center shrink-0 border border-emerald-100 shadow-inner">
                                {{ k.jemputan.nama|first|upper }}
                            </div>
                            <div class="flex-1 min-w-0">
                                <div class="font-bold text-slate-800 text-sm truncate">{{ k.jemputan.nama }}</div>
                                <div class="text-slate-500 text-[11px] truncate mt-0.5"><i class="fas fa-building text-slate-300 mr-1"></i> {{ k.jemputan.organisasi|default:"-" }}</div>
                            </div>
                            <div class="shrink-0 text-right">
                                <div class="text-[10px] font-black uppercase tracking-widest text-slate-400">Waktu Masuk</div>
                                <div class="text-xs font-bold text-emerald-600">{{ k.checked_in_at|date:"H:i" }}</div>
                            </div>
                        </div>
                        {% endfor %}
                    {% endif %}
                </div>

            </div>
        </div>

    </div>
</div>

<script src="https://unpkg.com/html5-qrcode@2.3.8/html5-qrcode.min.js"></script>
<script>
(function(){
    var csrf = document.querySelector('[name=csrfmiddlewaretoken]').value;
    var resultBox = document.getElementById('scanResult');
    var processingToken = null;

    // Fungsi Papar Toast Result
    function showResult(success, msg, already){
        resultBox.className = 'mt-6 rounded-2xl px-5 py-4 text-sm font-bold flex items-start gap-3 transition-all duration-300 animate-fade-up';
        
        if(success){
            resultBox.classList.add('bg-emerald-50', 'border', 'border-emerald-200', 'text-emerald-800');
            resultBox.innerHTML = '<i class="fas fa-check-circle text-emerald-500 mt-0.5 text-lg"></i> <div class="flex-1 leading-relaxed">' + msg + '</div>';
        } else if(already){
            resultBox.classList.add('bg-amber-50', 'border', 'border-amber-200', 'text-amber-800');
            resultBox.innerHTML = '<i class="fas fa-exclamation-circle text-amber-500 mt-0.5 text-lg"></i> <div class="flex-1 leading-relaxed">' + msg + '</div>';
        } else {
            resultBox.classList.add('bg-rose-50', 'border', 'border-rose-200', 'text-rose-800');
            resultBox.innerHTML = '<i class="fas fa-times-circle text-rose-500 mt-0.5 text-lg"></i> <div class="flex-1 leading-relaxed">' + msg + '</div>';
        }
        
        resultBox.style.display = 'flex';
        // Auto hide selepas 4 saat
        setTimeout(function(){ resultBox.style.display = 'none'; }, 4000);
    }

    // Fungsi Tambah Log Baru ke Atas Senarai (DOM Manipulation)
    function prependCheckIn(nama, organisasi){
        var list = document.getElementById('checkinList');
        var empty = document.getElementById('emptyState');
        if(empty) empty.remove(); // Buang mesej "Tiada Rekod"
        
        var now = new Date();
        var timeStr = now.getHours().toString().padStart(2,'0') + ':' + now.getMinutes().toString().padStart(2,'0');
        var inisial = nama.charAt(0).toUpperCase();
        var orgText = organisasi || '-';

        var div = document.createElement('div');
        // Letak efek highlight hijau sementara (flash effect)
        div.className = 'p-4 flex items-center gap-4 bg-emerald-50/50 transition-colors rounded-xl mx-2 my-1 border border-emerald-100/50 animate-fade-up';
        div.innerHTML = `
            <div class="w-10 h-10 rounded-xl bg-emerald-100 text-emerald-600 flex items-center justify-center shrink-0 border border-emerald-200 shadow-inner font-black text-sm">
                ${inisial}
            </div>
            <div class="flex-1 min-w-0">
                <div class="font-bold text-slate-800 text-sm truncate">${nama}</div>
                <div class="text-slate-500 text-[11px] truncate mt-0.5"><i class="fas fa-building text-slate-300 mr-1"></i> ${orgText}</div>
            </div>
            <div class="shrink-0 text-right">
                <div class="text-[10px] font-black uppercase tracking-widest text-emerald-400">Masuk Sekarang</div>
                <div class="text-xs font-bold text-emerald-600">${timeStr}</div>
            </div>
        `;
        list.prepend(div);

        // Update Counter Header
        var badge = document.getElementById('hadirCounter');
        if(badge){ 
            var c = parseInt(badge.textContent) || 0; 
            badge.textContent = (c+1) + ' Hadir'; 
        }

        // Buang efek highlight selepas 3 saat
        setTimeout(function(){
            div.className = 'p-4 flex items-center gap-4 hover:bg-slate-50 transition-colors rounded-xl mx-2 my-1';
        }, 3000);
    }

    // Fungsi Utama: Hantar Token ke Backend
    window.processToken = function(token){
        token = token.trim();
        // Halang double scan benda yang sama berturut-turut
        if(!token || token === processingToken) return;
        processingToken = token;

        // Ekstrak UUID dari URL jika scanner terbaca URL penuh
        var m = token.match(/([0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12})/i);
        var uuid = m ? m[1] : token;

        // Tembak API
        fetch('/bengkel/api/check-in/'+uuid+'/', {
            method: 'POST',
            headers: { 'X-CSRFToken': csrf }
        })
        .then(function(r){ return r.json(); })
        .then(function(data){
            if(data.success){
                // Audio Beep (Pilihan)
                var audio = new Audio('data:audio/wav;base64,UklGRl9vT19XQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YU'+Array(1e3).join('123')); // dummy beep
                audio.play().catch(e=>{});

                showResult(true, `Kehadiran <strong>${data.nama}</strong> telah disahkan berjaya!`, false);
                prependCheckIn(data.nama, data.organisasi);
                document.getElementById('manualToken').value = ''; // clear manual input
            } else if(data.already){
                showResult(false, `<strong>${data.error}</strong>`, true);
            } else {
                showResult(false, `<strong>Ralat:</strong> ${data.error}`, false);
            }
            // Kosongkan token pemprosesan selepas 2.5 saat
            setTimeout(function(){ processingToken = null; }, 2500);
        })
        .catch(function(){
            showResult(false, 'Gagal berhubung dengan pelayan sistem. Sila pastikan anda mempunyai capaian internet.', false);
            setTimeout(function(){ processingToken = null; }, 2000);
        });
    };

    // Mulakan Enjin Kamera (html5-qrcode)
    var html5QrCode = new Html5Qrcode("reader");
    html5QrCode.start(
        { facingMode: "environment" }, // Guna kamera belakang (jika ada)
        { fps: 10, qrbox: { width: 250, height: 250 } }, // Tetapan frame
        function(decodedText){ window.processToken(decodedText); }, // Action jika berjaya
        function(){} // Abaikan error frame (berlaku setiap kali gagal baca)
    ).catch(function(err){
        document.getElementById('reader').innerHTML = `
            <div class="p-10 text-center flex flex-col items-center justify-center h-full bg-slate-50 rounded-xl">
                <i class="fas fa-video-slash text-4xl text-slate-300 mb-3"></i>
                <div class="text-sm font-bold text-slate-600 mb-1">Kamera Tidak Dapat Diakses</div>
                <p class="text-xs text-slate-400 mb-4">Sila benarkan akses kamera pada pelayar web anda atau gunakan ruang kemasukan manual di bawah.</p>
                <code class="text-[9px] text-rose-400 bg-rose-50 px-2 py-1 rounded hidden">${err}</code>
            </div>
        `;
    });
})();
</script>
{% endblock %}