<?php
// header.php
require_once dirname(__DIR__) . '/Config/DB.php';

// Kiểm tra đăng nhập
if (!isset($_SESSION['user_id'])) {
    header("Location: ../Data/DangNhap.php");
    exit();
}

// Lấy số dư, tổng nạp và gói VIP thời gian thực từ database
$stmt = $conn->prepare("SELECT money, total_recharge, vip_package FROM users WHERE id = ?");
$stmt->execute([$_SESSION['user_id']]);
$user_data = $stmt->fetch(PDO::FETCH_ASSOC);

$current_money = $user_data ? $user_data['money'] : 0;
$vip_status = isset($user_data['vip_package']) ? strtoupper($user_data['vip_package']) : 'FREE';
?>
<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>DICHVUGIARE.SHOP - Gaming Center</title>
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
    <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=Orbitron:wght@400;700;900&family=Rajdhani:wght@500;600;700&family=Inter:wght@400;500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    
    <style>
        body { font-family: 'Rajdhani', sans-serif; background: #0a0516; color: #fff; }
        .font-gaming { font-family: 'Orbitron', sans-serif; }
        .font-input { font-family: 'Inter', sans-serif; }
        .neon-text-cyan { text-shadow: 0 0 8px rgba(34, 211, 238, 0.6); }
        .neon-text-pink { text-shadow: 0 0 8px rgba(236, 72, 153, 0.6); }
        .neon-border-cyan { box-shadow: 0 0 15px rgba(34, 211, 238, 0.2); border: 1px solid rgba(34, 211, 238, 0.4); }
        .neon-border-purple { box-shadow: 0 0 15px rgba(168, 85, 247, 0.2); border: 1px solid rgba(168, 85, 247, 0.4); }
        
        /* Khóa chọn văn bản để cố định UI */
        * {
            -webkit-user-select: none;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
        }
        input, textarea { user-select: text; }
    </style>
</head>
<body class="bg-radial from-[#1a0b2e] to-[#0a0516] min-h-screen">

    <nav class="bg-[#130924]/90 backdrop-blur-md border-b border-purple-900/40 sticky top-0 z-50 px-4 py-3">
        <div class="max-w-7xl mx-auto flex justify-between items-center">
            
            <a href="dashboard.php" class="font-gaming text-xl font-black tracking-widest text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-pink-500">
                DICHVUGIARE<span class="text-white">.SHOP</span>
            </a>

            <div class="hidden md:flex items-center gap-6 font-gaming text-sm font-semibold tracking-wider">
                <a href="dashboard.php" class="text-cyan-400 neon-text-cyan"><i class="fa-solid fa-house mr-1"></i> Trang Chủ</a>
                <a href="#" class="text-gray-400 hover:text-white transition-colors"><i class="fa-solid fa-gamepad mr-1"></i> Cửa Hàng</a>
                <a href="#" class="text-gray-400 hover:text-white transition-colors"><i class="fa-solid fa-wallet mr-1"></i> Nạp Tiền</a>
                <a href="#" class="text-gray-400 hover:text-white transition-colors"><i class="fa-solid fa-history mr-1"></i> Lịch Sử</a>
            </div>

            <div class="hidden md:flex items-center gap-4">
                <a href="mua-vip.php" class="px-3.5 py-1.5 rounded-lg bg-gradient-to-r from-amber-500 to-orange-500 hover:from-amber-400 hover:to-orange-400 text-black font-gaming text-xs font-black tracking-wider uppercase shadow-[0_0_15px_rgba(245,158,11,0.4)] transition-all transform hover:-translate-y-0.5 flex items-center gap-1">
                    <i class="fa-solid fa-crown text-[10px] animate-bounce"></i> NÂNG CẤP VIP
                </a>

                <div class="bg-[#0c0418] px-3 py-1.5 rounded-lg border border-cyan-500/30 font-gaming text-xs">
                    <span class="text-gray-400">Ví:</span> 
                    <span class="text-cyan-400 font-bold"><?php echo number_format($current_money, 0, ',', '.'); ?>đ</span>
                </div>
                <div class="text-right">
                    <div class="text-sm font-bold font-gaming text-purple-400">
                        <?php echo htmlspecialchars($_SESSION['username']); ?> 
                        <span class="text-[9px] px-1 rounded bg-amber-500/20 text-amber-400 border border-amber-500/30 select-none ml-0.5"><?= $vip_status ?></span>
                    </div>
                    <a href="logout.php" class="text-[11px] text-rose-400 uppercase tracking-wider font-gaming hover:text-rose-300">Thoát <i class="fa-solid fa-sign-out text-[9px]"></i></a>
                </div>
            </div>

            <button id="mobile-menu-btn" class="md:hidden text-gray-300 hover:text-white focus:outline-none cursor-pointer text-xl p-1">
                <i id="menu-icon" class="fa-solid fa-bars-staggered text-cyan-400"></i>
            </button>
        </div>

        <div id="mobile-menu" class="hidden md:hidden mt-3 pt-3 border-t border-purple-950/80 space-y-3 font-gaming text-sm tracking-wide">
            
            <div class="flex justify-between items-center bg-[#0c0418] p-3 rounded-xl border border-purple-900/50">
                <div class="flex items-center gap-2">
                    <i class="fa-solid fa-circle-user text-purple-400 text-lg"></i>
                    <div>
                        <span class="font-bold text-gray-200 block"><?php echo htmlspecialchars($_SESSION['username']); ?></span>
                        <span class="inline-block text-[9px] px-1.5 py-0.5 rounded bg-amber-500/20 text-amber-400 border border-amber-500/30 uppercase font-black tracking-widest mt-0.5"><?= $vip_status ?> CẤP BẬC</span>
                    </div>
                </div>
                <div class="text-right">
                    <span class="text-[10px] text-gray-400 block uppercase">Số dư</span>
                    <span class="text-cyan-400 font-black text-base"><?php echo number_format($current_money, 0, ',', '.'); ?>đ</span>
                </div>
            </div>

            <a href="mua-vip.php" class="flex items-center justify-center gap-2 py-3 px-4 rounded-xl bg-gradient-to-r from-amber-400 via-orange-500 to-yellow-500 text-black font-black tracking-widest text-center shadow-[0_0_15px_rgba(245,158,11,0.3)]">
                <i class="fa-solid fa-crown text-sm animate-spin" style="animation-duration: 3s;"></i> KÍCH HOẠT / GIA HẠN GÓI VIP THÁNG
            </a>

            <a href="dashboard.php" class="block py-2.5 px-4 rounded-xl bg-purple-950/20 border-l-4 border-cyan-400 text-cyan-400 font-bold">
                <i class="fa-solid fa-house mr-2 w-5"></i> TRANG CHỦ
            </a>
            <a href="#" class="block py-2.5 px-4 rounded-xl text-gray-400 hover:bg-purple-950/30 hover:text-white transition-all">
                <i class="fa-solid fa-gamepad mr-2 w-5"></i> MUA DỊCH VỤ
            </a>
            <a href="#" class="block py-2.5 px-4 rounded-xl text-gray-400 hover:bg-purple-950/30 hover:text-white transition-all">
                <i class="fa-solid fa-wallet mr-2 w-5"></i> NẠP TIỀN TÀI KHOẢN
            </a>
            <a href="#" class="block py-2.5 px-4 rounded-xl text-gray-400 hover:bg-purple-950/30 hover:text-white transition-all">
                <i class="fa-solid fa-history mr-2 w-5"></i> LỊCH SỬ GIAO DỊCH
            </a>
            
            <a href="../Data/DangXuat.php" class="block py-2.5 px-4 rounded-xl text-rose-400 bg-rose-950/20 border border-rose-900/30 text-center font-bold tracking-widest mt-4">
                <i class="fa-solid fa-sign-out mr-1"></i> ĐĂNG XUẤT HỆ THỐNG
            </a>
        </div>
    </nav>

    <script>
        const menuBtn = document.getElementById('mobile-menu-btn');
        const mobileMenu = document.getElementById('mobile-menu');
        const menuIcon = document.getElementById('menu-icon');

        menuBtn.addEventListener('click', () => {
            mobileMenu.classList.toggle('hidden');
            if (mobileMenu.classList.contains('hidden')) {
                menuIcon.className = 'fa-solid fa-bars-staggered text-cyan-400';
            } else {
                menuIcon.className = 'fa-solid fa-xmark text-pink-500 animate-pulse';
            }
        });
    </script>

    <main class="max-w-7xl mx-auto p-4 sm:p-6 lg:p-8">
