<!DOCTYPE html>

<html lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Security Scanner - Sistem Perizinan Santri</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<script src="https://unpkg.com/html5-qrcode" type="text/javascript"></script>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700&amp;family=Inter:wght@400;500;600&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
        tailwind.config = {
            darkMode: "class",
            theme: {
                extend: {
                    "colors": {
                        "on-surface": "#0b1c30",
                        "primary-fixed-dim": "#68dba9",
                        "on-error": "#ffffff",
                        "on-secondary": "#ffffff",
                        "on-tertiary-container": "#fefcff",
                        "on-primary-fixed-variant": "#005137",
                        "on-tertiary": "#ffffff",
                        "on-error-container": "#93000a",
                        "inverse-on-surface": "#eaf1ff",
                        "inverse-primary": "#68dba9",
                        "on-background": "#0b1c30",
                        "surface-bright": "#f8f9ff",
                        "secondary": "#545f73",
                        "error-container": "#ffdad6",
                        "surface-container": "#e5eeff",
                        "primary-fixed": "#85f8c4",
                        "on-surface-variant": "#3d4a42",
                        "inverse-surface": "#213145",
                        "tertiary-fixed": "#dae2fd",
                        "surface-tint": "#006c4a",
                        "surface-container-low": "#eff4ff",
                        "on-tertiary-fixed": "#131b2e",
                        "secondary-fixed-dim": "#bcc7de",
                        "outline": "#6d7a72",
                        "on-secondary-container": "#586377",
                        "outline-variant": "#bccac0",
                        "on-primary": "#ffffff",
                        "primary": "#006948",
                        "tertiary": "#545c72",
                        "error": "#ba1a1a",
                        "on-secondary-fixed": "#111c2d",
                        "secondary-fixed": "#d8e3fb",
                        "background": "#f8f9ff",
                        "surface-container-high": "#dce9ff",
                        "on-tertiary-fixed-variant": "#3f465c",
                        "tertiary-container": "#6c748b",
                        "secondary-container": "#d5e0f8",
                        "surface-container-lowest": "#ffffff",
                        "tertiary-fixed-dim": "#bec6e0",
                        "surface": "#f8f9ff",
                        "surface-container-highest": "#d3e4fe",
                        "primary-container": "#00855d",
                        "on-primary-fixed": "#002114",
                        "surface-variant": "#d3e4fe",
                        "on-primary-container": "#f5fff7",
                        "on-secondary-fixed-variant": "#3c475a",
                        "surface-dim": "#cbdbf5"
                    },
                    "borderRadius": {
                        "DEFAULT": "0.25rem",
                        "lg": "0.5rem",
                        "xl": "0.75rem",
                        "full": "9999px"
                    },
                    "spacing": {
                        "gutter": "16px",
                        "lg": "24px",
                        "xl": "32px",
                        "2xl": "48px",
                        "md": "16px",
                        "margin-mobile": "16px",
                        "xs": "4px",
                        "sm": "8px",
                        "base": "4px",
                        "container-max": "1280px",
                        "3xl": "64px",
                        "margin-desktop": "32px"
                    },
                    "fontFamily": {
                        "headline-lg-mobile": ["Plus Jakarta Sans"],
                        "headline-md": ["Plus Jakarta Sans"],
                        "label-sm": ["Inter"],
                        "body-lg": ["Inter"],
                        "body-md": ["Inter"],
                        "label-md": ["Inter"],
                        "headline-lg": ["Plus Jakarta Sans"],
                        "display-lg": ["Plus Jakarta Sans"],
                        "title-lg": ["Plus Jakarta Sans"]
                    },
                    "fontSize": {
                        "headline-lg-mobile": ["24px", { "lineHeight": "32px", "fontWeight": "700" }],
                        "headline-md": ["24px", { "lineHeight": "32px", "fontWeight": "600" }],
                        "label-sm": ["12px", { "lineHeight": "16px", "fontWeight": "600" }],
                        "body-lg": ["18px", { "lineHeight": "28px", "fontWeight": "400" }],
                        "body-md": ["16px", { "lineHeight": "24px", "fontWeight": "400" }],
                        "label-md": ["14px", { "lineHeight": "20px", "letterSpacing": "0.01em", "fontWeight": "500" }],
                        "headline-lg": ["32px", { "lineHeight": "40px", "letterSpacing": "-0.01em", "fontWeight": "700" }],
                        "display-lg": ["48px", { "lineHeight": "60px", "letterSpacing": "-0.02em", "fontWeight": "700" }],
                        "title-lg": ["20px", { "lineHeight": "28px", "fontWeight": "600" }]
                    }
                }
            }
        }
    </script>
<style>
        .scanner-frame {
            box-shadow: 0 0 0 9999px rgba(11, 28, 48, 0.7);
        }
        
        .scanner-line {
            animation: scan 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
        }

        @keyframes scan {
            0% { transform: translateY(0); opacity: 0; }
            10% { opacity: 1; }
            90% { opacity: 1; }
            100% { transform: translateY(240px); opacity: 0; }
        }

        /* Ambient subtle shadow logic for cards */
        .ambient-shadow {
            box-shadow: 0 4px 12px -2px rgba(84, 95, 115, 0.08), 0 2px 4px -2px rgba(84, 95, 115, 0.04);
        }
    </style>
</head>
<body class="bg-surface text-on-surface font-body-md min-h-screen flex flex-col antialiased">
<!-- TopNavBar -->
<nav class="fixed top-0 w-full z-50 flex justify-between items-center px-margin-mobile md:px-margin-desktop h-16 bg-surface-container-lowest border-b border-outline-variant shadow-sm">
<div class="flex items-center gap-md">
<span class="material-symbols-outlined text-primary cursor-pointer md:hidden" data-icon="menu">menu</span>
<div class="text-title-lg font-title-lg font-bold text-primary">Sistem Perizinan Santri</div>
</div>
<!-- Desktop Nav -->
<div class="hidden md:flex gap-lg items-center">
<a class="text-on-secondary-fixed-variant font-medium hover:bg-surface-container-low transition-colors px-sm py-xs rounded" href="/satpam">Dashboard</a>
<a class="text-on-secondary-fixed-variant font-medium hover:bg-surface-container-low transition-colors px-sm py-xs rounded" href="/satpam/permits">Permits</a>
<a class="text-primary font-semibold border-b-2 border-primary px-sm py-xs" href="/satpam/scan">Scan QR</a>
</div>
<div class="flex items-center gap-sm">
<a href="/auth/logout" class="flex items-center gap-2 text-error hover:bg-error-container/20 px-sm py-xs rounded transition-colors" title="Logout">
<span class="material-symbols-outlined" data-icon="logout">logout</span>
<span class="hidden md:inline font-medium text-sm">Logout</span>
</a>
<div class="w-8 h-8 rounded-full overflow-hidden border border-outline-variant ml-xs">
<img alt="User profile" class="w-full h-full object-cover" data-alt="A close-up headshot of a security personnel wearing a crisp dark green uniform with a cap, standing outdoors in bright daylight. The lighting is natural and high-contrast, perfectly capturing the professional corporate modern aesthetic of the boarding school administration system." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDxksQhfJx_seDI4KycEEE28vUxauZ87-KeDQyqQR7YCpye_e1SjOyt9LW1SxOApjdb7U9C0AkrYcq4GpTI2oheZ49lhSAyaedBfZY2uz1_ryl9NmQCRadfsO00LCYTklwtCvgRJ4f-7g-fZGTTtFQwl3XRDqeReAmoxUuDV2as9YLy4A8CcdYl2QGJ6zLWMcDf9EVSZ-5R8XBXeBQHoM1ECSSAaGOeN6Yv8p0fPaaiUOstBmkRT_-1"/>
</div>
</div>
</nav>
<!-- Main Content Area -->
<main class="flex-grow flex flex-col mt-16 px-4 md:px-margin-desktop max-w-2xl mx-auto w-full">
<!-- Scanner Container -->
<div class="w-full mt-4 bg-on-surface overflow-hidden flex flex-col items-center justify-center rounded-xl shadow-lg relative">
    <div id="reader" width="100%" class="w-full bg-white"></div>
</div>

<!-- Status & Action Area -->
<div class="flex-grow bg-surface rounded-t-xl z-30 relative py-lg flex flex-col gap-lg">
<div class="w-12 h-1 bg-outline-variant rounded-full mx-auto mb-xs"></div>

<div class="bg-surface-container-lowest border border-outline-variant rounded-lg p-md ambient-shadow hidden" id="scan-result-container">
<div class="flex justify-between items-start mb-sm">
<div class="flex items-center gap-sm">
<span class="material-symbols-outlined text-primary" id="status-icon" data-icon="check_circle" data-weight="fill" style="font-variation-settings: 'FILL' 1;">check_circle</span>
<span class="font-title-lg text-primary" id="status-text">Valid Permit</span>
</div>
</div>
<h3 class="font-headline-md text-on-surface" id="result-name">-</h3>
<p class="font-body-md text-secondary mt-xs" id="result-message">-</p>

<!-- Primary Actions -->
<div class="mt-4 flex flex-col gap-sm">
<button onclick="processScan('out')" id="btn-out" class="w-full bg-primary text-on-primary font-label-md py-md rounded-lg shadow-sm hover:shadow-md hover:bg-primary-container transition-all flex items-center justify-center gap-sm h-14">
<span class="material-symbols-outlined" data-icon="logout">logout</span>
                    Confirm Check-Out
                </button>
<button onclick="processScan('in')" id="btn-in" class="w-full bg-blue-600 text-white font-label-md py-md rounded-lg shadow-sm hover:shadow-md hover:bg-blue-700 transition-all flex items-center justify-center gap-sm h-14">
<span class="material-symbols-outlined" data-icon="login">login</span>
                    Confirm Check-In
                </button>
<button onclick="resetScanner()" class="w-full border border-outline text-on-surface font-label-md py-md rounded-lg hover:bg-surface-container-low transition-colors h-14">
                    Scan Lagi
                </button>
</div>
</div>
</div>
</main>

<script>
    let currentToken = '';
    let html5QrcodeScanner = new Html5QrcodeScanner(
        "reader",
        { fps: 10, qrbox: {width: 250, height: 250} },
        /* verbose= */ false);

    function onScanSuccess(decodedText, decodedResult) {
        currentToken = decodedText;
        html5QrcodeScanner.pause();
        
        document.getElementById('scan-result-container').classList.remove('hidden');
        document.getElementById('status-text').innerText = "QR Code Terbaca!";
        document.getElementById('result-name').innerText = "Token: " + decodedText.substring(0, 10) + "...";
        document.getElementById('result-message').innerText = "Pilih aksi untuk santri ini.";
        
        // Cek status saat ini ke server bisa ditambahkan disini, tapi untuk kesederhanaan kita langsung tampilkan tombol Out dan In
    }

    function onScanFailure(error) {
        // handle scan failure, usually better to ignore and keep scanning.
    }

    html5QrcodeScanner.render(onScanSuccess, onScanFailure);
    
    function resetScanner() {
        currentToken = '';
        document.getElementById('scan-result-container').classList.add('hidden');
        html5QrcodeScanner.resume();
    }
    
    function processScan(actionType) {
        if(!currentToken) return;
        
        fetch('/satpam/scan', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-Requested-With': 'XMLHttpRequest'
            },
            body: JSON.stringify({
                token: currentToken,
                action: actionType
            })
        })
        .then(response => response.json())
        .then(data => {
            if(data.status === 'success') {
                document.getElementById('status-icon').innerText = 'check_circle';
                document.getElementById('status-icon').classList.replace('text-red-500', 'text-primary');
                document.getElementById('status-text').innerText = 'Sukses';
                document.getElementById('status-text').classList.replace('text-red-500', 'text-primary');
                document.getElementById('result-name').innerText = data.data.nama;
                document.getElementById('result-message').innerText = data.message;
                
                document.getElementById('btn-out').classList.add('hidden');
                document.getElementById('btn-in').classList.add('hidden');
            } else {
                document.getElementById('status-icon').innerText = 'error';
                document.getElementById('status-icon').classList.replace('text-primary', 'text-red-500');
                document.getElementById('status-text').innerText = 'Gagal';
                document.getElementById('status-text').classList.replace('text-primary', 'text-red-500');
                document.getElementById('result-name').innerText = 'Error';
                document.getElementById('result-message').innerText = data.message;
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Terjadi kesalahan koneksi.');
        });
    }
</script>
<!-- BottomNavBar (Mobile Only) -->
<nav class="md:hidden fixed bottom-0 left-0 w-full z-50 flex justify-around items-center h-16 px-4 pb-safe bg-surface-container-lowest border-t border-outline-variant shadow-lg rounded-t-xl">
<a class="flex flex-col items-center justify-center text-secondary font-label-sm hover:bg-secondary-container rounded-lg p-1 transition-colors" href="/satpam">
<span class="material-symbols-outlined mb-1" data-icon="home">home</span>
<span>Home</span>
</a>
<a class="flex flex-col items-center justify-center text-primary font-bold font-label-sm bg-primary-container/10 rounded-lg p-1 transition-colors" href="/satpam/scan">
<span class="material-symbols-outlined mb-1" data-icon="qr_code_scanner" data-weight="fill" style="font-variation-settings: 'FILL' 1;">qr_code_scanner</span>
<span>Scan</span>
</a>
<a class="flex flex-col items-center justify-center text-secondary font-label-sm hover:bg-secondary-container rounded-lg p-1 transition-colors" href="/satpam/permits">
<span class="material-symbols-outlined mb-1" data-icon="assignment_turned_in">assignment_turned_in</span>
<span>Log</span>
</a>
<a class="flex flex-col items-center justify-center text-error font-label-sm hover:bg-error-container/20 rounded-lg p-1 transition-colors" href="/auth/logout">
<span class="material-symbols-outlined mb-1" data-icon="logout">logout</span>
<span>Logout</span>
</a>
</nav>
</body></html>