<?php 
$current_page = basename($_SERVER['PHP_SELF']); 

// Define menu items for consistent rendering
$menu_items = [
    'Main' => [
        ['file' => 'admin_dashboard.php', 'icon' => 'bi-grid-1x2-fill', 'label' => 'Dashboard Overview'],
    ],
    'Logistics' => [
        ['file' => 'create_shipment.php', 'icon' => 'bi-plus-square-fill', 'label' => 'Create Shipment'],
        ['file' => 'shipment_manager.php', 'icon' => 'bi-truck-flatbed', 'label' => 'Manage Shipment'],
        ['file' => 'print_invoice.php', 'icon' => 'bi-printer-fill', 'label' => 'Print Invoice'],
        ['file' => 'messages.php', 'icon' => 'bi-chat-left-text-fill', 'label' => 'Message'],
        ['file' => 'payment_proofs.php', 'icon' => 'bi-wallet2', 'label' => 'Payment Approvals'],
    ],
    'Marketing' => [
        ['file' => 'view_testimonials.php', 'icon' => 'bi-star-fill', 'label' => 'Client Reviews'],
        ['file' => 'manage_giveaways.php', 'icon' => 'bi-gift-fill', 'label' => 'Giveaway Mgmt'],
    ],
    'System' => [
        ['file' => 'settings.php', 'icon' => 'bi-gear-fill', 'label' => 'Global Settings'],
    ]
];

function render_menu($menu_items, $current_page) {
    foreach ($menu_items as $category => $items) {
        echo "<div class='sidebar-category'>$category</div>";
        echo "<ul class='nav flex-column mb-3'>";
        foreach ($items as $item) {
            $active = ($current_page == $item['file']) ? 'active' : '';
            echo "<li class='nav-item'>
                    <a class='sidebar-link $active' href='{$item['file']}'>
                        <i class='bi {$item['icon']} me-2'></i> {$item['label']}
                    </a>
                  </li>";
        }
        echo "</ul>";
    }
}
?>

<style>
#sidebar-wrapper {
    min-width: var(--sidebar-width);
    max-width: var(--sidebar-width);
    background-color: #1a1d20;
    color: #dee2e6;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    border-right: 1px solid rgba(255,255,255,0.05);
    padding: 0;
    z-index: 1000;
}

.sidebar-header-brand {
    padding: 1.5rem 1rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--bs-gold);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.02);
}

.sidebar-header-brand i {
    font-size: 1.1rem;
    margin-right: 12px;
    background: linear-gradient(135deg, #FFC107, #FF8F00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

.sidebar-category {
    padding: 0.5rem 1.5rem;
    font-size: 0.65rem;
    font-weight: 800;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-top: 1.5rem;
    opacity: 0.6;
}

.sidebar-link {
    padding: 0.75rem 1.25rem;
    margin: 0.2rem 0.75rem;
    border-radius: 10px;
    color: #adb5bd;
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: all 0.25s ease;
    font-weight: 500;
    border-left: none;
}

.sidebar-link:hover {
    color: #fff;
    background: rgba(255,255,255,0.08);
    transform: translateX(4px);
}

.sidebar-link.active {
    color: #fff;
    background: var(--bs-crimson-light);
    box-shadow: 0 4px 12px rgba(176, 0, 0, 0.2);
    font-weight: 600;
}

.sidebar-link i {
    font-size: 1rem;
    margin-right: 10px;
    transition: transform 0.3s ease;
    opacity: 0.7;
}

.sidebar-link:hover i, .sidebar-link.active i {
    transform: scale(1.1);
    color: var(--bs-gold);
    opacity: 1;
}

.logout-container {
    margin-top: auto;
    padding: 1.25rem;
    border-top: 1px solid rgba(255,255,255,0.05);
}

.offcanvas-body .sidebar-category { padding-left: 0.5rem; }
.offcanvas-body .sidebar-link { border-radius: 10px; margin: 4px 0; }
.offcanvas-body .sidebar-link.active { background: var(--bs-crimson-light); }
.btn-crimson-toggle { background: var(--crimson-gradient); color: white; border: none; border-radius: 10px; padding: 6px 12px; transition: all 0.3s; }
.btn-crimson-toggle:hover { transform: scale(1.05); color: var(--bs-gold); }

.logout-btn-premium {
    padding: 0.85rem 1.25rem;
    margin: 0.5rem 0.75rem;
    border-radius: 12px;
    color: #ff4d4d;
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 1px solid rgba(255, 77, 77, 0.1);
    background: rgba(255, 77, 77, 0.03);
}

.logout-btn-premium i {
    font-size: 1.1rem;
    margin-right: 12px;
}

.logout-btn-premium:hover {
    color: #fff;
    background: linear-gradient(135deg, #d63031, #b00000);
    border-color: #b00000;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(176, 0, 0, 0.3);
}

.logout-btn-premium:active {
    transform: translateY(0);
}

</style>
<div id="sidebar-wrapper" class="d-none d-md-flex flex-column">

    <div class="flex-grow-1">
        <?php render_menu($menu_items, $current_page); ?>
    </div>
    <div class="logout-container mt-auto">
        <a class="logout-btn-premium" href="logout.php">
            <i class="bi bi-box-arrow-right"></i>Logout
        </a>
    </div>
</div>

<!-- Mobile Sidebar (Offcanvas) -->
<div class="offcanvas offcanvas-start bg-dark" tabindex="-1" id="sidebarOffcanvas" aria-labelledby="sidebarOffcanvasLabel">
    <div class="offcanvas-header border-bottom border-secondary">
        <h5 class="offcanvas-title text-gold fw-bolder" id="sidebarOffcanvasLabel">
            <i class="bi bi-box-seam-fill me-2"></i><?php echo htmlspecialchars($site_settings['site_title'] ?? 'RELI'); ?> ADMIN
        </h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        <?php render_menu($menu_items, $current_page); ?>
        <hr class="text-secondary opacity-25">
        <div class="mt-4 px-2">
            <a class="logout-btn-premium" href="logout.php">
                <i class="bi bi-box-arrow-right"></i> Sign Out
            </a>
        </div>
    </div>
</div>
