<?php
session_start();
// ডাটাবেস ফাইল পাথ চেক ও ইনক্লুড
$db_path = file_exists('includes/db.php') ? 'includes/db.php' : '../includes/db.php';
if (file_exists($db_path)) {
    require $db_path;
} else {
    // Fallback connection
    $conn = new mysqli('localhost', 'root', '', 'bajipari');
}

// লগইন চেক
if (!isset($_SESSION['user_id'])) {
    header("Location: login.php");
    exit();
}

$user_id = $_SESSION['user_id'];

// 1. ইউজার ডাটা ফেচ
$user_query = $conn->query("SELECT * FROM users WHERE id=$user_id");
$user = $user_query->fetch_assoc();

// 2. সেটিংস ফেচ
$settings_query = $conn->query("SELECT * FROM settings WHERE id=1");
$settings = $settings_query->fetch_assoc();
$site_name = $settings['site_name'] ?? 'Banglabet';
$telegram_link = !empty($settings['telegram_link']) ? $settings['telegram_link'] : '#';

// কারেন্ট পেজ ডিটেকশন
$current_page = basename($_SERVER['PHP_SELF']);
?>

<!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">
    <title>My Account - <?php echo $site_name; ?></title>
    
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">

    <style>
        body {
            font-family: 'Roboto', sans-serif;
            background-color: #0e1114;
            color: #b0b3b8;
            padding-bottom: 80px;
        }

        /* --- Custom Card Style --- */
        .section-card {
            background-color: #171e25;
            border-radius: 8px;
            padding: 12px 15px;
            margin-bottom: 12px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }

        /* --- Section Title --- */
        .section-header {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
            border-left: 3px solid #eab308;
            padding-left: 10px;
            padding-bottom: 10px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        .section-title {
            color: #d1d5db;
            font-size: 14px;
            font-weight: 500;
        }

        /* --- Grid Layouts --- */
        .grid-3 {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            text-align: center;
        }

        /* --- Icon Circles --- */
        .icon-box {
            width: 45px;
            height: 45px;
            background-color: #232b34;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 8px auto;
            color: #9ca3af;
            font-size: 20px;
            border: 1px solid #2d3748;
            position: relative;
        }
        
        .grid-item {
            display: block;
            text-decoration: none;
            color: #9ca3af;
            font-size: 11px;
            transition: 0.2s;
        }
        .grid-item:active { opacity: 0.7; }

        /* --- Badge --- */
        .badge {
            position: absolute;
            top: -2px; right: -2px;
            background: #ef4444; color: white;
            font-size: 9px; width: 16px; height: 16px;
            border-radius: 50%; border: 1px solid #171e25;
            display: none;
            align-items: center; justify-content: center; font-weight: bold;
        }

        /* --- VIP Button --- */
        .btn-vip {
            background: linear-gradient(to right, #fbbf24, #d97706);
            color: #000;
            font-weight: 800;
            font-size: 10px;
            padding: 2px 8px;
            border-radius: 4px;
            margin-left: 8px;
            display: inline-block;
        }

        /* --- Bottom Nav --- */
        .bottom-nav { background: #000000; border-top: 1px solid #222; }
        .nav-item.active { color: #FACC15; }
        .nav-item { color: #6b7280; }
        
        /* Animation */
        .fa-sync-alt:active { transform: rotate(180deg); transition: 0.3s; }
    </style>
</head>
<body>

    <div class="px-4 pt-6 pb-4 bg-[#0e1114]">
        <div class="flex items-start justify-between">
            <div class="flex items-center gap-3">
                <div class="w-14 h-14 rounded-full bg-gray-300 overflow-hidden border-2 border-[#232b34]">
                    <i class="fas fa-user text-3xl text-gray-500 w-full h-full flex items-center justify-center bg-gray-200"></i>
                </div>
                <div>
                    <div class="flex items-center gap-2">
                        <span class="text-gray-400 text-xs font-medium">ID</span>
                        <span class="text-[#eab308] font-bold text-sm"><?php echo $user['username']; ?></span>
                    </div>
                    <div class="flex items-center mt-1">
                        <span class="text-xs text-gray-400">VIP Points (VP) 0</span>
                        <a href="vip.php" class="btn-vip">My VIP</a>
                    </div>
                </div>
            </div>
            
            <a href="index.php" class="text-gray-400 text-xl"><i class="fas fa-times"></i></a>
        </div>
    </div>

    <div class="px-3">
        
        <div class="section-card relative overflow-hidden">
            <div class="flex justify-between items-center py-1">
                <div class="flex items-center gap-3 text-[#eab308] text-sm font-medium">
                    Main Wallet 
                    
                    <i class="fas fa-sync-alt text-base cursor-pointer" onclick="window.location.reload()"></i> 
                    
                    <i class="far fa-eye text-xs cursor-pointer" id="eyeIcon" onclick="toggleBalance()"></i>
                </div>
                
                <div class="text-right">
                    <span class="text-white text-xl font-bold" id="balanceText" data-balance="৳ <?php echo number_format($user['balance'], 0); ?>">
                        ৳ <?php echo number_format($user['balance'], 0); ?>
                    </span>
                </div>
            </div>
        </div>

        <div class="section-card">
            <div class="section-header">
                <span class="section-title">Funds</span>
            </div>
            <div class="grid-3">
                <a href="deposit.php" class="grid-item">
                    <div class="icon-box"><i class="far fa-credit-card"></i></div>
                    Deposit
                </a>
                <a href="withdraw.php" class="grid-item">
                    <div class="icon-box"><i class="fas fa-file-invoice-dollar"></i></div>
                    Withdrawal
                </a>
                <a href="spin.php" class="grid-item">
                    <div class="icon-box"><i class="fas fa-ticket-alt"></i></div>
                    Free Spin
                </a>
            </div>
        </div>

        <div class="section-card">
            <div class="section-header">
                <span class="section-title">My Promotion</span>
            </div>
            <div class="grid-3">
                <a href="realtimebonus.php" class="grid-item">
                    <div class="icon-box"><i class="fas fa-money-bill-wave"></i></div>
                    Real-Time Bonus
                </a>
                <a href="share.php" class="grid-item">
                    <div class="icon-box"><i class="fas fa-users"></i></div>
                    Referral
                </a>
                <div></div> </div>
        </div>

        <div class="section-card">
            <div class="section-header">
                <span class="section-title">History</span>
            </div>
            <div class="grid-3">
                <a href="betting_recordsacc.php" class="grid-item">
                    <div class="icon-box"><i class="fas fa-clipboard-list"></i></div>
                    Betting Records
                </a>
                <a href="turnover_all.php" class="grid-item">
                    <div class="icon-box"><i class="fas fa-sync"></i></div>
                    Turnover
                </a>
                <a href="trans_rec_full.php" class="grid-item">
                    <div class="icon-box"><i class="fas fa-list-alt"></i></div>
                    Transaction Records
                </a>
            </div>
        </div>

        <div class="section-card">
            <div class="section-header">
                <span class="section-title">Profile</span>
            </div>
            <div class="grid-3">
                <a href="personal_info.php" class="grid-item">
                    <div class="icon-box"><i class="far fa-user"></i></div>
                    Personal Info
                </a>
                <a href="change_passwordacc.php" class="grid-item">
                    <div class="icon-box"><i class="fas fa-lock"></i></div>
                    Change Password
                </a>
                <a href="inboxper.php" class="grid-item">
                    <div class="icon-box">
                        <i class="far fa-envelope"></i>
                        <span id="emailBadge" class="badge">1</span>
                    </div>
                    Inbox
                </a>
            </div>
        </div>

        <div class="section-card">
            <div class="section-header">
                <span class="section-title">Contact Us</span>
            </div>
            <div class="grid-3">
                <a href="<?php echo $telegram_link; ?>" target="_blank" class="grid-item">
                    <div class="icon-box"><i class="fab fa-telegram-plane"></i></div>
                    Telegram
                </a>
                <a href="support_chat.php" class="grid-item">
                    <div class="icon-box"><i class="far fa-envelope"></i></div>
                    Email
                </a>
                <a href="support_chat.php" class="grid-item">
                    <div class="icon-box"><i class="fas fa-headset"></i></div>
                    Chat Us
                </a>
            </div>
        </div>

        <div class="mt-4 mb-6">
            <a href="../logout.php" class="block w-full py-3 border border-gray-700 rounded text-center text-gray-400 hover:text-white hover:border-gray-500 transition bg-[#171e25]">
                <i class="fas fa-sign-out-alt mr-2"></i> Log out
            </a>
        </div>

    </div>

    <div class="fixed bottom-0 left-0 w-full h-[60px] bottom-nav z-50 flex justify-between items-center px-4">
        <a href="index.php" class="flex flex-col items-center justify-center nav-item">
            <i class="fas fa-home text-lg mb-1"></i>
            <span class="text-[10px]">Home</span>
        </a>
        <a href="promotions.php" class="flex flex-col items-center justify-center nav-item">
            <i class="fas fa-gift text-lg mb-1"></i>
            <span class="text-[10px]">Promotions</span>
        </a>
        <a href="deposit.php" class="flex flex-col items-center justify-center nav-item">
            <i class="fas fa-wallet text-lg mb-1"></i>
            <span class="text-[10px]">Deposit</span>
        </a>
        <a href="account.php" class="flex flex-col items-center justify-center nav-item active">
            <i class="fas fa-user text-lg mb-1"></i>
            <span class="text-[10px]">My Account</span>
        </a>
    </div>

    <script>
        // --- 1. Email Badge Logic (24h Show, 10m Hide) ---
        document.addEventListener("DOMContentLoaded", function() {
            const badge = document.getElementById('emailBadge');
            const now = Date.now();
            const lastShown = localStorage.getItem('email_badge_last_shown');
            const showDuration = 10 * 60 * 1000; // 10 minutes
            const cooldown = 24 * 60 * 60 * 1000; // 24 hours

            function showBadge() { badge.style.display = 'flex'; }
            function hideBadge() { badge.style.display = 'none'; }

            if (!lastShown || (now - lastShown > cooldown)) {
                localStorage.setItem('email_badge_last_shown', now);
                showBadge();
                setTimeout(hideBadge, showDuration);
            } else {
                const timePassed = now - parseInt(lastShown);
                if (timePassed < showDuration) {
                    showBadge();
                    setTimeout(hideBadge, showDuration - timePassed);
                } else {
                    hideBadge();
                }
            }
        });

        // --- 2. Balance Toggle Logic ---
        function toggleBalance() {
            const balanceText = document.getElementById('balanceText');
            const eyeIcon = document.getElementById('eyeIcon');
            const realBalance = balanceText.getAttribute('data-balance');

            if (balanceText.innerText.includes('****')) {
                // Show Real Balance
                balanceText.innerText = realBalance;
                eyeIcon.classList.remove('fa-eye-slash');
                eyeIcon.classList.add('fa-eye');
            } else {
                // Hide Balance
                balanceText.innerText = '****';
                eyeIcon.classList.remove('fa-eye');
                eyeIcon.classList.add('fa-eye-slash');
            }
        }
    </script>

</body>
</html>