<!DOCTYPE html>

<html lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Kesantrian Admin Dashboard</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<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" rel="preconnect"/>
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&amp;family=Plus+Jakarta+Sans:wght@600;700&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>
        .material-symbols-outlined {
          font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }
        .material-symbols-outlined.fill {
            font-variation-settings: 'FILL' 1;
        }
      </style>
</head>
<body class="bg-surface text-on-surface antialiased flex">
<!-- SideNavBar -->
<nav class="hidden md:flex flex-col fixed left-0 top-0 h-full py-lg bg-surface-container border-r border-outline-variant docked h-full w-72 z-50">
<div class="px-lg mb-8 flex items-center gap-4">
<img alt="Admin Logo" class="w-12 h-12 rounded-full object-cover shadow-sm bg-white" data-alt="A clean, minimalist abstract logo for a modern Islamic educational institution, utilizing primary green and soft white. The design is geometric and professional, suitable for a light mode admin interface." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAEtxc8396cXcVg6WzZ-6sgE-6ktifi2r-1laUI43zAnh2681dr9gammdg4WafnBzJoyhzkfgRo-Mw7RQrj2O1bg3vNn33f7P4XvwUCFrYsaoLMiAoTxdrSE7Ei1xnrlCGxGHnwlpvRtj-k9zWF7JGqctoxzNpm0sk3MclbFqhsvOr2-k_eKEB1UGVC_vZ5IBMk7plvks-neFeA5K2gm8oozHDuBlXT25y4jfnRhL928DGxX5aZm3IC"/>
<div>
<h1 class="text-headline-md font-headline-md text-primary m-0">Admin Panel</h1>
<p class="text-label-sm font-label-sm text-on-surface-variant m-0">Kesantrian Division</p>
</div>
</div>
<div class="flex-1 overflow-y-auto">
<ul class="space-y-sm">
<!-- Active Item: Dashboard -->
<li>
<a class="flex items-center gap-3 px-4 py-3 bg-primary text-on-primary rounded-lg mx-2 transition-all opacity-80 duration-150" href="/kesantrian">
<span class="material-symbols-outlined">dashboard</span>
<span class="text-label-md font-label-md">Dashboard</span>
</a>
</li>
<li>
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-container-highest transition-all rounded-lg mx-2" href="/kesantrian/permits">
<span class="material-symbols-outlined">assignment_turned_in</span>
<span class="text-label-md font-label-md">Permits</span>
</a>
</li>
<li>
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-container-highest transition-all rounded-lg mx-2" href="/santri">
<span class="material-symbols-outlined">group</span>
<span class="text-label-md font-label-md">Student Data</span>
</a>
</li>
<li>
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-container-highest transition-all rounded-lg mx-2" href="/users">
<span class="material-symbols-outlined">manage_accounts</span>
<span class="text-label-md font-label-md">User Management</span>
</a>
</li>
<li>
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-container-highest transition-all rounded-lg mx-2" href="/reports">
<span class="material-symbols-outlined">assessment</span>
<span class="text-label-md font-label-md">Reports</span>
</a>
</li>
</ul>
</div>
<div class="mt-auto px-lg">
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-container-highest transition-all rounded-lg mx-2" href="/auth/logout">
<span class="material-symbols-outlined">logout</span>
<span class="text-label-md font-label-md">Logout</span>
</a>
</div>
</nav>
<!-- Main Content Area -->
<main class="flex-1 md:ml-72 flex flex-col min-h-screen">
<!-- TopNavBar (Mobile Only / Responsive Fallback for context) -->
<header class="md:hidden fixed top-0 w-full z-40 flex justify-between items-center px-margin-mobile h-16 bg-surface-container-lowest border-b border-outline-variant shadow-sm docked full-width top-0">
<div class="flex items-center gap-3">
<img alt="Sistem Perizinan Santri Logo" class="w-8 h-8 rounded-full" data-alt="A simple crest logo for an Islamic school, rendered in primary green on a white background, highly legible." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAwYwtrUGmuK4tqglS6snvId5zFEr4EgtFoGCt797d7UGtOe2f4MrsShfYtmcCtH89DE7KZoUwUHMCOQq6Qr8IjUhO29PgLAQ29ZtwWVJxhaWTY4boUE8NDoU2yqtywTBcLr4PV4RxEOO8WBblUTPT_rCc-AlS0qIv5sH9zbHEv_U7AxbPp_7HkGrsh4NhVOaB6urbQ9AYwB5lg9IAJsNRHBUOgb3YeY5hV59c8MpCOmZcvBZL4tidU"/>
<span class="text-title-lg font-title-lg font-bold text-primary">Sistem Perizinan Santri</span>
</div>
<div class="flex items-center gap-4">
<button class="text-primary hover:bg-surface-container-low p-2 rounded-full transition-colors"><span class="material-symbols-outlined">notifications</span></button>
<button class="text-primary hover:bg-surface-container-low p-2 rounded-full transition-colors"><span class="material-symbols-outlined">settings</span></button>
</div>
</header>
<div class="pt-20 md:pt-8 px-margin-mobile md:px-margin-desktop pb-24 max-w-[1280px] w-full mx-auto">
<!-- Page Header -->
<div class="flex flex-col md:flex-row md:items-end justify-between mb-8 gap-4">
<div>
<h2 class="text-headline-lg-mobile md:text-headline-lg font-headline-lg-mobile md:font-headline-lg text-on-surface m-0">Overview</h2>
<p class="text-body-md font-body-md text-on-surface-variant mt-1">Today's operational status and recent activity.</p>
</div>
<div class="flex gap-3">
<button class="flex items-center gap-2 bg-white border border-[#1E293B] text-[#1E293B] px-4 py-2 rounded-lg text-label-md font-label-md hover:bg-surface-container-low transition-colors shadow-sm">
<span class="material-symbols-outlined text-[20px]">download</span>
                        Export Report
                    </button>
<button class="flex items-center gap-2 bg-[#059669] text-white px-4 py-2 rounded-lg text-label-md font-label-md hover:shadow-md transition-shadow">
<span class="material-symbols-outlined text-[20px]">add</span>
                        New Permit
                    </button>
</div>
</div>
<!-- Summary Cards (Bento Grid Style) -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-gutter mb-lg">
<!-- Card 1 -->
<div class="bg-white rounded-xl p-lg border border-[#E2E8F0] shadow-sm relative overflow-hidden group">
<div class="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
<span class="material-symbols-outlined text-[64px] text-primary">school</span>
</div>
<p class="text-label-md font-label-md text-on-surface-variant mb-2">Total Santri</p>
<h3 class="text-display-lg font-display-lg text-on-surface m-0">1,248</h3>
<p class="text-label-sm font-label-sm text-[#059669] mt-2 flex items-center gap-1">
<span class="material-symbols-outlined text-[16px]">trending_up</span> +12 this month
                    </p>
</div>
<!-- Card 2 -->
<div class="bg-white rounded-xl p-lg border border-[#E2E8F0] shadow-sm relative overflow-hidden group">
<div class="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
<span class="material-symbols-outlined text-[64px] text-[#D97706]">directions_walk</span>
</div>
<p class="text-label-md font-label-md text-on-surface-variant mb-2">Active Permits</p>
<h3 class="text-display-lg font-display-lg text-on-surface m-0">42</h3>
<p class="text-label-sm font-label-sm text-on-surface-variant mt-2">Students currently outside</p>
</div>
<!-- Card 3 -->
<div class="bg-white rounded-xl p-lg border border-[#E2E8F0] shadow-sm relative overflow-hidden group">
<div class="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
<span class="material-symbols-outlined text-[64px] text-[#2563EB]">pending_actions</span>
</div>
<p class="text-label-md font-label-md text-on-surface-variant mb-2">Pending Requests</p>
<h3 class="text-display-lg font-display-lg text-on-surface m-0"><?= count($pending_requests) ?></h3>
<div class="mt-2 inline-flex items-center gap-1 px-2 py-1 rounded bg-[#FEF3C7] text-[#D97706] text-label-sm font-label-sm">
                        Requires Approval
                    </div>
</div>
<!-- Card 4 -->
<div class="bg-white rounded-xl p-lg border border-[#E2E8F0] shadow-sm relative overflow-hidden group">
<div class="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
<span class="material-symbols-outlined text-[64px] text-[#DC2626]">warning</span>
</div>
<p class="text-label-md font-label-md text-on-surface-variant mb-2">Overdue Returns</p>
<h3 class="text-display-lg font-display-lg text-[#DC2626] m-0">3</h3>
<div class="mt-2 inline-flex items-center gap-1 px-2 py-1 rounded bg-[#FEE2E2] text-[#DC2626] text-label-sm font-label-sm">
                        Immediate Action Needed
                    </div>
</div>
</div>
<!-- Main Content Layout -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-lg">
<!-- Recent Activity List (Takes up 2 columns on large screens) -->
<div class="lg:col-span-2 bg-white rounded-xl border border-[#E2E8F0] shadow-sm overflow-hidden flex flex-col">
<div class="p-lg border-b border-[#F1F5F9] flex justify-between items-center bg-surface-container-lowest">
<h3 class="text-title-lg font-title-lg text-on-surface m-0">Recent Activity</h3>
<button class="text-primary text-label-md font-label-md hover:underline">View All</button>
</div>
<div class="flex-1 overflow-y-auto">
<ul class="divide-y divide-[#F1F5F9]">
<?php if(empty($pending_requests)): ?>
    <li class="p-4 text-center text-label-md text-on-surface-variant">Tidak ada pengajuan izin yang menunggu persetujuan.</li>
<?php else: ?>
    <?php foreach($pending_requests as $req): ?>
    <li class="p-4 hover:bg-surface-bright transition-colors flex items-start gap-4">
    <div class="w-10 h-10 rounded-full bg-[#FEF3C7] flex items-center justify-center text-[#D97706] flex-shrink-0">
    <span class="material-symbols-outlined text-[20px]">pending_actions</span>
    </div>
    <div class="flex-1">
    <p class="text-body-md font-body-md text-on-surface m-0"><span class="font-semibold"><?= esc($req['nama_santri']) ?></span> (Kelas <?= esc($req['kelas']) ?>)</p>
    <p class="text-label-sm font-label-sm text-on-surface-variant mt-1">
        Izin: <?= ucfirst($req['kategori_izin']) ?> | <?= date('d M Y', strtotime($req['tgl_mulai'])) ?> - <?= date('d M Y', strtotime($req['tgl_kembali_rencana'])) ?>
    </p>
    <p class="text-label-sm font-label-sm text-on-surface-variant mt-1">Alasan: <?= esc($req['alasan']) ?></p>
    </div>
    <div class="flex flex-col gap-2">
        <form action="/kesantrian/approve/<?= $req['id'] ?>" method="post">
            <button type="submit" class="inline-flex px-3 py-2 rounded bg-primary text-white hover:bg-primary-container text-label-sm font-label-sm whitespace-nowrap cursor-pointer transition-colors shadow-sm">
                Setujui & Buat QR
            </button>
        </form>
        <button class="inline-flex px-3 py-2 rounded bg-white border border-red-500 text-red-600 hover:bg-red-50 text-label-sm font-label-sm whitespace-nowrap cursor-pointer transition-colors">
            Tolak
        </button>
    </div>
    </li>
    <?php endforeach; ?>
<?php endif; ?>
</ul>
</div>
</div>
<!-- Secondary Panel (Trends & Quick Actions) -->
<div class="flex flex-col gap-lg">
<!-- Permit Trends Placeholder (Glassmorphism inspired card) -->
<div class="bg-white rounded-xl border border-[#E2E8F0] shadow-sm p-lg relative overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-surface-container-low to-white opacity-50 pointer-events-none"></div>
<div class="relative z-10">
<h3 class="text-title-lg font-title-lg text-on-surface m-0 mb-4 flex items-center gap-2">
<span class="material-symbols-outlined text-primary">monitoring</span>
                                Permit Trends
                            </h3>
<!-- Placeholder for Chart -->
<div class="h-48 w-full bg-surface-bright rounded-lg border border-dashed border-outline-variant flex items-center justify-center mb-4">
<span class="text-label-md font-label-md text-on-surface-variant flex flex-col items-center gap-2">
<span class="material-symbols-outlined text-[32px] opacity-50">bar_chart</span>
                                    Chart Data Loading...
                                </span>
</div>
<div class="flex justify-between items-center text-label-sm font-label-sm text-on-surface-variant">
<span>This Week</span>
<span class="text-[#059669] flex items-center gap-1"><span class="material-symbols-outlined text-[16px]">arrow_upward</span> 5%</span>
</div>
</div>
</div>
<!-- Quick Actions -->
<div class="bg-white rounded-xl border border-[#E2E8F0] shadow-sm p-lg">
<h3 class="text-title-lg font-title-lg text-on-surface m-0 mb-4">Quick Actions</h3>
<div class="space-y-3">
<button class="w-full flex items-center justify-between p-3 rounded-lg border border-outline-variant hover:border-primary hover:bg-surface-container-lowest transition-colors group">
<div class="flex items-center gap-3">
<span class="material-symbols-outlined text-primary group-hover:scale-110 transition-transform">qr_code_scanner</span>
<span class="text-label-md font-label-md text-on-surface">Security Scanner</span>
</div>
<span class="material-symbols-outlined text-on-surface-variant text-[16px]">chevron_right</span>
</button>
<button class="w-full flex items-center justify-between p-3 rounded-lg border border-outline-variant hover:border-primary hover:bg-surface-container-lowest transition-colors group">
<div class="flex items-center gap-3">
<span class="material-symbols-outlined text-primary group-hover:scale-110 transition-transform">group_add</span>
<span class="text-label-md font-label-md text-on-surface">Register Student</span>
</div>
<span class="material-symbols-outlined text-on-surface-variant text-[16px]">chevron_right</span>
</button>
</div>
</div>
</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 docked full-width rounded-t-xl">
<a class="flex flex-col items-center justify-center text-primary font-bold transition-transform scale-90" href="#">
<span class="material-symbols-outlined fill">home</span>
<span class="text-label-sm font-label-sm mt-1">Home</span>
</a>
<a class="flex flex-col items-center justify-center text-secondary hover:bg-secondary-container rounded-lg p-1 transition-colors" href="#">
<span class="material-symbols-outlined">add_circle</span>
<span class="text-label-sm font-label-sm mt-1 text-center leading-tight">New Request</span>
</a>
<a class="flex flex-col items-center justify-center text-secondary hover:bg-secondary-container rounded-lg p-1 transition-colors" href="#">
<span class="material-symbols-outlined">confirmation_number</span>
<span class="text-label-sm font-label-sm mt-1 text-center leading-tight">My Tickets</span>
</a>
<a class="flex flex-col items-center justify-center text-secondary hover:bg-secondary-container rounded-lg p-1 transition-colors" href="#">
<span class="material-symbols-outlined">person</span>
<span class="text-label-sm font-label-sm mt-1">Profile</span>
</a>
</nav>
</body></html>