<?php
// Admin sidebar component - include this on all admin pages
// Requires session_start() to be called first

// Load config for site title and logo
$dataDir = __DIR__ . '/data';
$configFile = $dataDir . '/site_config.json';
$siteConfig = ['title' => "Esa's Fashion", 'logo' => ''];
if (file_exists($configFile)) {
    $c = @json_decode(file_get_contents($configFile), true);
    if (is_array($c)) $siteConfig = array_merge($siteConfig, $c);
}

// Determine current page for highlighting
$currentPage = basename($_SERVER['PHP_SELF']);
$isCurrentPage = function($page) use ($currentPage) {
    return strpos($currentPage, $page) !== false;
};
?>
<style>
    body.admin-with-sidebar {
        display: flex;
        margin: 0;
        min-height: 100vh;
    }
    #adminSidebarContainer {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: 260px;
        background: #fff;
        border-right: 1px solid #f0f0f0;
        overflow-y: auto;
        z-index: 1000;
        box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    }
    #adminSidebarContainer.collapsed {
        width: 0;
        overflow: hidden;
        transition: width 0.3s ease;
    }
    #adminSidebarContainer:not(.collapsed) {
        transition: width 0.3s ease;
    }
    .admin-main-content {
        flex: 1;
        margin-left: 260px;
        padding-top: 0;
    }
    .admin-main-content.with-collapsed-sidebar {
        margin-left: 0;
    }
    .admin-sidebar-toggle {
        position: fixed;
        left: 10px;
        top: 10px;
        z-index: 999;
        background: #F07E2D;
        color: #fff;
        border: none;
        padding: 8px 12px;
        border-radius: 4px;
        cursor: pointer;
        font-size: 18px;
        display: none;
    }
    #adminSidebarContainer.collapsed ~ .admin-sidebar-toggle {
        display: block;
    }
    .admin-sidebar-header {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px;
        margin-bottom: 12px;
        border-bottom: 1px solid #e6e6e6;
    }
    .admin-sidebar-logo {
        width: 44px;
        height: 44px;
        border-radius: 6px;
        overflow: hidden;
        background: #f4f4f4;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    .admin-sidebar-logo img {
        max-width: 100%;
        max-height: 100%;
    }
    .admin-sidebar-title {
        flex: 1;
        min-width: 0;
    }
    .admin-sidebar-title strong {
        display: block;
        font-weight: 700;
        font-size: 14px;
        word-break: break-word;
    }
    .admin-sidebar-title small {
        display: block;
        font-size: 11px;
        color: #666;
    }
    #adminSidebarNav {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    #adminSidebarNav li {
        margin: 0;
    }
    #adminSidebarNav a {
        display: block;
        color: #F07E2D;
        text-decoration: none;
        padding: 10px 12px;
        border-radius: 4px;
        font-size: 14px;
        transition: background 0.2s;
    }
    #adminSidebarNav a:hover {
        background: rgba(225, 123, 169, 0.1);
        color: #333;
    }
    #adminSidebarNav a.active {
        background: rgba(225, 123, 169, 0.2);
        color: #333;
        font-weight: 600;
    }
    .admin-sidebar-footer {
        margin-top: 16px;
        padding-top: 12px;
        border-top: 1px solid #e6e6e6;
        font-size: 12px;
        padding: 12px;
    }
    .admin-sidebar-footer a {
        display: inline;
        color: #F07E2D;
        text-decoration: none;
        margin-right: 8px;
    }
    .admin-sidebar-footer a:hover {
        text-decoration: underline;
    }
    @media (max-width: 900px) {
        #adminSidebarContainer {
            width: 0;
            overflow: hidden;
        }
        .admin-main-content {
            margin-left: 0;
        }
        .admin-sidebar-toggle {
            display: block;
        }
    }
</style>

<aside id="adminSidebarContainer">
    <div class="admin-sidebar-header">
        <div class="admin-sidebar-logo">
            <?php if (!empty($siteConfig['logo'])): 
                $logoPath = $siteConfig['logo'];
            ?>
                <img src="<?php echo htmlspecialchars($logoPath); ?>?v=<?php echo time(); ?>" alt="logo">
            <?php else: ?>
                <span style="font-weight:700;color:#666;font-size:20px;">E</span>
            <?php endif; ?>
        </div>
        <div class="admin-sidebar-title">
            <strong><?php echo htmlspecialchars($siteConfig['title']); ?></strong>
            <small>Admin Panel</small>
        </div>
    </div>

    <nav style="padding:0 12px;">
        <ul id="adminSidebarNav">
            <li><a href="admin_dashboard.php" <?php echo $isCurrentPage('admin_dashboard') ? 'class="active"' : ''; ?>>Dashboard</a></li>
            <li><a href="admin_products.php" <?php echo $isCurrentPage('admin_products') || $isCurrentPage('admin_add_product') || $isCurrentPage('admin_edit_product') ? 'class="active"' : ''; ?>>Products</a></li>
            <li><a href="admin_manage_users.php" <?php echo $isCurrentPage('admin_manage_users') ? 'class="active"' : ''; ?>>Users</a></li>
            <li><a href="admin_orders.php" <?php echo $isCurrentPage('admin_orders') ? 'class="active"' : ''; ?>>Orders</a></li>
            <li><a href="admin_manage_marquee.php" <?php echo $isCurrentPage('admin_manage_marquee') ? 'class="active"' : ''; ?>>Marquee Text</a></li>
            <li><a href="admin_manage_homepage.php" <?php echo $isCurrentPage('admin_manage_homepage') ? 'class="active"' : ''; ?>>Homepage Sections</a></li>
            <li><a href="admin_manage_category_carousel.php" <?php echo $isCurrentPage('admin_manage_category_carousel') ? 'class="active"' : ''; ?>>Category Carousel</a></li>
            <li><a href="admin_manage_slider.php" <?php echo $isCurrentPage('admin_manage_slider') ? 'class="active"' : ''; ?>>Slider Settings</a></li>
            <li><a href="admin_manage_latest_products.php" <?php echo $isCurrentPage('admin_manage_latest_products') ? 'class="active"' : ''; ?>>Latest Products</a></li>
            <li><a href="admin_manage_video.php" <?php echo $isCurrentPage('admin_manage_video') ? 'class="active"' : ''; ?>>Video Section</a></li>
            <li><a href="admin_manage_footer.php" <?php echo $isCurrentPage('admin_manage_footer') ? 'class="active"' : ''; ?>>Footer Settings</a></li>
        </ul>
    </nav>

    <div class="admin-sidebar-footer">
        <a href="index.php">View Store</a> · 
        <a href="logout_admin.php">Logout</a>
    </div>
</aside>

<button class="admin-sidebar-toggle" onclick="toggleAdminSidebar()">☰</button>

<script>
function toggleAdminSidebar() {
    const sidebar = document.getElementById('adminSidebarContainer');
    const mainContent = document.querySelector('.admin-main-content');
    sidebar.classList.toggle('collapsed');
    mainContent.classList.toggle('with-collapsed-sidebar');
    localStorage.setItem('adminSidebarCollapsed', sidebar.classList.contains('collapsed') ? '1' : '0');
}

// Restore sidebar state on page load
document.addEventListener('DOMContentLoaded', function() {
    const isCollapsed = localStorage.getItem('adminSidebarCollapsed') === '1';
    if (isCollapsed) {
        document.getElementById('adminSidebarContainer').classList.add('collapsed');
        document.querySelector('.admin-main-content').classList.add('with-collapsed-sidebar');
    }
});
</script>
