{% extends "base.html" %}
{% load i18n %}
{% block title %}{% trans "Imbas Kehadiran" %} — {{ bengkel.title }}{% endblock %}

{% block content %}
<style>
    /* CSS Khas untuk Kamera & Efek Pengimbas */
    #reader { border: none !important; border-radius: 1.5rem; overflow: hidden; background: #0f172a; position: relative; z-index: 20; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5); }
    #reader__scan_region { background: #0f172a; text-align: center; }
    #reader__scan_region img { max-height: 250px !important; object-fit: contain; margin: 0 auto; }
    
    /* Efek Garisan Laser Biru pada Kamera (Hanya muncul jika kamera aktif) */
    .laser-scan {
        position: absolute; width: 100%; height: 2px; background-color: #3b82f6;
        box-shadow: 0 0 10px 2px rgba(59, 130, 246, 0.8);
        top: 10%; z-index: 30; opacity: 0.6; pointer-events: none;
        animation: scanLine 3s linear infinite alternate;
        display: none; /* Sembunyikan default, javascript akan buka */
    }
    @keyframes scanLine { 0% { top: 10%; } 100% { top: 90%; } }

    /* Latar Belakang Terapung (Floating Bubbles) */
    .bg-bubble { position: absolute; border-radius: 50%; opacity: 0.05; filter: blur(40px); pointer-events: none; }
</style>

<div class="relative min-h-screen bg-slate-900 overflow-hidden flex flex-col justify-center -mt-8 -mx-4 sm:-mx-8">
    
    <div class="bg-bubble w-[500px] h-[500px] bg-blue-500 top-[-10%] left-[-10%] animate-pulse" style="animation-duration: 6s;"></div>
    <div class="bg-bubble w-[400px] h-[400px] bg-indigo-500 bottom-[-10%] right-[-5%] animate-pulse" style="animation-duration: 8s;"></div>
    
    <div class="absolute inset-0 opacity-10" style="background-image:radial-gradient(rgba(255,255,255,0.4) 1px,transparent 1px);background-size:24px 24px; pointer-events:none;"></div>

    <div class="relative z-10 w-full max-w-6xl mx-auto px-6 py-12 flex flex-col items-center flex-1">
        
        <div class="text-center mb-10 w-full max-w-2xl mx-auto animate-fade-up">
            <div class="w-16 h-16 bg-blue-500/20 border border-blue-400/30 text-blue-400 rounded-2xl flex items-center justify-center text-3xl mx-auto mb-5 shadow-[0_0_15px_rgba(59,130,246,0.3)]">
                <i class="fas fa-qrcode"></i>
            </div>
            <h1 class="text-3xl md:text-4xl font-black text-white tracking-tight leading-tight mb-3" style="font-family:'Noto Serif', Georgia, serif;">Imbas Kod Akses</h1>
            <p class="text-sm text-slate-400 font-medium">Halakan kamera bimbit anda ke skrin projektor di dewan (Master QR) untuk membuka kunci pintu Lobi Acara.</p>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 w-full items-center">
            
            <div class="hidden lg:block lg:col-span-3 bg-white/5 backdrop-blur-md border border-white/10 rounded-3xl p-6 shadow-xl text-left h-[350px] flex flex-col justify-center animate-fade-up" style="animation-delay: 0.1s;">
                <h3 class="text-[10px] font-black uppercase tracking-widest text-slate-500 mb-6 border-b border-slate-700/50 pb-2">Destinasi Semasa:</h3>
                
                <div class="font-black text-white text-lg leading-tight mb-2">{{ bengkel.title }}</div>
                <div class="text-xs font-bold text-slate-400 mb-6 flex items-center gap-2">
                    <span class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span> Acara Sedang Berlangsung
                </div>

                <div class="space-y-4">
                    <div class="flex items-start gap-3">
                        <i class="far fa-calendar-alt text-blue-400 mt-0.5"></i>
                        <div>
                            <div class="text-[9px] font-bold text-slate-500 uppercase tracking-widest">Tarikh</div>
                            <div class="text-xs font-bold text-slate-300 mt-0.5">{{ bengkel.tarikh|date:"d M Y" }}</div>
                        </div>
                    </div>
                    <div class="flex items-start gap-3">
                        <i class="fas fa-map-marker-alt text-rose-400 mt-0.5"></i>
                        <div>
                            <div class="text-[9px] font-bold text-slate-500 uppercase tracking-widest">Lokasi</div>
                            <div class="text-xs font-bold text-slate-300 mt-0.5 leading-relaxed">{{ bengkel.lokasi_nama }}</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-span-1 lg:col-span-6 flex flex-col items-center justify-center animate-fade-up" style="animation-delay: 0.2s;">
                
                <div class="bg-slate-800 rounded-[2rem] p-3 shadow-2xl border border-slate-700 w-full max-w-sm relative">
                    <div id="reader" class="w-full" style="min-height:300px"></div>
                    <div id="laserLine" class="laser-scan"></div>
                </div>

                <div class="mt-6 text-center">
                    <input type="file" id="qr-upload" accept="image/*" class="hidden">
                    <label for="qr-upload" class="cursor-pointer inline-flex items-center gap-2 bg-slate-800/80 hover:bg-slate-700 text-slate-300 px-6 py-3.5 rounded-full text-xs font-bold border border-slate-600 transition-all shadow-md active:scale-95 backdrop-blur-sm">
                        <i class="fas fa-image text-blue-400"></i> Alternatif: Muat Naik Gambar QR
                    </label>
                </div>

                <div id="scanResult" class="hidden w-full max-w-sm mt-4 rounded-2xl p-4 text-center font-bold text-sm shadow-xl animate-fade-up"></div>

            </div>

            <div class="hidden lg:block lg:col-span-3 bg-white/5 backdrop-blur-md border border-white/10 rounded-3xl p-6 shadow-xl text-left h-[350px] flex flex-col justify-center animate-fade-up" style="animation-delay: 0.3s;">
                <div class="w-12 h-12 rounded-full bg-slate-800 border border-slate-600 text-slate-400 flex items-center justify-center text-xl mb-4 shadow-inner">
                    <i class="fas fa-user-shield"></i>
                </div>
                <h3 class="text-[10px] font-black uppercase tracking-widest text-slate-500 mb-2">Akses Keselamatan</h3>
                <p class="text-xs text-slate-300 leading-relaxed font-medium mb-6">
                    Hanya peserta yang telah RSVP dan mengesahkan kehadiran fizikal sahaja akan diberikan akses ke ruangan dokumen sulit (Blueprint) di Lobi Acara.
                </p>

                <div class="bg-slate-800/50 rounded-xl p-3 border border-slate-700/50">
                    <div class="flex justify-between items-center text-[10px] font-bold text-slate-400 mb-2">
                        <span>Akses Lobi</span>
                        <span class="text-rose-400"><i class="fas fa-lock"></i> Dikunci</span>
                    </div>
                    <div class="h-1.5 w-full bg-slate-700 rounded-full overflow-hidden">
                        <div class="h-full bg-blue-500 w-1/4 animate-pulse"></div>
                    </div>
                </div>
            </div>

        </div> <div class="mt-12 text-center relative z-10 w-full">
            <a href="{% url 'bengkel:dashboard' %}?tab=bengkel" class="inline-flex items-center gap-2 text-xs font-bold text-slate-400 hover:text-white transition-colors bg-slate-800/50 px-6 py-3 rounded-full border border-slate-700 backdrop-blur-sm">
                <i class="fas fa-arrow-left"></i> Kembali ke Papan Pemuka
            </a>
        </div>

    </div>

    {% csrf_token %}
</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 laser = document.getElementById('laserLine');
    var processing = false;

    // Fungsi menghantar token ke pelayan (Server)
    function processToken(decodedText){
        if(processing) return;
        processing = true;

        try { html5QrCode.stop(); } catch(e) {} 
        laser.style.display = "none"; // Tutup laser

        resultBox.className = 'rounded-2xl p-4 text-center font-bold text-sm shadow-xl bg-blue-900/50 text-blue-300 border border-blue-500/50 backdrop-blur-md block w-full max-w-sm mx-auto mt-4';
        resultBox.innerHTML = '<i class="fas fa-spinner fa-spin mr-2 text-blue-400"></i> Sedang mengesahkan akses...';

        fetch(decodedText, {
            method: 'POST',
            headers: { 
                'X-CSRFToken': csrf,
                'Accept': 'application/json'
            },
            credentials: 'same-origin'
        })
        .then(r => r.json())
        .then(data => {
            if(data.success){
                resultBox.className = 'rounded-2xl p-4 text-center font-bold text-sm shadow-xl bg-emerald-900/50 text-emerald-300 border border-emerald-500/50 backdrop-blur-md block w-full max-w-sm mx-auto mt-4';
                resultBox.innerHTML = '<i class="fas fa-unlock-alt text-xl mb-1 block text-emerald-400"></i>' + data.mesej;
                setTimeout(() => { window.location.href = "/bengkel/" + data.bengkel_id + "/lobi/"; }, 1000);
            } else if(data.already) {
                resultBox.className = 'rounded-2xl p-4 text-center font-bold text-sm shadow-xl bg-amber-900/50 text-amber-300 border border-amber-500/50 backdrop-blur-md block w-full max-w-sm mx-auto mt-4';
                resultBox.innerHTML = '<i class="fas fa-door-open text-xl mb-1 block text-amber-400"></i>' + data.error;
                setTimeout(() => { window.location.href = "/bengkel/" + data.bengkel_id + "/lobi/"; }, 1500);
            } else {
                resultBox.className = 'rounded-2xl p-4 text-center font-bold text-sm shadow-xl bg-rose-900/50 text-rose-300 border border-rose-500/50 backdrop-blur-md block w-full max-w-sm mx-auto mt-4';
                resultBox.innerHTML = '<i class="fas fa-ban text-xl mb-1 block text-rose-400"></i>' + (data.error || "{% trans 'Ralat tidak diketahui.' %}");
                setTimeout(() => { location.reload(); }, 3000);
            }
        })
        .catch(e => {
            resultBox.className = 'rounded-2xl p-4 text-center font-bold text-sm shadow-xl bg-rose-900/50 text-rose-300 border border-rose-500/50 backdrop-blur-md block w-full max-w-sm mx-auto mt-4';
            resultBox.innerHTML = '<i class="fas fa-wifi text-xl mb-1 block text-rose-400"></i> {% trans "Gagal berhubung dengan pelayan." %}';
            setTimeout(() => { location.reload(); }, 3000);
        });
    }

    // Mulakan Pengimbas Kamera
    var html5QrCode = new Html5Qrcode("reader");
    var boxSize = window.innerWidth < 600 ? 250 : 280;

    html5QrCode.start(
        { facingMode: "environment" }, 
        { 
            fps: 15, 
            qrbox: { width: boxSize, height: boxSize },
            formatsToSupport: [ Html5QrcodeSupportedFormats.QR_CODE ] 
        },
        function(decodedText){ processToken(decodedText); },
        function(errorMessage){ 
            // Hidupkan laser animasi jika kamera berjaya beroperasi
            if(laser.style.display !== "block") laser.style.display = "block";
        } 
    ).catch(err => {
        document.getElementById('reader').innerHTML = `
            <div class="p-8 text-center bg-slate-800/80 backdrop-blur-sm text-slate-400 h-full flex flex-col items-center justify-center min-h-[300px] border border-slate-700/50 rounded-2xl">
                <i class="fas fa-video-slash text-4xl mb-3 text-slate-500"></i>
                <div class="font-bold text-sm mb-1 text-slate-300">Kamera Tidak Dijumpai</div>
                <div class="text-xs">Sila benarkan akses kamera, atau gunakan butang muat naik gambar di bawah.</div>
            </div>`;
    });

    // Logik Butang Muat Naik Gambar QR
    var qrUploadInput = document.getElementById('qr-upload');
    qrUploadInput.addEventListener('change', function(e) {
        if (e.target.files.length === 0) return;
        var imageFile = e.target.files[0];
        
        resultBox.className = 'rounded-2xl p-4 text-center font-bold text-sm shadow-xl bg-blue-900/50 text-blue-300 border border-blue-500/50 backdrop-blur-md block w-full max-w-sm mx-auto mt-4';
        resultBox.innerHTML = '<i class="fas fa-spinner fa-spin mr-2 text-blue-400"></i> Sedang membaca gambar...';

        // Fungsi dalaman untuk baca fail
        const prosesScanFail = () => {
            html5QrCode.scanFile(imageFile, true)
                .then(decodedText => {
                    processToken(decodedText);
                    qrUploadInput.value = ''; 
                })
                .catch(err => {
                    console.error("Ralat decode fail QR:", err); 
                    resultBox.className = 'rounded-2xl p-4 text-center font-bold text-sm shadow-xl bg-rose-900/50 text-rose-300 border border-rose-500/50 backdrop-blur-md block w-full max-w-sm mx-auto mt-4';
                    resultBox.innerHTML = '<i class="fas fa-exclamation-triangle mr-2 text-rose-400"></i> Ralat: Gambar tidak jelas atau bukan QR yang sah.';
                    qrUploadInput.value = ''; 
                });
        };

        // PENTING: Jika kamera sedang aktif, matikan dahulu sebelum baca fail
        if (html5QrCode.isScanning) {
            html5QrCode.stop().then(() => {
                prosesScanFail();
            }).catch(err => {
                console.error("Gagal matikan kamera:", err);
                prosesScanFail(); // Cuba teruskan juga jika gagal
            });
        } else {
            prosesScanFail();
        }
    });
})();
</script>
{% endblock %}