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

function isActive($pageName, $currentPage) {
    return $currentPage == $pageName
        ? 'bg-red-600 text-white shadow-md'
        : 'text-gray-400 hover:bg-gray-800 hover:text-white transition-colors duration-200';
}

// Ambil URL website dari HTTP_HOST
$proto   = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') ? 'https' : 'http';
$webRoot = $proto . '://' . ($_SERVER['HTTP_HOST'] ?? 'localhost');
?>

<!-- ============================================================
     OVERLAY: klik untuk tutup sidebar di mobile
     ============================================================ -->
<div id="sidebar-overlay"
     class="fixed inset-0 bg-black/50 z-40 hidden md:hidden"
     onclick="closeSidebar()"
     aria-hidden="true"></div>

<!-- ============================================================
     SIDEBAR
     - Desktop: flex statis (w-64)
     - Mobile: fixed full-height, tersembunyi default, muncul saat hamburger diklik
     ============================================================ -->
<aside id="sidebar"
       class="
           fixed inset-y-0 left-0 z-50 w-64 bg-gray-900
           flex flex-col
           border-r border-gray-800
           transform -translate-x-full
           transition-transform duration-300 ease-in-out
           md:static md:translate-x-0 md:flex md:shrink-0
       ">

    <!-- Header sidebar -->
    <div class="h-16 flex items-center justify-between px-6 border-b border-gray-800 bg-gray-900 shrink-0">
        <div class="flex items-center gap-3">
            <i class="fa-solid fa-car-on text-red-600 text-2xl"></i>
            <h1 class="text-xl font-bold text-red-600 tracking-wider">ADMIN</h1>
        </div>
        <!-- Tombol tutup — hanya tampil di mobile -->
        <button onclick="closeSidebar()"
                class="md:hidden text-gray-400 hover:text-white p-1.5 rounded-lg hover:bg-gray-800 transition"
                aria-label="Tutup menu">
            <i class="fa-solid fa-xmark text-xl"></i>
        </button>
    </div>

    <!-- Link ke Website (di atas semua menu) -->
    <a href="<?= $webRoot ?>"
       target="_blank" rel="noopener noreferrer"
       class="flex items-center gap-3 px-5 py-2.5 bg-red-600 hover:bg-red-700 transition shrink-0">
        <i class="fa-solid fa-arrow-up-right-from-square text-white text-sm"></i>
        <span class="text-white text-xs font-bold uppercase tracking-wider">Lihat Website</span>
    </a>

    <!-- Menu List — overflow-y-auto agar selalu bisa di-scroll -->
    <nav class="flex-1 overflow-y-auto custom-scrollbar py-4 px-3 space-y-0.5" aria-label="Menu admin">

        <!-- UTAMA -->
        <p class="px-3 text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-1.5 mt-1">Utama</p>

        <a href="dashboard.php" onclick="closeSidebar()"
           class="flex items-center px-3 py-2.5 rounded-xl <?php echo isActive('dashboard.php', $current_page); ?>">
            <div class="w-8 flex justify-center shrink-0"><i class="fa-solid fa-gauge-high text-base"></i></div>
            <span class="font-medium text-sm">Dashboard</span>
        </a>

        <!-- KONTEN WEBSITE -->
        <p class="px-3 text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-1.5 mt-4">Konten Website</p>

        <a href="settings.php" onclick="closeSidebar()"
           class="flex items-center px-3 py-2.5 rounded-xl <?php echo isActive('settings.php', $current_page); ?>">
            <div class="w-8 flex justify-center shrink-0"><i class="fa-solid fa-gear text-base"></i></div>
            <span class="font-medium text-sm">Web Profile</span>
        </a>

        <a href="credit_settings.php" onclick="closeSidebar()"
           class="flex items-center px-3 py-2.5 rounded-xl <?php echo isActive('credit_settings.php', $current_page); ?>">
            <div class="w-8 flex justify-center shrink-0"><i class="fa-solid fa-calculator text-base"></i></div>
            <span class="font-medium text-sm">Rate Kredit</span>
        </a>

        <a href="crud_produk.php" onclick="closeSidebar()"
           class="flex items-center px-3 py-2.5 rounded-xl <?php echo isActive('crud_produk.php', $current_page); ?>">
            <div class="w-8 flex justify-center shrink-0"><i class="fa-solid fa-car text-base"></i></div>
            <span class="font-medium text-sm">Data Produk</span>
            <?php if (in_array($current_page, ['bulk_upload_produk.php'])): ?>
            <span class="ml-auto text-[10px] bg-green-600 text-white px-1.5 py-0.5 rounded font-bold">Bulk</span>
            <?php endif; ?>
        </a>

        <a href="crud_promo.php" onclick="closeSidebar()"
           class="flex items-center px-3 py-2.5 rounded-xl <?php echo isActive('crud_promo.php', $current_page); ?>">
            <div class="w-8 flex justify-center shrink-0"><i class="fa-solid fa-tags text-base"></i></div>
            <span class="font-medium text-sm">Promo</span>
        </a>

        <a href="crud_artikel.php" onclick="closeSidebar()"
           class="flex items-center px-3 py-2.5 rounded-xl <?php echo isActive('crud_artikel.php', $current_page); ?>">
            <div class="w-8 flex justify-center shrink-0"><i class="fa-solid fa-newspaper text-base"></i></div>
            <span class="font-medium text-sm">Artikel</span>
        </a>

        <a href="ai_generator.php" onclick="closeSidebar()"
           class="flex items-center px-3 py-2.5 rounded-xl relative <?php echo isActive('ai_generator.php', $current_page); ?>">
            <div class="w-8 flex justify-center shrink-0">
                <i class="fa-solid fa-wand-magic-sparkles text-base <?php echo ($current_page == 'ai_generator.php') ? 'text-white' : 'text-orange-500'; ?>"></i>
            </div>
            <div class="flex-1 min-w-0">
                <span class="font-medium text-sm block">AI Generator</span>
                <span class="text-[10px] opacity-60 block font-normal leading-tight">Bikin Konten Kilat</span>
            </div>
            <span class="text-[9px] bg-red-100 text-red-600 px-1.5 py-0.5 rounded font-bold ml-1">NEW</span>
        </a>

        <a href="crud_testimoni.php" onclick="closeSidebar()"
           class="flex items-center px-3 py-2.5 rounded-xl <?php echo isActive('crud_testimoni.php', $current_page); ?>">
            <div class="w-8 flex justify-center shrink-0"><i class="fa-solid fa-comments text-base"></i></div>
            <span class="font-medium text-sm">Testimoni</span>
        </a>

        <a href="sync_google_review.php" onclick="closeSidebar()"
           class="flex items-center px-3 py-2.5 rounded-xl <?php echo isActive('sync_google_review.php', $current_page); ?>">
            <div class="w-8 flex justify-center shrink-0"><i class="fa-brands fa-google text-base"></i></div>
            <span class="font-medium text-sm">Google Review</span>
            <?php if ($current_page !== 'sync_google_review.php'): ?>
            <span class="ml-auto text-[9px] bg-blue-600 text-white px-1.5 py-0.5 rounded font-bold">AUTO</span>
            <?php endif; ?>
        </a>

        <!-- AKUN -->
        <p class="px-3 text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-1.5 mt-4">Akun Saya</p>

        <a href="change_password.php" onclick="closeSidebar()"
           class="flex items-center px-3 py-2.5 rounded-xl <?php echo isActive('change_password.php', $current_page); ?>">
            <div class="w-8 flex justify-center shrink-0"><i class="fa-solid fa-lock text-base"></i></div>
            <span class="font-medium text-sm">Ganti Password</span>
        </a>

        <a href="backup.php" onclick="closeSidebar()"
           class="flex items-center px-3 py-2.5 rounded-xl <?php echo isActive('backup.php', $current_page); ?>">
            <div class="w-8 flex justify-center shrink-0"><i class="fa-solid fa-database text-base"></i></div>
            <span class="font-medium text-sm">Backup DB</span>
        </a>

        <a href="logout.php"
           class="flex items-center px-3 py-2.5 rounded-xl mt-2 text-gray-400 hover:bg-red-900 hover:text-red-200 transition-colors">
            <div class="w-8 flex justify-center shrink-0"><i class="fa-solid fa-right-from-bracket text-base"></i></div>
            <span class="font-medium text-sm">Keluar</span>
        </a>

        <div class="mt-6 pb-4 text-center">
            <p class="text-[10px] text-gray-600">&copy; <?= date('Y') ?> Admin Panel</p>
        </div>

    </nav>
</aside>

<script>
function openSidebar() {
    const sidebar = document.getElementById('sidebar');
    const overlay = document.getElementById('sidebar-overlay');
    sidebar.classList.remove('-translate-x-full');
    overlay.classList.remove('hidden');
    document.body.style.overflow = 'hidden'; // cegah scroll background
}

function closeSidebar() {
    const sidebar = document.getElementById('sidebar');
    const overlay = document.getElementById('sidebar-overlay');
    sidebar.classList.add('-translate-x-full');
    overlay.classList.add('hidden');
    document.body.style.overflow = '';
}

function toggleSidebar() {
    const sidebar = document.getElementById('sidebar');
    if (sidebar.classList.contains('-translate-x-full')) {
        openSidebar();
    } else {
        closeSidebar();
    }
}
</script>