<?php
// Session Start
if (session_status() === PHP_SESSION_NONE) {
    session_start();
}

// লগইন চেক করা
$is_user_logged_in = isset($_SESSION['user_id']) || isset($_SESSION['is_user_logged_in']);

// ব্যালেন্স এবং কার্ট কাউন্ট (ডিফল্ট)
$user_balance = 0.00;
$cart_count = isset($_SESSION['cart']) ? count($_SESSION['cart']) : 0;

// ডাটাবেস থেকে ইউজারের ব্যালেন্স আনা (যদি লগইন থাকে)
if ($is_user_logged_in && isset($db)) {
    try {
        $stmt = $db->prepare("SELECT balance FROM users WHERE id = ?");
        $stmt->execute([$_SESSION['user_id']]);
        $user_data = $stmt->fetch();
        if ($user_data && isset($user_data['balance'])) {
            $user_balance = $user_data['balance'];
        }
    } catch (PDOException $e) {}
}

// ==========================================
// ডাইনামিক টাইটেল লজিক
// ==========================================
$display_title = isset($page_title) ? $page_title . " - Plexio IT" : "Client Area - Plexio IT";
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- মোবাইলে জুম হয়ে যাতে ডিজাইন না ভাঙে তার জন্য strict viewport -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    
    <!-- ডাইনামিক টাইটেল -->
    <title><?= htmlspecialchars($display_title) ?></title>
    
    <!-- ওয়েবসাইট ফ্যাভিকন (Favicon) -->
    <link rel="icon" type="image/png" href="../assets/images/favicon.png">
    
    <!-- Bootstrap 5 & FontAwesome -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        /* ==========================================
           CSS Variables (Premium Light Mode Only)
           ========================================== */
        :root {
            --bg-main: #f8fafc;
            --text-main: #0f172a;
            --text-muted: #64748b;
            --glass-bg: rgba(255, 255, 255, 0.85);
            --glass-border: rgba(37, 99, 235, 0.1);
            --glass-shadow: 0 10px 30px -10px rgba(37, 99, 235, 0.1);
            --icon-bg: rgba(37, 99, 235, 0.05);
            --icon-color: #2563eb;
            --balance-bg: rgba(16, 185, 129, 0.1);
            --balance-color: #10b981;
        }

        body {
            background-color: var(--bg-main);
            color: var(--text-main);
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
            background-image: radial-gradient(circle at 15% 50%, rgba(37, 99, 235, 0.05), transparent 25%), 
                              radial-gradient(circle at 85% 30%, rgba(16, 185, 129, 0.05), transparent 25%);
            background-attachment: fixed;
        }

        /* ==========================================
           Premium Glassmorphism Header
           ========================================== */
        .glass-header {
            position: sticky;
            top: 0;
            z-index: 1050;
            background: var(--glass-bg);
            backdrop-filter: blur(16px) saturate(180%);
            -webkit-backdrop-filter: blur(16px) saturate(180%);
            border-bottom: 1px solid var(--glass-border);
            box-shadow: var(--glass-shadow);
            padding: 10px 25px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 70px;
        }

        /* Center Logo */
        .header-center-logo {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .header-center-logo img {
            height: 35px;
            object-fit: contain;
            transition: all 0.3s ease;
        }

        /* Circular Icon Buttons */
        .btn-glass-icon {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            background: var(--icon-bg);
            color: var(--icon-color);
            border: 1px solid var(--glass-border);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            cursor: pointer;
            text-decoration: none;
            transition: all 0.3s ease;
        }
        .btn-glass-icon:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(37, 99, 235, 0.15);
            background: var(--icon-color);
            color: #ffffff;
        }

        /* Cart Badge */
        .cart-badge {
            font-size: 10px;
            padding: 4px 6px;
            transform: translate(30%, -30%) !important;
            border: 2px solid var(--glass-bg);
            background: #ef4444;
            color: white;
        }

        /* Balance Badge */
        .balance-badge {
            display: flex;
            align-items: center;
            background: var(--balance-bg);
            border: 1px solid rgba(16, 185, 129, 0.2);
            padding: 6px 14px;
            border-radius: 50px;
            color: var(--balance-color);
            font-weight: 700;
            font-size: 14px;
            gap: 8px;
            cursor: pointer;
            transition: transform 0.3s;
            text-decoration: none;
        }
        .balance-badge:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(16, 185, 129, 0.2);
        }

        /* Auth Button (Login/Register) */
        .btn-auth-header {
            background: linear-gradient(135deg, #2563eb, #8b5cf6);
            color: #ffffff !important;
            border: none;
            padding: 8px 20px;
            border-radius: 50px;
            font-weight: 600;
            font-size: 14px;
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 6px;
            box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
            transition: all 0.3s;
        }
        .btn-auth-header:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(37, 99, 235, 0.4);
        }

        /* ==========================================
           Mobile Adjustments (Fixed overlapping)
           ========================================== */
        @media (max-width: 576px) {
            .glass-header {
                padding: 8px 15px; /* মোবাইলে প্যাডিং কমানো হলো */
            }
            .header-center-logo img {
                height: 26px; /* লোগো একটু ছোট করা হলো যাতে সাইডের বাটনে বাড়ি না খায় */
            }
            .btn-glass-icon {
                width: 36px;
                height: 36px;
                font-size: 14px;
            }
            .balance-text { display: none; }
            .balance-badge { padding: 6px 10px; }
            .btn-auth-header span { display: none; }
            .btn-auth-header { padding: 8px 12px; }
            .cart-badge { transform: translate(15%, -20%) !important; padding: 3px 5px; }
        }
    </style>
</head>
<body>

    <!-- Premium Glassmorphism Header -->
    <header class="glass-header">
        
        <!-- Left: 3-Dot Sidebar Menu -->
        <div class="header-left d-flex align-items-center">
            <button id="sidebarToggle" class="btn-glass-icon" title="Menu">
                <i class="fa-solid fa-bars-staggered"></i>
            </button>
        </div>

        <!-- Center: Plexio IT Logo -->
        <div class="header-center-logo">
            <a href="index.php">
                <img id="mainLogo" src="../assets/images/logo-dark.png" alt="Plexio IT">
            </a>
        </div>

        <!-- Right: Actions (Cart, Balance/Auth) -->
        <div class="header-right d-flex align-items-center gap-2 gap-sm-3">

            <!-- Cart Icon -->
            <a href="cart.php" class="btn-glass-icon position-relative" title="View Cart">
                <i class="fa-solid fa-cart-shopping"></i>
                <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill cart-badge">
                    <?= $cart_count ?>
                </span>
            </a>

            <!-- User Auth / Balance Section -->
            <?php if ($is_user_logged_in): ?>
                <a href="add_funds.php" class="balance-badge" title="Add Funds">
                    <i class="fa-solid fa-wallet"></i>
                    <span class="balance-text">৳ <?= number_format($user_balance, 2) ?></span>
                </a>
            <?php else: ?>
                <a href="login.php" class="btn-auth-header">
                    <i class="fa-solid fa-user-circle fs-5"></i>
                    <span>Sign In</span>
                </a>
            <?php endif; ?>

        </div>
    </header>

    <!-- Content Wrapper -->
    <div class="main-wrapper d-flex">