<!DOCTYPE html>
<html lang="id">
<head>
    <link rel="icon" type="image/png" href="{{ asset('img/Capture__1_-removebg-preview.png') }}">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scan QR Absen Mapel - SMKN 1 Prajekan</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap" rel="stylesheet">
    <script src="https://unpkg.com/html5-qrcode" type="text/javascript"></script>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <style>
        body { font-family: 'Poppins', sans-serif; background-color: #f4f6f9; min-height: 100vh; }
        .scan-header { background-color: #304058; color: #fff; padding: 20px; text-align: center; }
        .scan-header img { width: 60px; margin-bottom: 10px; }
        .scan-container { max-width: 500px; margin: 30px auto; padding: 0 15px; }
        .scan-card { background-color: #fff; border: 1px solid #e0e0e0; border-radius: 12px; padding: 25px; margin-bottom: 20px; }
        .form-select-flat, .form-control-flat { background-color: #f8f9fa; border: 1px solid #e0e0e0; border-radius: 8px; padding: 12px; font-size: 14px; }
        .form-select-flat:focus, .form-control-flat:focus { border-color: #76c4ef; box-shadow: 0 0 0 0.2rem rgba(118,196,239,0.25); }
        .btn-scan-flat { background-color: #76c4ef; color: #fff; border: none; border-radius: 8px; padding: 14px 20px; font-weight: 600; width: 100%; font-size: 16px; }
        .btn-scan-flat:hover { background-color: #5bb2e3; color: #fff; }
        .result-card { display: none; background-color: #fff; border: 2px solid #28a745; border-radius: 12px; padding: 25px; text-align: center; }
        .result-icon { font-size: 48px; color: #28a745; margin-bottom: 15px; }
        .status-badge { display: inline-block; background-color: #76c4ef; color: #fff; padding: 5px 15px; border-radius: 20px; font-size: 13px; }
    </style>
</head>
<body>
    <div class="scan-header">
        <img src="{{ asset('img/Capture__1_-removebg-preview.png') }}" alt="Logo">
        <h5 class="mb-0 fw-bold">Scan QR Code untuk Absen</h5>
        <small>Absensi Mata Pelajaran</small>
    </div>
    <div class="scan-container">
        <div class="scan-card">
            <h6 class="fw-bold mb-3"><i class="bi bi-camera-video me-2"></i>Arahkan Kamera ke QR Code</h6>
            <div id="reader"></div>
        </div>
        <div class="scan-card">
            <div class="mb-3">
                <label class="form-label fw-bold" style="font-size:14px;">Keterangan:</label>
                <select class="form-select form-select-flat" id="keterangan">
                    <option value="Hadir">Hadir</option>
                    <option value="Sakit">Sakit</option>
                    <option value="Izin">Izin</option>
                    <option value="Alpha">Alpha</option>
                    <option value="Terlambat">Terlambat</option>
                </select>
            </div>
            <div class="mb-3">
                <label class="form-label fw-bold" style="font-size:14px;">Mata Pelajaran:</label>
                <select class="form-select form-select-flat" id="id_mapel">
                    @foreach($data_mapel as $mapel)
                        @if(!empty($mapel->mata_pelajaran))
                        <option value="{{ $mapel->id_pelajaran }}">{{ $mapel->mata_pelajaran }}</option>
                        @endif
                    @endforeach
                </select>
            </div>
        </div>
        <div class="result-card" id="resultCard">
            <div class="result-icon"><i class="bi bi-check-circle-fill"></i></div>
            <h5 class="fw-bold" id="resultTitle">Absen Berhasil!</h5>
            <div id="resultData"></div>
            <button class="btn btn-scan-flat mt-3" onclick="resetScan()"><i class="bi bi-qr-code-scan me-2"></i>Scan Lagi</button>
        </div>
        <a href="{{ url('/') }}" class="btn btn-scan-flat mt-2"><i class="bi bi-house me-2"></i>Kembali ke Portal</a>
    </div>
    <script>
        let html5QrcodeScanner;
        let isProcessing = false;
        function onScanSuccess(decodedText) {
            if (isProcessing) return;
            isProcessing = true;
            html5QrcodeScanner.clear();
            fetch("{{ route('absensi.mapel.proses') }}", {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content, 'Accept': 'application/json' },
                body: JSON.stringify({ id_siswa: decodedText, keterangan: document.getElementById('keterangan').value, id_mapel: document.getElementById('id_mapel').value })
            }).then(r => r.json()).then(data => {
                if (data.success) {
                    document.getElementById('resultCard').style.display = 'block';
                    document.getElementById('resultData').innerHTML = `<div class="text-start mt-3" style="background:#f8f9fa;padding:15px;border-radius:8px;"><p class="mb-1"><strong>Nama:</strong> ${data.data.nama}</p><p class="mb-1"><strong>Mapel:</strong> ${data.data.mapel}</p><p class="mb-0"><strong>Ket:</strong> <span class="status-badge">${data.data.keterangan}</span></p></div>`;
                }
            }).catch(e => { alert('Error: ' + e.message); });
        }
        function resetScan() { isProcessing = false; document.getElementById('resultCard').style.display = 'none'; startScanner(); }
        function startScanner() { html5QrcodeScanner = new Html5QrcodeScanner("reader", { fps: 10, qrbox: { width: 250, height: 250 } }); html5QrcodeScanner.render(onScanSuccess); }
        startScanner();
    </script>
</body>
</html>
