<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title><?= $title ?? 'Sistem Perizinan IBK' ?></title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"/>
    <!-- Icons -->
    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1" rel="stylesheet"/>
    <script>
        if (localStorage.getItem('theme') === 'light') {
            document.documentElement.classList.add('theme-light');
        } else {
            document.documentElement.classList.add('theme-dark');
        }
    </script>
    <script id="tailwind-config">
        tailwind.config = {
            darkMode: "class",
            theme: {
                extend: {
                    colors: {
                        "surface": "var(--color-surface)",
                        "surface-dim": "var(--color-surface-dim)",
                        "surface-bright": "var(--color-surface-bright)",
                        "surface-container-lowest": "var(--color-surface-container-lowest)",
                        "surface-container-low": "var(--color-surface-container-low)",
                        "surface-container": "var(--color-surface-container)",
                        "surface-container-high": "var(--color-surface-container-high)",
                        "surface-container-highest": "var(--color-surface-container-highest)",
                        "on-surface": "var(--color-on-surface)",
                        "on-surface-variant": "var(--color-on-surface-variant)",
                        "outline": "var(--color-outline)",
                        "outline-variant": "var(--color-outline-variant)",
                        "primary": "var(--color-primary)",
                        "primary-hover": "var(--color-primary-hover)",
                        "secondary": "var(--color-secondary)",
                        "background": "var(--color-background)",
                        "on-background": "var(--color-on-background)"
                    },
                    borderRadius: {
                        "DEFAULT": "0.5rem",
                        "lg": "0.75rem",
                        "xl": "1rem",
                        "full": "9999px"
                    },
                    spacing: {
                        "gutter": "24px",
                        "lg": "2rem",
                        "container-max": "1280px",
                        "xl": "3rem",
                        "sm": "1rem",
                        "xs": "0.5rem",
                        "base": "4px",
                        "md": "1.5rem"
                    }
                }
            }
        }
    </script>
    <style>
        :root {
            /* Default: Dark Theme */
            --color-surface: #1e2329;
            --color-surface-dim: #101214;
            --color-surface-bright: #2b3038;
            --color-surface-container-lowest: #0a0c0f;
            --color-surface-container-low: #0f1115;
            --color-surface-container: #15181c;
            --color-surface-container-high: #1e2329;
            --color-surface-container-highest: #2b3038;
            --color-on-surface: #ffffff;
            --color-on-surface-variant: #cbd5e1; /* Lighter text for better contrast */
            --color-outline: #475569; /* Brighter outline */
            --color-outline-variant: #334155;
            --color-primary: #4ade80;
            --color-primary-hover: #22c55e;
            --color-secondary: #cbd5e1; /* Lighter text */
            --color-background: #0a0c0f; /* Darker background to make surface pop */
            --color-on-background: #ffffff; /* White text on dark bg */
            --color-glass-card-bg: rgba(30, 35, 41, 0.95);
        }

        html.theme-light {
            --color-surface: #ffffff;
            --color-surface-dim: #f1f5f9;
            --color-surface-bright: #ffffff;
            --color-surface-container-lowest: #ffffff;
            --color-surface-container-low: #f8fafc;
            --color-surface-container: #f1f5f9;
            --color-surface-container-high: #e2e8f0;
            --color-surface-container-highest: #cbd5e1;
            --color-on-surface: #020617; /* Darker text */
            --color-on-surface-variant: #334155; /* Darker text for better contrast */
            --color-outline: #94a3b8; /* Darker outline */
            --color-outline-variant: #cbd5e1;
            --color-primary: #059669;
            --color-primary-hover: #047857;
            --color-secondary: #334155; /* Darker text */
            --color-background: #f8fafc; /* Lighter background */
            --color-on-background: #020617; /* Very dark text on light bg */
            --color-glass-card-bg: rgba(255, 255, 255, 0.95);
        }

        .glass-card {
            background: var(--color-glass-card-bg);
            backdrop-filter: blur(10px);
            border: 1px solid var(--color-outline-variant);
        }
    </style>
</head>
<body class="bg-background text-on-surface-variant min-h-screen flex flex-col lg:flex-row">

    <?php if (session()->get('logged_in')): ?>
        <?php $role = session()->get('role'); ?>
        <!-- SideNavBar (Hidden on Mobile, Flex on Desktop) -->
        <nav class="hidden lg:flex flex-col p-sm gap-xs bg-background border-r border-outline fixed left-0 top-0 h-full w-[280px] z-40">
            <div class="flex items-center gap-sm mb-lg px-xs mt-sm">
                <img src="/logo.png" class="w-10 h-10 object-contain" alt="Logo IBK"/>
                <div>
                    <h1 class="text-sm font-bold text-primary leading-tight">Perizinan IBK</h1>
                    <p class="text-[10px] text-secondary">Imam Ibnu Katsir</p>
                </div>
            </div>
            
            <div class="flex flex-col gap-xs flex-grow">
                <!-- Sidebar links dynamically selected by role -->
                <?php if ($role === 'wali'): ?>
                    <a class="flex items-center gap-sm p-sm rounded-lg font-semibold hover:bg-surface-container-high transition-all <?= url_is('/wali/dashboard*') ? 'bg-surface-container text-primary font-bold' : 'text-on-surface-variant' ?>" href="/wali/dashboard">
                        <span class="material-symbols-outlined">dashboard</span>
                        <span>Dashboard</span>
                    </a>
                    <a class="flex items-center gap-sm p-sm rounded-lg font-semibold hover:bg-surface-container-high transition-all <?= url_is('/wali/riwayat*') ? 'bg-surface-container text-primary font-bold' : 'text-on-surface-variant' ?>" href="/wali/riwayat">
                        <span class="material-symbols-outlined">history</span>
                        <span>Riwayat Perizinan</span>
                    </a>
                    <a class="flex items-center gap-sm p-sm rounded-lg font-semibold hover:bg-surface-container-high transition-all <?= url_is('/wali/pengajuan*') ? 'bg-surface-container text-primary font-bold' : 'text-on-surface-variant' ?>" href="/wali/pengajuan">
                        <span class="material-symbols-outlined">add_moderator</span>
                        <span>Ajukan Izin</span>
                    </a>
                <?php elseif ($role === 'kesantrian'): ?>
                    <a class="flex items-center gap-sm p-sm rounded-lg font-semibold hover:bg-surface-container-high transition-all <?= url_is('/kesantrian/dashboard*') ? 'bg-surface-container text-primary font-bold' : 'text-on-surface-variant' ?>" href="/kesantrian/dashboard">
                        <span class="material-symbols-outlined">dashboard</span>
                        <span>Dashboard</span>
                    </a>
                    <a class="flex items-center gap-sm p-sm rounded-lg font-semibold hover:bg-surface-container-high transition-all <?= url_is('/kesantrian/riwayat*') ? 'bg-surface-container text-primary font-bold' : 'text-on-surface-variant' ?>" href="/kesantrian/riwayat">
                        <span class="material-symbols-outlined">history</span>
                        <span>Riwayat Perizinan</span>
                    </a>
                    <a class="flex items-center gap-sm p-sm rounded-lg font-semibold hover:bg-surface-container-high transition-all <?= url_is('/kesantrian/form-bypass*') ? 'bg-surface-container text-primary font-bold' : 'text-on-surface-variant' ?>" href="/kesantrian/form-bypass">
                        <span class="material-symbols-outlined">bolt</span>
                        <span>Izin Darurat</span>
                    </a>
                    <a class="flex items-center gap-sm p-sm rounded-lg font-semibold hover:bg-surface-container-high transition-all <?= url_is('/kesantrian/monitoring*') ? 'bg-surface-container text-primary font-bold' : 'text-on-surface-variant' ?>" href="/kesantrian/monitoring">
                        <span class="material-symbols-outlined">monitoring</span>
                        <span>Monitoring</span>
                    </a>
                <?php elseif ($role === 'satpam'): ?>
                    <a class="flex items-center gap-sm p-sm rounded-lg font-semibold hover:bg-surface-container-high transition-all <?= url_is('/satpam/dashboard*') ? 'bg-surface-container text-primary font-bold' : 'text-on-surface-variant' ?>" href="/satpam/dashboard">
                        <span class="material-symbols-outlined">qr_code_scanner</span>
                        <span>Validasi Gerbang</span>
                    </a>
                    <a class="flex items-center gap-sm p-sm rounded-lg font-semibold hover:bg-surface-container-high transition-all <?= url_is('/satpam/log*') ? 'bg-surface-container text-primary font-bold' : 'text-on-surface-variant' ?>" href="/satpam/log">
                        <span class="material-symbols-outlined">list_alt</span>
                        <span>Log Aktivitas</span>
                    </a>
                <?php elseif ($role === 'admin'): ?>
                    <a class="flex items-center gap-sm p-sm rounded-lg font-semibold hover:bg-surface-container-high transition-all <?= url_is('/admin/dashboard') ? 'bg-surface-container text-primary font-bold' : 'text-on-surface-variant' ?>" href="/admin/dashboard">
                        <span class="material-symbols-outlined">dashboard</span>
                        <span>Dashboard</span>
                    </a>
                    <a class="flex items-center gap-sm p-sm rounded-lg font-semibold hover:bg-surface-container-high transition-all <?= url_is('/admin/users*') ? 'bg-surface-container text-primary font-bold' : 'text-on-surface-variant' ?>" href="/admin/users">
                        <span class="material-symbols-outlined">group</span>
                        <span>Data Pengguna</span>
                    </a>
                    <a class="flex items-center gap-sm p-sm rounded-lg font-semibold hover:bg-surface-container-high transition-all <?= url_is('/admin/santri*') ? 'bg-surface-container text-primary font-bold' : 'text-on-surface-variant' ?>" href="/admin/santri">
                        <span class="material-symbols-outlined">badge</span>
                        <span>Data Santri</span>
                    </a>
                <?php endif; ?>
            </div>

            <!-- Profile / Logout bottom area -->
            <div class="pt-sm border-t border-outline flex flex-col gap-xs">
                <div class="px-sm py-xs">
                    <p class="text-xs font-bold text-on-surface truncate"><?= esc(session()->get('nama_lengkap')) ?></p>
                    <p class="text-[10px] text-outline font-semibold uppercase tracking-wider"><?= esc($role) ?></p>
                </div>
                <button onclick="toggleTheme()" class="text-on-surface-variant hover:text-on-surface hover:bg-surface-container-high flex items-center gap-sm p-sm rounded-lg font-semibold transition w-full text-left">
                    <span class="material-symbols-outlined" id="theme-icon-desktop">dark_mode</span>
                    <span id="theme-text-desktop">Tema Terang</span>
                </button>
                <a class="text-red-600 hover:bg-red-500/10 flex items-center gap-sm p-sm rounded-lg font-semibold transition" href="/logout">
                    <span class="material-symbols-outlined">logout</span>
                    <span>Logout</span>
                </a>
            </div>
        </nav>

        <!-- TopNavBar (Mobile Only) -->
        <header class="fixed top-0 left-0 w-full z-50 flex justify-between items-center px-lg h-16 bg-surface border-b border-outline shadow-sm lg:hidden">
            <div class="flex items-center gap-xs font-bold text-primary">
                <img src="/logo.png" class="w-8 h-8 object-contain" alt="Logo IBK"/>
                <span class="text-sm">Perizinan IBK</span>
            </div>
            <div class="flex items-center gap-sm">
                <span class="text-xs font-semibold text-secondary uppercase hidden sm:inline"><?= esc($role) ?></span>
                <button onclick="toggleTheme()" class="text-secondary hover:text-on-surface transition px-1 flex items-center">
                    <span class="material-symbols-outlined" id="theme-icon-mobile">dark_mode</span>
                </button>
                <a href="/logout" class="text-red-500 hover:text-red-600 flex items-center">
                    <span class="material-symbols-outlined">logout</span>
                </a>
            </div>
        </header>
    <?php endif; ?>

    <!-- Main Content Canvas -->
    <main class="flex-grow flex-1 <?= session()->get('logged_in') ? 'lg:ml-[280px] pt-16 lg:pt-0 pb-24 lg:pb-0' : '' ?> p-sm md:p-lg lg:p-xl w-full max-w-container-max mx-auto">
        <!-- Flash Alert Messages -->
        <?php if (session()->getFlashdata('error')): ?>
            <div class="mb-6 p-4 rounded-lg bg-red-50 border border-red-200 flex items-start space-x-3 text-red-800">
                <span class="material-symbols-outlined text-red-500 flex-shrink-0">error</span>
                <div class="text-sm font-semibold"><?= esc(session()->getFlashdata('error')) ?></div>
            </div>
        <?php endif; ?>

        <?php if (session()->getFlashdata('success')): ?>
            <div class="mb-6 p-4 rounded-lg bg-emerald-50 border border-emerald-200 flex items-start space-x-3 text-emerald-800">
                <span class="material-symbols-outlined text-emerald-600 flex-shrink-0">check_circle</span>
                <div class="text-sm font-semibold"><?= esc(session()->getFlashdata('success')) ?></div>
            </div>
        <?php endif; ?>

        <?= $this->renderSection('content') ?>
    </main>

    <!-- BottomNavBar (Mobile Only) -->
    <?php if (session()->get('logged_in')): ?>
        <nav class="fixed bottom-0 left-0 w-full z-50 bg-surface border-t border-outline shadow-[0_-2px_10px_rgba(0,0,0,0.05)] lg:hidden flex justify-around items-center h-16 px-xs">
            <?php if ($role === 'wali'): ?>
                <a class="flex flex-col items-center justify-center w-full h-full <?= url_is('/wali/dashboard*') ? 'text-primary' : 'text-secondary' ?>" href="/wali/dashboard">
                    <span class="material-symbols-outlined mb-1">dashboard</span>
                    <span class="text-[10px] font-bold">Beranda</span>
                </a>
                <a class="flex flex-col items-center justify-center w-full h-full <?= url_is('/wali/riwayat*') ? 'text-primary' : 'text-secondary' ?>" href="/wali/riwayat">
                    <span class="material-symbols-outlined mb-1">history</span>
                    <span class="text-[10px] font-bold">Riwayat</span>
                </a>
                <a class="flex flex-col items-center justify-center w-full h-full <?= url_is('/wali/pengajuan*') ? 'text-primary' : 'text-secondary' ?>" href="/wali/pengajuan">
                    <span class="material-symbols-outlined mb-1">add_moderator</span>
                    <span class="text-[10px] font-bold">Ajukan</span>
                </a>
            <?php elseif ($role === 'kesantrian'): ?>
                <a class="flex flex-col items-center justify-center w-full h-full <?= url_is('/kesantrian/dashboard*') ? 'text-primary' : 'text-secondary' ?>" href="/kesantrian/dashboard">
                    <span class="material-symbols-outlined mb-1">dashboard</span>
                    <span class="text-[10px] font-bold">Dashboard</span>
                </a>
                <a class="flex flex-col items-center justify-center w-full h-full <?= url_is('/kesantrian/riwayat*') ? 'text-primary' : 'text-secondary' ?>" href="/kesantrian/riwayat">
                    <span class="material-symbols-outlined mb-1">history</span>
                    <span class="text-[10px] font-bold">Riwayat</span>
                </a>
                <a class="flex flex-col items-center justify-center w-full h-full <?= url_is('/kesantrian/form-bypass*') ? 'text-primary' : 'text-secondary' ?>" href="/kesantrian/form-bypass">
                    <span class="material-symbols-outlined mb-1">bolt</span>
                    <span class="text-[10px] font-bold">Izin</span>
                </a>
                <a class="flex flex-col items-center justify-center w-full h-full <?= url_is('/kesantrian/monitoring*') ? 'text-primary' : 'text-secondary' ?>" href="/kesantrian/monitoring">
                    <span class="material-symbols-outlined mb-1">monitoring</span>
                    <span class="text-[10px] font-bold">Monitor</span>
                </a>
            <?php elseif ($role === 'satpam'): ?>
                <a class="flex flex-col items-center justify-center w-full h-full <?= url_is('/satpam/dashboard*') ? 'text-primary' : 'text-secondary' ?>" href="/satpam/dashboard">
                    <span class="material-symbols-outlined mb-1">qr_code_scanner</span>
                    <span class="text-[10px] font-bold">Scanner</span>
                </a>
                <a class="flex flex-col items-center justify-center w-full h-full <?= url_is('/satpam/log*') ? 'text-primary' : 'text-secondary' ?>" href="/satpam/log">
                    <span class="material-symbols-outlined mb-1">list_alt</span>
                    <span class="text-[10px] font-bold">Log</span>
                </a>
            <?php elseif ($role === 'admin'): ?>
                <a class="flex flex-col items-center justify-center w-full h-full <?= url_is('/admin/dashboard') ? 'text-primary' : 'text-secondary' ?>" href="/admin/dashboard">
                    <span class="material-symbols-outlined mb-1">dashboard</span>
                    <span class="text-[10px] font-bold">Beranda</span>
                </a>
                <a class="flex flex-col items-center justify-center w-full h-full <?= url_is('/admin/users*') ? 'text-primary' : 'text-secondary' ?>" href="/admin/users">
                    <span class="material-symbols-outlined mb-1">group</span>
                    <span class="text-[10px] font-bold">Pengguna</span>
                </a>
                <a class="flex flex-col items-center justify-center w-full h-full <?= url_is('/admin/santri*') ? 'text-primary' : 'text-secondary' ?>" href="/admin/santri">
                    <span class="material-symbols-outlined mb-1">badge</span>
                    <span class="text-[10px] font-bold">Santri</span>
                </a>
            <?php endif; ?>
        </nav>
    <?php endif; ?>

    <script>
        function updateThemeUI() {
            const isLight = document.documentElement.classList.contains('theme-light');
            const iconName = isLight ? 'dark_mode' : 'light_mode'; // if light, show dark icon to switch to dark
            const textName = isLight ? 'Tema Gelap' : 'Tema Terang';
            
            const desktopIcon = document.getElementById('theme-icon-desktop');
            const desktopText = document.getElementById('theme-text-desktop');
            const mobileIcon = document.getElementById('theme-icon-mobile');
            
            if (desktopIcon) desktopIcon.innerText = iconName;
            if (desktopText) desktopText.innerText = textName;
            if (mobileIcon) mobileIcon.innerText = iconName;
        }

        function toggleTheme() {
            if (document.documentElement.classList.contains('theme-light')) {
                document.documentElement.classList.remove('theme-light');
                document.documentElement.classList.add('theme-dark');
                localStorage.setItem('theme', 'dark');
            } else {
                document.documentElement.classList.remove('theme-dark');
                document.documentElement.classList.add('theme-light');
                localStorage.setItem('theme', 'light');
            }
            updateThemeUI();
        }

        document.addEventListener('DOMContentLoaded', updateThemeUI);
    </script>
</body>
</html>
