<!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-primary font-semibold border-b-2 border-primary px-sm py-xs" href="/satpam/permits">Permits</a>
<a class="text-on-secondary-fixed-variant font-medium hover:bg-surface-container-low transition-colors px-sm py-xs rounded" 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 (Mobile Optimized for Scanner) -->
<main class="flex-grow flex flex-col mt-16 px-4 md:px-margin-desktop py-lg">
    <div class="max-w-container-max mx-auto w-full">
        <h1 class="text-headline-lg font-headline-lg text-primary mb-4">Daftar Perizinan Aktif</h1>
        
        <div class="bg-surface-container-lowest border border-outline-variant rounded-xl overflow-hidden shadow-sm">
            <div class="overflow-x-auto">
                <table class="w-full text-left border-collapse">
                    <thead>
                        <tr class="bg-surface-container-low text-on-surface-variant font-label-md">
                            <th class="p-4 border-b border-outline-variant">Santri</th>
                            <th class="p-4 border-b border-outline-variant">Kelas</th>
                            <th class="p-4 border-b border-outline-variant">Kategori</th>
                            <th class="p-4 border-b border-outline-variant">Status Gerbang</th>
                            <th class="p-4 border-b border-outline-variant">Waktu Keluar</th>
                        </tr>
                    </thead>
                    <tbody class="text-body-md text-on-surface">
                        <?php if (empty($permits)): ?>
                            <tr>
                                <td colspan="5" class="p-4 text-center text-secondary">Tidak ada data perizinan aktif.</td>
                            </tr>
                        <?php else: ?>
                            <?php foreach ($permits as $permit): ?>
                                <tr class="border-b border-outline-variant hover:bg-surface-bright transition-colors">
                                    <td class="p-4 font-semibold"><?= esc($permit['nama_santri']) ?></td>
                                    <td class="p-4"><?= esc($permit['kelas']) ?></td>
                                    <td class="p-4">
                                        <span class="px-2 py-1 bg-tertiary-container text-on-tertiary-container rounded-full text-xs font-semibold">
                                            <?= ucfirst($permit['kategori_izin']) ?>
                                        </span>
                                    </td>
                                    <td class="p-4">
                                        <?php if ($permit['status_gerbang'] == 'belum_keluar'): ?>
                                            <span class="text-orange-600 font-medium flex items-center gap-1"><span class="material-symbols-outlined text-[16px]">pending</span> Belum Keluar</span>
                                        <?php elseif ($permit['status_gerbang'] == 'diluar'): ?>
                                            <span class="text-blue-600 font-medium flex items-center gap-1"><span class="material-symbols-outlined text-[16px]">directions_walk</span> Di Luar</span>
                                        <?php else: ?>
                                            <span class="text-green-600 font-medium flex items-center gap-1"><span class="material-symbols-outlined text-[16px]">check_circle</span> Selesai</span>
                                        <?php endif; ?>
                                    </td>
                                    <td class="p-4 text-secondary text-sm">
                                        <?= $permit['waktu_keluar_riil'] ? date('d M Y H:i', strtotime($permit['waktu_keluar_riil'])) : '-' ?>
                                    </td>
                                </tr>
                            <?php endforeach; ?>
                        <?php endif; ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</main>
<!-- 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-secondary font-label-sm hover:bg-secondary-container 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">
<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>