<?php
// Notification handling is done in individual pages where AdminNotificationManager is initialized

// Detect if header is being included from a subdirectory (like pages/)
$isInSubdirectory = (strpos($_SERVER['PHP_SELF'], '/pages/') !== false);
$basePath = $isInSubdirectory ? '../' : '';
?>
<!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; ?> | D-Bundles Stores</title>
    <meta name="description" content="<?php echo $pageDescription; ?>">
    
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: {
                            50: '#f0f9ff',
                            100: '#e0f2fe',
                            500: '#0ea5e9',
                            600: '#0284c7',
                            700: '#0369a1',
                            900: '#0c4a6e'
                        },
                        accent: {
                            50: '#fdf4ff',
                            100: '#fae8ff',
                            500: '#a855f7',
                            600: '#9333ea',
                            700: '#7c3aed'
                        }
                    },
                    fontFamily: {
                        'poppins': ['Poppins', 'sans-serif'],
                        'space': ['Space Grotesk', 'sans-serif'],
                    }
                }
            }
        }
    </script>
    
    <style>
        /* Premium Dark Theme Base */
        body {
            background: #0f172a;
            font-family: 'Poppins', sans-serif;
            color: #e2e8f0;
        }
        
        /* Glass Effect */
        .glass-effect { 
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            background: rgba(30, 41, 59, 0.7);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .glass-card {
            background: rgba(30, 41, 59, 0.7);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .glass-card-light {
            background: rgba(51, 65, 85, 0.6);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.08);
        }
        
        .gradient-bg { background: #0f172a; }
        .card-hover { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
        .card-hover:hover { 
            transform: translateY(-2px); 
            box-shadow: 0 20px 25px -5px rgba(251, 191, 36, 0.2), 0 10px 10px -5px rgba(251, 191, 36, 0.1);
            border-color: rgba(251, 191, 36, 0.4);
        }
        
        /* Golden Glow Effects */
        .golden-glow {
            box-shadow: 0 0 15px rgba(251, 191, 36, 0.3), 0 0 30px rgba(251, 191, 36, 0.1);
        }
        
        .hover-glow:hover {
            box-shadow: 0 0 20px rgba(251, 191, 36, 0.4), 0 0 40px rgba(251, 191, 36, 0.2);
        }
        
        .icon-glow {
            filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.6));
        }
        
        /* Dark Theme Tab Styles */
        .tab-btn {
            color: #94a3b8;
        }
        
        .tab-btn.active {
            background: linear-gradient(135deg, #f59e0b 0%, #eab308 100%);
            color: white;
        }
        
        /* Dark Theme Form Inputs */
        input[type="text"],
        input[type="email"],
        input[type="password"],
        input[type="number"],
        select,
        textarea {
            background: rgba(15, 23, 42, 0.8);
            border-color: #475569;
            color: #e2e8f0;
        }
        
        input[type="text"]:focus,
        input[type="email"]:focus,
        input[type="password"]:focus,
        input[type="number"]:focus,
        select:focus,
        textarea:focus {
            border-color: #fbbf24;
            box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.2);
        }
        
        input[type="text"]::placeholder,
        input[type="email"]::placeholder,
        input[type="password"]::placeholder,
        textarea::placeholder {
            color: #64748b;
        }
        
        /* Professional Navigation Links */
        .nav-link {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem 1rem;
            color: #94a3b8;
            font-size: 0.875rem;
            font-weight: 500;
            text-decoration: none;
            transition: all 0.2s ease;
            border-radius: 0.375rem;
            position: relative;
        }
        
        .nav-link i {
            font-size: 0.875rem;
            width: 16px;
            text-align: center;
        }
        
        .nav-link:hover {
            color: #e2e8f0;
            background-color: rgba(51, 65, 85, 0.3);
        }
        
        .nav-link.active {
            color: #fbbf24;
            background-color: rgba(251, 191, 36, 0.1);
        }
        
        .nav-link.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 1rem;
            right: 1rem;
            height: 2px;
            background: linear-gradient(90deg, #fbbf24, #f59e0b);
            border-radius: 2px 2px 0 0;
        }
        
        .nav-link-logout {
            color: #f87171;
        }
        
        .nav-link-logout:hover {
            color: #fca5a5;
            background-color: rgba(239, 68, 68, 0.1);
        }
        
        /* Mobile Navigation Links */
        .mobile-nav-link {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.75rem 1rem;
            color: #94a3b8;
            font-size: 0.875rem;
            font-weight: 500;
            text-decoration: none;
            transition: all 0.2s ease;
            border-radius: 0.5rem;
            border-left: 3px solid transparent;
        }
        
        .mobile-nav-link i {
            font-size: 0.875rem;
            width: 18px;
            text-align: center;
        }
        
        .mobile-nav-link:hover {
            color: #e2e8f0;
            background-color: rgba(51, 65, 85, 0.3);
            border-left-color: rgba(251, 191, 36, 0.5);
        }
        
        .mobile-nav-link.active {
            color: #fbbf24;
            background-color: rgba(251, 191, 36, 0.1);
            border-left-color: #fbbf24;
        }
        
        .mobile-nav-link-logout {
            color: #f87171;
            border-top: 1px solid rgba(71, 85, 105, 0.3);
            margin-top: 0.5rem;
            padding-top: 0.875rem;
        }
        
        .mobile-nav-link-logout:hover {
            color: #fca5a5;
            background-color: rgba(239, 68, 68, 0.1);
            border-left-color: rgba(239, 68, 68, 0.5);
        }
        
        /* Mobile header actions styling */
        @media (max-width: 768px) {
            .mobile-header-actions {
                gap: 8px;
            }
        }
        
        /* Line clamp for text truncation */
        .line-clamp-2 {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .floating-action { position: fixed; bottom: 2rem; right: 2rem; z-index: 50; }
        .mobile-optimized { padding: 1rem; }
        @media (min-width: 768px) { .mobile-optimized { padding: 2rem; } }
    </style>
</head>

<body class="min-h-screen relative">
    
    <!-- Mobile-First Header -->
    <header class="glass-card border-b-2 border-slate-600/60 sticky top-0 z-40 backdrop-blur-xl bg-slate-900/80 shadow-lg">
        <div class="mobile-optimized">
            <div class="flex items-center justify-between">
                <!-- Logo & Title -->
                <a href="<?php echo $basePath; ?>user_index.php?page=dashboard" class="flex items-center space-x-3 hover:opacity-90 transition-opacity duration-200 group">
                    <div class="w-12 h-12 bg-gradient-to-br from-amber-500 via-yellow-500 to-amber-600 rounded-xl flex items-center justify-center shadow-lg golden-glow group-hover:scale-105 transition-transform duration-200">
                        <i class="fas fa-user-tie text-white text-lg icon-glow"></i>
                    </div>
                    <div>
                        <h1 class="text-lg font-bold text-white font-space tracking-tight">D-Bundles Stores</h1>
                        <p class="text-xs text-gray-400 font-medium">Agent Portal</p>
                    </div>
                </a>
                
                <!-- Mobile Header Actions -->
                <div class="flex items-center space-x-2 md:hidden mobile-header-actions">
                    <!-- Mobile Menu Button -->
                    <button id="mobileMenuBtn" class="p-2 rounded-lg text-gray-300 hover:text-amber-400 hover:bg-slate-700/50 transition-colors">
                        <i class="fas fa-bars text-lg"></i>
                    </button>
                </div>
                
                <!-- Desktop Actions -->
                <div class="hidden md:flex items-center space-x-6">
                    <div class="text-right px-3 py-1.5">
                        <p class="text-sm font-medium text-white"><?php echo htmlspecialchars($username); ?></p>
                        <p class="text-xs text-gray-400 flex items-center justify-end mt-0.5">
                            <i class="fas fa-wallet mr-1.5 text-amber-400"></i>
                            <span class="font-semibold text-amber-400"><?php echo number_format($balance, 2); ?> GHS</span>
                        </p>
                    </div>
                    
                    <nav class="flex items-center space-x-1 border-l border-r border-slate-600/30 px-4">
                        <a href="<?php echo $basePath; ?>user_index.php?page=dashboard" class="nav-link <?php echo ($page === 'dashboard') ? 'active' : ''; ?>" title="Dashboard">
                            <i class="fas fa-home"></i>
                            <span>Dashboard</span>
                        </a>
                        <a href="<?php echo $basePath; ?>user_index.php?page=profile" class="nav-link <?php echo ($page === 'profile') ? 'active' : ''; ?>" title="Profile">
                            <i class="fas fa-user"></i>
                            <span>Profile</span>
                        </a>
                        <?php
                        // Check if user is a sub-agent (has store_id but is not store owner)
                        $isSubAgent = false;
                        if (isset($user_id)) {
                            $checkSubAgentStmt = $conn->prepare("SELECT store_id, role, is_store_owner FROM agents WHERE id = ?");
                            $checkSubAgentStmt->bind_param("i", $user_id);
                            $checkSubAgentStmt->execute();
                            $subAgentResult = $checkSubAgentStmt->get_result();
                            $subAgentData = $subAgentResult->fetch_assoc();
                            $checkSubAgentStmt->close();
                            
                            $isSubAgent = ($subAgentData && !empty($subAgentData['store_id']) && 
                                         $subAgentData['role'] !== 'store_owner' && 
                                         $subAgentData['is_store_owner'] != 1);
                        }
                        if ($isSubAgent): ?>
                        <a href="<?php echo $basePath; ?>pages/subagent_topup.php" class="nav-link <?php echo ($page === 'topup') ? 'active' : ''; ?>" title="Top Up">
                            <i class="fas fa-credit-card"></i>
                            <span>Top Up</span>
                        </a>
                        <?php endif; ?>
                        <a href="<?php echo $basePath; ?>user_index.php?page=balance_history" class="nav-link <?php echo ($page === 'balance_history') ? 'active' : ''; ?>" title="Balance History">
                            <i class="fas fa-chart-line"></i>
                            <span>History</span>
                        </a>
                        <a href="<?php echo $basePath; ?>logout.php" class="nav-link nav-link-logout" title="Logout">
                            <i class="fas fa-sign-out-alt"></i>
                            <span>Logout</span>
                        </a>
                    </nav>
                </div>
            </div>
            
            <!-- Mobile Menu -->
            <div id="mobileMenu" class="md:hidden hidden mt-3 glass-card rounded-lg shadow-lg border border-slate-600/50">
                <div class="p-3 space-y-1">
                    <div class="px-3 py-2 mb-2 border-b border-slate-600/30">
                        <p class="text-sm font-medium text-white"><?php echo $username; ?></p>
                        <p class="text-xs text-gray-400 mt-0.5">Balance: <span class="text-amber-400 font-semibold"><?php echo number_format($balance, 2); ?> GHS</span></p>
                    </div>
                    <a href="<?php echo $basePath; ?>user_index.php?page=dashboard" class="mobile-nav-link <?php echo ($page === 'dashboard') ? 'active' : ''; ?>">
                        <i class="fas fa-home"></i>
                        <span>Dashboard</span>
                    </a>
                    <a href="<?php echo $basePath; ?>user_index.php?page=profile" class="mobile-nav-link <?php echo ($page === 'profile') ? 'active' : ''; ?>">
                        <i class="fas fa-user"></i>
                        <span>Profile</span>
                    </a>
                    <?php
                    // Check if user is a sub-agent (has store_id but is not store owner)
                    $isSubAgent = false;
                    if (isset($user_id)) {
                        $checkSubAgentStmt = $conn->prepare("SELECT store_id, role, is_store_owner FROM agents WHERE id = ?");
                        $checkSubAgentStmt->bind_param("i", $user_id);
                        $checkSubAgentStmt->execute();
                        $subAgentResult = $checkSubAgentStmt->get_result();
                        $subAgentData = $subAgentResult->fetch_assoc();
                        $checkSubAgentStmt->close();
                        
                        $isSubAgent = ($subAgentData && !empty($subAgentData['store_id']) && 
                                     $subAgentData['role'] !== 'store_owner' && 
                                     $subAgentData['is_store_owner'] != 1);
                    }
                    if ($isSubAgent): ?>
                    <a href="<?php echo $basePath; ?>pages/subagent_topup.php" class="mobile-nav-link <?php echo ($page === 'topup') ? 'active' : ''; ?>" title="Top Up">
                        <i class="fas fa-credit-card"></i>
                        <span>Top Up</span>
                    </a>
                    <?php endif; ?>
                    <a href="<?php echo $basePath; ?>user_index.php?page=balance_history" class="mobile-nav-link <?php echo ($page === 'balance_history') ? 'active' : ''; ?>">
                        <i class="fas fa-chart-line"></i>
                        <span>Balance History</span>
                    </a>
                    <a href="<?php echo $basePath; ?>logout.php" class="mobile-nav-link mobile-nav-link-logout">
                        <i class="fas fa-sign-out-alt"></i>
                        <span>Logout</span>
                    </a>
                </div>
            </div>
        </div>
    </header>

    <!-- Main Content -->
    <main class="mobile-optimized max-w-6xl mx-auto relative z-10">

