<?php
if (session_status() === PHP_SESSION_NONE) {
    session_start();
}
$base_url = "/admin/admin_dashboard";
?>

<style>
    :root {
        --sidebar-width: 240px; /* Diperkecil sedikit */
        --sidebar-bg: #212529;
        --active-color: #007bff;
        --nav-font-size: 0.88rem; /* Font diperkecil agar rapi */
    }

    body {
        background-color: #f4f6f9;
        margin: 0;
        padding: 0;
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

    .main-container {
        display: flex;
        width: 100%;
    }

    /* Sidebar */
    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        width: var(--sidebar-width);
        height: 100vh;
        background-color: var(--sidebar-bg);
        color: white;
        z-index: 1000;
        display: flex;
        flex-direction: column; /* Menggunakan Flexbox untuk susunan vertikal */
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
    }

    .sidebar-header {
        padding: 15px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .sidebar-header img {
        width: 28px;
        height: 28px;
    }

    .sidebar-header span {
        font-size: 1rem;
        font-weight: 600;
        white-space: nowrap;
    }

    /* Area Navigasi (Bisa Scroll jika menu banyak) */
    .sidebar-nav {
        flex: 1;
        overflow-y: auto;
        padding: 10px 0;
    }

    .sidebar-nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .sidebar-nav a {
        color: rgba(255, 255, 255, 0.75);
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 18px; /* Padding diperkecil agar lebih rapat */
        transition: all 0.2s ease;
        font-size: var(--nav-font-size);
    }

    .sidebar-nav a i {
        width: 18px; /* Lebar ikon disamakan agar sejajar vertikal */
        text-align: center;
        font-size: 0.95rem;
    }

    .sidebar-nav a:hover {
        color: white;
        background-color: rgba(255, 255, 255, 0.08);
    }

    .sidebar-nav a.active {
        color: white;
        background-color: rgba(255, 255, 255, 0.12);
        border-left: 3px solid var(--active-color);
        padding-left: 15px; /* Kompensasi border */
    }

    /* Footer / Profil */
    .sidebar-footer {
        padding: 12px 15px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        background-color: #1a1d20;
    }

    .dropdown-toggle {
        color: white;
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 0.9rem;
        cursor: pointer;
    }

    /* Content Wrapper */
    .content-wrapper {
        margin-left: var(--sidebar-width);
        width: calc(100% - var(--sidebar-width));
        min-height: 100vh;
        padding: 20px;
        box-sizing: border-box;
    }

    /* Penyesuaian Mobile */
    @media (max-width: 768px) {
        .sidebar { position: relative; width: 100%; height: auto; }
        .content-wrapper { margin-left: 0; width: 100%; }
        .sidebar-footer { position: relative; }
    }
</style>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">

<div class="main-container">
    <div class="sidebar">
        <div class="sidebar-header">
            <img src="/assets/logoFLS3N.png" alt="Logo">
            <span>FLS3N 2026 Admin</span>
        </div>

        <div class="sidebar-nav">
            <ul>
                <li><a href="<?= $base_url ?>/index.php" class="<?= ($current_dir === 'admin_dashboard') ? 'active' : '' ?>">
                    <i class="fas fa-home"></i> Dashboard</a>
                </li>
                <li><a href="<?= $base_url ?>/admin_cabang_lomba/index.php" class="<?= ($current_dir === 'admin_cabang_lomba') ? 'active' : '' ?>">
                    <i class="fas fa-trophy"></i> Cabang Lomba</a>
                </li>
                <li><a href="<?= $base_url ?>/admin_kelola_peserta/index.php" class="<?= ($current_dir === 'admin_kelola_peserta') ? 'active' : '' ?>">
                    <i class="fas fa-user-graduate"></i> Kelola Peserta</a>
                </li>
                <li><a href="<?= $base_url ?>/admin_peserta_kota/index.php" class="<?= ($current_dir === 'admin_peserta_kota') ? 'active' : '' ?>">
                    <i class="fas fa-city"></i> Peserta Kota Salatiga</a>
                </li>
                <li><a href="<?= $base_url ?>/admin_peserta_kabupaten/index.php" class="<?= ($current_dir === 'admin_peserta_kabupaten') ? 'active' : '' ?>">
                    <i class="fas fa-map-marked-alt"></i> Perserta Kab. Semarang</a>
                </li>
                <li><a href="<?= $base_url ?>/admin_peserta_kabupaten_2/index.php" class="<?= ($current_dir === 'admin_peserta_kabupaten_2') ? 'active' : '' ?>">
                    <i class="fas fa-map-marker-alt"></i> Peserta Kab. Demak</a>
                </li>
                <li><a href="<?= $base_url ?>/admin_admin/index.php" class="<?= ($current_dir === 'admin_admin') ? 'active' : '' ?>">
                    <i class="fas fa-user-shield"></i> Kelola Admin</a>
                </li>
                <li><a href="<?= $base_url ?>/admin_juri/index.php" class="<?= ($current_dir === 'admin_juri') ? 'active' : '' ?>">
                    <i class="fas fa-user-tie"></i> Kelola Juri</a>
                </li>
                <li><a href="<?= $base_url ?>/admin_kelola_sekolah/index.php" class="<?= ($current_dir === 'admin_kelola_sekolah') ? 'active' : '' ?>">
                    <i class="fas fa-school"></i> Kelola Sekolah</a>
                </li>
                <li><a href="<?= $base_url ?>/admin_penilaian/index.php" class="<?= ($current_dir === 'admin_penilaian') ? 'active' : '' ?>">
                    <i class="fas fa-star"></i> Hasil Penilaian</a>
                </li>
                <li><a href="<?= $base_url ?>/admin_status_lomba/index.php" class="<?= ($current_dir === 'admin_status_lomba') ? 'active' : '' ?>">
                    <i class="fas fa-toggle-on"></i> Status Lomba</a>
                </li>
            </ul>
        </div>

        <div class="sidebar-footer">
            <div class="dropdown">
                <a href="#" class="dropdown-toggle" data-bs-toggle="dropdown" id="adminDropdown">
                    <i class="fas fa-user-circle" style="font-size: 1.3rem;"></i>
                    <strong><?= isset($_SESSION['nama']) ? htmlspecialchars($_SESSION['nama']) : 'Administrator' ?></strong>
                </a>
                <ul class="dropdown-menu dropdown-menu-dark">
                    <li><a class="dropdown-item" href="/logout.php">Logout</a></li>
                </ul>
            </div>
        </div>
    </div>

    <div class="content-wrapper">