<?php

if (session_status() === PHP_SESSION_NONE) { session_start(); }
require_once '../include/config.php';
$page_title2 = "Dashboard";
if (!isset($_SESSION['logged_in']) || $_SESSION['logged_in'] !== true) {
    header('Location: ../signin.php');
    exit();
}
try {
    $stmt = $pdo->prepare("SELECT id, username, email, full_name, phone, main_balance, seller_balance, referral_code, referral_balance, total_referred, total_earnings, is_admin, is_seller, created_at, kyc_status FROM users WHERE id = :user_id");
    $stmt->bindParam(':user_id', $_SESSION['user_id'], PDO::PARAM_INT);
    $stmt->execute();
    if ($stmt->rowCount() == 1) {
        $user = $stmt->fetch(PDO::FETCH_ASSOC);
    } else {
        session_destroy();
        header('Location: ../signin.php');
        exit();
    }
} catch(PDOException $e) {
    die("Error: " . $e->getMessage());
}
$current_page = basename($_SERVER['PHP_SELF'], '.php');
?>
<?php if (isset($_SESSION['admin_impersonating']) && $_SESSION['admin_impersonating'] === true): ?>
<div style="position:fixed;top:0;left:0;right:0;z-index:99999;background:linear-gradient(90deg,#e74a3b,#be2617);color:#fff;padding:8px 20px;display:flex;align-items:center;justify-content:space-between;font-family:'Inter',sans-serif;font-size:13px;font-weight:600;box-shadow:0 2px 8px rgba(0,0,0,.2);">
  <span><i class="fas fa-user-secret" style="margin-right:8px;"></i> You are viewing this account as admin. User: <strong><?php echo htmlspecialchars($user['username']); ?></strong></span>
  <a href="javascript:void(0)" onclick="window.location.href='/llcpro/jediprime/CompleteVTU/admin/ajax/back_to_admin.php'" style="background:#fff;color:#e74a3b;padding:5px 14px;border-radius:5px;text-decoration:none;font-weight:700;font-size:12px;cursor:pointer;">
    <i class="fas fa-arrow-left"></i> Back to Admin
  </a>
</div>
<style>body{padding-top:42px !important;}</style>
<?php endif; ?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="shortcut icon" type="image/png" href="<?php echo htmlspecialchars(!empty($site_data['favicon_url']) ? $site_data['favicon_url'] : (!empty($site_data['logo_url']) ? $site_data['logo_url'] : $site_data['web_url'] . '/images/softbills.png')); ?>">
    <?php include __DIR__ . '/../include/pwa.php'; ?>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&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" defer></script>
    <script>
    tailwind.config = {
        theme: {
            extend: {
                colors: {
                    primary: '#4D148C',
                    accent: '#FF6600',
                    lightBg: '#F4F4F9',
                },
                fontFamily: {
                    sans: ['Inter', 'sans-serif'],
                }
            }
        }
    }
    </script>
    <style>
    .glass-effect {
        background: rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }
    .nav-active { color: #FF6600; }
    .service-card:active { transform: scale(0.95); }
    .service-card { transition: transform 0.15s ease; }
    .custom-scrollbar::-webkit-scrollbar { width: 4px; }
    .custom-scrollbar::-webkit-scrollbar-thumb { background: #4D148C; border-radius: 10px; }
    .bottom-nav { box-shadow: 0 -2px 10px rgba(0,0,0,0.05); }
    .badge-hot { background: linear-gradient(45deg, #ff4e50, #f9d423); }
    .badge-new { background: #22c55e; }
    body { -webkit-font-smoothing: antialiased; }
    body.dark-theme {
        background: #07111f !important;
        color: #e5ecf7 !important;
    }
    body.dark-theme .glass-effect,
    body.dark-theme .bg-white,
    body.dark-theme .rounded-2xl,
    body.dark-theme .rounded-3xl,
    body.dark-theme .rounded-\[28px\],
    body.dark-theme .border-gray-100,
    body.dark-theme .border-slate-100,
    body.dark-theme .border-slate-200 {
        background-color: #0f172a !important;
        color: #e5ecf7 !important;
        border-color: rgba(148,163,184,0.2) !important;
    }
    body.dark-theme .text-slate-900,
    body.dark-theme .text-slate-800,
    body.dark-theme .text-slate-700,
    body.dark-theme .text-gray-800,
    body.dark-theme .text-gray-700 {
        color: #f8fafc !important;
    }
    body.dark-theme .text-slate-500,
    body.dark-theme .text-slate-600,
    body.dark-theme .text-gray-500,
    body.dark-theme .text-gray-600,
    body.dark-theme .text-gray-400 {
        color: #94a3b8 !important;
    }
    body.dark-theme .bg-slate-50,
    body.dark-theme .bg-gray-50,
    body.dark-theme .bg-lightBg {
        background-color: #111827 !important;
    }
    body.dark-theme .bg-primary\/10,
    body.dark-theme .bg-white\/10,
    body.dark-theme .bg-white\/15,
    body.dark-theme .bg-white\/20 {
        background-color: rgba(255,255,255,0.1) !important;
    }
    body.dark-theme .border-b,
    body.dark-theme .border-t {
        border-color: rgba(148,163,184,0.2) !important;
    }
    body.dark-theme .glass-effect {
        background: rgba(7,17,31,0.9) !important;
        backdrop-filter: blur(14px);
    }
    body.dark-theme .service-card > div {
        background-color: #111827 !important;
        color: #e5ecf7 !important;
    }

    /* Legacy CSS variable compatibility for inner pages */
    :root {
        --card-bg: #ffffff;
        --card-border: rgba(0,0,0,.08);
        --card-shadow: 0 2px 12px rgba(0,0,0,.04);
        --text-primary: #1e293b;
        --text-muted: #64748b;
        --page-bg: #F4F4F9;
        --green-400: #6b23c2;
        --green-500: #4D148C;
        --green-600: #4D148C;
        --green-700: #3b0f6b;
        --hd-title: #1e293b;
        --hd-sub: #94a3b8;
        --hd-bg: #ffffff;
        --hd-border: rgba(0,0,0,.08);
        --btn-bg: #f1f5f9;
        --btn-border: #e2e8f0;
        --btn-icon: #4D148C;
        --btn-hover: #e2e8f0;
        --sb-hover-bg: #f8fafc;
        --sb-text-hover: #1e293b;
        --sb-divider: #e2e8f0;
    }

    /* Global color overrides — remap green to purple/orange */
    /* Backgrounds */
    [style*="background:linear-gradient(135deg,#16a354"],
    [style*="background:linear-gradient(135deg,#22b864"],
    [style*="background:linear-gradient(135deg,#047857"] {
        background: linear-gradient(135deg, #4D148C, #6b23c2) !important;
    }

    /* Override green text colors globally */
    .text-emerald-600, .text-emerald-500, .text-green-600, .text-green-500 {
        color: #4D148C !important;
    }
    .text-emerald-400, .text-green-400 {
        color: #6b23c2 !important;
    }

    /* Override green backgrounds */
    .bg-emerald-500, .bg-emerald-600, .bg-green-500, .bg-green-600 {
        background-color: #4D148C !important;
    }
    .bg-emerald-50, .bg-green-50 {
        background-color: rgba(77,20,140,.05) !important;
    }

    /* Override green borders */
    .border-emerald-500, .border-green-500 {
        border-color: #4D148C !important;
    }
    .border-emerald-200, .border-green-200 {
        border-color: rgba(77,20,140,.2) !important;
    }

    /* Override green ring/shadow */
    .ring-emerald-500, .ring-green-500 {
        --tw-ring-color: #4D148C !important;
    }
    .shadow-emerald-100, .shadow-green-100 {
        --tw-shadow-color: rgba(77,20,140,.1) !important;
    }

    /* Gradient buttons that used green */
    .modal-btn-primary,
    [style*="background:linear-gradient(135deg,#16a354,#22b864)"] {
        background: linear-gradient(135deg, #4D148C, #6b23c2) !important;
        box-shadow: 0 4px 16px rgba(77,20,140,.28) !important;
    }

    /* Logo mark and accent elements */
    .logo-mark {
        background: linear-gradient(135deg, #4D148C, #6b23c2) !important;
        box-shadow: 0 4px 18px rgba(77,20,140,.3) !important;
    }

    /* Focus states — inputs */
    input:focus, select:focus, textarea:focus {
        border-color: #4D148C !important;
        box-shadow: 0 0 0 3px rgba(77,20,140,.1) !important;
    }

    /* Links that were green */
    a[style*="color:#16a354"], a[style*="color:#047857"], a[style*="color:#22b864"] {
        color: #4D148C !important;
    }

    /* Wallet chip override */
    .wallet-chip {
        background: linear-gradient(135deg, #4D148C, #6b23c2) !important;
        box-shadow: 0 2px 12px rgba(77,20,140,.22) !important;
    }

    /* Fund FAB */
    .fund-fab {
        background: linear-gradient(135deg, #4D148C, #6b23c2) !important;
        box-shadow: 0 4px 16px rgba(77,20,140,.35) !important;
    }

    /* Nav active states */
    .nav-item.active .nav-text { color: #4D148C !important; }
    .nav-item.active .nav-icon { color: #4D148C !important; }
    .nav-item.active .nav-icon-wrap { background: rgba(77,20,140,.12) !important; }
    .nav-item.active::before { background: linear-gradient(to bottom, #4D148C, #6b23c2) !important; }

    /* Bottom nav active */
    .bottom-nav-item.active { color: #FF6600 !important; }
    .bottom-nav-item.active::before { background: linear-gradient(90deg, #FF6600, #ff8533) !important; }

    /* Responsive adjustments */
    @media(max-width:768px) {
        * { touch-action: manipulation; }
        input, textarea, select { font-size: 16px !important; }
    }
    @media(min-width:1024px) {
        header { padding-left: 2rem; padding-right: 2rem; }
    }
    </style>
</head>
<body class="bg-lightBg font-sans text-slate-800 pb-24">

<!-- Google Auto-Translate (background, no visible widget) -->
<div id="google_translate_element" style="display:none;"></div>
<script>
function googleTranslateElementInit() {
    new google.translate.TranslateElement({
        pageLanguage: 'vi',
        includedLanguages: 'en',
        layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
        autoDisplay: false
    }, 'google_translate_element');
}
// Auto-select English after widget loads
function autoTranslateToEnglish() {
    var interval = setInterval(function() {
        var select = document.querySelector('#google_translate_element select');
        if (select) {
            select.value = 'en';
            select.dispatchEvent(new Event('change'));
            clearInterval(interval);
        }
    }, 500);
    // Stop trying after 10 seconds
    setTimeout(function() { clearInterval(interval); }, 10000);
}
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<script>autoTranslateToEnglish();</script>
<style>
.goog-te-banner-frame{display:none !important;}
body{top:0 !important;}
#google_translate_element{display:none !important;}
.goog-te-gadget{display:none !important;}
.skiptranslate{display:none !important;}
</style>

<script>
function toggleProfileDropdown() {
    document.getElementById('profileDropdown').classList.toggle('hidden');
}
function toggleTheme() {
    var body = document.body;
    var icon = document.getElementById('themeIcon');
    var dark = body.classList.toggle('dark-theme');
    localStorage.setItem('userTheme', dark ? 'dark' : 'light');
    if (icon) {
        icon.className = dark ? 'fa-solid fa-sun text-sm' : 'fa-solid fa-moon text-sm';
    }
}
(function(){
    var saved = localStorage.getItem('userTheme');
    if (saved === 'dark') {
        document.body.classList.add('dark-theme');
    }
    var icon = document.getElementById('themeIcon');
    if (icon) {
        icon.className = document.body.classList.contains('dark-theme') ? 'fa-solid fa-sun text-sm' : 'fa-solid fa-moon text-sm';
    }
})();
document.addEventListener('click', function(e) {
    var wrap = document.getElementById('profileDropdownWrap');
    if (wrap && !wrap.contains(e.target)) {
        document.getElementById('profileDropdown').classList.add('hidden');
    }
});
</script>

<!-- ── Header ────────────────────────────────────────────────────── -->
<header class="sticky top-0 z-50 glass-effect border-b border-gray-200 px-4 py-3 flex items-center justify-between">
    <div class="flex items-center gap-3">
        <a href="dashboard">
            <img src="<?php echo htmlspecialchars(!empty($site_data['logo_url']) ? $site_data['logo_url'] : $site_data['web_url'] . '/images/softbills.png'); ?>" alt="<?php echo htmlspecialchars($site_data['web_name']); ?>" style="height:32px;width:auto;">
        </a>
    </div>
    <div class="flex items-center gap-3">
        <a href="fund-wallet" class="hidden sm:flex items-center gap-1.5 bg-primary/10 border border-primary/20 text-primary text-xs font-bold px-3 py-1.5 rounded-lg">
            <i class="fa-solid fa-wallet text-[10px]"></i>
            ₦<?php echo number_format($user['main_balance'], 2); ?>
        </a>
        <button onclick="toggleTheme()" class="rounded-full border border-gray-200 bg-white/80 p-2.5 text-gray-600 shadow-sm transition hover:text-primary" title="Toggle theme">
            <i id="themeIcon" class="fa-solid fa-moon text-sm"></i>
        </button>
        <button class="relative p-2 text-gray-600">
            <i class="fa-solid fa-bell text-xl"></i>
            <span class="absolute top-1 right-1 w-2 h-2 bg-accent rounded-full border-2 border-white"></span>
        </button>
        <!-- Profile Dropdown -->
        <div class="relative" id="profileDropdownWrap">
            <button onclick="toggleProfileDropdown()" class="w-9 h-9 rounded-full bg-primary flex items-center justify-center text-white font-bold text-sm">
                <?php echo strtoupper(substr($user['username'], 0, 2)); ?>
            </button>
            <div id="profileDropdown" class="hidden absolute right-0 top-12 w-56 bg-white border border-gray-100 rounded-2xl shadow-xl z-50 overflow-hidden">
                <div class="px-4 py-3 border-b border-gray-100">
                    <p class="text-sm font-bold text-slate-800 truncate"><?php echo htmlspecialchars($user['full_name'] ?: $user['username']); ?></p>
                    <p class="text-[11px] text-gray-400 truncate"><?php echo htmlspecialchars($user['email']); ?></p>
                </div>
                <div class="py-1">
                    <a href="profile" class="flex items-center gap-3 px-4 py-2.5 text-sm text-slate-700 hover:bg-gray-50 transition-colors">
                        <i class="fa-solid fa-user-pen w-4 text-primary text-xs"></i> Profile Settings
                    </a>
                    <a href="fund-wallet" class="flex items-center gap-3 px-4 py-2.5 text-sm text-slate-700 hover:bg-gray-50 transition-colors">
                        <i class="fa-solid fa-wallet w-4 text-primary text-xs"></i> Fund Wallet
                    </a>
                    <a href="referral" class="flex items-center gap-3 px-4 py-2.5 text-sm text-slate-700 hover:bg-gray-50 transition-colors">
                        <i class="fa-solid fa-users w-4 text-primary text-xs"></i> Referrals
                    </a>
                </div>
                <div class="border-t border-gray-100 py-1">
                    <a href="<?php echo $site_data['web_url']; ?>/logout" class="flex items-center gap-3 px-4 py-2.5 text-sm text-red-500 hover:bg-red-50 transition-colors">
                        <i class="fa-solid fa-right-from-bracket w-4 text-xs"></i> Logout
                    </a>
                </div>
            </div>
        </div>
        <button onclick="toggleMenu()" class="p-2 text-primary">
            <i class="fa-solid fa-bars-staggered text-xl"></i>
        </button>
    </div>
</header>

<!-- ── Main Content Wrapper ──────────────────────────────────────── -->
<main class="w-full mx-auto px-4 py-6 sm:px-6 lg:px-12 xl:px-20">
