<?php
// Session & Logic (100% UNCHANGED)
if (session_status() === PHP_SESSION_NONE) {
    session_start();
}

$is_guest = !isset($_SESSION['user_id']);
$user_name = $_SESSION['username'] ?? 'Guest';
$user_balance = 0.00;

if (!$is_guest && isset($conn)) {
    $uid = $_SESSION['user_id'];
    $u_res = $conn->query("SELECT balance FROM users WHERE id=$uid");
    if($u_res && $u_res->num_rows > 0){
        $user_balance = $u_res->fetch_assoc()['balance'];
    }
}

// Helper to redirect guests to login
function getLink($page) {
    global $is_guest;
    return $is_guest ? "../player/login.php" : $page;
}
?>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">

<style>
    /* === BET365 THEME OVERRIDES === */

    /* Sidebar Main Container */
    #sidebar {
        background-color: #273832 !important; /* Deep Green Background */
        border-right: 1px solid #137a5a !important;
        width: 280px !important;
        height: 100% !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        z-index: 70 !important;
        overflow-y: auto !important;
        transition: transform 0.3s ease-in-out !important;
    }
    
    #sidebar::-webkit-scrollbar { display: none !important; }
    #sidebar { -ms-overflow-style: none !important; scrollbar-width: none !important; }

    /* Profile Section */
    .profile-section {
        background-color: #137a5a !important; /* Header Green */
        padding: 20px 15px !important;
        margin-bottom: 20px !important;
        border-bottom: 1px solid #0e5e45 !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
    }

    .profile-img-box {
        width: 45px !important;
        height: 45px !important;
        border-radius: 50% !important;
        border: 2px solid #ffdf1b !important; /* Yellow Border */
        overflow: hidden !important;
    }

    .profile-img { width: 100% !important; height: 100% !important; object-fit: cover !important; }

    .profile-info h3 {
        color: #fff !important; font-weight: bold !important; font-size: 16px !important; margin: 0 !important;
    }
    .profile-info p {
        color: #ffdf1b !important; font-size: 14px !important; margin: 0 !important; font-weight: bold !important; /* Yellow Balance */
    }

    /* Guest Login Box */
    .guest-box {
        padding: 20px 15px !important;
        background-color: #137a5a !important;
        border-bottom: 1px solid #0e5e45 !important;
        text-align: center !important;
        margin-bottom: 20px !important;
    }

    /* === GOLD BUTTON (Deposit/Withdraw/Login) - Now Bet365 Yellow === */
    .btn-gold {
        background-color: #ffdf1b !important; /* Flat Yellow */
        border: none !important;
        color: #123628 !important; /* Dark Green Text */
        font-weight: bold !important;
        font-size: 15px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 12px 16px !important;
        border-radius: 4px !important;
        margin-bottom: 12px !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
        text-decoration: none !important;
        width: 100% !important;
        box-sizing: border-box !important;
        position: relative !important;
        transition: transform 0.2s !important;
    }
    .btn-gold:hover {
        background-color: #eacb15 !important;
        transform: translateY(-1px) !important;
    }
    
    .btn-gold.action-btn { justify-content: flex-start !important; }

    /* === MENU BUTTONS (Formerly Purple) - Now Greenish Grey === */
    .btn-purple {
        background-color: #3b4c46 !important; /* Input Field Color */
        border: 1px solid #137a5a !important;
        color: #d1d5db !important;
        font-weight: 500 !important;
        font-size: 14px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 12px 16px !important;
        border-radius: 4px !important;
        margin-bottom: 8px !important;
        text-decoration: none !important;
        width: 100% !important;
        box-sizing: border-box !important;
        transition: background 0.3s, border-color 0.3s !important;
    }
    .btn-purple:hover {
        background-color: #4a5e57 !important;
        border-color: #ffdf1b !important;
        color: #fff !important;
    }

    /* === OUTLINE BUTTON === */
    .btn-outline {
        background: transparent !important;
        border: 1px solid #8fa199 !important;
        color: #8fa199 !important;
        padding: 10px !important;
        border-radius: 4px !important;
        text-align: center !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-bottom: 10px !important;
        text-decoration: none !important;
        font-size: 14px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        cursor: pointer !important;
        transition: 0.3s !important;
    }
    .btn-outline:hover {
        border-color: #fff !important;
        color: #fff !important;
    }

    /* === Language Switcher === */
    .lang-container {
        display: flex !important;
        gap: 10px !important;
        margin-bottom: 10px !important;
    }
    .lang-btn {
        flex: 1 !important;
        background: #3b4c46 !important;
        border: 1px solid #137a5a !important;
        color: #8fa199 !important;
        padding: 8px !important;
        border-radius: 4px !important;
        font-size: 12px !important;
        cursor: pointer !important;
        transition: 0.3s !important;
    }
    .lang-btn.active {
        background: #ffdf1b !important; /* Active Yellow */
        color: #123628 !important; /* Dark Text */
        border-color: #ffdf1b !important;
        font-weight: bold !important;
    }

    .btn-icon-box {
        width: 30px !important; display: flex !important; justify-content: center !important;
        margin-right: 10px !important; font-size: 18px !important;
    }
    .sidebar-content { padding: 0 15px 80px 15px !important; }
    
    #sidebarOverlay {
        background-color: rgba(0, 0, 0, 0.8) !important;
        z-index: 60 !important; position: fixed !important;
        top: 0; left: 0; right: 0; bottom: 0; backdrop-filter: blur(2px) !important;
    }
    .hidden { display: none !important; }
    .-translate-x-full { transform: translateX(-100%) !important; }

    /* Hide Google Translate Toolbar */
    .goog-te-banner-frame { display: none !important; }
    body { top: 0px !important; }
    #google_translate_element { display: none !important; }
</style>

<div id="google_translate_element"></div>

<div id="sidebarOverlay" onclick="toggleSidebar()" class="hidden"></div>

<div id="sidebar" class="-translate-x-full">
    
    <?php if($is_guest): ?>
        <div class="guest-box">
            <div style="margin-bottom: 15px; color:white; font-size:18px; font-weight:bold;">Welcome Guest</div>
            <a href="../player/login.php" class="btn-gold">
                <i class="fas fa-sign-in-alt" style="margin-right:8px;"></i> Login / Sign Up
            </a>
            <button onclick="toggleSidebar()" style="color: #a7f3d0; background: none; border: none; cursor: pointer; margin-top:10px;">
                Close <i class="fas fa-times"></i>
            </button>
        </div>
    <?php else: ?>
        <div class="profile-section">
            <div class="profile-img-box">
                 <img src="../assets/images/avatar.png" onerror="this.src='https://ui-avatars.com/api/?name=<?php echo urlencode($user_name); ?>&background=random&color=fff'" class="profile-img">
            </div>
            <div class="profile-info">
                <h3><?php echo htmlspecialchars($user_name); ?></h3>
                <p>৳ <?php echo number_format($user_balance, 2); ?></p>
            </div>
            <button onclick="toggleSidebar()" style="margin-left: auto !important; color: #a7f3d0 !important; background: none !important; border: none !important; cursor: pointer !important;">
                <i class="fas fa-times" style="font-size: 24px !important;"></i>
            </button>
        </div>
    <?php endif; ?>

    <div class="sidebar-content">
        
        <a href="<?php echo getLink('deposit.php'); ?>" class="btn-gold action-btn">
            <div class="btn-icon-box"><i class="fas fa-arrow-circle-up" style="color: #123628 !important;"></i></div>
            <span>Deposit</span>
        </a>

        <a href="<?php echo getLink('withdraw.php'); ?>" class="btn-gold action-btn">
            <div class="btn-icon-box"><i class="fas fa-arrow-circle-down" style="color: #123628 !important;"></i></div>
            <span>Withdraw</span>
        </a>

        <div style="height: 10px !important;"></div>

        <a href="<?php echo getLink('promotions.php'); ?>" class="btn-purple">
            <div style="display:flex !important; align-items:center !important;">
                <div class="btn-icon-box"><i class="fas fa-gift" style="color: #ffdf1b !important;"></i></div>
                <span>Promotions</span>
            </div>
        </a>

        <a href="<?php echo getLink('mission.php'); ?>" class="btn-purple">
            <div style="display:flex !important; align-items:center !important;">
                <div class="btn-icon-box"><i class="fas fa-tasks" style="color: #ffdf1b !important;"></i></div>
                <span>Mission</span>
            </div>
        </a>

        <a href="<?php echo getLink('spin.php'); ?>" class="btn-purple">
            <div style="display:flex !important; align-items:center !important;">
                <div class="btn-icon-box"><i class="fas fa-spinner" style="color: #ffdf1b !important;"></i></div>
                <span>Spin</span>
            </div>
        </a>

        <a href="<?php echo getLink('rebate.php'); ?>" class="btn-purple">
            <div style="display:flex !important; align-items:center !important;">
                <div class="btn-icon-box"><i class="fas fa-percentage" style="color: #ffdf1b !important;"></i></div>
                <span>Rebate</span>
            </div>
        </a>

        <a href="<?php echo getLink('account.php'); ?>" class="btn-purple">
            <div style="display:flex !important; align-items:center !important;">
                <div class="btn-icon-box"><i class="fas fa-user-circle" style="color: #ffdf1b !important;"></i></div>
                <span>Account</span>
            </div>
            <i class="fas fa-chevron-right" style="font-size: 12px !important; opacity: 0.5 !important;"></i>
        </a>

        <a href="<?php echo getLink('games.php'); ?>" class="btn-purple">
            <div style="display:flex !important; align-items:center !important;">
                <div class="btn-icon-box"><i class="fas fa-gamepad" style="color: #ffdf1b !important;"></i></div>
                <span>Game Center</span>
            </div>
            <i class="fas fa-chevron-right" style="font-size: 12px !important; opacity: 0.5 !important;"></i>
        </a>

        <a href="support_chat.php" class="btn-purple">
            <div style="display:flex !important; align-items:center !important;">
                <div class="btn-icon-box"><i class="fas fa-headset" style="color: #ffdf1b !important;"></i></div>
                <span>Customer Service</span>
            </div>
        </a>

        <div style="margin-top: 20px !important; border-top: 1px solid #3b4c46 !important; padding-top: 15px !important;">
            <a href="help.php" class="btn-outline">
                <i class="fas fa-question-circle" style="margin-right: 8px !important;"></i> Help Center
            </a>

            <div class="lang-container">
                <button class="lang-btn active" id="btn-en" onclick="changeLanguage('en')">English</button>
                <button class="lang-btn" id="btn-bn" onclick="changeLanguage('bn')">বাংলা</button>
            </div>

            <?php if(!$is_guest): ?>
            <a href="logout.php" class="btn-outline" style="border-color: #ef4444 !important; color: #ef4444 !important;">
                <i class="fas fa-sign-out-alt" style="margin-right: 8px !important;"></i> Log Out
            </a>
            <?php endif; ?>
        </div>

    </div>
</div>

<script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'en,bn'}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

<script>
    // Handle Language Toggle
    function changeLanguage(lang) {
        // Toggle Buttons
        const btnEn = document.getElementById('btn-en');
        const btnBn = document.getElementById('btn-bn');
        
        if (lang === 'bn') {
            // Trigger Google Translate to Bangla
            var select = document.querySelector("select.goog-te-combo");
            if (select) {
                select.value = "bn";
                select.dispatchEvent(new Event('change'));
            }
            btnEn.classList.remove('active');
            btnBn.classList.add('active');
        } else {
            // Revert to English
            var select = document.querySelector("select.goog-te-combo");
            if (select) {
                select.value = "en";
                select.dispatchEvent(new Event('change'));
            }
            
            btnEn.classList.add('active');
            btnBn.classList.remove('active');
        }
    }

    // Check cookie on load to set active button state
    window.addEventListener('load', function() {
        const cookie = document.cookie;
        if(cookie.includes('googtrans=/en/bn')) {
            document.getElementById('btn-en').classList.remove('active');
            document.getElementById('btn-bn').classList.add('active');
        }
    });
</script>