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

{% block title %}{% trans "Master QR Check-In" %} — {{ 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">Skrin Paparan Master QR</span>
{% endblock %}

{% block content %}
<style>
    @keyframes pulseGlow {
        0%, 100% { box-shadow: 0 0 30px rgba(99, 102, 241, 0.3); }
        50% { box-shadow: 0 0 60px rgba(99, 102, 241, 0.6); }
    }
    .qr-box-container { animation: pulseGlow 4s ease-in-out infinite; }
    
    /* Cantikkan scrollbar untuk log masuk */
    .custom-scroll::-webkit-scrollbar { width: 6px; }
    .custom-scroll::-webkit-scrollbar-track { background: rgba(15, 23, 42, 0.5); border-radius: 10px; }
    .custom-scroll::-webkit-scrollbar-thumb { background: rgba(51, 65, 85, 0.8); border-radius: 10px; }
</style>

<div class="relative -mt-8 -mx-4 sm:-mx-8 overflow-hidden bg-[#0a0f1d] min-h-screen flex flex-col justify-between py-12 px-6 text-white">
    
    <div class="absolute top-[-10%] left-[-10%] w-[600px] h-[600px] rounded-full bg-blue-600/10 blur-[120px] pointer-events-none"></div>
    <div class="absolute bottom-[-10%] right-[-10%] w-[600px] h-[600px] rounded-full bg-indigo-600/10 blur-[120px] pointer-events-none"></div>
    <div class="absolute inset-0 opacity-5" style="background-image:radial-gradient(rgba(255,255,255,0.6) 1px,transparent 1px);background-size:30px 30px;"></div>

    <div class="relative z-10 w-full max-w-[1400px] mx-auto flex flex-col items-center text-center space-y-10 flex-1">
        
        <div class="space-y-3 flex flex-col items-center mt-4">
            <span class="inline-flex items-center gap-2 bg-indigo-500/20 border border-indigo-500/40 text-indigo-300 text-[10px] font-black tracking-widest uppercase px-4 py-2 rounded-full shadow-sm">
                <i class="fas fa-qrcode animate-pulse"></i> Self Check-In (Imbas & Hadir)
            </span>
            <h1 class="text-4xl lg:text-6xl font-black tracking-tight leading-tight text-transparent bg-clip-text bg-gradient-to-r from-white to-slate-400 py-1" style="font-family:'Noto Serif', Georgia, serif;">
                {{ bengkel.title }}
            </h1>
            <p class="text-slate-400 text-sm font-medium flex items-center gap-4 justify-center">
                <span><i class="fas fa-map-marker-alt text-rose-400 mr-1"></i> {{ bengkel.lokasi_nama }}</span>
                <span class="text-slate-600">|</span>
                <span><i class="far fa-calendar-alt text-amber-400 mr-1"></i> {{ bengkel.tarikh|date:"d M Y" }}</span>
            </p>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 w-full items-center mt-8">
            
            <div class="bg-white/5 border border-white/10 backdrop-blur-md rounded-3xl p-8 shadow-xl text-left h-[420px] flex flex-col justify-center">
                <div class="w-14 h-14 bg-indigo-500/20 text-indigo-400 rounded-2xl flex items-center justify-center text-2xl mb-6 shadow-inner border border-indigo-500/30">
                    <i class="fas fa-mobile-alt"></i>
                </div>
                <h3 class="font-black text-white text-xl mb-6">Langkah Pengesahan Kehadiran:</h3>
                <ol class="text-sm text-slate-300 leading-relaxed font-medium pl-5 list-decimal space-y-5">
                    <li>Log masuk ke sistem <strong class="text-white">Portal IPES</strong> menggunakan telefon pintar anda.</li>
                    <li>Pergi ke Papan Pemuka utama dan klik butang <strong class="text-white">"Imbas Kehadiran"</strong>.</li>
                    <li>Halakan kamera anda ke arah kod QR di sebelah untuk merekodkan kehadiran secara automatik.</li>
                </ol>
            </div>

            <div class="flex flex-col items-center justify-center w-full h-[420px]">
                <div class="w-[320px] h-[320px] bg-white p-5 rounded-[2.5rem] qr-box-container border border-white/10 shadow-2xl flex items-center justify-center mb-8">
                    <div id="qrcode" class="bg-white p-2"></div>
                </div>

                <button onclick="muatTurunQR()" class="bg-gradient-to-r from-indigo-500 to-blue-600 hover:from-indigo-600 hover:to-blue-700 text-white font-bold text-sm px-8 py-4 rounded-2xl transition-all shadow-[0_0_20px_rgba(79,70,229,0.4)] flex items-center gap-2 active:scale-95">
                    <i class="fas fa-download text-lg"></i> Muat Turun QR Acara
                </button>
            </div>

            <div class="bg-slate-900/60 border border-slate-700/50 backdrop-blur-xl rounded-3xl shadow-2xl overflow-hidden flex flex-col h-[420px] text-left">
                <div class="p-6 border-b border-slate-700/50 flex items-center justify-between bg-slate-800/50 shrink-0">
                    <h2 class="text-sm font-black text-white uppercase tracking-widest flex items-center gap-2">
                        <i class="fas fa-users text-emerald-400"></i> Log Terkini
                    </h2>
                    <div class="flex items-center gap-2">
                        <span class="w-2.5 h-2.5 rounded-full bg-emerald-400 animate-pulse"></span>
                        <span class="text-[10px] font-black text-emerald-300 bg-emerald-900/40 border border-emerald-700/50 px-3 py-1.5 rounded-lg uppercase tracking-widest" id="hadir-counter">0 Hadir</span>
                    </div>
                </div>
                
                <div id="live-log-container" class="flex-1 overflow-y-auto custom-scroll p-5 space-y-3">
                    <div class="text-center text-slate-500 text-sm mt-20"><i class="fas fa-spinner fa-spin mr-2"></i> Menunggu imbasan peserta...</div>
                </div>
            </div>

        </div>
    </div>
    
    <div class="relative z-10 pt-12 pb-4 flex justify-center w-full mt-auto">
        <a href="{% url 'bengkel:detail' bengkel.pk %}" class="inline-flex items-center gap-2 text-sm font-bold text-slate-400 hover:text-white transition-all bg-slate-800/80 hover:bg-slate-700 px-8 py-4 rounded-full border border-slate-700 backdrop-blur-md shadow-lg">
            <i class="fas fa-arrow-left"></i> Kembali ke Pusat Kawalan
        </a>
    </div>

</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<script>
    // 1. Bina QR Code (Dioptimumkan untuk Imbasan Pantas)
    new QRCode(document.getElementById("qrcode"), {
        text: "{{ check_in_url }}",
        width: 300, 
        height: 300,
        colorDark : "#000000", // Hitam pekat untuk kontras maksimum
        colorLight : "#ffffff",
        correctLevel : QRCode.CorrectLevel.M // Tukar ke 'M' supaya titik QR lebih besar, kurang padat, dan mudah dibaca oleh muat naik fail
    });

    // 2. Logik AJAX Live
    function fetchLiveAttendance() {
        fetch("{% url 'bengkel:master_qr_live_ajax' bengkel.pk %}")
        .then(response => response.json())
        .then(data => {
            if(data.success) {
                document.getElementById('hadir-counter').textContent = data.jumlah_hadir + " Hadir";
                const container = document.getElementById('live-log-container');
                
                if (data.senarai.length === 0) {
                    container.innerHTML = '<div class="text-center text-slate-500 text-sm mt-20">Belum ada peserta daftar masuk.</div>';
                    return;
                }
                
                let htmlStr = "";
                data.senarai.forEach(item => {
                    let inisial = item.nama.charAt(0).toUpperCase();
                    htmlStr += `
                        <div class="flex items-center gap-3 bg-slate-800/80 border border-slate-700 rounded-2xl p-3.5 animate-fade-up shadow-sm">
                            <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-emerald-500 to-teal-600 text-white flex items-center justify-center font-black text-sm shadow-inner shrink-0">${inisial}</div>
                            <div class="flex-1 min-w-0">
                                <div class="text-sm font-bold text-slate-200 truncate">${item.nama}</div>
                                <div class="text-[10px] text-emerald-400 mt-0.5"><i class="fas fa-check-circle mr-1"></i> Hadir disahkan</div>
                            </div>
                            <div class="text-xs font-black text-slate-400 shrink-0">${item.masa}</div>
                        </div>
                    `;
                });
                container.innerHTML = htmlStr;
            }
        })
        .catch(err => console.error("Ralat Live AJAX: ", err));
    }

    fetchLiveAttendance();
    setInterval(fetchLiveAttendance, 3000);

    // 3. Fungsi Muat Turun QR (Ditambah Baik Dengan Quiet Zone)
    function muatTurunQR() {
        const qrCanvas = document.querySelector('#qrcode canvas');
        if (!qrCanvas) {
            alert("{% trans 'Sila tunggu QR selesai di-jana.' %}");
            return;
        }

        // Cipta kanvas baharu yang lebih besar untuk memberi ruang putih (Padding/Quiet Zone)
        const padding = 30; 
        const newCanvas = document.createElement('canvas');
        newCanvas.width = qrCanvas.width + (padding * 2);
        newCanvas.height = qrCanvas.height + (padding * 2);
        const ctx = newCanvas.getContext('2d');

        // Warnakan latar belakang kanvas baharu dengan putih penuh
        ctx.fillStyle = '#ffffff';
        ctx.fillRect(0, 0, newCanvas.width, newCanvas.height);

        // PENTING: Matikan pemulasan imej (anti-aliasing) supaya petak QR kekal tajam walaupun di localhost
        ctx.imageSmoothingEnabled = false;
        ctx.webkitImageSmoothingEnabled = false;
        ctx.mozImageSmoothingEnabled = false;

        // Tampal QR asal di tengah-tengah kanvas putih tersebut
        ctx.drawImage(qrCanvas, padding, padding);

        // Mulakan proses muat turun
        const link = document.createElement('a');
        link.download = 'Master-QR-{{ bengkel.title|slugify }}.png';
        link.href = newCanvas.toDataURL("image/png");
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    }
</script>
{% endblock %}