<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= isset($page_title) ? h($page_title) . ' - Admin - ' . APP_NAME : 'Admin - ' . APP_NAME ?></title>
    <meta name="description" content="">
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <link rel="stylesheet" href="<?= BASE_PATH ?>/assets/css/app.css">
    <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.2/Sortable.min.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: { '50': '#eff6ff', '100': '#dbeafe', '200': '#bfdbfe', '300': '#93c5fd', '400': '#60a5fa', '500': '#3b82f6', '600': '#2563eb', '700': '#1d4ed8', '800': '#1e40af', '900': '#1e3a8a' }
                    }
                }
            }
        }
    </script>
</head>
<body class="bg-gray-100 min-h-screen flex">
    <!-- Sidebar -->
    <aside class="w-64 bg-gray-900 text-white min-h-screen flex flex-col shrink-0">
        <div class="p-4 border-b border-gray-700">
            <a href="<?= BASE_PATH ?>/admin/dashboard.php" class="text-xl font-bold text-primary-400"><?= APP_NAME ?> Admin</a>
        </div>
        <nav class="flex-1 p-4 space-y-1 overflow-y-auto">
            <a href="<?= BASE_PATH ?>/admin/dashboard.php" class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm <?= basename($_SERVER['PHP_SELF']) === 'dashboard.php' ? 'bg-primary-600 text-white' : 'text-gray-300 hover:bg-gray-700' ?>">
                <i class="fas fa-tachometer-alt w-5"></i> Dashboard
            </a>
            <a href="<?= BASE_PATH ?>/admin/orders.php" class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm <?= basename($_SERVER['PHP_SELF']) === 'orders.php' ? 'bg-primary-600 text-white' : 'text-gray-300 hover:bg-gray-700' ?>">
                <i class="fas fa-shopping-bag w-5"></i> Orders
            </a>
            <a href="<?= BASE_PATH ?>/admin/returns.php" class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm <?= basename($_SERVER['PHP_SELF']) === 'returns.php' ? 'bg-primary-600 text-white' : 'text-gray-300 hover:bg-gray-700' ?>">
                <i class="fas fa-undo w-5"></i> Returns
            </a>
            <a href="<?= BASE_PATH ?>/admin/products.php" class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm <?= in_array(basename($_SERVER['PHP_SELF']), ['products.php', 'product-form.php']) ? 'bg-primary-600 text-white' : 'text-gray-300 hover:bg-gray-700' ?>">
                <i class="fas fa-box w-5"></i> Products
            </a>
            <a href="<?= BASE_PATH ?>/admin/categories.php" class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm <?= basename($_SERVER['PHP_SELF']) === 'categories.php' ? 'bg-primary-600 text-white' : 'text-gray-300 hover:bg-gray-700' ?>">
                <i class="fas fa-tags w-5"></i> Categories
            </a>
            <a href="<?= BASE_PATH ?>/admin/users.php" class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm <?= basename($_SERVER['PHP_SELF']) === 'users.php' ? 'bg-primary-600 text-white' : 'text-gray-300 hover:bg-gray-700' ?>">
                <i class="fas fa-users w-5"></i> Users
            </a>
            <a href="<?= BASE_PATH ?>/admin/reviews.php" class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm <?= basename($_SERVER['PHP_SELF']) === 'reviews.php' ? 'bg-primary-600 text-white' : 'text-gray-300 hover:bg-gray-700' ?>">
                <i class="fas fa-star w-5"></i> Reviews
            </a>
            <a href="<?= BASE_PATH ?>/admin/coupons.php" class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm <?= basename($_SERVER['PHP_SELF']) === 'coupons.php' ? 'bg-primary-600 text-white' : 'text-gray-300 hover:bg-gray-700' ?>">
                <i class="fas fa-percent w-5"></i> Coupons
            </a>
            <a href="<?= BASE_PATH ?>/admin/offers.php" class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm <?= basename($_SERVER['PHP_SELF']) === 'offers.php' ? 'bg-primary-600 text-white' : 'text-gray-300 hover:bg-gray-700' ?>">
                <i class="fas fa-tag w-5"></i> Offers
            </a>
            <hr class="border-gray-700 my-2">
            <a href="<?= BASE_PATH ?>/admin/pages.php" class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm <?= in_array(basename($_SERVER['PHP_SELF']), ['pages.php', 'page-form.php']) ? 'bg-primary-600 text-white' : 'text-gray-300 hover:bg-gray-700' ?>">
                <i class="fas fa-file w-5"></i> Pages
            </a>
            <a href="<?= BASE_PATH ?>/admin/banners.php" class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm <?= basename($_SERVER['PHP_SELF']) === 'banners.php' ? 'bg-primary-600 text-white' : 'text-gray-300 hover:bg-gray-700' ?>">
                <i class="fas fa-images w-5"></i> Banners
            </a>
            <a href="<?= BASE_PATH ?>/admin/pincodes.php" class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm <?= basename($_SERVER['PHP_SELF']) === 'pincodes.php' ? 'bg-primary-600 text-white' : 'text-gray-300 hover:bg-gray-700' ?>">
                <i class="fas fa-map-marker-alt w-5"></i> Pincodes
            </a>
            <a href="<?= BASE_PATH ?>/admin/settings.php" class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm <?= basename($_SERVER['PHP_SELF']) === 'settings.php' ? 'bg-primary-600 text-white' : 'text-gray-300 hover:bg-gray-700' ?>">
                <i class="fas fa-cog w-5"></i> Settings
            </a>
            <a href="<?= BASE_PATH ?>/admin/reports.php" class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm <?= basename($_SERVER['PHP_SELF']) === 'reports.php' ? 'bg-primary-600 text-white' : 'text-gray-300 hover:bg-gray-700' ?>">
                <i class="fas fa-chart-bar w-5"></i> Reports
            </a>
            <hr class="border-gray-700 my-2">
            <a href="<?= BASE_PATH ?>/index.php" class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-gray-300 hover:bg-gray-700">
                <i class="fas fa-arrow-left w-5"></i> Back to Store
            </a>
            <a href="<?= BASE_PATH ?>/logout.php" class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-red-400 hover:bg-gray-700">
                <i class="fas fa-sign-out-alt w-5"></i> Logout
            </a>
        </nav>
    </aside>
    <!-- Main Content -->
    <div class="flex-1 flex flex-col min-h-screen">
        <header class="bg-white shadow-sm border-b border-gray-200 px-6 py-3 flex items-center justify-between">
            <h1 class="text-xl font-semibold text-gray-800"><?= isset($page_title) ? h($page_title) : 'Dashboard' ?></h1>
            <div class="flex items-center gap-4">
                <span class="text-sm text-gray-600"><?= h($_SESSION['user_name']) ?></span>
                <img src="<?= $_SESSION['user_avatar'] ?? 'https://ui-avatars.com/api/?name=' . urlencode($_SESSION['user_name']) ?>" alt="" class="w-8 h-8 rounded-full">
            </div>
        </header>
        <main class="flex-1 p-6 overflow-y-auto">
        <?php if (hasFlash('success')): ?>
            <div class="bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-lg flex items-center gap-2 mb-4">
                <i class="fas fa-check-circle"></i> <?= h(flash('success')) ?>
            </div>
        <?php endif; ?>
        <?php if (hasFlash('error')): ?>
            <div class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg flex items-center gap-2 mb-4">
                <i class="fas fa-exclamation-circle"></i> <?= h(flash('error')) ?>
            </div>
        <?php endif; ?>
