<?php
// Admin Header Component
if (!isset($page_title)) {
    $page_title = 'Admin Dashboard';
}
if (!isset($page_description)) {
    $page_description = 'D-Bundles Stores Admin Panel';
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= htmlspecialchars($page_title) ?> - D-Bundles Stores</title>
    <meta name="description" content="<?= htmlspecialchars($page_description) ?>">
    
    <!-- Tailwind CSS with Dark Theme Configuration -->
    <script src="https://cdn.tailwindcss.com"></script>
    
    <!-- DataTables CSS and JS -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.7/css/jquery.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.7/css/dataTables.tailwindcss.min.css">
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.7/js/dataTables.tailwindcss.min.js"></script>
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        // Dark Theme Color Palette
                        'dark': {
                            'primary': '#111827',      // Main background
                            'secondary': '#1f2937',    // Card backgrounds
                            'tertiary': '#374151',     // Input backgrounds
                            'quaternary': '#4b5563',   // Borders
                            'quinary': '#6b7280',      // Muted text
                        },
                        'text': {
                            'primary': '#f9fafb',      // Main text
                            'secondary': '#e5e7eb',    // Secondary text
                            'muted': '#d1d5db',        // Muted text
                            'disabled': '#9ca3af',     // Disabled text
                        },
                        'accent': {
                            'blue': '#3b82f6',         // Primary accent
                            'green': '#10b981',        // Success
                            'red': '#ef4444',          // Error
                            'yellow': '#f59e0b',       // Warning
                            'purple': '#8b5cf6',       // Secondary accent
                        }
                    },
                    backgroundColor: {
                        'dark-primary': '#111827',
                        'dark-secondary': '#1f2937',
                        'dark-tertiary': '#374151',
                        'dark-quaternary': '#4b5563',
                    },
                    textColor: {
                        'dark-primary': '#f9fafb',
                        'dark-secondary': '#e5e7eb',
                        'dark-muted': '#d1d5db',
                        'dark-disabled': '#9ca3af',
                    },
                    borderColor: {
                        'dark-primary': '#374151',
                        'dark-secondary': '#4b5563',
                        'dark-tertiary': '#6b7280',
                    }
                }
            }
        }
    </script>
    
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <!-- Custom Admin Styles -->
    <style>
        /* Dark Theme Utility Classes */
        .dark-theme {
            background-color: #111827 !important;
            color: #f9fafb !important;
        }
        
        .dark-card {
            background-color: #1f2937 !important;
            border: 1px solid #374151 !important;
        }
        
        .dark-input {
            background-color: #374151 !important;
            border-color: #4b5563 !important;
            color: #f9fafb !important;
        }
        
        .dark-input:focus {
            border-color: #3b82f6 !important;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
        }
        
        .dark-text-primary {
            color: #f9fafb !important;
        }
        
        .dark-text-secondary {
            color: #e5e7eb !important;
        }
        
        .dark-text-muted {
            color: #d1d5db !important;
        }
        
        .dark-border {
            border-color: #374151 !important;
        }
        
        .dark-border-secondary {
            border-color: #4b5563 !important;
        }
        
        /* Override Tailwind classes for dark theme */
        .bg-white {
            background-color: #1f2937 !important;
        }
        
        .bg-gray-50 {
            background-color: #111827 !important;
        }
        
        .text-gray-900 {
            color: #f9fafb !important;
        }
        
        .text-gray-700 {
            color: #e5e7eb !important;
        }
        
        .text-gray-600 {
            color: #d1d5db !important;
        }
        
        .text-gray-500 {
            color: #9ca3af !important;
        }
        
        .border-gray-300 {
            border-color: #4b5563 !important;
        }
        
        .border-gray-200 {
            border-color: #374151 !important;
        }
        
        /* Form elements dark theme */
        input, select, textarea {
            background-color: #374151 !important;
            border-color: #4b5563 !important;
            color: #f9fafb !important;
        }
        
        input:focus, select:focus, textarea:focus {
            border-color: #3b82f6 !important;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
        }
        
        /* Status badges dark theme */
        .bg-green-100 {
            background-color: rgba(16, 185, 129, 0.2) !important;
            color: #6ee7b7 !important;
        }
        
        .bg-red-100 {
            background-color: rgba(239, 68, 68, 0.2) !important;
            color: #fca5a5 !important;
        }
        
        .text-green-800 {
            color: #6ee7b7 !important;
        }
        
        .text-red-800 {
            color: #fca5a5 !important;
        }
        
        .sidebar-blur {
            backdrop-filter: blur(10px);
            background: rgba(15, 23, 42, 0.95);
        }
        
        .sidebar-nav-item {
            position: relative;
            transition: all 0.3s ease;
        }
        
        .sidebar-nav-item:hover {
            transform: translateX(2px);
        }
        
        .sidebar-nav-item.active::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 3px;
            background: linear-gradient(to bottom, #3b82f6, #8b5cf6);
            border-radius: 0 2px 2px 0;
        }
        
        .sidebar-toggle {
            display: none;
            position: fixed;
            top: 20px;
            left: 20px;
            z-index: 50;
            background: rgba(15, 23, 42, 0.9);
            color: white;
            border: none;
            padding: 10px;
            border-radius: 8px;
            cursor: pointer;
            backdrop-filter: blur(10px);
        }
        
        .main-content {
            margin-left: 16rem;
            transition: margin-left 0.3s ease;
        }
        
        .sidebar {
            transition: transform 0.3s ease;
        }
        
        .sidebar.hidden {
            transform: translateX(-100%);
        }
        
        .main-content.expanded {
            margin-left: 0;
        }
        
        /* Responsive adjustments */
        @media (max-width: 1024px) {
            .sidebar {
                position: fixed;
                z-index: 45;
            }
            .main-content {
                margin-left: 0;
            }
            .sidebar-toggle {
                display: block;
            }
        }
        
        /* Custom scrollbar */
        .custom-scrollbar::-webkit-scrollbar {
            width: 4px;
        }
        
        .custom-scrollbar::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.1);
        }
        
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.3);
            border-radius: 2px;
        }
        
        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 255, 255, 0.5);
        }
        
        /* Menu Group Styles */
        .menu-group {
            margin-bottom: 0.25rem;
        }
        
        .menu-group button {
            cursor: pointer;
        }
        
        .menu-group [id$="-dropdown"] {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out, opacity 0.2s ease-out;
            opacity: 0;
        }
        
        .menu-group [id$="-dropdown"].open {
            max-height: 500px;
            opacity: 1;
        }
        
        .menu-group [id$="-dropdown"].hidden {
            max-height: 0;
            opacity: 0;
        }
        
        .menu-group [id$="-chevron"] {
            transition: transform 0.3s ease;
        }
        
        .menu-group [id$="-chevron"].rotated {
            transform: rotate(180deg);
        }
    </style>
</head>

<body class="bg-[#0f172a] min-h-screen">
    <!-- Sidebar Toggle Button -->
    <button onclick="toggleSidebar()" class="sidebar-toggle" id="sidebarToggle">
        <i class="fas fa-bars"></i>
    </button>

    <!-- Sidebar -->
    <div class="sidebar fixed left-0 top-0 h-screen w-64 sidebar-blur border-r border-gray-200 z-40 flex flex-col" id="sidebar">
        <!-- Header Section -->
        <div class="p-6 flex-shrink-0">
            <!-- Close Button -->
            <button onclick="toggleSidebar()" class="absolute top-4 right-4 text-gray-400 hover:text-white transition-colors">
                <i class="fas fa-times text-lg"></i>
            </button>
            
            <!-- Logo -->
            <div class="flex items-center space-x-3 mb-6">
                <div class="w-8 h-8 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
                    <i class="fas fa-shield-alt text-white text-sm"></i>
                </div>
                <div>
                    <h1 class="text-lg font-bold text-gray-200">Admin Panel</h1>
                    <p class="text-xs text-gray-400">D-Bundles Stores</p>
                </div>
            </div>

            <!-- Admin Info -->
            <div class="bg-gradient-to-r from-blue-600/20 to-purple-600/20 border border-blue-500/30 rounded-lg p-3 mb-4 text-white">
                <div class="flex items-center space-x-3">
                    <div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center">
                        <i class="fas fa-user text-white text-sm"></i>
                    </div>
                    <div>
                        <p class="text-sm font-medium"><?= htmlspecialchars($_SESSION['admin_username'] ?? 'Admin') ?></p>
                        <p class="text-xs text-blue-300">Administrator</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Navigation -->
        <div class="flex-1 overflow-y-auto px-4 custom-scrollbar">
            <nav class="space-y-1">
                <!-- Dashboard -->
                <a href="index.php" class="sidebar-nav-item flex items-center space-x-3 px-3 py-2.5 text-gray-300 hover:text-white hover:bg-gray-700/30 rounded-lg transition-all duration-200 group">
                    <i class="fas fa-tachometer-alt w-4 text-sm"></i>
                    <span class="text-sm font-medium">Dashboard</span>
                </a>
                
                <!-- Orders & Analytics Dropdown -->
                <div class="menu-group">
                    <button onclick="toggleDropdown('orders-analytics')" class="sidebar-nav-item w-full flex items-center justify-between px-3 py-2.5 text-gray-300 hover:text-white hover:bg-gray-700/30 rounded-lg transition-all duration-200 group">
                        <div class="flex items-center space-x-3">
                            <i class="fas fa-chart-line w-4 text-sm"></i>
                            <span class="text-sm font-medium">Orders & Analytics</span>
                        </div>
                        <i class="fas fa-chevron-down text-xs transition-transform duration-200" id="orders-analytics-chevron"></i>
                    </button>
                    <div id="orders-analytics-dropdown" class="hidden pl-4 mt-1 space-y-1">
                        <a href="index.php?page=orders" class="sidebar-nav-item flex items-center space-x-3 px-3 py-2 text-gray-400 hover:text-white hover:bg-gray-700/20 rounded-lg transition-all duration-200 text-sm">
                            <i class="fas fa-clipboard-list w-3 text-xs"></i>
                            <span>Orders Management</span>
                        </a>
                        <a href="index.php?page=analytics" class="sidebar-nav-item flex items-center space-x-3 px-3 py-2 text-gray-400 hover:text-white hover:bg-gray-700/20 rounded-lg transition-all duration-200 text-sm">
                            <i class="fas fa-chart-pie w-3 text-xs"></i>
                            <span>Sales Analytics</span>
                        </a>
                    </div>
                </div>
                
                <!-- Financial Dropdown -->
                <div class="menu-group">
                    <button onclick="toggleDropdown('financial')" class="sidebar-nav-item w-full flex items-center justify-between px-3 py-2.5 text-gray-300 hover:text-white hover:bg-gray-700/30 rounded-lg transition-all duration-200 group">
                        <div class="flex items-center space-x-3">
                            <i class="fas fa-wallet w-4 text-sm"></i>
                            <span class="text-sm font-medium">Financial</span>
                        </div>
                        <i class="fas fa-chevron-down text-xs transition-transform duration-200" id="financial-chevron"></i>
                    </button>
                    <div id="financial-dropdown" class="hidden pl-4 mt-1 space-y-1">
                        <a href="index.php?page=balance_history" class="sidebar-nav-item flex items-center space-x-3 px-3 py-2 text-gray-400 hover:text-white hover:bg-gray-700/20 rounded-lg transition-all duration-200 text-sm">
                            <i class="fas fa-history w-3 text-xs"></i>
                            <span>Balance History</span>
                        </a>
                        <a href="index.php?page=deposits" class="sidebar-nav-item flex items-center space-x-3 px-3 py-2 text-gray-400 hover:text-white hover:bg-gray-700/20 rounded-lg transition-all duration-200 text-sm">
                            <i class="fas fa-database w-3 text-xs"></i>
                            <span>Agent Deposits</span>
                        </a>
                        <a href="index.php?page=subagent_topups" class="sidebar-nav-item flex items-center space-x-3 px-3 py-2 text-gray-400 hover:text-white hover:bg-gray-700/20 rounded-lg transition-all duration-200 text-sm">
                            <i class="fas fa-credit-card w-3 text-xs"></i>
                            <span>Sub-Agent Top-ups</span>
                        </a>
                    </div>
                </div>
                
                <!-- Pricing & Payment Dropdown -->
                <div class="menu-group">
                    <button onclick="toggleDropdown('pricing-payment')" class="sidebar-nav-item w-full flex items-center justify-between px-3 py-2.5 text-gray-300 hover:text-white hover:bg-gray-700/30 rounded-lg transition-all duration-200 group">
                        <div class="flex items-center space-x-3">
                            <i class="fas fa-dollar-sign w-4 text-sm"></i>
                            <span class="text-sm font-medium">Pricing & Payment</span>
                        </div>
                        <i class="fas fa-chevron-down text-xs transition-transform duration-200" id="pricing-payment-chevron"></i>
                    </button>
                    <div id="pricing-payment-dropdown" class="hidden pl-4 mt-1 space-y-1">
                        <a href="index.php?page=pricing" class="sidebar-nav-item flex items-center space-x-3 px-3 py-2 text-gray-400 hover:text-white hover:bg-gray-700/20 rounded-lg transition-all duration-200 text-sm">
                            <i class="fas fa-calculator w-3 text-xs"></i>
                            <span>Agent Pricing Rules</span>
                        </a>
                        <a href="index.php?page=payment_config" class="sidebar-nav-item flex items-center space-x-3 px-3 py-2 text-gray-400 hover:text-white hover:bg-gray-700/20 rounded-lg transition-all duration-200 text-sm">
                            <i class="fas fa-credit-card w-3 text-xs"></i>
                            <span>Payment Config</span>
                        </a>
                        <a href="index.php?page=minimum_topup_config" class="sidebar-nav-item flex items-center space-x-3 px-3 py-2 text-gray-400 hover:text-white hover:bg-gray-700/20 rounded-lg transition-all duration-200 text-sm">
                            <i class="fas fa-coins w-3 text-xs"></i>
                            <span>Minimum Top-up</span>
                        </a>
                        <a href="index.php?page=paystack_charge_config" class="sidebar-nav-item flex items-center space-x-3 px-3 py-2 text-gray-400 hover:text-white hover:bg-gray-700/20 rounded-lg transition-all duration-200 text-sm">
                            <i class="fas fa-dollar-sign w-3 text-xs"></i>
                            <span>Paystack Charges</span>
                        </a>
                        <a href="index.php?page=external_api_pricing" class="sidebar-nav-item flex items-center space-x-3 px-3 py-2 text-gray-400 hover:text-white hover:bg-gray-700/20 rounded-lg transition-all duration-200 text-sm">
                            <i class="fas fa-exchange-alt w-3 text-xs"></i>
                            <span>External API Pricing</span>
                        </a>
                        <a href="index.php?page=external_api_profit" class="sidebar-nav-item flex items-center space-x-3 px-3 py-2 text-gray-400 hover:text-white hover:bg-gray-700/20 rounded-lg transition-all duration-200 text-sm">
                            <i class="fas fa-chart-line w-3 text-xs"></i>
                            <span>External API Profit</span>
                        </a>
                    </div>
                </div>
                
                <!-- API & Integration Dropdown -->
                <div class="menu-group">
                    <button onclick="toggleDropdown('api-integration')" class="sidebar-nav-item w-full flex items-center justify-between px-3 py-2.5 text-gray-300 hover:text-white hover:bg-gray-700/30 rounded-lg transition-all duration-200 group">
                        <div class="flex items-center space-x-3">
                    <i class="fas fa-plug w-4 text-sm"></i>
                            <span class="text-sm font-medium">API & Integration</span>
                        </div>
                        <i class="fas fa-chevron-down text-xs transition-transform duration-200" id="api-integration-chevron"></i>
                    </button>
                    <div id="api-integration-dropdown" class="hidden pl-4 mt-1 space-y-1">
                        <a href="index.php?page=api_config" class="sidebar-nav-item flex items-center space-x-3 px-3 py-2 text-gray-400 hover:text-white hover:bg-gray-700/20 rounded-lg transition-all duration-200 text-sm">
                            <i class="fas fa-plug w-3 text-xs"></i>
                            <span>API Configuration</span>
                        </a>
                        <a href="index.php?page=data_integration" class="sidebar-nav-item flex items-center space-x-3 px-3 py-2 text-gray-400 hover:text-white hover:bg-gray-700/20 rounded-lg transition-all duration-200 text-sm">
                            <i class="fas fa-exchange-alt w-3 text-xs"></i>
                            <span>Data Integration</span>
                        </a>
                        <a href="index.php?page=api_error_logs" class="sidebar-nav-item flex items-center space-x-3 px-3 py-2 text-gray-400 hover:text-white hover:bg-gray-700/20 rounded-lg transition-all duration-200 text-sm">
                            <i class="fas fa-bug w-3 text-xs"></i>
                            <span>API Error Logs</span>
                        </a>
                        <a href="index.php?page=api_keys" class="sidebar-nav-item flex items-center space-x-3 px-3 py-2 text-gray-400 hover:text-white hover:bg-gray-700/20 rounded-lg transition-all duration-200 text-sm">
                            <i class="fas fa-key w-3 text-xs"></i>
                            <span>API Keys Management</span>
                        </a>
                    </div>
                </div>
                
                <!-- Notifications Dropdown -->
                <div class="menu-group">
                    <button onclick="toggleDropdown('notifications')" class="sidebar-nav-item w-full flex items-center justify-between px-3 py-2.5 text-gray-300 hover:text-white hover:bg-gray-700/30 rounded-lg transition-all duration-200 group">
                        <div class="flex items-center space-x-3">
                    <i class="fas fa-bell w-4 text-sm"></i>
                            <span class="text-sm font-medium">Notifications</span>
                        </div>
                        <i class="fas fa-chevron-down text-xs transition-transform duration-200" id="notifications-chevron"></i>
                    </button>
                    <div id="notifications-dropdown" class="hidden pl-4 mt-1 space-y-1">
                        <a href="index.php?page=notifications" class="sidebar-nav-item flex items-center space-x-3 px-3 py-2 text-gray-400 hover:text-white hover:bg-gray-700/20 rounded-lg transition-all duration-200 text-sm">
                            <i class="fas fa-bell w-3 text-xs"></i>
                            <span>Notification Management</span>
                        </a>
                        <a href="index.php?page=banner_notifications" class="sidebar-nav-item flex items-center space-x-3 px-3 py-2 text-gray-400 hover:text-white hover:bg-gray-700/20 rounded-lg transition-all duration-200 text-sm">
                            <i class="fas fa-bullhorn w-3 text-xs"></i>
                            <span>Banner Notifications</span>
                        </a>
                    </div>
                </div>
                
                <!-- System Management Dropdown -->
                <div class="menu-group">
                    <button onclick="toggleDropdown('system')" class="sidebar-nav-item w-full flex items-center justify-between px-3 py-2.5 text-gray-300 hover:text-white hover:bg-gray-700/30 rounded-lg transition-all duration-200 group">
                        <div class="flex items-center space-x-3">
                            <i class="fas fa-cog w-4 text-sm"></i>
                            <span class="text-sm font-medium">System Management</span>
                        </div>
                        <i class="fas fa-chevron-down text-xs transition-transform duration-200" id="system-chevron"></i>
                    </button>
                    <div id="system-dropdown" class="hidden pl-4 mt-1 space-y-1">
                        <a href="index.php?page=low_balance_alert_config" class="sidebar-nav-item flex items-center space-x-3 px-3 py-2 text-gray-400 hover:text-white hover:bg-gray-700/20 rounded-lg transition-all duration-200 text-sm">
                            <i class="fas fa-exclamation-triangle w-3 text-xs"></i>
                            <span>Low Balance Alert</span>
                        </a>
                        <a href="index.php?page=delete_old_orders" class="sidebar-nav-item flex items-center space-x-3 px-3 py-2 text-gray-400 hover:text-white hover:bg-gray-700/20 rounded-lg transition-all duration-200 text-sm">
                            <i class="fas fa-trash-alt w-3 text-xs"></i>
                            <span>Delete Old Orders</span>
                        </a>
                        <a href="index.php?page=user_activity" class="sidebar-nav-item flex items-center space-x-3 px-3 py-2 text-gray-400 hover:text-white hover:bg-gray-700/20 rounded-lg transition-all duration-200 text-sm">
                            <i class="fas fa-user-clock w-3 text-xs"></i>
                            <span>User Login Activity</span>
                        </a>
                    </div>
                </div>
                
                <!-- User Management Dropdown -->
                <div class="menu-group">
                    <button onclick="toggleDropdown('user-management')" class="sidebar-nav-item w-full flex items-center justify-between px-3 py-2.5 text-gray-300 hover:text-white hover:bg-gray-700/30 rounded-lg transition-all duration-200 group">
                        <div class="flex items-center space-x-3">
                            <i class="fas fa-users-cog w-4 text-sm"></i>
                            <span class="text-sm font-medium">User Management</span>
                        </div>
                        <i class="fas fa-chevron-down text-xs transition-transform duration-200" id="user-management-chevron"></i>
                    </button>
                    <div id="user-management-dropdown" class="hidden pl-4 mt-1 space-y-1">
                        <a href="index.php?page=account_management" class="sidebar-nav-item flex items-center space-x-3 px-3 py-2 text-gray-400 hover:text-white hover:bg-gray-700/20 rounded-lg transition-all duration-200 text-sm">
                            <i class="fas fa-user-cog w-3 text-xs"></i>
                            <span>Account Management</span>
                        </a>
                        <a href="index.php?page=password_management" class="sidebar-nav-item flex items-center space-x-3 px-3 py-2 text-gray-400 hover:text-white hover:bg-gray-700/20 rounded-lg transition-all duration-200 text-sm">
                            <i class="fas fa-key w-3 text-xs"></i>
                            <span>Password Management</span>
                        </a>
                        <a href="index.php?page=profile" class="sidebar-nav-item flex items-center space-x-3 px-3 py-2 text-gray-400 hover:text-white hover:bg-gray-700/20 rounded-lg transition-all duration-200 text-sm">
                            <i class="fas fa-user-edit w-3 text-xs"></i>
                            <span>My Profile</span>
                        </a>
                    </div>
                </div>
            </nav>
        </div>

        <!-- Footer Section with Logout Button -->
        <div class="p-4 flex-shrink-0 border-t border-gray-700">
            <a href="../logout.php" class="sidebar-nav-item flex items-center space-x-3 px-3 py-2.5 text-red-400 hover:text-white hover:bg-red-600/20 rounded-lg transition-all duration-200 group">
                <i class="fas fa-sign-out-alt w-4 text-sm"></i>
                <span class="text-sm font-medium">Logout</span>
            </a>
        </div>
    </div>

    <!-- Main Content -->
    <div class="main-content" id="mainContent">
        <!-- Page Header -->
        <div class="bg-white shadow-sm border-b border-gray-200">
            <div class="px-6 py-4">
                <div class="flex items-center justify-between">
                    <div>
                        <h1 class="text-2xl font-bold text-gray-900"><?= htmlspecialchars($page_title) ?></h1>
                        <p class="text-gray-600 mt-1"><?= htmlspecialchars($page_description) ?></p>
                    </div>
                    <div class="flex items-center space-x-4">
                        <a href="index.php?page=profile" class="flex items-center space-x-2 px-3 py-2 bg-blue-50 hover:bg-blue-100 rounded-lg transition-colors group">
                            <i class="fas fa-user-circle text-blue-600 group-hover:text-blue-700"></i>
                            <span class="text-sm font-medium text-blue-600 group-hover:text-blue-700">Profile</span>
                        </a>
                        <div class="text-sm text-gray-500">
                            <i class="fas fa-calendar-alt mr-1"></i>
                            <?= date('M j, Y') ?>
                        </div>
                        <div class="text-sm text-gray-500">
                            <i class="fas fa-clock mr-1"></i>
                            <?= date('H:i') ?>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Page Content -->
        <div class="p-6">


