<?php $adminSettings = getAllSettings($pdo); ?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= $pageTitle ?? 'Admin' ?> - <?= htmlspecialchars($adminSettings['site_name'] ?? 'Admin') ?></title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
    <style>
        :root { --sidebar-w: 260px; --sidebar-bg: #1a1a2e; --accent: #c9a84c; }
        body { background: #f5f7fa; font-family: 'Segoe UI', sans-serif; }
        .sidebar { position: fixed; top: 0; left: 0; width: var(--sidebar-w); height: 100vh; background: var(--sidebar-bg); overflow-y: auto; z-index: 999; }
        .sidebar .brand { padding: 24px 20px 16px; border-bottom: 1px solid rgba(255,255,255,.08); }
        .sidebar .brand h5 { color: #fff; font-weight: 700; font-size: 1.2rem; margin: 0; }
        .sidebar .brand span { color: var(--accent); }
        .sidebar .nav-section { padding: 12px 20px 4px; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.35); font-weight: 600; }
        .sidebar .nav-link { color: rgba(255,255,255,.7); padding: 9px 20px; font-size: .88rem; display: flex; align-items: center; gap: 10px; border-left: 3px solid transparent; transition: all .15s; }
        .sidebar .nav-link:hover, .sidebar .nav-link.active { color: #fff; background: rgba(255,255,255,.07); border-left-color: var(--accent); }
        .sidebar .nav-link i { font-size: 1rem; width: 18px; text-align: center; }
        .topbar { margin-left: var(--sidebar-w); background: #fff; border-bottom: 1px solid #e9ecef; padding: 12px 28px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 100; }
        .main-content { margin-left: var(--sidebar-w); padding: 28px; min-height: calc(100vh - 60px); }
        .card { border: 1px solid #e9ecef; border-radius: 10px; box-shadow: none; }
        .card-header { background: #fff; border-bottom: 1px solid #e9ecef; font-weight: 600; }
        .table > :not(caption) > * > * { padding: .75rem 1rem; }
        .badge-active { background: #d1fae5; color: #065f46; }
        .badge-inactive { background: #fee2e2; color: #991b1b; }
        .btn-sm { padding: 4px 10px; font-size: .8rem; }
        .btn-xs { padding: 2px 7px; font-size: .75rem; line-height: 1.4; }
        @media (max-width: 991px) { .sidebar { transform: translateX(-100%); transition: transform .3s; } .sidebar.show { transform: none; } .topbar, .main-content { margin-left: 0; } }
    </style>
</head>
<body>
<!-- SIDEBAR -->
<div class="sidebar" id="sidebar">
    <div class="brand">
        <?php if (!empty($adminSettings['site_logo'])): ?>
            <img src="../<?= htmlspecialchars($adminSettings['site_logo']) ?>" alt="" style="max-height:40px;max-width:180px;object-fit:contain;" onerror="this.style.display='none';this.nextElementSibling.style.display='block'">
            <h5 style="display:none"><?= htmlspecialchars($adminSettings['site_name'] ?? 'KURSIJOK') ?></h5>
        <?php else: ?>
            <h5><?= htmlspecialchars($adminSettings['site_name'] ?? 'KURSIJOK') ?></h5>
        <?php endif; ?>
        <small style="color:rgba(255,255,255,.45);font-size:.75rem;">Admin Panel</small>
    </div>
    <nav class="mt-2">
        <div class="nav-section">Main</div>
        <a href="index.php" class="nav-link <?= ($activePage??'') === 'dashboard' ? 'active' : '' ?>"><i class="bi bi-speedometer2"></i> Dashboard</a>

        <div class="nav-section">Content</div>
        <a href="sliders.php" class="nav-link <?= ($activePage??'') === 'sliders' ? 'active' : '' ?>"><i class="bi bi-images"></i> Slider</a>
        <a href="news.php" class="nav-link <?= ($activePage??'') === 'news' ? 'active' : '' ?>"><i class="bi bi-newspaper"></i> Berita & Kegiatan</a>
        <a href="gallery-photos.php" class="nav-link <?= ($activePage??'') === 'gallery_photos' ? 'active' : '' ?>"><i class="bi bi-image"></i> Galeri Foto</a>
        <a href="gallery-videos.php" class="nav-link <?= ($activePage??'') === 'gallery_videos' ? 'active' : '' ?>"><i class="bi bi-play-circle"></i> Galeri Video</a>

        <div class="nav-section">Products</div>
        <a href="products.php" class="nav-link <?= ($activePage??'') === 'products' ? 'active' : '' ?>"><i class="bi bi-box-seam"></i> Produk</a>
        <a href="brands.php" class="nav-link <?= ($activePage??'') === 'brands' ? 'active' : '' ?>"><i class="bi bi-award"></i> Brand</a>
        <a href="brand-products.php" class="nav-link <?= ($activePage??'') === 'brand_products' ? 'active' : '' ?>"><i class="bi bi-grid-3x3-gap"></i> Produk Brand</a>
        <a href="projects.php" class="nav-link <?= ($activePage??'') === 'projects' ? 'active' : '' ?>"><i class="bi bi-building"></i> Our Projects</a>
        <a href="price.php" class="nav-link <?= ($activePage??'') === 'price' ? 'active' : '' ?>"><i class="bi bi-tags"></i> Price List</a>
        <a href="catalogs.php" class="nav-link <?= ($activePage??'') === 'catalogs' ? 'active' : '' ?>"><i class="bi bi-file-pdf"></i> Katalog</a>

        <div class="nav-section">Company</div>
        <a href="about.php" class="nav-link <?= ($activePage??'') === 'about' ? 'active' : '' ?>"><i class="bi bi-info-circle"></i> About Us</a>
        <a href="customers.php" class="nav-link <?= ($activePage??'') === 'customers' ? 'active' : '' ?>"><i class="bi bi-people"></i> Our Customers</a>
        <a href="messages.php" class="nav-link <?= ($activePage??'') === 'messages' ? 'active' : '' ?>"><i class="bi bi-envelope"></i> Pesan Masuk</a>

        <div class="nav-section">Settings</div>
        <a href="settings.php" class="nav-link <?= ($activePage??'') === 'settings' ? 'active' : '' ?>"><i class="bi bi-gear"></i> Pengaturan</a>
        <a href="logout.php" class="nav-link text-danger"><i class="bi bi-box-arrow-right"></i> Logout</a>
    </nav>
</div>
<!-- TOPBAR -->
<div class="topbar">
    <div class="d-flex align-items-center gap-3">
        <button class="btn btn-sm btn-outline-secondary d-lg-none" onclick="document.getElementById('sidebar').classList.toggle('show')"><i class="bi bi-list"></i></button>
        <span class="fw-semibold"><?= $pageTitle ?? 'Dashboard' ?></span>
    </div>
    <div class="d-flex align-items-center gap-3">
        <a href="../index.php" target="_blank" class="btn btn-sm btn-outline-dark"><i class="bi bi-eye me-1"></i>View Site</a>
        <div class="dropdown">
            <button class="btn btn-sm d-flex align-items-center gap-2" data-bs-toggle="dropdown">
                <div style="width:32px;height:32px;border-radius:50%;background:#1a1a2e;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem;"><?= strtoupper(substr($_SESSION['admin_username']??'A',0,1)) ?></div>
                <span class="d-none d-md-inline"><?= htmlspecialchars($_SESSION['admin_username']??'Admin') ?></span>
            </button>
            <ul class="dropdown-menu dropdown-menu-end">
                <li><a class="dropdown-item" href="logout.php"><i class="bi bi-box-arrow-right me-2"></i>Logout</a></li>
            </ul>
        </div>
    </div>
</div>
<!-- MAIN CONTENT -->
<div class="main-content">
