<?php
// File: admin/menu.php
// Sidebar menu untuk semua halaman admin
// HAPUS SPASI SEBELUM <?php INI
?>
<style>
    .sidebar {
        width: 280px;
        background: linear-gradient(180deg, #0a2b3e 0%, #0d3b4f 100%);
        color: white;
        position: fixed;
        height: 100vh;
        left: 0;
        top: 0;
        z-index: 100;
        overflow-y: auto;
        transition: all 0.3s;
    }
    .sidebar .brand {
        padding: 25px 20px;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        margin-bottom: 20px;
    }
    .sidebar .brand h3 {
        font-size: 1.5rem;
        margin: 0;
    }
    .sidebar .brand small {
        font-size: 0.7rem;
        opacity: 0.7;
    }
    .sidebar .nav-item {
        padding: 12px 20px;
        margin: 5px 15px;
        border-radius: 12px;
        transition: all 0.3s;
    }
    .sidebar .nav-item:hover {
        background: rgba(255,255,255,0.15);
    }
    .sidebar .nav-item.active {
        background: rgba(255,255,255,0.2);
    }
    .sidebar .nav-item a {
        color: white;
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 12px;
    }
    .sidebar .nav-item i {
        width: 22px;
        font-size: 1.1rem;
        text-align: center;
    }
    .sidebar .nav-item span {
        font-size: 0.9rem;
    }

    /* Mobile sidebar */
    .mobile-top-bar {
        display: none;
        position: sticky;
        top: 0;
        background: linear-gradient(180deg, #0a2b3e 0%, #0d3b4f 100%);
        color: white;
        padding: 12px 15px;
        z-index: 999;
        justify-content: space-between;
        align-items: center;
    }
    .hamburger-btn {
        background: none;
        border: none;
        color: white;
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 5px;
        cursor: pointer;
    }
    .hamburger-btn span {
        width: 25px;
        height: 3px;
        background: white;
        border-radius: 3px;
    }
    .mobile-sidebar {
        position: fixed;
        top: 0;
        left: -280px;
        width: 280px;
        height: 100vh;
        background: linear-gradient(180deg, #0a2b3e 0%, #0d3b4f 100%);
        z-index: 1050;
        transition: left 0.3s ease;
        overflow-y: auto;
    }
    .mobile-sidebar.open {
        left: 0;
    }
    .mobile-sidebar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.5);
        z-index: 1049;
        display: none;
    }
    .mobile-sidebar-overlay.open {
        display: block;
    }
    .mobile-sidebar .brand {
        padding: 20px;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    .mobile-sidebar .nav-item {
        padding: 12px 20px;
        margin: 5px 15px;
        border-radius: 12px;
    }
    .mobile-sidebar .nav-item a {
        color: white;
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 12px;
    }
    .close-sidebar {
        float: right;
        background: none;
        border: none;
        color: white;
        font-size: 1.5rem;
        cursor: pointer;
        padding: 10px;
    }

    @media (max-width: 768px) {
        .sidebar {
            display: none;
        }
        .mobile-top-bar {
            display: flex;
        }
    }
</style>

<!-- Mobile Top Bar -->
<div class="mobile-top-bar">
    <button class="hamburger-btn" id="hamburgerBtn">
        <span></span>
        <span></span>
        <span></span>
    </button>
    <div>
        <h5 class="mb-0">💊 Apotek Restu</h5>
        <small>Admin Panel</small>
    </div>
    <div style="width: 30px;"></div>
</div>

<!-- Mobile Sidebar -->
<div class="mobile-sidebar-overlay" id="mobileSidebarOverlay"></div>
<div class="mobile-sidebar" id="mobileSidebar">
    <div style="text-align: right; padding: 10px;">
        <button class="close-sidebar" id="closeSidebarBtn">&times;</button>
    </div>
    <div class="brand">
        <h3>💊 Apotek Restu</h3>
        <small>Admin Panel</small>
    </div>
    <div class="nav-item <?php echo basename($_SERVER['PHP_SELF']) == 'index.php' ? 'active' : ''; ?>">
        <a href="index.php"><i class="fas fa-tachometer-alt"></i> <span>Dashboard</span></a>
    </div>
    <div class="nav-item <?php echo basename($_SERVER['PHP_SELF']) == 'products.php' ? 'active' : ''; ?>">
        <a href="products.php"><i class="fas fa-pills"></i> <span>Produk</span></a>
    </div>
    <div class="nav-item <?php echo basename($_SERVER['PHP_SELF']) == 'categories.php' ? 'active' : ''; ?>">
        <a href="categories.php"><i class="fas fa-tags"></i> <span>Kategori</span></a>
    </div>
    <div class="nav-item <?php echo basename($_SERVER['PHP_SELF']) == 'orders.php' ? 'active' : ''; ?>">
        <a href="orders.php"><i class="fas fa-shopping-cart"></i> <span>Pesanan</span></a>
    </div>
    <div class="nav-item <?php echo basename($_SERVER['PHP_SELF']) == 'payments.php' ? 'active' : ''; ?>">
        <a href="payments.php"><i class="fas fa-credit-card"></i> <span>Pembayaran</span></a>
    </div>
    <div class="nav-item <?php echo basename($_SERVER['PHP_SELF']) == 'consultations.php' ? 'active' : ''; ?>">
        <a href="consultations.php"><i class="fas fa-comments"></i> <span>Konsultasi</span></a>
    </div>
    <div class="nav-item <?php echo basename($_SERVER['PHP_SELF']) == 'settings.php' ? 'active' : ''; ?>">
        <a href="settings.php"><i class="fas fa-truck"></i> <span>Pengiriman</span></a>
    </div>
    <div class="nav-item">
        <a href="logout.php"><i class="fas fa-sign-out-alt"></i> <span>Logout</span></a>
    </div>
    <div class="mt-4 px-4">
        <small class="text-white-50">© 2025 Apotek Restu</small>
    </div>
</div>

<!-- Desktop Sidebar -->
<div class="sidebar">
    <div class="brand">
        <h3>💊 Apotek Restu</h3>
        <small>Admin Panel</small>
    </div>
    <div class="nav-item <?php echo basename($_SERVER['PHP_SELF']) == 'index.php' ? 'active' : ''; ?>">
        <a href="index.php"><i class="fas fa-tachometer-alt"></i> <span>Dashboard</span></a>
    </div>
    <div class="nav-item <?php echo basename($_SERVER['PHP_SELF']) == 'products.php' ? 'active' : ''; ?>">
        <a href="products.php"><i class="fas fa-pills"></i> <span>Produk</span></a>
    </div>
    <div class="nav-item <?php echo basename($_SERVER['PHP_SELF']) == 'categories.php' ? 'active' : ''; ?>">
        <a href="categories.php"><i class="fas fa-tags"></i> <span>Kategori</span></a>
    </div>
    <div class="nav-item <?php echo basename($_SERVER['PHP_SELF']) == 'orders.php' ? 'active' : ''; ?>">
        <a href="orders.php"><i class="fas fa-shopping-cart"></i> <span>Pesanan</span></a>
    </div>
    <div class="nav-item <?php echo basename($_SERVER['PHP_SELF']) == 'payments.php' ? 'active' : ''; ?>">
        <a href="payments.php"><i class="fas fa-credit-card"></i> <span>Pembayaran</span></a>
    </div>
    <div class="nav-item <?php echo basename($_SERVER['PHP_SELF']) == 'consultations.php' ? 'active' : ''; ?>">
        <a href="consultations.php"><i class="fas fa-comments"></i> <span>Konsultasi</span></a>
    </div>
    <div class="nav-item <?php echo basename($_SERVER['PHP_SELF']) == 'settings.php' ? 'active' : ''; ?>">
        <a href="settings.php"><i class="fas fa-truck"></i> <span>Pengiriman</span></a>
    </div>
    <div class="nav-item">
        <a href="logout.php"><i class="fas fa-sign-out-alt"></i> <span>Logout</span></a>
    </div>
    <div class="mt-4 px-4">
        <small class="text-white-50">© 2025 Apotek Restu</small>
    </div>
</div>

<script>
// Hamburger menu functionality
document.addEventListener('DOMContentLoaded', function() {
    var hamburgerBtn = document.getElementById('hamburgerBtn');
    var mobileSidebar = document.getElementById('mobileSidebar');
    var mobileSidebarOverlay = document.getElementById('mobileSidebarOverlay');
    var closeSidebarBtn = document.getElementById('closeSidebarBtn');
    
    function openSidebar() {
        if(mobileSidebar) mobileSidebar.classList.add('open');
        if(mobileSidebarOverlay) mobileSidebarOverlay.classList.add('open');
        document.body.style.overflow = 'hidden';
    }
    
    function closeSidebar() {
        if(mobileSidebar) mobileSidebar.classList.remove('open');
        if(mobileSidebarOverlay) mobileSidebarOverlay.classList.remove('open');
        document.body.style.overflow = '';
    }
    
    if(hamburgerBtn) hamburgerBtn.addEventListener('click', openSidebar);
    if(closeSidebarBtn) closeSidebarBtn.addEventListener('click', closeSidebar);
    if(mobileSidebarOverlay) mobileSidebarOverlay.addEventListener('click', closeSidebar);
    
    var mobileLinks = document.querySelectorAll('#mobileSidebar .nav-item a');
    for(var i = 0; i < mobileLinks.length; i++) {
        mobileLinks[i].addEventListener('click', closeSidebar);
    }
});
</script>