<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard | Impeccable Courier</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    <style>
        :root {
            --sidebar-width: 260px;
            --top-navbar-height: 70px;
            --sidebar-bg: #111827;
            --body-bg: #f3f4f6;
            --accent-blue: #3b82f6;
        }
        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            background-color: var(--body-bg);
            color: #1f2937;
            overflow-x: hidden;
        }
        .sidebar {
            position: fixed;
            top: 0; bottom: 0; left: 0;
            width: var(--sidebar-width);
            background: var(--sidebar-bg);
            z-index: 1050;
            padding: 1.5rem 1rem;
            box-shadow: 4px 0 10px rgba(0,0,0,0.05);
            transition: transform 0.3s ease;
        }
        .sidebar-brand {
            font-size: 1.25rem;
            font-weight: 700;
            color: white;
            padding: 0 1rem 2rem;
            display: flex;
            align-items: center;
        }
        .nav-link {
            color: #9ca3af;
            font-weight: 500;
            padding: 0.75rem 1rem;
            margin-bottom: 0.25rem;
            border-radius: 0.5rem;
            transition: all 0.2s;
            text-decoration: none;
        }
        .nav-link:hover, .nav-link.active {
            background: rgba(255,255,255,0.08);
            color: white;
        }
        .top-navbar {
            position: fixed;
            top: 0; right: 0;
            left: var(--sidebar-width);
            height: var(--top-navbar-height);
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(0,0,0,0.05);
            z-index: 1030;
            display: flex;
            align-items: center;
            padding: 0 2rem;
            transition: left 0.3s ease;
        }
        .nav-title {
            font-size: 0.875rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: #6b7280;
            font-weight: 600;
        }
        .logout-btn {
            background: #111827;
            color: white;
            border: none;
            padding: 0.5rem 1.25rem;
            font-size: 0.875rem;
            font-weight: 500;
            border-radius: 0.5rem;
            transition: transform 0.1s;
            text-decoration: none;
        }
        .logout-btn:hover {
            background: #374151;
            color: white;
            transform: translateY(-1px);
        }
        .main-content {
            margin-left: var(--sidebar-width);
            margin-top: var(--top-navbar-height);
            padding: 2rem;
            min-height: calc(100vh - var(--top-navbar-height));
            transition: margin-left 0.3s ease;
        }
        .sidebar-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.5);
            z-index: 1045;
            display: none;
        }
        @media (max-width: 992px) {
            .sidebar { transform: translateX(-100%); }
            .sidebar.show { transform: translateX(0); }
            .top-navbar { left: 0; padding: 0 1rem; }
            .main-content { margin-left: 0; padding: 1.5rem 1rem; }
            .sidebar-overlay.show { display: block; }
        }
        .message {
            padding: 12px 16px;
            border-radius: 4px;
            margin-bottom: 24px;
            font-size: 14px;
            font-weight: 500;
            display: flex;
            align-items: center;
            width: 100%;
            box-sizing: border-box;
        }
        .message.error {
            background-color: #fdf2f2;
            color: #d32f2f;
            border: 1px solid #f9d7d7;
        }
        .message.error::before {
            content: "\f06a";
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            margin-right: 10px;
        }
    </style>
</head>
<body>
<div class="sidebar-overlay" id="sidebarOverlay"></div>
<?php $currentController = $this->request->getParam('controller'); ?>
<nav class="sidebar d-flex flex-column" id="sidebar">
    <div class="sidebar-brand">
        Impeccable Courier
    </div>
    <div class="nav flex-column">
        <?php
$menuItems = [
    [
        'label' => 'Dashboard',
        'link' => ['prefix' => 'Admin', 'controller' => 'Dashboard', 'action' => 'index'],
        'icon' => 'bi-speedometer2'
    ],
    [
        'label' => 'Bookings',
        'link' => ['prefix' => 'Admin', 'controller' => 'BookingManagement', 'action' => 'index'],
        'icon' => 'bi-box-seam'
    ],
    [
        'label' => 'Inquiries',
        'link' => ['prefix' => false, 'controller' => 'Contact', 'action' => 'allMessages'],
        'icon' => 'bi-envelope'
    ],
    [
        'label' => 'Users',
        'link' => ['prefix' => false, 'controller' => 'Users', 'action' => 'index'],
        'icon' => 'bi-person-gear',
        'admin_only' => true
    ],
    [
        'label' => 'CMS',
        'plugin' => 'ContentBlocks',
        'link' => ['prefix'=>false, 'controller' => 'ContentBlocks', 'action' => 'index'],
        'icon' => 'bi-gear',
        'admin_only' => true
    ],
];
        $currentUserRole = $this->Identity->get('role');
        foreach ($menuItems as $item):
            if ($currentUserRole !== 'admin' && !empty($item['admin_only'])) {
                continue;
            }
            $isActive = (
                $this->request->getParam('controller') === $item['link']['controller'] &&
                $this->request->getParam('action') === $item['link']['action']
            );
            $iconHtml = '<i class="bi ' . $item['icon'] . ' me-3"></i>';
            echo $this->Html->link(
                $iconHtml . $item['label'],
                $item['link'],
                [
                    'class' => 'nav-link d-flex align-items-center' . ($isActive ? ' active' : ''),
                    'escape' => false
                ]
            );
        endforeach;
        ?>
    </div>
    <div class="mt-auto pt-4 border-top border-secondary border-opacity-25">
        <?= $this->Html->link(
            '&nbsp;<i class="bi bi-box-arrow-right me-1"></i>&nbsp;Back to Landing Page',
            '/',
            [
                'escape' => false,
                'class' => 'nav-link d-flex align-items-center'
            ]
        ) ?>
    </div>
</nav>
<header class="top-navbar shadow-sm">
    <div class="d-flex justify-content-between align-items-center w-100">
        <div class="d-flex align-items-center">
            <button style = "text-decoration: none;"class="btn btn-link d-lg-none p-0 me-3 text-dark" id="sidebarToggle">
                ☰
            </button>
            <div class="nav-title">Admin Dashboard</div>
        </div>
        <div class="d-flex align-items-center">
            <div class="me-3 text-end d-none d-md-block">
                <div class="fw-bold" style="font-size: 0.85rem;">
                    <?= h($this->Identity->get('email')) ?>
                </div>
                <div class="text-muted" style="font-size: 0.75rem;">
                    <?= h($this->Identity->get('role')) ?>
                </div>
            </div>
            <?= $this->Html->link(
                '<i class="bi bi-box-arrow-right me-2"></i> Logout',
                ['prefix' => false,  'controller' => 'auth', 'action' => 'logout'],
                ['class' => 'logout-btn d-flex align-items-center', 'escape' => false]
            ) ?>
        </div>
    </div>
</header>
<main class="main-content">
    <div class="container-fluid p-0">
        <?= $this->Flash->render() ?>
        <?= $this->fetch('content') ?>
    </div>
</main>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
<script>
    const sidebar = document.getElementById('sidebar');
    const overlay = document.getElementById('sidebarOverlay');
    const toggleBtn = document.getElementById('sidebarToggle');
    function toggleSidebar() {
        sidebar.classList.toggle('show');
        overlay.classList.toggle('show');
    }
    if(toggleBtn) toggleBtn.addEventListener('click', toggleSidebar);
    if(overlay) overlay.addEventListener('click', toggleSidebar);
</script>
</body>
</html>
