{% extends "base.html" %}
{% block title %}Scan QR Pulang - Presensi Sekolah{% endblock %}
{% block content %}
<div class="max-w-2xl mx-auto">
    <div class="mb-8 text-center">
        <div class="inline-flex items-center justify-center w-16 h-16 bg-blue-100 text-blue-600 rounded-full mb-4 shadow-sm">
            <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path>
            </svg>
        </div>
        <h1 class="text-3xl font-extrabold text-gray-800 tracking-tight">Presensi Pulang</h1>
        <p class="text-gray-500 font-medium">Sampai jumpa besok di sekolah!</p>
    </div>
    
    <div class="bg-white rounded-3xl shadow-xl overflow-hidden border border-gray-100">
        <div class="relative">
            <div id="reader" class="w-full bg-black"></div>
            <div class="absolute inset-0 pointer-events-none border-[40px] border-black/40">
                <div class="w-full h-1 bg-blue-500 shadow-[0_0_15px_rgba(59,130,246,0.8)] absolute top-0 animate-[scan_2s_infinite_ease-in-out]"></div>
            </div>
        </div>

        <div id="result" class="p-6 hidden animate-fade-in">
            <div id="resultBox" class="flex items-center gap-4 p-5 rounded-2xl border-2 transition-all duration-300">
                <div id="resultIcon" class="flex-shrink-0 w-12 h-12 rounded-full flex items-center justify-center"></div>
                <div>
                    <p id="resultStatus" class="text-xs font-bold uppercase tracking-wider mb-1"></p>
                    <p id="resultText" class="text-lg font-bold leading-tight"></p>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
@keyframes scan { 0%, 100% { top: 5%; } 50% { top: 95%; } }
.animate-fade-in { animation: fadeIn 0.3s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
</style>

<script>
function speak(text) {
    if ('speechSynthesis' in window) {
        const msg = new SpeechSynthesisUtterance(text);
        msg.lang = 'id-ID';
        msg.rate = 1.0;
        window.speechSynthesis.speak(msg);
    }
}

const html5QrCode = new Html5Qrcode("reader");
const config = { fps: 15, qrbox: { width: 250, height: 250 } };

function startScanner() {
    html5QrCode.start({ facingMode: "environment" }, config, onScanSuccess).catch(err => console.error(err));
}

function onScanSuccess(decodedText) {
    html5QrCode.pause();
    
    fetch('/api/scan-pulang', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ qr_data: decodedText })
    })
    .then(res => res.json())
    .then(data => {
        const result = document.getElementById('result');
        const resultBox = document.getElementById('resultBox');
        const resultText = document.getElementById('resultText');
        const resultStatus = document.getElementById('resultStatus');
        const resultIcon = document.getElementById('resultIcon');

        result.classList.remove('hidden');
        resultText.textContent = data.message;

        if(data.success) {
            const namaSiswa = data.message.split(' - ')[1] || 'Siswa';
            speak(`Sampai jumpa besok, ${namaSiswa}`);
            
            resultStatus.textContent = "Berhasil";
            resultBox.className = 'flex items-center gap-4 p-5 rounded-2xl border-2 bg-blue-50 border-blue-200 text-blue-800';
            resultIcon.className = 'flex-shrink-0 w-12 h-12 rounded-full flex items-center justify-center bg-blue-200 text-blue-600';
            resultIcon.innerHTML = '<svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path></svg>';
        } else {
            speak(data.message);
            resultStatus.textContent = "Gagal";
            resultBox.className = 'flex items-center gap-4 p-5 rounded-2xl border-2 bg-red-50 border-red-200 text-red-800';
            resultIcon.className = 'flex-shrink-0 w-12 h-12 rounded-full flex items-center justify-center bg-red-200 text-red-600';
            resultIcon.innerHTML = '<svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M6 18L18 6M6 6l12 12"></path></svg>';
        }

        setTimeout(() => {
            result.classList.add('hidden');
            html5QrCode.resume();
        }, 3000);
    });
}

document.addEventListener('DOMContentLoaded', startScanner);
</script>
{% endblock %}