<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo $pageTitle ?? 'Super Admin'; ?> - RestPO</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * { font-family: 'Inter', sans-serif; }
        body { background: #0f172a; color: white; }
        .sa-sidebar { background: linear-gradient(180deg, #1e1b4b 0%, #150d2e 100%); border-right: 1px solid rgba(139,92,246,0.15); }
        .sa-link { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; color: #94a3b8; font-size: 13.5px; font-weight: 500; text-decoration: none; transition: all 0.18s; white-space: nowrap; overflow: hidden; }
        .sa-link:hover { background: rgba(139,92,246,0.18); color: #e2e8f0; }
        .sa-link.active { background: rgba(139,92,246,0.28); color: white; border-left: 2px solid #8b5cf6; }
        .sa-link i { width: 18px; text-align: center; flex-shrink: 0; font-size: 14px; }
        .sa-section { font-size: 10px; font-weight: 700; color: #4c1d95; text-transform: uppercase; letter-spacing: 0.12em; padding: 14px 12px 4px; }
        .sa-topbar { background: rgba(15,23,42,0.95); border-bottom: 1px solid rgba(139,92,246,0.1); backdrop-filter: blur(10px); }
        .modal-backdrop { background: rgba(0,0,0,0.7); backdrop-filter: blur(6px); }
        .modal-box { background: #1e1b4b; border: 1px solid rgba(139,92,246,0.3); border-radius: 20px; }
        .form-input { width: 100%; padding: 10px 14px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; color: white; font-size: 14px; outline: none; transition: border 0.2s; }
        .form-input:focus { border-color: #8b5cf6; background: rgba(139,92,246,0.1); }
        .form-input::placeholder { color: #475569; }
        .btn-primary { background: linear-gradient(135deg,#8b5cf6,#6d28d9); color: white; font-weight: 600; padding: 10px 20px; border-radius: 10px; border: none; cursor: pointer; font-size: 14px; transition: opacity 0.2s; }
        .btn-primary:hover { opacity: 0.9; }
        .btn-danger { background: rgba(239,68,68,0.15); color: #f87171; font-weight: 600; padding: 8px 16px; border-radius: 8px; border: 1px solid rgba(239,68,68,0.3); cursor: pointer; font-size: 13px; }
        .stat-card { background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); border: 1px solid rgba(255,255,255,0.08); border-radius: 18px; }
        ::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-thumb { background: rgba(139,92,246,0.3); border-radius: 10px; }
        select option { background: #1e1b4b; color: white; }

        /* ─── Hamburger (Smooth Morphing) ─── */
        .hamburger{display:flex;flex-direction:column;justify-content:space-between;width:18px;height:12px;background:transparent;border:none;cursor:pointer;padding:0}
        .hamburger span{width:100%;height:2px;background-color:currentColor;border-radius:4px;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);transform-origin:center}
        .hamburger.open span:nth-child(1){transform:translateY(5px) rotate(45deg)}
        .hamburger.open span:nth-child(2){opacity:0;transform:scale(0)}
        .hamburger.open span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
    </style>
</head>
<body x-data="superAdminApp()">
<?php
$__pendingCount = 0;
$__websiteLogo = null;
$__heroVideoUrl = null;
try {
    $db = getDB();
    $__pendingCount = $db->query("SELECT COUNT(*) FROM restaurants WHERE approval_status='pending'")->fetchColumn();
    $__websiteLogo = $db->query("SELECT setting_value FROM site_settings WHERE setting_key='website_logo'")->fetchColumn();
    $__heroVideoUrl = $db->query("SELECT setting_value FROM site_settings WHERE setting_key='hero_video_url'")->fetchColumn();
} catch(Exception $e) {}
?>
<div class="flex h-screen overflow-hidden">

    <!-- Mobile Sidebar Backdrop -->
    <div x-show="sidebarOpen" @click="sidebarOpen = false" class="fixed inset-0 bg-black/60 backdrop-blur-sm z-40 lg:hidden" x-transition style="display:none"></div>

    <!-- ===== SIDEBAR ===== -->
    <aside class="sa-sidebar flex flex-col flex-shrink-0 transition-all duration-300 fixed lg:static inset-y-0 left-0 z-50"
           :class="sidebarOpen ? 'translate-x-0 w-[240px]' : '-translate-x-full lg:translate-x-0 lg:w-[62px]'">

        <!-- Logo -->
        <div class="h-16 flex items-center px-4 gap-3 border-b border-white/5 flex-shrink-0">
            <?php if (!empty($__websiteLogo)): ?>
                <img src="<?php echo htmlspecialchars($__websiteLogo); ?>" alt="Logo" class="h-9 w-9 rounded-xl object-contain bg-white p-1 border border-white/10 flex-shrink-0">
            <?php else: ?>
                <div class="w-9 h-9 rounded-xl flex items-center justify-center flex-shrink-0" style="background:linear-gradient(135deg,#8b5cf6,#3b82f6)">
                    <i class="fas fa-utensils text-white text-sm"></i>
                </div>
            <?php endif; ?>
            <div x-show="sidebarOpen" x-transition:enter="transition-opacity duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" style="display:none">
                <div class="text-white font-bold text-sm leading-tight">RestPO</div>
                <div class="text-purple-400 text-xs">Super Admin</div>
            </div>
        </div>

        <!-- Nav -->
        <nav class="flex-1 overflow-y-auto py-3 px-2 space-y-0.5">
            <p class="sa-section" x-show="sidebarOpen" style="display:none">Overview</p>
            <a href="/superadmin/dashboard" class="sa-link <?php echo strpos($_SERVER['REQUEST_URI'],'/superadmin/dashboard')!==false?'active':''; ?>">
                <i class="fas fa-home"></i><span x-show="sidebarOpen" style="display:none">Dashboard</span>
            </a>

            <p class="sa-section" x-show="sidebarOpen" style="display:none">Management</p>
            <a href="/superadmin/restaurants" class="sa-link <?php echo strpos($_SERVER['REQUEST_URI'],'/superadmin/restaurants')!==false?'active':''; ?>">
                <i class="fas fa-store"></i><span x-show="sidebarOpen" style="display:none">Restaurants</span>
            </a>
            <a href="/superadmin/subscriptions" class="sa-link <?php echo strpos($_SERVER['REQUEST_URI'],'/superadmin/subscriptions')!==false?'active':''; ?>">
                <i class="fas fa-credit-card"></i><span x-show="sidebarOpen" style="display:none">Subscriptions</span>
            </a>
            <a href="/superadmin/packages" class="sa-link <?php echo strpos($_SERVER['REQUEST_URI'],'/superadmin/packages')!==false?'active':''; ?>">
                <i class="fas fa-box"></i><span x-show="sidebarOpen" style="display:none">Packages</span>
            </a>
            <a href="/superadmin/coupons" class="sa-link <?php echo strpos($_SERVER['REQUEST_URI'],'/superadmin/coupons')!==false?'active':''; ?>">
                <i class="fas fa-ticket-alt"></i><span x-show="sidebarOpen" style="display:none">Coupons</span>
            </a>
            <a href="/superadmin/sms" class="sa-link <?php echo strpos($_SERVER['REQUEST_URI'],'/superadmin/sms')!==false?'active':''; ?>">
                <i class="fas fa-paper-plane"></i><span x-show="sidebarOpen" style="display:none">Promotional SMS</span>
            </a>
            <a href="/superadmin/registrations" class="sa-link <?php echo strpos($_SERVER['REQUEST_URI'],'/superadmin/registrations')!==false?'active':''; ?>">
                <i class="fas fa-user-clock"></i><span x-show="sidebarOpen" style="display:none">Registrations</span>
                <?php if($__pendingCount > 0): ?><span class="ml-auto px-1.5 py-0.5 rounded-full text-3xs font-extrabold bg-red-500 text-white" x-show="sidebarOpen" style="display:none"><?php echo $__pendingCount; ?></span><?php endif; ?>
            </a>
            <a href="/superadmin/contacts" class="sa-link <?php echo strpos($_SERVER['REQUEST_URI'],'/superadmin/contacts')!==false?'active':''; ?>">
                <i class="fas fa-envelope"></i><span x-show="sidebarOpen" style="display:none">Contact Messages</span>
            </a>
            <a href="/superadmin/reviews" class="sa-link <?php echo strpos($_SERVER['REQUEST_URI'],'/superadmin/reviews')!==false?'active':''; ?>">
                <i class="fas fa-star"></i><span x-show="sidebarOpen" style="display:none">Video Reviews</span>
            </a>

            <p class="sa-section" x-show="sidebarOpen" style="display:none">System</p>
            <a href="/superadmin/admins" class="sa-link <?php echo strpos($_SERVER['REQUEST_URI'],'/superadmin/admins')!==false?'active':''; ?>">
                <i class="fas fa-user-shield"></i><span x-show="sidebarOpen" style="display:none">Admins</span>
            </a>
            <a href="/superadmin/analytics" class="sa-link <?php echo strpos($_SERVER['REQUEST_URI'],'/superadmin/analytics')!==false?'active':''; ?>">
                <i class="fas fa-chart-bar"></i><span x-show="sidebarOpen" style="display:none">Analytics</span>
            </a>
            <a href="/superadmin/settings" class="sa-link <?php echo strpos($_SERVER['REQUEST_URI'],'/superadmin/settings')!==false?'active':''; ?>">
                <i class="fas fa-gears"></i><span x-show="sidebarOpen" style="display:none">System Settings</span>
            </a>
        </nav>

        <!-- Bottom -->
        <div class="p-2 border-t border-white/5 flex-shrink-0">
            <a href="/logout" class="sa-link hover:text-red-400 hover:bg-red-500/10">
                <i class="fas fa-sign-out-alt"></i><span x-show="sidebarOpen" style="display:none">Sign Out</span>
            </a>
        </div>
    </aside>

    <!-- ===== MAIN ===== -->
    <div class="flex-1 flex flex-col overflow-hidden">

        <!-- Topbar -->
        <header class="sa-topbar h-16 flex items-center justify-between px-5 flex-shrink-0">
            <div class="flex items-center gap-3">
                <button @click="sidebarOpen = !sidebarOpen" class="w-9 h-9 rounded-lg flex items-center justify-center text-slate-400 hover:text-white hover:bg-white/8 transition focus:outline-none" aria-label="Toggle Sidebar">
                    <div class="hamburger" :class="sidebarOpen ? 'open' : ''">
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                </button>
                <div>
                    <h1 class="text-base font-semibold text-white leading-tight"><?php echo $pageTitle ?? 'Dashboard'; ?></h1>
                    <p class="text-xs text-slate-500">Super Admin Panel</p>
                </div>
            </div>
            <div class="flex items-center gap-3">
                <!-- Notification Bell -->
                <button class="relative w-9 h-9 rounded-lg flex items-center justify-center text-slate-400 hover:text-white hover:bg-white/8 transition">
                    <i class="fas fa-bell text-base"></i>
                    <span class="absolute top-1.5 right-1.5 h-2 w-2 bg-red-500 rounded-full"></span>
                </button>

                <!-- Profile Dropdown -->
                <div class="relative" x-data="{ open: false }" @click.away="open = false">
                    <button @click="open = !open" class="flex items-center gap-2.5 px-3 py-1.5 rounded-xl hover:bg-white/6 transition" style="border:1px solid rgba(139,92,246,0.2)">
                        <?php if (!empty($_SESSION['logo'])): ?>
                            <img class="h-8 w-8 rounded-full flex-shrink-0 object-cover" src="<?php echo htmlspecialchars($_SESSION['logo']); ?>" alt="Profile">
                        <?php else: ?>
                            <img class="h-8 w-8 rounded-full flex-shrink-0" src="https://ui-avatars.com/api/?name=<?php echo urlencode($_SESSION['name']); ?>&background=7c3aed&color=fff&size=64" alt="">
                        <?php endif; ?>
                        <div class="hidden md:block text-left">
                            <div class="text-sm font-semibold text-white leading-tight"><?php echo htmlspecialchars($_SESSION['name']); ?></div>
                            <div class="text-xs text-purple-400">Super Admin</div>
                        </div>
                        <i class="fas fa-chevron-down text-xs text-slate-500 hidden md:block"></i>
                    </button>

                    <!-- Dropdown -->
                    <div x-show="open" x-transition:enter="transition ease-out duration-100" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" class="absolute right-0 mt-2 w-52 rounded-xl shadow-xl z-50 overflow-hidden" style="background:#1e1b4b; border:1px solid rgba(139,92,246,0.25); display:none">
                        <div class="p-3 border-b border-white/5">
                            <p class="text-xs text-slate-400">Signed in as</p>
                            <p class="text-sm font-semibold text-white truncate"><?php echo htmlspecialchars($_SESSION['name']); ?></p>
                        </div>
                        <div class="p-1.5">
                            <button @click="open = false; showProfile = true" class="w-full flex items-center gap-3 px-3 py-2 rounded-lg text-slate-300 hover:bg-white/8 hover:text-white text-sm transition">
                                <i class="fas fa-user-edit w-4 text-center"></i> Edit Profile
                            </button>
                            <a href="/logout" class="flex items-center gap-3 px-3 py-2 rounded-lg text-red-400 hover:bg-red-500/10 text-sm transition">
                                <i class="fas fa-sign-out-alt w-4 text-center"></i> Sign Out
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </header>

        <!-- Content -->
        <main class="flex-1 overflow-y-auto p-5">
            <?php echo $content; ?>
        </main>
    </div>
</div>

<!-- ===== PROFILE MODAL ===== -->
<div x-show="showProfile" class="fixed inset-0 z-50 flex items-center justify-center modal-backdrop" style="display:none" @click="showProfile=false" @keydown.escape.window="showProfile=false">
    <div class="modal-box w-full max-w-lg mx-4 shadow-2xl flex flex-col max-h-[90vh]" @click.stop>
        <div class="flex items-center justify-between p-5 border-b border-white/8 shrink-0">
            <div>
                <h2 class="text-lg font-bold text-white">Edit Profile</h2>
                <p class="text-xs text-slate-400 mt-0.5">Update your super admin account details</p>
            </div>
            <button @click="showProfile=false" class="w-8 h-8 rounded-lg flex items-center justify-center text-slate-400 hover:text-white hover:bg-white/8 transition">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <form action="/superadmin/profile/update" method="POST" enctype="multipart/form-data" class="p-5 space-y-4 overflow-y-auto">
            <input type="hidden" name="redirect_url" value="<?php echo htmlspecialchars($_SERVER['REQUEST_URI']); ?>">
            <div class="flex justify-center mb-2">
                <?php if (!empty($_SESSION['logo'])): ?>
                    <img class="h-16 w-16 rounded-full object-cover border border-violet-500/20" src="<?php echo htmlspecialchars($_SESSION['logo']); ?>" alt="Profile">
                <?php else: ?>
                    <img class="h-16 w-16 rounded-full" src="https://ui-avatars.com/api/?name=<?php echo urlencode($_SESSION['name']); ?>&background=7c3aed&color=fff&size=128" alt="">
                <?php endif; ?>
            </div>
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-xs font-medium text-slate-400 mb-1.5">Full Name</label>
                    <input type="text" name="name" value="<?php echo htmlspecialchars($_SESSION['name']); ?>" required class="form-input">
                </div>
                <div>
                    <label class="block text-xs font-medium text-slate-400 mb-1.5">Phone</label>
                    <input type="text" name="phone" value="<?php echo htmlspecialchars($_SESSION['phone'] ?? ''); ?>" class="form-input" placeholder="+1 234 567 890">
                </div>
            </div>
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-xs font-medium text-slate-400 mb-1.5">Email Address</label>
                    <input type="email" name="email" value="<?php echo htmlspecialchars($_SESSION['email'] ?? ''); ?>" required class="form-input">
                </div>
                <div>
                    <label class="block text-xs font-medium text-slate-400 mb-1.5">Platform Currency</label>
                    <select name="currency" class="form-input" style="background:#1e1b4b">
                        <?php
                        $currencies = [
                            '$' => 'USD ($)',
                            '৳' => 'BDT (৳)'
                        ];
                        $currentCurrency = $_SESSION['currency'] ?? '$';
                        foreach ($currencies as $symbol => $label) {
                            $selected = ($currentCurrency === $symbol) ? 'selected' : '';
                            echo "<option value=\"" . htmlspecialchars($symbol) . "\" {$selected}>" . htmlspecialchars($label) . "</option>";
                        }
                        ?>
                    </select>
                </div>
            </div>
            <div class="border-t border-white/6 pt-4">
                <div class="mb-4">
                    <label class="block text-xs font-medium text-slate-400 mb-1.5">Upload Logo</label>
                    <input type="file" name="logo" accept="image/*" class="form-input text-xs py-1.5 file:mr-3 file:py-1 file:px-3 file:rounded-lg file:border-0 file:text-xs file:font-semibold file:bg-purple-100 file:text-purple-700 hover:file:bg-purple-200">
                    <p class="text-3xs text-slate-500 mt-1">Updates the logo for both the website header/pages and the superadmin profile photo.</p>
                </div>
                <div class="mb-4">
                    <label class="block text-xs font-medium text-slate-400 mb-1.5">Hero Video URL (YouTube Link)</label>
                    <input type="text" name="hero_video_url" value="<?php echo htmlspecialchars($__heroVideoUrl ?? ''); ?>" class="form-input text-xs py-1.5" placeholder="https://www.youtube.com/watch?v=dQw4w9WgXcQ">
                    <p class="text-3xs text-slate-500 mt-1">Just paste a standard YouTube link. It will automatically be embedded on the landing page.</p>
                </div>
                <p class="text-xs text-slate-500 mb-3">Leave password fields blank to keep current password.</p>
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-xs font-medium text-slate-400 mb-1.5">New Password</label>
                        <input type="password" name="new_password" class="form-input" placeholder="••••••••">
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-slate-400 mb-1.5">Confirm Password</label>
                        <input type="password" name="confirm_password" class="form-input" placeholder="••••••••">
                    </div>
                </div>
            </div>
            <div class="flex gap-3 pt-2 shrink-0">
                <button type="submit" class="btn-primary flex-1"><i class="fas fa-save mr-2"></i>Save Changes</button>
                <button type="button" @click="showProfile=false" class="px-4 py-2 rounded-lg text-slate-400 hover:text-white hover:bg-white/8 text-sm transition">Cancel</button>
            </div>
        </form>
    </div>
</div>

<!-- ===== SUCCESS TOAST ===== -->
<?php if(isset($_GET['msg'])): ?>
<div x-data="{show:true}" x-show="show" x-init="setTimeout(()=>show=false,3500)" class="fixed bottom-6 right-6 z-50 flex items-center gap-3 px-4 py-3 rounded-xl shadow-xl text-sm font-medium" style="background:#10b981; color:white">
    <i class="fas fa-check-circle"></i>
    <?php echo htmlspecialchars($_GET['msg']); ?>
</div>
<?php endif; ?>
<?php if(isset($_GET['error'])): ?>
<div x-data="{show:true}" x-show="show" x-init="setTimeout(()=>show=false,4000)" class="fixed bottom-6 right-6 z-50 flex items-center gap-3 px-4 py-3 rounded-xl shadow-xl text-sm font-medium" style="background:#ef4444; color:white">
    <i class="fas fa-exclamation-circle"></i>
    <?php echo htmlspecialchars($_GET['error']); ?>
</div>
<?php endif; ?>

<script>
function superAdminApp() {
    return {
        sidebarOpen: window.innerWidth >= 1024,
        showProfile: <?php echo isset($_GET['profile']) ? 'true' : 'false'; ?>,
    }
}
</script>
</body>
</html>
