<?php
$user = current_user();
$activePage = $activePage ?? '';
$pageTitle = $pageTitle ?? 'Gatepass';
$passPages = ['employees', 'visitors', 'packages', 'items', 'mealbreak'];
$isPassPage = in_array($activePage, $passPages, true);
?>
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><?php echo htmlspecialchars($pageTitle); ?> | Gatepass</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.3/build/qrcode.min.js"></script>
    <link href="assets/css/style.css" rel="stylesheet">
</head>
<body>
<div class="app-shell">
    <aside class="sidebar">
        <div class="sidebar-brand">
            <i class="bi bi-clock"></i>
            <span>Gatepass</span>
        </div>

        <nav class="sidebar-nav">
            <a class="<?php echo $activePage === 'dashboard' ? 'active' : ''; ?>" href="dashboard.php">
                <i class="bi bi-speedometer2"></i>
                <span>Dashboard</span>
            </a>

            <button class="nav-dropdown <?php echo $isPassPage ? 'active' : ''; ?>" type="button" data-bs-toggle="collapse" data-bs-target="#passMenu" aria-expanded="<?php echo $isPassPage ? 'true' : 'false'; ?>">
                <span><i class="bi bi-folder2-open"></i> Pass Management</span>
                <i class="bi bi-chevron-down"></i>
            </button>
            <div class="collapse <?php echo $isPassPage ? 'show' : ''; ?>" id="passMenu">

    <a class="sub-link <?php echo $activePage === 'packages' ? 'active' : ''; ?>" href="packages.php">
        Item Pass
    </a>

    <a class="sub-link <?php echo $activePage === 'employees' ? 'active' : ''; ?>" href="employees.php">
        Personnel Pass
    </a>

    <a class="sub-link <?php echo $activePage === 'visitors' ? 'active' : ''; ?>" href="visitors.php">
        Visitor Pass
    </a>

    <a class="sub-link <?php echo $activePage === 'items' ? 'active' : ''; ?>" href="items.php">
        Food Pass
    </a>

    <a class="sub-link <?php echo $activePage === 'mealbreak' ? 'active' : ''; ?>" href="mealbreak.php">
        Meal Break Pass
    </a>

</div>

            <a class="<?php echo $activePage === 'logs' ? 'active' : ''; ?>" href="activity_logs.php">
                <i class="bi bi-clock-history"></i>
                <span>Activity Logs</span>
            </a>

            <?php if (($user['role'] ?? '') === 'Admin') : ?>
                <a class="<?php echo $activePage === 'users' ? 'active' : ''; ?>" href="users.php">
                    <i class="bi bi-people"></i>
                    <span>User Management</span>
                </a>
            <?php endif; ?>
        </nav>

        <a class="logout-link" href="logout.php">
            <i class="bi bi-box-arrow-right"></i>
            <span>Logout</span>
        </a>
    </aside>

    <main class="main-content">
        <header class="topbar">
            <div>
                <p class="eyebrow">Gatepass System</p>
                <h1><?php echo htmlspecialchars($pageTitle); ?></h1>
            </div>
            <div class="topbar-actions">
    <div class="notif-wrapper">
    <button
        id="notifBell"
        type="button"
        style="
            position:relative;
            width:42px;
            height:42px;
            border:1px solid #d9e3ec;
            border-radius:50%;
            background:#fff;
            cursor:pointer;
        "
    >
        <i class="bi bi-bell"></i>

        <span
            id="notifCount"
            class="d-none"
            style="
                position:absolute;
                top:-8px;
                right:-8px;
                min-width:22px;
                height:22px;
                background:#dc3545;
                color:#fff;
                border-radius:50%;
                font-size:12px;
                font-weight:700;
                display:flex;
                align-items:center;
                justify-content:center;
                border:2px solid #fff;
                z-index:9999;
            "
        >0</span>
    </button>

    <div class="notif-dropdown d-none" id="notifDropdown">

    <div class="notif-header">
        <div>
            <strong>Notifications</strong>
            <small>Recent gatepass requests</small>
        </div>

        <button type="button" id="notifClose" class="notif-close">
            &times;
        </button>
    </div>

    <div id="notifList" class="notif-list">
        <div class="notif-empty">No notifications</div>
    </div>

</div>

    <div class="user-pill">
        <i class="bi bi-person-circle"></i>
        <span><?php echo htmlspecialchars($user['full_name'] ?? 'User'); ?></span>
    </div>
</div>
        </header>
