<?php
/**
 * SEFT Banking Sidebar Layout
 * Include this file in each user page to get the full desktop sidebar + header.
 * 
 * Usage:
 *   $pageName = "Page Title";        // Set before including this file
 *   $activeNav = "dashboard";        // Set to match: dashboard, transactions, cards,
 *                                    // local-transfer, international, deposit,
 *                                    // loan, tax, stocks, crypto, pay, settings, support
 *   include('layout/sidebar.php');   // Opens the layout wrapper
 *   // ... your page content here ...
 *   include('layout/sidebar_close.php'); // Closes the layout wrapper
 */

// Shared Tailwind config + scripts (used across all pages)
?>
<!-- SEFT Sidebar Layout: Shared Desktop Layout -->

<!-- Tailwind CDN + Config -->
<script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
<script>
tailwind.config = {
    darkMode: 'class',
    theme: {
        extend: {
            colors: {
                primary: {
                    50: '#f0f9ff', 100: '#e0f2fe', 200: '#bae6fd', 300: '#7dd3fc',
                    400: '#38bdf8', DEFAULT: '#0ea5e9', 500: '#0ea5e9',
                    600: '#0284c7', 700: '#0369a1', foreground: '#ffffff',
                },
                secondary: {
                    50: '#f8fafc', 100: '#f1f5f9', 200: '#e2e8f0', 300: '#cbd5e1',
                    400: '#94a3b8', DEFAULT: '#64748b', 500: '#64748b',
                    600: '#475569', 700: '#334155', foreground: '#0f172a',
                },
                accent: {
                    50: '#fdf2f8', 100: '#fce7f3', 200: '#fbcfe8', 300: '#f9a8d4',
                    400: '#f472b6', DEFAULT: '#ec4899', 500: '#ec4899',
                    600: '#db2777', 700: '#be185d', foreground: '#ffffff',
                },
                background: '#f8fafc',
                foreground: '#1e293b',
                card: { DEFAULT: '#ffffff', foreground: '#1e293b' },
                muted: { DEFAULT: '#f1f5f9', foreground: '#64748b' },
                border: '#e2e8f0', input: '#e2e8f0', ring: '#0ea5e9',
                'yellow-action': '#facc15',
                'green-positive': '#22c55e',
                'red-negative': '#ef4444',
            },
            boxShadow: {
                'soft': '0 2px 15px -3px rgba(0,0,0,0.07), 0 10px 20px -2px rgba(0,0,0,0.04)',
            },
            borderRadius: {
                lg: '0.75rem', xl: '0.75rem', '2xl': '1rem', '3xl': '1.5rem',
            },
        }
    }
}
</script>

<!-- Alpine.js -->
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/aquawolf04/font-awesome-pro@5cd1511/css/all.css">
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">

<style>
    /* ===== SEFT Sidebar Layout Styles ===== */
    .seft-layout body, .seft-body {
        font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        background-color: #f8fafc;
        color: #1e293b;
    }
    /* Custom scrollbar for sidebar */
    .custom-scrollbar::-webkit-scrollbar { width: 4px; }
    .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
    .custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
    .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
    .dark .custom-scrollbar::-webkit-scrollbar-thumb { background: #4b5563; }

    /* Page loading animation */
    .page-loading {
        position: fixed; inset: 0; width: 100%; height: 100%;
        background: radial-gradient(ellipse at center, rgba(14,165,233,0.08) 0%, rgba(255,255,255,0.95) 50%, rgba(255,255,255,1) 100%);
        z-index: 9999; display: flex; align-items: center; justify-content: center;
        transition: opacity 0.5s ease;
    }
    .dark .page-loading {
        background: radial-gradient(ellipse at center, rgba(14,165,233,0.12) 0%, rgba(17,24,39,0.95) 50%);
    }
    .page-loading.fade-out { opacity: 0; pointer-events: none; }

    /* Sidebar nav active state */
    .nav-active {
        background: linear-gradient(to right, #0ea5e9, #0284c7);
        color: white !important;
        box-shadow: 0 4px 15px rgba(14,165,233,0.3);
    }
    .nav-active .nav-icon { background: rgba(255,255,255,0.2) !important; }
    .nav-active .nav-icon i { color: white !important; }

    /* Fade-in animation for content */
    @keyframes fadeInUp {
        from { opacity: 0; transform: translateY(16px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    .content-fade-in { animation: fadeInUp 0.4s ease forwards; }
</style>

<?php
// Build the active nav map
$activeNav = $activeNav ?? '';
$navPages = [
    'dashboard'       => $web_url . '/user/dashboard.php',
    'transactions'    => $web_url . '/user/transaction.php',
    'cards'           => $web_url . '/user/cards.php',
    'local-transfer'  => $web_url . '/user/domestic-transfer.php',
    'international'   => $web_url . '/user/wire-transfer.php',
    'deposit'         => $web_url . '/user/deposit.php',
    'interbank'       => $web_url . '/user/interbank-transfer.php',
    'loan'            => $web_url . '/user/loan.php',
    'tax'             => $web_url . '/user/tax.php',
    'stocks'          => $web_url . '/user/stocks.php',
    'crypto'          => $web_url . '/user/crypto-deposit.php',
    'pay'             => $web_url . '/user/pay.php',
    'settings'        => $web_url . '/user/settings.php',
    'support'         => $web_url . '/user/support.php',
];

function navClass($key, $active) {
    $base = 'group flex items-center px-3 py-3 text-sm font-semibold rounded-2xl transition-all duration-200 ';
    if ($key === $active) {
        return $base . 'nav-active';
    }
    return $base . 'text-gray-600 dark:text-gray-300 hover:bg-primary-50 dark:hover:bg-gray-800 hover:text-primary-700 dark:hover:text-primary-400';
}

function iconClass($key, $active) {
    $base = 'w-9 h-9 rounded-xl flex items-center justify-center mr-3 nav-icon transition-colors ';
    if ($key === $active) {
        return $base . 'bg-white/20';
    }
    return $base . 'bg-gray-100 dark:bg-gray-800 group-hover:bg-primary-100 dark:group-hover:bg-gray-700';
}

function iClass($key, $active) {
    if ($key === $active) return 'text-white';
    return 'text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors';
}
?>

<!-- ===== Page Loading Splash ===== -->
<div class="page-loading" id="seft-loader">
    <div style="text-align:center">
        <div style="width:60px;height:60px;border:3px solid rgba(14,165,233,0.2);border-top-color:#0ea5e9;border-radius:50%;animation:spin 0.8s linear infinite;margin:0 auto 16px"></div>
        <p style="font-family:Inter,sans-serif;font-weight:700;color:#0ea5e9;letter-spacing:0.08em;font-size:0.9rem"><?= $web_title ?></p>
    </div>
</div>
<style>@keyframes spin{to{transform:rotate(360deg)}}</style>
<script>window.addEventListener('load',function(){setTimeout(function(){var l=document.getElementById('seft-loader');if(l){l.classList.add('fade-out');setTimeout(function(){l.remove()},500)}},400)})</script>

<!-- ===== Alpine Root: Sidebar + Page wrapper ===== -->
<div x-data="{
    sidebarOpen: false,
    notificationOpen: false,
    userDropdownOpen: false,
    darkMode: localStorage.getItem('darkMode') === 'true' || false,
    toggleDarkMode() {
        this.darkMode = !this.darkMode;
        localStorage.setItem('darkMode', this.darkMode);
        document.documentElement.classList.toggle('dark', this.darkMode);
    },
    initDarkMode() {
        document.documentElement.classList.toggle('dark', this.darkMode);
    },
    toggleNotifications() { this.notificationOpen = !this.notificationOpen; this.userDropdownOpen = false; },
    toggleUserDropdown() { this.userDropdownOpen = !this.userDropdownOpen; this.notificationOpen = false; },
    closeDropdowns() { this.notificationOpen = false; this.userDropdownOpen = false; }
}" x-init="initDarkMode()" @click.away="closeDropdowns()"
    class="min-h-screen bg-gray-50 dark:bg-gray-900 font-[Inter,sans-serif]">

    <!-- ================================================================
         DESKTOP LAYOUT (lg+): Sidebar + Main Column
         ================================================================ -->
    <div class="hidden lg:flex h-screen overflow-hidden">

        <!-- ===== Sidebar ===== -->
        <aside class="w-72 bg-white/90 dark:bg-gray-900/90 backdrop-blur-xl border-r border-gray-200/50 dark:border-gray-700/50 flex flex-col shadow-xl flex-shrink-0 h-full">

            <!-- Logo -->
            <div class="px-6 py-5 border-b border-gray-200/50 dark:border-gray-700/50">
                <div class="flex items-center space-x-3">
                    <div class="w-9 h-9 bg-gradient-to-br from-primary-500 to-primary-700 rounded-xl flex items-center justify-center shadow-lg shadow-primary-500/25 flex-shrink-0">
                        <i class="fa-solid fa-university text-white"></i>
                    </div>
                    <div>
                        <p class="text-base font-extrabold text-gray-900 dark:text-white tracking-tight"><?= $web_title ?></p>
                        <p class="text-xs text-gray-500 dark:text-gray-400">Secure Banking</p>
                    </div>
                </div>
            </div>

            <!-- Navigation -->
            <nav class="flex-1 px-4 py-5 overflow-y-auto custom-scrollbar space-y-6">

                <!-- Main -->
                <div>
                    <h3 class="text-xs font-bold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-3 px-3">Main</h3>
                    <div class="space-y-1">
                        <a href="<?= $navPages['dashboard'] ?>" class="<?= navClass('dashboard', $activeNav) ?>">
                            <div class="<?= iconClass('dashboard', $activeNav) ?>"><i class="fa-solid fa-house <?= iClass('dashboard', $activeNav) ?>"></i></div>
                            <span>Dashboard</span>
                            <?php if ($activeNav === 'dashboard'): ?><div class="ml-auto w-2 h-2 bg-white rounded-full"></div><?php endif; ?>
                        </a>
                        <a href="<?= $navPages['transactions'] ?>" class="<?= navClass('transactions', $activeNav) ?>">
                            <div class="<?= iconClass('transactions', $activeNav) ?>"><i class="fa-solid fa-chart-line <?= iClass('transactions', $activeNav) ?>"></i></div>
                            <span>Transactions</span>
                            <?php if ($activeNav === 'transactions'): ?><div class="ml-auto w-2 h-2 bg-white rounded-full"></div><?php endif; ?>
                        </a>
                        <a href="<?= $navPages['cards'] ?>" class="<?= navClass('cards', $activeNav) ?>">
                            <div class="<?= iconClass('cards', $activeNav) ?>"><i class="fa-solid fa-credit-card <?= iClass('cards', $activeNav) ?>"></i></div>
                            <span>Cards</span>
                            <?php if ($activeNav === 'cards'): ?><div class="ml-auto w-2 h-2 bg-white rounded-full"></div><?php endif; ?>
                        </a>
                    </div>
                </div>

                <!-- Transfers -->
                <div>
                    <h3 class="text-xs font-bold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-3 px-3">Transfers</h3>
                    <div class="space-y-1">
                        <a href="<?= $navPages['local-transfer'] ?>" class="<?= navClass('local-transfer', $activeNav) ?>">
                            <div class="<?= iconClass('local-transfer', $activeNav) ?>"><i class="fa-solid fa-paper-plane <?= iClass('local-transfer', $activeNav) ?>"></i></div>
                            <span>Local Transfer</span>
                            <?php if ($activeNav === 'local-transfer'): ?><div class="ml-auto w-2 h-2 bg-white rounded-full"></div><?php endif; ?>
                        </a>
                        <a href="<?= $navPages['international'] ?>" class="<?= navClass('international', $activeNav) ?>">
                            <div class="<?= iconClass('international', $activeNav) ?>"><i class="fa-solid fa-globe <?= iClass('international', $activeNav) ?>"></i></div>
                            <span>International</span>
                            <?php if ($activeNav === 'international'): ?><div class="ml-auto w-2 h-2 bg-white rounded-full"></div><?php endif; ?>
                        </a>
                        <a href="<?= $navPages['deposit'] ?>" class="<?= navClass('deposit', $activeNav) ?>">
                            <div class="<?= iconClass('deposit', $activeNav) ?>"><i class="fa-solid fa-plus <?= iClass('deposit', $activeNav) ?>"></i></div>
                            <span>Deposit</span>
                            <?php if ($activeNav === 'deposit'): ?><div class="ml-auto w-2 h-2 bg-white rounded-full"></div><?php endif; ?>
                        </a>
                        <a href="<?= $navPages['interbank'] ?>" class="<?= navClass('interbank', $activeNav) ?>">
                            <div class="<?= iconClass('interbank', $activeNav) ?>"><i class="fa-solid fa-arrows-rotate <?= iClass('interbank', $activeNav) ?>"></i></div>
                            <span>Interbank Transfer</span>
                            <?php if ($activeNav === 'interbank'): ?><div class="ml-auto w-2 h-2 bg-white rounded-full"></div><?php endif; ?>
                        </a>
                    </div>
                </div>

                <!-- Services -->
                <div>
                    <h3 class="text-xs font-bold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-3 px-3">Services</h3>
                    <div class="space-y-1">
                        <a href="<?= $navPages['loan'] ?>" class="<?= navClass('loan', $activeNav) ?>">
                            <div class="<?= iconClass('loan', $activeNav) ?>"><i class="fa-solid fa-landmark <?= iClass('loan', $activeNav) ?>"></i></div>
                            <span>Loans</span>
                            <?php if ($activeNav === 'loan'): ?><div class="ml-auto w-2 h-2 bg-white rounded-full"></div><?php endif; ?>
                        </a>
                        <a href="<?= $navPages['tax'] ?>" class="<?= navClass('tax', $activeNav) ?>">
                            <div class="<?= iconClass('tax', $activeNav) ?>"><i class="fa-solid fa-receipt <?= iClass('tax', $activeNav) ?>"></i></div>
                            <span>Tax Refund</span>
                            <?php if ($activeNav === 'tax'): ?><div class="ml-auto w-2 h-2 bg-white rounded-full"></div><?php endif; ?>
                        </a>
                        <a href="<?= $navPages['stocks'] ?>" class="<?= navClass('stocks', $activeNav) ?>">
                            <div class="<?= iconClass('stocks', $activeNav) ?>"><i class="fa-solid fa-chart-candlestick <?= iClass('stocks', $activeNav) ?>"></i></div>
                            <span>Stocks</span>
                            <?php if ($activeNav === 'stocks'): ?><div class="ml-auto w-2 h-2 bg-white rounded-full"></div><?php endif; ?>
                        </a>
                        <a href="<?= $navPages['crypto'] ?>" class="<?= navClass('crypto', $activeNav) ?>">
                            <div class="<?= iconClass('crypto', $activeNav) ?>"><i class="fab fa-bitcoin <?= iClass('crypto', $activeNav) ?>"></i></div>
                            <span>Crypto</span>
                            <?php if ($activeNav === 'crypto'): ?><div class="ml-auto w-2 h-2 bg-white rounded-full"></div><?php endif; ?>
                        </a>
                        <a href="<?= $navPages['pay'] ?>" class="<?= navClass('pay', $activeNav) ?>">
                            <div class="<?= iconClass('pay', $activeNav) ?>"><i class="fa-solid fa-file-invoice <?= iClass('pay', $activeNav) ?>"></i></div>
                            <span>Pay Bills</span>
                            <?php if ($activeNav === 'pay'): ?><div class="ml-auto w-2 h-2 bg-white rounded-full"></div><?php endif; ?>
                        </a>
                    </div>
                </div>

                <!-- Account -->
                <div>
                    <h3 class="text-xs font-bold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-3 px-3">Account</h3>
                    <div class="space-y-1">
                        <a href="<?= $navPages['settings'] ?>" class="<?= navClass('settings', $activeNav) ?>">
                            <div class="<?= iconClass('settings', $activeNav) ?>"><i class="fa-solid fa-gear <?= iClass('settings', $activeNav) ?>"></i></div>
                            <span>Settings</span>
                            <?php if ($activeNav === 'settings'): ?><div class="ml-auto w-2 h-2 bg-white rounded-full"></div><?php endif; ?>
                        </a>
                        <a href="<?= $navPages['support'] ?>" class="<?= navClass('support', $activeNav) ?>">
                            <div class="<?= iconClass('support', $activeNav) ?>"><i class="fa-solid fa-headset <?= iClass('support', $activeNav) ?>"></i></div>
                            <span>Support</span>
                            <?php if ($activeNav === 'support'): ?><div class="ml-auto w-2 h-2 bg-white rounded-full"></div><?php endif; ?>
                        </a>
                    </div>
                </div>
            </nav>

            <!-- Sidebar Footer: User Profile -->
            <div class="p-4 border-t border-gray-200/50 dark:border-gray-700/50">
                <div class="flex items-center space-x-3 p-3 rounded-2xl bg-gradient-to-r from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-700 border border-gray-200/50 dark:border-gray-700/50">
                    <div class="relative flex-shrink-0">
                        <img src="<?= $web_url ?>/assets/user/profile/<?= $row['acct_image'] ?>" alt="<?= $fullName ?>" class="h-10 w-10 rounded-full object-cover border-2 border-primary-100">
                        <div class="absolute -bottom-0.5 -right-0.5 w-3 h-3 bg-green-500 rounded-full border-2 border-white dark:border-gray-700"></div>
                    </div>
                    <div class="flex-1 min-w-0">
                        <p class="text-sm font-bold text-gray-900 dark:text-white truncate"><?= $fullName ?></p>
                        <p class="text-xs text-gray-500 dark:text-gray-400 truncate"><?= $row['acct_email'] ?? $row['email'] ?? '' ?></p>
                    </div>
                    <a href="<?= $web_url ?>/user/logout.php"
                       class="w-8 h-8 rounded-xl bg-red-50 dark:bg-red-900/30 hover:bg-red-100 dark:hover:bg-red-900/50 text-red-500 hover:text-red-600 transition-colors flex items-center justify-center flex-shrink-0"
                       title="Sign Out">
                        <i class="fa-solid fa-right-from-bracket text-sm"></i>
                    </a>
                </div>
            </div>
        </aside>
        <!-- ===== End Sidebar ===== -->

        <!-- ===== Main Content Column ===== -->
        <div class="flex-1 flex flex-col min-w-0 overflow-hidden">

            <!-- Desktop Header -->
            <header class="bg-white/90 dark:bg-gray-900/90 backdrop-blur-xl border-b border-gray-200/50 dark:border-gray-700/50 px-6 py-4 shadow-sm z-50 flex-shrink-0">
                <div class="flex items-center justify-between">
                    <div>
                        <h1 class="text-xl font-bold text-gray-900 dark:text-white"><?= $pageName ?? 'Dashboard' ?></h1>
                        <p class="text-sm text-gray-500 dark:text-gray-400 mt-0.5">Welcome back, <?= $fullName ?> 👋</p>
                    </div>
                    <div class="flex items-center space-x-3">

                        <!-- Dark Mode Toggle -->
                        <button @click="toggleDarkMode()" class="w-10 h-10 bg-gray-50 hover:bg-primary-50 dark:bg-gray-800 dark:hover:bg-gray-700 rounded-2xl flex items-center justify-center transition-colors group">
                            <i x-show="!darkMode" class="fa-solid fa-moon text-gray-600 group-hover:text-primary-600 dark:text-gray-300 transition-colors"></i>
                            <i x-show="darkMode" class="fa-solid fa-sun text-yellow-500 transition-colors" style="display:none;"></i>
                        </button>

                        <!-- Notifications -->
                        <div class="relative">
                            <button @click="toggleNotifications()" class="relative w-10 h-10 bg-gray-50 hover:bg-primary-50 dark:bg-gray-800 dark:hover:bg-gray-700 rounded-2xl flex items-center justify-center transition-colors group">
                                <i class="fa-solid fa-bell text-gray-600 group-hover:text-primary-600 dark:text-gray-300 dark:group-hover:text-primary-400 transition-colors"></i>
                            </button>
                            <div x-show="notificationOpen"
                                 x-transition:enter="transition ease-out duration-200"
                                 x-transition:enter-start="opacity-0 scale-95"
                                 x-transition:enter-end="opacity-100 scale-100"
                                 x-transition:leave="transition ease-in duration-150"
                                 x-transition:leave-start="opacity-100 scale-100"
                                 x-transition:leave-end="opacity-0 scale-95"
                                 class="absolute right-0 mt-2 w-80 bg-white dark:bg-gray-800 rounded-2xl shadow-2xl border border-gray-200/50 dark:border-gray-700/50 z-[99999]"
                                 style="display:none;">
                                <div class="p-4 border-b border-gray-100 dark:border-gray-700">
                                    <h3 class="text-base font-bold text-gray-900 dark:text-white">Notifications</h3>
                                </div>
                                <?php
                                try {
                                    $notifSql = "SELECT * FROM notifications WHERE user_id=:uid ORDER BY id DESC LIMIT 5";
                                    $notifStmt = $conn->prepare($notifSql);
                                    $notifStmt->execute(['uid' => $user_id]);
                                    $notifs = $notifStmt->fetchAll(PDO::FETCH_ASSOC);
                                } catch (Exception $e) { $notifs = []; }
                                ?>
                                <div class="max-h-72 overflow-y-auto">
                                <?php if (empty($notifs)): ?>
                                    <div class="p-6 text-center text-gray-400 dark:text-gray-500 text-sm">No notifications yet</div>
                                <?php else: foreach ($notifs as $notif): ?>
                                    <div class="p-3 hover:bg-gray-50 dark:hover:bg-gray-700 border-b border-gray-100 dark:border-gray-700/50 transition-colors cursor-pointer">
                                        <div class="flex items-start space-x-3">
                                            <div class="w-8 h-8 bg-blue-100 dark:bg-blue-900/30 rounded-xl flex items-center justify-center flex-shrink-0">
                                                <i class="fa-solid fa-info-circle text-blue-600 dark:text-blue-400 text-xs"></i>
                                            </div>
                                            <div class="flex-1 min-w-0">
                                                <p class="text-sm font-semibold text-gray-900 dark:text-white"><?= htmlspecialchars($notif['title'] ?? 'Notification') ?></p>
                                                <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5 line-clamp-2"><?= htmlspecialchars($notif['message'] ?? '') ?></p>
                                                <p class="text-xs text-gray-400 mt-1"><i class="fa-solid fa-clock mr-1"></i><?= $notif['created_at'] ?? '' ?></p>
                                            </div>
                                        </div>
                                    </div>
                                <?php endforeach; endif; ?>
                                </div>
                                <div class="p-3 border-t border-gray-100 dark:border-gray-700 text-center">
                                    <a href="<?= $web_url ?>/user/support.php" class="text-sm font-semibold text-primary-600 hover:text-primary-700 dark:text-primary-400 transition-colors">View Support Tickets</a>
                                </div>
                            </div>
                        </div>

                        <!-- User Dropdown -->
                        <div class="relative">
                            <button @click="toggleUserDropdown()" class="flex items-center space-x-2 p-2 rounded-2xl hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors group">
                                <img src="<?= $web_url ?>/assets/user/profile/<?= $row['acct_image'] ?>" alt="<?= $fullName ?>" class="h-9 w-9 rounded-full object-cover border-2 border-primary-100">
                                <div class="hidden md:block text-left">
                                    <p class="text-sm font-semibold text-gray-900 dark:text-white"><?= $fullName ?></p>
                                    <p class="text-xs text-gray-500 dark:text-gray-400"><?= $row['acct_email'] ?? '' ?></p>
                                </div>
                                <i class="fa-solid fa-chevron-down text-gray-400 text-xs group-hover:text-primary-600 transition-colors"></i>
                            </button>
                            <div x-show="userDropdownOpen"
                                 x-transition:enter="transition ease-out duration-200"
                                 x-transition:enter-start="opacity-0 scale-95"
                                 x-transition:enter-end="opacity-100 scale-100"
                                 x-transition:leave="transition ease-in duration-150"
                                 x-transition:leave-start="opacity-100 scale-100"
                                 x-transition:leave-end="opacity-0 scale-95"
                                 class="absolute right-0 mt-2 w-64 bg-white dark:bg-gray-800 rounded-2xl shadow-2xl border border-gray-200/50 dark:border-gray-700/50 z-[99998]"
                                 style="display:none;">
                                <div class="p-4 border-b border-gray-100 dark:border-gray-700">
                                    <div class="flex items-center space-x-3">
                                        <img src="<?= $web_url ?>/assets/user/profile/<?= $row['acct_image'] ?>" alt="<?= $fullName ?>" class="h-10 w-10 rounded-full object-cover border-2 border-primary-100">
                                        <div>
                                            <p class="text-sm font-bold text-gray-900 dark:text-white"><?= $fullName ?></p>
                                            <p class="text-xs text-gray-500 dark:text-gray-400"><?= $row['acct_email'] ?? '' ?></p>
                                        </div>
                                    </div>
                                    <div class="mt-3 flex items-center justify-center py-1.5 rounded-xl bg-green-50 dark:bg-green-900/30 border border-green-100 dark:border-green-800">
                                        <span class="text-xs text-green-800 dark:text-green-300 font-semibold flex items-center">
                                            <i class="fa-solid fa-shield-check text-green-600 mr-1.5"></i> Verified Account
                                        </span>
                                    </div>
                                </div>
                                <div class="p-2">
                                    <a href="<?= $web_url ?>/user/settings.php" class="flex items-center space-x-3 px-3 py-2.5 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors group">
                                        <div class="w-8 h-8 bg-gray-100 dark:bg-gray-700 rounded-xl flex items-center justify-center group-hover:bg-primary-100 dark:group-hover:bg-primary-900/30 transition-colors">
                                            <i class="fa-solid fa-user text-gray-500 dark:text-gray-400 group-hover:text-primary-600 text-sm"></i>
                                        </div>
                                        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Profile Settings</span>
                                    </a>
                                    <a href="<?= $web_url ?>/user/support.php" class="flex items-center space-x-3 px-3 py-2.5 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors group">
                                        <div class="w-8 h-8 bg-gray-100 dark:bg-gray-700 rounded-xl flex items-center justify-center group-hover:bg-primary-100 dark:group-hover:bg-primary-900/30 transition-colors">
                                            <i class="fa-solid fa-headset text-gray-500 dark:text-gray-400 group-hover:text-primary-600 text-sm"></i>
                                        </div>
                                        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Help & Support</span>
                                    </a>
                                    <div class="border-t border-gray-100 dark:border-gray-700 my-2"></div>
                                    <a href="<?= $web_url ?>/user/logout.php" class="flex items-center space-x-3 px-3 py-2.5 rounded-xl hover:bg-red-50 dark:hover:bg-red-900/30 transition-colors group">
                                        <div class="w-8 h-8 bg-red-100 dark:bg-red-900/30 rounded-xl flex items-center justify-center group-hover:bg-red-200 transition-colors">
                                            <i class="fa-solid fa-right-from-bracket text-red-500 dark:text-red-400 text-sm"></i>
                                        </div>
                                        <span class="text-sm font-medium text-red-600 dark:text-red-400">Sign Out</span>
                                    </a>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </header>
            <!-- End Desktop Header -->

            <!-- Scrollable Main Content area - page content goes here -->
            <main class="flex-1 overflow-y-auto bg-gray-50 dark:bg-gray-900">
                <div class="px-6 py-6 content-fade-in">
<!-- ↑↑↑ PAGE CONTENT STARTS HERE (close tags in sidebar_close.php) ↑↑↑ -->
