<?php
function renderTerminal($activeTab = 'spot') {
    global $lang, $user;
    $currentSymbol = $_GET['symbol'] ?? 'BTC';
    $currentSymbol = strtoupper($currentSymbol);
    
    $usdt_balance = 0;
    if ($user) {
        $stmt = db()->prepare("SELECT available FROM user_balances WHERE user_id = ? AND symbol = 'USDT'");
        $stmt->execute([$user['id']]);
        $bal = $stmt->fetch();
        $usdt_balance = $bal['available'] ?? 0;
    }
    
    $full_coins = [
        ['symbol' => 'BTC', 'name' => __('bitcoin'), 'price' => '64,234.50', 'change' => '+2.45%'],
        ['symbol' => 'ETH', 'name' => __('ethereum'), 'price' => '3,456.20', 'change' => '+1.12%'],
        ['symbol' => 'USDT', 'name' => __('tether'), 'price' => '1.00', 'change' => '+0.01%'],
        ['symbol' => 'BNB', 'name' => __('binance_coin'), 'price' => '598.40', 'change' => '-0.56%'],
        ['symbol' => 'SOL', 'name' => __('solana'), 'price' => '145.20', 'change' => '+5.67%'],
        ['symbol' => 'XRP', 'name' => __('ripple'), 'price' => '0.62', 'change' => '-1.23%'],
        ['symbol' => 'ADA', 'name' => __('cardano'), 'price' => '0.58', 'change' => '+0.89%'],
        ['symbol' => 'DOGE', 'name' => __('dogecoin'), 'price' => '0.16', 'change' => '+12.4%'],
        ['symbol' => 'DOT', 'name' => __('polkadot'), 'price' => '8.45', 'change' => '-2.11%'],
        ['symbol' => 'MATIC', 'name' => __('polygon'), 'price' => '0.92', 'change' => '+1.56%'],
        ['symbol' => 'LINK', 'name' => __('chainlink'), 'price' => '18.40', 'change' => '+3.22%'],
        ['symbol' => 'AVAX', 'name' => __('avalanche'), 'price' => '45.20', 'change' => '+4.12%'],
        ['symbol' => 'SHIB', 'name' => __('shiba_inu'), 'price' => '0.000027', 'change' => '-3.45%'],
        ['symbol' => 'TRX', 'name' => __('tron'), 'price' => '0.12', 'change' => '+0.56%'],
        ['symbol' => 'BCH', 'name' => __('bitcoin_cash'), 'price' => '456.20', 'change' => '+2.12%'],
        ['symbol' => 'LTC', 'name' => __('litecoin'), 'price' => '84.50', 'change' => '+1.45%'],
        ['symbol' => 'UNI', 'name' => __('uniswap'), 'price' => '7.20', 'change' => '-2.12%'],
    ];
    ?>
    <link rel="stylesheet" href="/assets/css/terminal.css?v=<?= time() ?>">
    <div class="terminal-sidebar-overlay" id="sidebar-overlay" onclick="toggleMobileSidebar()"></div>
    <div class="terminal-container">
        <!-- Mobile Top Switcher - Redesigned as a module -->
        <div class="mobile-type-switcher d-md-none">
            <div class="switcher-module">
                <a href="/binary.php?symbol=<?= $currentSymbol ?>" class="switcher-item <?= $activeTab === 'binary' ? 'active' : '' ?>">
                    <span><?= __('sec_contract') ?></span>
                </a>
                <a href="/trade.php?symbol=<?= $currentSymbol ?>" class="switcher-item <?= $activeTab === 'spot' ? 'active' : '' ?>">
                    <span><?= __('spot') ?></span>
                </a>
                <a href="/contract.php?symbol=<?= $currentSymbol ?>" class="switcher-item <?= $activeTab === 'contract' ? 'active' : '' ?>">
                    <span><?= __('contract') ?></span>
                </a>
            </div>
        </div>
        <div class="terminal-main">
            <!-- Left Sidebar -->
            <div class="terminal-sidebar" id="terminal-sidebar">
                <!-- Top Nav Tabs - Redesigned for beauty and clarity -->
                <div class="terminal-top-nav sidebar-tabs">
                    <a href="/trade.php?symbol=<?= $currentSymbol ?>" class="terminal-tab <?= $activeTab === 'spot' ? 'active' : '' ?>">
                        <i class="bi bi-currency-exchange"></i>
                        <span><?= __('trade_spot') ?></span>
                    </a>
                    <a href="/contract.php?symbol=<?= $currentSymbol ?>" class="terminal-tab <?= $activeTab === 'contract' ? 'active' : '' ?>">
                        <i class="bi bi-layers-fill"></i>
                        <span><?= __('trade_contract') ?></span>
                    </a>
                    <a href="/binary.php?symbol=<?= $currentSymbol ?>" class="terminal-tab <?= $activeTab === 'binary' ? 'active' : '' ?>">
                        <i class="bi bi-lightning-charge-fill"></i>
                        <span><?= __('trade_binary') ?></span>
                    </a>
                </div>
                
                <div class="sidebar-search">
                    <input type="text" id="coin-search" placeholder="<?= __('search') ?>">
                </div>
                
                <div class="coin-list-container">
                    <div class="coin-list" id="coin-list">
                        <?php foreach ($full_coins as $coin): ?>
                            <div class="coin-row" data-symbol="<?= $coin['symbol'] ?>" onclick="location.href='?symbol=<?= $coin['symbol'] ?>'">
                                <div class="d-flex align-items-center">
                                    <div class="bg-light p-1 rounded-circle me-2" style="width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;">
                                        <img src="<?php echo getCoinIcon($coin['symbol']); ?>" alt="<?= $coin['symbol'] ?>" onerror="handleIconError(this, '<?= $coin['symbol'] ?>')" style="width: 18px; height: 18px; margin: 0;">
                                    </div>
                                    <div>
                                        <div class="symbol fw-bold text-white" style="font-size: 13px;"><?= $lang === 'zh' ? __($coin['symbol']) : $coin['symbol'] ?></div>
                                        <div class="change <?= strpos($coin['change'], '+') !== false ? 'text-success' : 'text-danger' ?>" style="font-size: 10px;"><?= $coin['change'] ?></div>
                                    </div>
                                </div>
                                <div class="price fw-bold text-white" style="font-size: 13px;"><?= $coin['price'] ?></div>
                            </div>
                        <?php endforeach; ?>
                    </div>
                </div>
            </div>

            <!-- Middle Content: Chart & Trading -->
            <div class="terminal-content">
                <div class="terminal-header d-flex justify-content-between align-items-center px-3 py-2 border-bottom border-secondary">
                    <div class="d-flex align-items-center gap-3">
                        <div class="d-flex align-items-center" onclick="toggleMobileSidebar()" style="cursor: pointer;">
                            <i class="bi bi-list d-md-none fs-3 text-white me-2"></i>
                            <div class="fs-4 fw-bold text-white"><?= $lang === 'zh' ? __($currentSymbol) : $currentSymbol ?>/<?= __('USDT') ?></div>
                        </div>
                        <div class="price-jump fs-4 fw-bold text-success">--</div>
                    </div>
                    <div class="d-flex gap-4 header-stats d-none d-md-flex">

                        <div class="header-stat">
                            <label class="d-block small text-white"><?= __('change_24h') ?></label>
                            <span class="text-success fw-bold">--</span>
                        </div>
                        <div class="header-stat">
                            <label class="d-block small text-white"><?= __('high') ?></label>
                            <span class="text-white fw-bold">--</span>
                        </div>
                        <div class="header-stat">
                            <label class="d-block small text-white"><?= __('low') ?></label>
                            <span class="text-white fw-bold">--</span>
                        </div>
                        <div class="header-stat">
                            <label class="d-block small text-white"><?= __('vol_24h') ?></label>
                            <span class="text-white fw-bold">--</span>
                        </div>
                    </div>
                </div>

                <!-- Custom Mobile Chart Toolbar -->
                <div class="mobile-chart-toolbar d-md-none">
                    <div class="toolbar-scroll">
                        <button class="toolbar-item active" onclick="changeInterval('1')"><?= __('time_fs') ?></button>
                        <button class="toolbar-item" onclick="changeInterval('1')"><?= __('time_1m') ?></button>
                        <button class="toolbar-item" onclick="changeInterval('5')"><?= __('time_5m') ?></button>
                        <button class="toolbar-item" onclick="changeInterval('15')"><?= __('time_15m') ?></button>
                        <button class="toolbar-item" onclick="changeInterval('30')"><?= __('time_30m') ?></button>
                        <button class="toolbar-item" onclick="changeInterval('60')"><?= __('time_1h') ?></button>
                        <button class="toolbar-item" onclick="changeInterval('240')"><?= __('time_4h') ?></button>
                        <button class="toolbar-item" onclick="changeInterval('D')"><?= __('time_1d') ?></button>
                        <button class="toolbar-item" onclick="changeInterval('W')"><?= __('time_1w') ?></button>
                        <div class="toolbar-divider"></div>
                        <button class="toolbar-item"><?= __('indicators') ?></button>
                    </div>
                    <div class="toolbar-tabs">
                        <button class="tab-item active" id="btn-show-chart" onclick="switchChartTab('chart')"><?= __('chart') ?></button>
                        <button class="tab-item" id="btn-show-depth" onclick="switchChartTab('depth')"><?= __('depth') ?></button>
                    </div>
                </div>

                <div class="terminal-chart" style="height: 500px; background: #0b0e11;">
                    <!-- TradingView Widget BEGIN -->
                    <div class="tradingview-widget-container" id="tv-chart-container" style="height:100%;width:100%">
                      <div id="tradingview_chart" style="height:100%;width:100%"></div>
                      <script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
                      <script type="text/javascript">
                      let tvWidget;
                      function initTV() {
                          tvWidget = new TradingView.widget(
                          {
                            "autosize": true,
                            "symbol": "<?= $currentSymbol === 'USDT' ? 'BINANCE:USDTDAI' : ($currentSymbol . 'USDT') ?>",
                            "interval": "1",
                            "timezone": "Etc/UTC",
                            "theme": "dark",
                            "style": "1",
                            "locale": "<?= $lang === 'zh' ? 'zh_CN' : 'en' ?>",
                            "toolbar_bg": "#0b0e11",
                            "enable_publishing": false,
                            "hide_top_toolbar": window.innerWidth <= 768,
                            "hide_legend": window.innerWidth <= 768,
                            "save_image": false,
                            "container_id": "tradingview_chart"
                          }
                          );
                      }
                      initTV();

                      function changeInterval(i) {
                          if (tvWidget && tvWidget.chart) {
                              tvWidget.chart().setResolution(i);
                          }
                          document.querySelectorAll('.toolbar-item').forEach(el => el.classList.remove('active'));
                          event.target.classList.add('active');
                      }

                      function switchChartTab(tab) {
                          const chart = document.getElementById('tv-chart-container');
                          const depth = document.getElementById('depth-container');
                          document.querySelectorAll('.tab-item').forEach(el => el.classList.remove('active'));
                          
                          if (tab === 'chart') {
                              chart.style.display = 'block';
                              if (depth) depth.style.display = 'none';
                              document.getElementById('btn-show-chart').classList.add('active');
                          } else {
                              chart.style.display = 'none';
                              if (depth) depth.style.display = 'block';
                              document.getElementById('btn-show-depth').classList.add('active');
                          }
                      }
                      </script>
                    </div>
                    <!-- Depth Container for Mobile -->
                    <div id="depth-container" class="d-md-none" style="display: none; height: 100%; background: #0b0e11; padding: 20px;">
                        <div class="d-flex justify-content-between mb-2 small text-muted">
                            <span><?= __('price') ?>(<?= __('USDT') ?>)</span>
                            <span><?= __('quantity') ?>(<?= __($currentSymbol) ?>)</span>
                        </div>
                        <div id="mobile-ob-asks" class="mb-3"></div>
                        <div class="text-center py-2 border-top border-bottom border-secondary my-2">
                            <span class="fs-4 fw-bold text-success price-jump">--</span>
                        </div>
                        <div id="mobile-ob-bids"></div>
                    </div>
                </div>

                <div class="trading-panels">
                    <?php if ($activeTab === 'binary'): ?>
                    <div class="binary-order-panel w-100">
                        <div class="d-flex justify-content-between align-items-end mb-2">
                            <div class="section-title text-white"><?= __('cycle_settlement') ?></div>
                            <div class="small text-white"><?= __('available_balance') ?>: <span class="text-white fw-bold balance-highlight" id="user-usdt-balance"><?= number_format($usdt_balance, 2) ?></span> <?= __('USDT') ?></div>
                        </div>
                        <div class="cycle-grid">
                            <button class="cycle-btn active" onclick="selectCycle(this, 60, 8, 100, 4999)">
                                <span class="cycle-time">60<?= __('unit_seconds') ?></span>
                                <span class="cycle-profit">8%</span>
                            </button>
                            <button class="cycle-btn" onclick="selectCycle(this, 90, 12, 5000, 29999)">
                                <span class="cycle-time">90<?= __('unit_seconds') ?></span>
                                <span class="cycle-profit">12%</span>
                            </button>
                            <button class="cycle-btn" onclick="selectCycle(this, 120, 15, 30000, 99999)">
                                <span class="cycle-time">120<?= __('unit_seconds') ?></span>
                                <span class="cycle-profit">15%</span>
                            </button>
                            <button class="cycle-btn" onclick="selectCycle(this, 180, 20, 100000, 299999)">
                                <span class="cycle-time">180<?= __('unit_seconds') ?></span>
                                <span class="cycle-profit">20%</span>
                            </button>
                            <button class="cycle-btn" onclick="selectCycle(this, 300, 30, 300000, 999999999)">
                                <span class="cycle-time">300<?= __('unit_seconds') ?></span>
                                <span class="cycle-profit">30%</span>
                            </button>
                        </div>

                        <div class="section-title text-white mb-2"><?= __('purchase_amount') ?> (<?= __('USDT') ?>)</div>
                        <div class="amount-input-wrapper mb-3">
                            <input type="number" id="binary-amount" class="form-control" placeholder="100-4999" oninput="calculateProfit()">
                        </div>

                        <div class="quick-amounts d-flex gap-2 mb-3">
                            <?php foreach([100, 500, 1000, 5000, 10000, 50000] as $amt): ?>
                                <button class="btn btn-dark btn-sm flex-fill py-2" onclick="setBinaryAmount(<?= $amt ?>)"><?= $amt ?></button>
                            <?php endforeach; ?>
                        </div>

                        <div class="d-flex justify-content-between mb-3 small align-items-center bg-black bg-opacity-25 p-2 rounded">
                            <div class="text-white"><?= __('expected_profit') ?></div>
                            <div class="text-success fw-bold fs-6 profit-highlight" id="profit-display">0.00 <?= __('USDT') ?></div>
                        </div>


                        <div class="row g-2">
                            <div class="col-6">
                                <button onclick="placeOrder('up')" class="btn btn-success btn-buy-sell w-100 fw-bold d-flex flex-column align-items-center justify-content-center">
                                    <div class="fs-5"><i class="bi bi-graph-up-arrow me-1"></i><?= __('buy_up') ?></div>
                                    <div class="small opacity-75 fw-normal profit-rate-hint"><?= __('profit') ?> 8%</div>
                                </button>
                            </div>
                            <div class="col-6">
                                <button onclick="placeOrder('down')" class="btn btn-danger btn-buy-sell w-100 fw-bold d-flex flex-column align-items-center justify-content-center">
                                    <div class="fs-5"><i class="bi bi-graph-down-arrow me-1"></i><?= __('buy_down') ?></div>
                                    <div class="small opacity-75 fw-normal profit-rate-hint"><?= __('profit') ?> 8%</div>
                                </button>
                            </div>
                        </div>
                    </div>

                    <script>
                    let currentProfitRate = 8;
                    let currentSeconds = 60;
                    let minAmount = 100;
                    let maxAmount = 4999;
                    
                    function selectCycle(btn, seconds, profit, min, max) {
                        document.querySelectorAll('.cycle-btn').forEach(el => el.classList.remove('active'));
                        btn.classList.add('active');
                        currentProfitRate = profit;
                        currentSeconds = seconds;
                        minAmount = min;
                        maxAmount = max;
                        
                        const hint = max >= 999999999 ? min + '+' : min + '-' + max;
                        document.getElementById('binary-amount').placeholder = hint;
                        
                        document.querySelectorAll('.profit-rate-hint').forEach(el => {
                            el.innerText = '<?= __("profit") ?> ' + profit + '%';
                        });
                        calculateProfit();
                    }

                    function setBinaryAmount(amt) {
                        document.getElementById('binary-amount').value = amt;
                        calculateProfit();
                    }

                    function calculateProfit() {
                        const amount = parseFloat(document.getElementById('binary-amount').value) || 0;
                        const profit = (amount * currentProfitRate / 100).toFixed(2);
                        document.getElementById('profit-display').innerText = profit + ' <?= __('USDT') ?>';
                    }

                    function placeOrder(direction) {
                        const amount = parseFloat(document.getElementById('binary-amount').value);
                        const balance = parseFloat(document.getElementById('user-usdt-balance').innerText.replace(',', ''));
                        
                        if (!amount || amount <= 0) {
                            showErrorModal('<?= __("enter_amount") ?>');
                            return;
                        }

                        if (amount < minAmount || amount > maxAmount) {
                            let msg = '<?= __("amount_limit_error") ?>';
                            msg = msg.replace('%min%', minAmount).replace('%max%', maxAmount);
                            showErrorModal(msg);
                            return;
                        }
                        
                        if (amount > balance) {
                            showErrorModal('<?= __("insufficient_balance") ?>');
                            return;
                        }

                        const openPrice = parseFloat(document.querySelector('.price-jump').innerText.replace(/,/g, ''));
                        
                        const formData = new FormData();
                        formData.append('action', 'place_order');
                        formData.append('symbol', '<?= $currentSymbol ?>');
                        formData.append('amount', amount);
                        formData.append('duration', currentSeconds);
                        formData.append('direction', direction);
                        formData.append('entry_price', openPrice);
                        formData.append('profit_rate', currentProfitRate);

                        fetch('api/binary.php', {
                            method: 'POST',
                            body: formData
                        })
                        .then(r => r.json())
                        .then(data => {
                            if (data.success) {
                                const order = {
                                    id: data.order_id,
                                    time: new Date().toISOString().replace('T', ' ').substr(0, 19),
                                    pair: '<?= $currentSymbol ?>/<?= __('USDT') ?>',
                                    type: '<?= __("trade_binary") ?>',
                                    side: direction === 'up' ? '<?= __("buy_up") ?>' : '<?= __("buy_down") ?>',
                                    side_type: direction,
                                    price: openPrice,
                                    amount: amount.toFixed(2),
                                    total: '---',
                                    status: '<?= __("executing") ?>',
                                    secondsLeft: currentSeconds,
                                    totalSeconds: currentSeconds,
                                    profitRate: currentProfitRate
                                };

                                historyData.open.unshift(order);
                                showHistoryTab('open');
                                showOrderPopup(order);

                                // Update balance display
                                document.getElementById('user-usdt-balance').innerText = (balance - amount).toLocaleString('en-US', {minimumFractionDigits: 2});

                                // Start timer
                                const timer = setInterval(() => {
                                    order.secondsLeft--;
                                    updateOrderPopup(order);
                                    if (showHistoryTab.currentTab === 'open') showHistoryTab('open');
                                    
                                    if (order.secondsLeft <= 0) {
                                        clearInterval(timer);
                                        settleOrderBackend(order);
                                    }
                                }, 1000);
                            } else {
                                showErrorModal(data.error || '<?= __("operation") ?> <?= __("failed") ?>');
                            }
                        });
                    }

                    function settleOrderBackend(order) {
                        const closePrice = parseFloat(document.querySelector('.price-jump').innerText.replace(/,/g, ''));
                        
                        // Immediately update UI to show it's settling
                        order.status = '<?= __("settling") ?>';
                        if (showHistoryTab.currentTab === 'open') showHistoryTab('open');

                        const formData = new FormData();
                        formData.append('action', 'settle_order');
                        formData.append('order_id', order.id);
                        formData.append('close_price', closePrice);

                        fetch('api/binary.php', {
                            method: 'POST',
                            body: formData
                        })
                        .then(r => r.json())
                        .then(data => {
                            if (data.success) {
                                // Update order object for immediate UI refresh
                                order.status = data.result === 'won' ? '<?= __("won") ?>' : '<?= __("loss") ?>';
                                const amount = parseFloat(order.amount);
                                const profit = amount * order.profitRate / 100;
                                order.pnl = data.pnl;
                                // If won, total is principal + profit. If lost, total is 0.
                                order.total = data.result === 'won' ? (amount + profit).toFixed(2) : '0.00';
                                order.close_price = closePrice;
                                
                                // Move from open to settlement
                                historyData.open = historyData.open.filter(o => o.id !== order.id);
                                historyData.settlement.unshift(order);
                                
                                // Automatically switch to settlement tab to show the result immediately in the list
                                showHistoryTab('settlement');
                                
                                if (data.result === 'won') {
                                    const balance = parseFloat(document.getElementById('user-usdt-balance').innerText.replace(',', ''));
                                    document.getElementById('user-usdt-balance').innerText = (balance + amount + profit).toLocaleString('en-US', {minimumFractionDigits: 2});
                                }
                                
                                // Display the result popup with exact wording
                                showOrderResult(data.result, data.pnl, closePrice, order.amount);
                            }
                        }).catch(err => {
                            console.error("Settlement failed", err);
                            order.status = '<?= __("failed") ?>';
                            showHistoryTab('open');
                        });
                    }

                    function showOrderResult(result, pnl, settlePrice, orderAmount) {
                        const popupOverlay = document.getElementById('order-popup-overlay');
                        const resultContainer = document.getElementById('popup-result-content');
                        const countdownContainer = document.getElementById('popup-countdown-content');
                        
                        popupOverlay.style.display = 'flex';
                        countdownContainer.style.display = 'none';
                        resultContainer.style.display = 'block';
                        
                        const pnlAmount = parseFloat(Math.abs(pnl)).toFixed(2);
                        const isWon = result === 'won';
                        
                        let message = isWon ? 
                            ('<?= __("congrats_won") ?>' + ' ' + pnlAmount + ' <?= __('USDT') ?>') : 
                            ('<?= __("sorry_lost") ?>' + ' ' + pnlAmount + ' <?= __('USDT') ?>');
                        
                        const resultHtml = `
                            <div class="order-result-display animate__animated animate__zoomIn">
                                <div class="result-icon-wrapper mb-4">
                                    <div class="result-circle ${isWon ? 'won' : 'lost'}">
                                        <i class="bi bi-${isWon ? 'check-lg' : 'x-lg'}"></i>
                                    </div>
                                    <div class="result-glow ${isWon ? 'won' : 'lost'}"></div>
                                </div>
                                
                                <h3 class="result-title ${isWon ? 'text-success' : 'text-danger'} mb-2 fw-bold">
                                    ${isWon ? '<?= __("trade_won") ?>' : '<?= __("trade_lost") ?>'}
                                </h3>
                                
                                <p class="result-message mb-4 fw-bold fs-5 text-white">
                                    ${message}
                                </p>
                                
                                <div class="result-card mb-4 bg-dark bg-opacity-50 p-3 rounded-3 border border-secondary text-start">
                                    <div class="result-row d-flex justify-content-between mb-2">
                                        <span class="text-muted"><?= __("settlement_price") ?></span>
                                        <span class="text-white fw-bold">${settlePrice.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2})}</span>
                                    </div>
                                    <div class="result-row d-flex justify-content-between mb-2">
                                        <span class="text-muted"><?= __("purchase_amount") ?></span>
                                        <span class="text-white fw-bold">${parseFloat(orderAmount).toFixed(2)} <?= __('USDT') ?></span>
                                    </div>
                                    <div class="result-row total d-flex justify-content-between mt-2 pt-2 border-top border-secondary">
                                        <span class="text-muted"><?= __("total") ?></span>
                                        <span class="fs-5 fw-bold ${isWon ? 'text-success' : 'text-danger'}">${isWon ? (parseFloat(pnl) + parseFloat(orderAmount)).toFixed(2) : '0.00'} <?= __('USDT') ?></span>
                                    </div>
                                </div>

                                    <div class="result-row d-flex justify-content-between mb-2">
                                        <span class="text-muted"><?= __("purchase_amount") ?></span>
                                        <span class="text-white fw-bold">${parseFloat(orderAmount).toFixed(2)} <?= __('USDT') ?></span>
                                    </div>
                                    <div class="result-row total d-flex justify-content-between mt-2 pt-2 border-top border-secondary">
                                        <span class="text-muted"><?= __("total") ?></span>
                                        <span class="fs-5 fw-bold ${isWon ? 'text-success' : 'text-danger'}">${isWon ? (parseFloat(pnl) + parseFloat(orderAmount)).toFixed(2) : '0.00'} <?= __('USDT') ?></span>
                                    </div>
                                </div>

                                <button class="btn btn-primary w-100 py-2 fw-bold rounded-pill" onclick="hideOrderPopup()"><?= __("confirm") ?></button>
                            </div>
                        `;
                        
                        resultContainer.innerHTML = resultHtml;
                    }


                    function showErrorModal(msg) {

                        const modal = document.getElementById('error-modal-overlay');
                        document.getElementById('error-modal-msg').innerText = msg;
                        modal.style.display = 'flex';
                        setTimeout(() => modal.classList.add('show'), 10);
                    }

                    function closeErrorModal() {
                        const modal = document.getElementById('error-modal-overlay');
                        modal.classList.remove('show');
                        setTimeout(() => modal.style.display = 'none', 300);
                    }

                    function showMsg(msg, type = 'info') {
                        const alertBox = document.createElement('div');
                        alertBox.className = `custom-alert ${type}`;
                        alertBox.innerHTML = `
                            <div class="alert-content">
                                <i class="bi bi-${type === 'error' ? 'exclamation-circle-fill' : (type === 'warning' ? 'exclamation-triangle-fill' : 'info-circle-fill')}"></i>
                                <span>${msg}</span>
                            </div>
                        `;
                        document.body.appendChild(alertBox);
                        setTimeout(() => alertBox.classList.add('show'), 10);
                        setTimeout(() => {
                            alertBox.classList.remove('show');
                            setTimeout(() => alertBox.remove(), 300);
                        }, 3000);
                    }

                    function showOrderPopup(order) {
                        const popupOverlay = document.getElementById('order-popup-overlay');
                        
                        // Reset popup content to countdown view
                        document.getElementById('popup-countdown-content').style.display = 'block';
                        document.getElementById('popup-result-content').style.display = 'none';

                        const sideColor = order.side.includes('Up') || order.side.includes('<?= __("buy_up") ?>') ? '#26a69a' : '#ef5350';
                        
                        document.getElementById('popup-price').innerText = order.price;
                        document.getElementById('popup-cycle').innerText = order.totalSeconds + '<?= __('unit_seconds') ?>';
                        document.getElementById('popup-direction').innerText = order.side;
                        document.getElementById('popup-direction').style.color = sideColor;
                        document.getElementById('popup-quantity').innerText = order.amount + ' <?= __('USDT') ?>';
                        document.getElementById('popup-open-price').innerText = order.price;
                        
                        popupOverlay.style.display = 'flex';
                        updateOrderPopup(order);
                    }

                    function updateOrderPopup(order) {
                        const timeText = document.getElementById('popup-time-text');
                        const progress = document.getElementById('popup-progress');
                        const currentPrice = document.getElementById('popup-price');
                        
                        timeText.innerText = order.secondsLeft;
                        
                        // Update current price in popup
                        currentPrice.innerText = document.querySelector('.price-jump').innerText;
                        
                        const radius = 90; // Updated radius to match 200x200 SVG
                        const circumference = 2 * Math.PI * radius;
                        const offset = circumference - (order.secondsLeft / order.totalSeconds) * circumference;
                        
                        progress.style.strokeDasharray = `${circumference} ${circumference}`;
                        progress.style.strokeDashoffset = offset;
                    }

                    function hideOrderPopup() {
                        document.getElementById('order-popup-overlay').style.display = 'none';
                    }
                    </script>

                    <?php else: ?>
                    <div class="order-form-container w-100">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <div class="order-form-tabs m-0 d-flex gap-2">
                                <button class="active btn btn-sm btn-outline-primary py-1 px-3 fw-bold" style="font-size: 12px; border-radius: 6px;"><?= __('limit') ?></button>
                                <button class="btn btn-sm btn-outline-secondary py-1 px-3 fw-bold" style="font-size: 12px; border-radius: 6px;"><?= __('market') ?></button>
                            </div>
                            <div class="small text-muted fw-medium"><?= __('assets') ?>: <span class="text-white fw-bold"><span id="spot-usdt-balance"><?= number_format($usdt_balance, 2) ?></span> <?= __('USDT') ?></span></div>
                        </div>

                        <?php if ($activeTab === 'contract'): ?>
                        <div class="mb-3">
                            <label class="small text-muted mb-1 d-block fw-bold"><?= __('leverage') ?></label>
                            <select id="contract-leverage" class="form-select form-select-sm bg-dark border-secondary text-white fw-bold">
                                <?php foreach([10, 20, 50, 100, 150, 200] as $lev): ?>
                                    <option value="<?= $lev ?>"><?= $lev ?>x</option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                        <?php endif; ?>

                        <div class="row g-3">
                            <div class="col-6">
                                <div class="input-group-custom mb-3">
                                    <label class="small text-muted mb-1 d-block fw-bold"><?= ($activeTab === 'contract' ? (__('buy_long')) : (__('buy_price'))) ?></label>
                                    <div class="input-wrapper bg-black p-2 rounded border border-secondary d-flex justify-content-between align-items-center" style="background: #0b0e11 !important; height: 45px;">
                                        <input type="number" id="spot-buy-price" value="64234.50" class="bg-transparent border-0 text-white w-75 fw-bold" style="outline: none; font-size: 14px;">
                                        <span class="suffix text-muted small fw-bold"><?= $lang === 'zh' ? __('USDT') : 'USDT' ?></span>
                                    </div>
                                </div>
                                <div class="input-group-custom mb-3">
                                    <label class="small text-muted mb-1 d-block fw-bold"><?= __('amount') ?></label>
                                    <div class="input-wrapper bg-black p-2 rounded border border-secondary d-flex justify-content-between align-items-center" style="background: #0b0e11 !important; height: 45px;">
                                        <input type="number" id="spot-buy-amount" placeholder="0.00" class="bg-transparent border-0 text-white w-75 fw-bold" style="outline: none; font-size: 14px;">
                                        <span class="suffix text-muted small fw-bold"><?= $lang === 'zh' ? __($currentSymbol) : $currentSymbol ?></span>
                                    </div>
                                </div>
                                <div class="d-flex gap-1 mb-3">
                                    <?php foreach(['25%','50%','75%','100%'] as $p): ?>
                                        <button class="btn btn-dark btn-sm py-1 flex-fill fw-bold" style="font-size: 10px; background: #2b3139;" onclick="setSpotPercent('buy', <?= intval($p) ?>)"><?= $p ?></button>
                                    <?php endforeach; ?>
                                </div>
                                <button onclick="<?= ($activeTab === 'contract' ? "placeContractOrder('long')" : "placeSpotOrder('buy')") ?>" class="btn btn-success w-100 py-3 fw-bold rounded-3 shadow-sm border-0" style="background: linear-gradient(135deg, #0ecb81, #26a69a);"><?= ($activeTab === 'contract' ? (__('long')) : (__('buy'))) ?> <?= $currentSymbol ?></button>
                            </div>
                            <div class="col-6">
                                <div class="input-group-custom mb-3">
                                    <label class="small text-muted mb-1 d-block fw-bold"><?= ($activeTab === 'contract' ? (__('sell_short')) : (__('sell_price'))) ?></label>
                                    <div class="input-wrapper bg-black p-2 rounded border border-secondary d-flex justify-content-between align-items-center" style="background: #0b0e11 !important; height: 45px;">
                                        <input type="number" id="spot-sell-price" value="64234.50" class="bg-transparent border-0 text-white w-75 fw-bold" style="outline: none; font-size: 14px;">
                                        <span class="suffix text-muted small fw-bold"><?= $lang === 'zh' ? __('USDT') : 'USDT' ?></span>
                                    </div>
                                </div>
                                <div class="input-group-custom mb-3">
                                    <label class="small text-muted mb-1 d-block fw-bold"><?= __('amount') ?></label>
                                    <div class="input-wrapper bg-black p-2 rounded border border-secondary d-flex justify-content-between align-items-center" style="background: #0b0e11 !important; height: 45px;">
                                        <input type="number" id="spot-sell-amount" placeholder="0.00" class="bg-transparent border-0 text-white w-75 fw-bold" style="outline: none; font-size: 14px;">
                                        <span class="suffix text-muted small fw-bold"><?= $lang === 'zh' ? __($currentSymbol) : $currentSymbol ?></span>
                                    </div>
                                </div>
                                <div class="d-flex gap-1 mb-3">
                                    <?php foreach(['25%','50%','75%','100%'] as $p): ?>
                                        <button class="btn btn-dark btn-sm py-1 flex-fill fw-bold" style="font-size: 10px; background: #2b3139;" onclick="setSpotPercent('sell', <?= intval($p) ?>)"><?= $p ?></button>
                                    <?php endforeach; ?>
                                </div>
                                <button onclick="<?= ($activeTab === 'contract' ? "placeContractOrder('short')" : "placeSpotOrder('sell')") ?>" class="btn btn-danger w-100 py-3 fw-bold rounded-3 shadow-sm border-0" style="background: linear-gradient(135deg, #f6465d, #ef5350);"><?= ($activeTab === 'contract' ? (__('short')) : (__('sell'))) ?> <?= $currentSymbol ?></button>
                            </div>
                        </div>
                    </div>
                    <?php endif; ?>
                </div>
                
                <script>
                function setSpotPercent(side, percent) {
                    const balance = side === 'buy' ? <?= $usdt_balance ?> : 0; // Simplified
                    // In a real app we'd need the coin balance for sell
                    if (side === 'buy') {
                        const price = parseFloat(document.getElementById('spot-buy-price').value);
                        if (price > 0) {
                            document.getElementById('spot-buy-amount').value = (balance * percent / 100 / price).toFixed(6);
                        }
                    }
                }

                function placeSpotOrder(side) {
                    const price = parseFloat(document.getElementById('spot-' + side + '-price').value);
                    const amount = parseFloat(document.getElementById('spot-' + side + '-amount').value);
                    
                    if (!amount || amount <= 0) {
                        showMsg('<?= __("enter_amount") ?>', 'error');
                        return;
                    }

                    const formData = new FormData();
                    formData.append('symbol', '<?= $currentSymbol ?>');
                    formData.append('side', side);
                    formData.append('price', price);
                    formData.append('amount', amount);
                    formData.append('type', 'limit');

                    fetch('api/spot.php', {
                        method: 'POST',
                        body: formData
                    })
                    .then(r => r.json())
                    .then(data => {
                        if (data.success) {
                            showMsg('<?= __("request_sent") ?>', 'success');
                            setTimeout(() => location.reload(), 1000);
                        } else {
                            showMsg(data.error, 'error');
                        }
                    });
                }

                function placeContractOrder(direction) {
                    const price = parseFloat(document.getElementById('spot-' + (direction === 'long' ? 'buy' : 'sell') + '-price').value);
                    const amount = parseFloat(document.getElementById('spot-' + (direction === 'long' ? 'buy' : 'sell') + '-amount').value);
                    const leverage = parseInt(document.getElementById('contract-leverage').value);
                    
                    if (!amount || amount <= 0) {
                        showMsg('<?= __("enter_amount") ?>', 'error');
                        return;
                    }

                    const formData = new FormData();
                    formData.append('action', 'place_order');
                    formData.append('symbol', '<?= $currentSymbol ?>');
                    formData.append('direction', direction);
                    formData.append('leverage', leverage);
                    formData.append('amount', amount);
                    formData.append('entry_price', price);
                    formData.append('type', 'market');

                    fetch('api/contract.php', {
                        method: 'POST',
                        body: formData
                    })
                    .then(r => r.json())
                    .then(data => {
                        if (data.success) {
                            showMsg('<?= __("request_sent") ?>', 'success');
                            setTimeout(() => location.reload(), 1000);
                        } else {
                            showMsg(data.error, 'error');
                        }
                    });
                }
                // Search functionality
                document.getElementById('coin-search').addEventListener('input', function(e) {
                    const term = e.target.value.toUpperCase();
                    document.querySelectorAll('.coin-row').forEach(row => {
                        const symbol = row.getAttribute('data-symbol') || '';
                        row.style.display = symbol.includes(term) ? 'flex' : 'none';
                    });
                });

                let tickerWs, depthWs;
                const currentBase = '<?= $currentSymbol ?>';
                const currentPair = currentBase.toLowerCase() + 'usdt';

                function formatPrice(p) {
                    if (p < 0.0001) return p.toFixed(8);
                    if (p < 1) return p.toFixed(6);
                    if (p < 100) return p.toFixed(4);
                    return p.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2});
                }

                function formatAmount(a) {
                    if (a >= 1000) return a.toLocaleString('en-US', {maximumFractionDigits: 2});
                    if (a >= 1) return a.toFixed(4);
                    return a.toFixed(6);
                }

                function updateOrderBookUI(data) {
                    const asks = data.asks || data.a || []; // Asks (sells)
                    const bids = data.bids || data.b || []; // Bids (buys)
                    
                    const askContainer = document.getElementById('ob-asks');
                    const bidContainer = document.getElementById('ob-bids');
                    
                    if (!askContainer || !bidContainer) return;

                    // Calculate total volume for relative bars (better visualization)
                    const sortedAsks = asks.slice(0, 20).reverse(); 
                    const sortedBids = bids.slice(0, 20); 

                    // Get max volume in the current view to scale the bars correctly
                    const viewAsks = sortedAsks.map(a => parseFloat(a[1]));
                    const viewBids = sortedBids.map(b => parseFloat(b[1]));
                    const maxQty = Math.max(...viewAsks, ...viewBids, 0.01);

                    const askRows = askContainer.querySelectorAll('.ob-row');
                    askRows.forEach((row, i) => {
                        const item = sortedAsks[i];
                        if (item) {
                            const price = parseFloat(item[0]);
                            const amount = parseFloat(item[1]);
                            row.querySelector('.price').innerText = formatPrice(price);
                            row.querySelector('.amount').innerText = formatAmount(amount);
                            row.querySelector('.ob-row-bg').style.width = (amount / maxQty * 100) + '%';
                            row.style.opacity = '1';
                        } else {
                            row.querySelector('.price').innerText = '---';
                            row.querySelector('.amount').innerText = '---';
                            row.querySelector('.ob-row-bg').style.width = '0%';
                        }
                    });

                    const bidRows = bidContainer.querySelectorAll('.ob-row');
                    bidRows.forEach((row, i) => {
                        const item = sortedBids[i];
                        if (item) {
                            const price = parseFloat(item[0]);
                            const amount = parseFloat(item[1]);
                            row.querySelector('.price').innerText = formatPrice(price);
                            row.querySelector('.amount').innerText = formatAmount(amount);
                            row.querySelector('.ob-row-bg').style.width = (amount / maxQty * 100) + '%';
                            row.style.opacity = '1';
                        } else {
                    row.querySelector('.price').innerText = '---';
                    row.querySelector('.amount').innerText = '---';
                    row.querySelector('.ob-row-bg').style.width = '0%';
                }
            });

            // Update mobile order book if it exists
            const mobAsks = document.getElementById('mobile-ob-asks');
            const mobBids = document.getElementById('mobile-ob-bids');
            if (mobAsks && mobBids && window.innerWidth <= 768) {
                mobAsks.innerHTML = sortedAsks.slice(0, 10).map(a => `
                    <div class="d-flex justify-content-between small mb-1">
                        <span class="text-danger">${formatPrice(parseFloat(a[0]))}</span>
                        <span class="text-white">${formatAmount(parseFloat(a[1]))}</span>
                    </div>
                `).join('');
                mobBids.innerHTML = sortedBids.slice(0, 10).map(b => `
                    <div class="d-flex justify-content-between small mb-1">
                        <span class="text-success">${formatPrice(parseFloat(b[0]))}</span>
                        <span class="text-white">${formatAmount(parseFloat(b[1]))}</span>
                    </div>
                `).join('');
            }
        }


                // Add fallback data simulation for Order Book only if WebSocket is not active
                function simulateOrderBook() {
                    if (window.depthActive) return;
                    const midPrice = parseFloat(document.querySelector('.price-jump')?.innerText.replace(/,/g, '')) || 64000;
                    const data = {
                        a: Array.from({length: 20}, (_, i) => [(midPrice + (i + 1) * (midPrice * 0.0001)).toString(), (Math.random() * 2).toString()]),
                        b: Array.from({length: 20}, (_, i) => [(midPrice - (i + 1) * (midPrice * 0.0001)).toString(), (Math.random() * 2).toString()])
                    };
                    updateOrderBookUI(data);
                }
                setInterval(simulateOrderBook, 2000);

                async function populateAllCoins() {
                    try {
                        const response = await fetch('api/prices.php?type=ticker');
                        const data = await response.json();
                        const tickerArray = Array.isArray(data) ? data : (data && typeof data === 'object' && data.symbol ? [data] : []);
                        const list = document.getElementById('coin-list');
                        const existingSymbols = Array.from(document.querySelectorAll('.coin-row')).map(r => r.getAttribute('data-symbol'));
                        
                        tickerArray.forEach(item => {
                            if (item.symbol.endsWith('USDT')) {
                                const symbol = item.symbol.replace('USDT', '');
                                if (!existingSymbols.includes(symbol)) {
                                    const price = parseFloat(item.lastPrice);
                                    const change = parseFloat(item.priceChangePercent);
                                    
                                    const row = document.createElement('div');
                                    row.className = 'coin-row';
                                    row.setAttribute('data-symbol', symbol);
                                    row.onclick = () => {
                                        location.href = '?symbol=' + symbol;
                                        if(window.innerWidth <= 768) toggleMobileSidebar();
                                    };
                                    
                                    row.innerHTML = `
                                        <div class="d-flex align-items-center">
                                            <div class="bg-light p-1 rounded-circle me-2" style="width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;">
                                                <img src="${getCoinIconJs(symbol)}" onerror="handleIconError(this, '${symbol}')" alt="${symbol}" style="width: 18px; height: 18px; margin: 0;">
                                            </div>
                                            <div>
                                                <div class="symbol fw-bold text-white">${symbol}</div>
                                                <div class="change ${change >= 0 ? 'text-success' : 'text-danger'}" style="font-size: 10px;">${(change >= 0 ? '+' : '') + change.toFixed(2)}%</div>
                                            </div>
                                        </div>
                                        <div class="price fw-bold text-white">${formatPrice(price)}</div>
                                    `;
                                    list.appendChild(row);
                                } else {
                                    // Update existing row
                                    const row = document.querySelector(`.coin-row[data-symbol="${symbol}"]`);
                                    if (row) {
                                        const price = parseFloat(item.lastPrice);
                                        const change = parseFloat(item.priceChangePercent);
                                        row.querySelector('.price').innerText = formatPrice(price);
                                        const changeEl = row.querySelector('.change');
                                        changeEl.innerText = (change >= 0 ? '+' : '') + change.toFixed(2) + '%';
                                        changeEl.className = 'change ' + (change >= 0 ? 'text-success' : 'text-danger');
                                    }
                                }
                            }
                        });
                    } catch (e) {
                        console.error("Failed to populate coins", e);
                    }
                }

                window.tickerActive = false;
                window.depthActive = false;
                window.allTickerActive = false;

                function initTradingWS() {
                    // Symbol specific ticker for header and last price
                    tickerWs = new WebSocket(`wss://stream.binance.com:9443/ws/${currentPair}@ticker`);
                    tickerWs.onmessage = (e) => {
                        window.tickerActive = true;
                        const data = JSON.parse(e.data);
                        const price = parseFloat(data.c);
                        const change = parseFloat(data.P);
                        const high = parseFloat(data.h);
                        const low = parseFloat(data.l);
                        const vol = parseFloat(data.v);

                        const priceEl = document.querySelector('.price-jump');
                        if (priceEl) {
                            const oldPrice = parseFloat(priceEl.innerText.replace(/,/g, ''));
                            priceEl.innerText = formatPrice(price);
                            priceEl.style.color = price >= oldPrice ? '#0ecb81' : '#f6465d';
                            
                            // Update mid price in OB
                            const obPrice = document.getElementById('last-price-ob');
                            if (obPrice) {
                                obPrice.innerText = formatPrice(price);
                                obPrice.className = 'val ' + (price >= oldPrice ? 'text-success' : 'text-danger');
                            }
                            const obUsd = document.getElementById('last-price-usd');
                            if (obUsd) obUsd.innerText = '≈ $' + formatPrice(price);
                        }

                        const stats = document.querySelectorAll('.header-stat span');
                        if (stats[0]) {
                            stats[0].innerText = (change >= 0 ? '+' : '') + change.toFixed(2) + '%';
                            stats[0].className = (change >= 0 ? 'text-success' : 'text-danger') + ' fw-bold';
                        }
                        if (stats[1]) stats[1].innerText = formatPrice(high);
                        if (stats[2]) stats[2].innerText = formatPrice(low);
                        if (stats[3]) stats[3].innerText = parseFloat(vol).toLocaleString('en-US', {maximumFractionDigits: 2});
                    };

                    // Depth for Order Book
                    depthWs = new WebSocket(`wss://stream.binance.com:9443/ws/${currentPair}@depth20@1000ms`);
                    depthWs.onmessage = (e) => {
                        window.depthActive = true;
                        const data = JSON.parse(e.data);
                        updateOrderBookUI(data);
                    };

                    // Global ticker for sidebar
                    const allTickerWs = new WebSocket('wss://stream.binance.com:9443/ws/!ticker@arr');
                    allTickerWs.onmessage = (e) => {
                        window.allTickerActive = true;
                        const data = JSON.parse(e.data);
                        const sidebarRows = document.querySelectorAll('.coin-row');
                        const tickerMap = {};
                        data.forEach(item => {
                            if (item.s.endsWith('USDT')) {
                                tickerMap[item.s.replace('USDT', '')] = item;
                            }
                        });

                        sidebarRows.forEach(row => {
                            const sym = row.getAttribute('data-symbol');
                            if (tickerMap[sym]) {
                                const t = tickerMap[sym];
                                const price = parseFloat(t.c);
                                const change = parseFloat(t.P);
                                row.querySelector('.price').innerText = formatPrice(price);
                                const changeEl = row.querySelector('.change');
                                changeEl.innerText = (change >= 0 ? '+' : '') + change.toFixed(2) + '%';
                                changeEl.className = 'change ' + (change >= 0 ? 'text-success' : 'text-danger');
                            }
                        });
                    };

                    // Start polling fallback if WebSockets fail
                    setInterval(async () => {
                        if (!window.tickerActive || !window.allTickerActive) {
                            try {
                                const res = await fetch('api/prices.php?type=ticker');
                                const data = await res.json();
                                const tickerArray = Array.isArray(data) ? data : (data && typeof data === 'object' && data.symbol ? [data] : []);
                                if (tickerArray.length === 0) return;
                                
                                // Update current symbol if ticker is not active
                                if (!window.tickerActive) {
                                    const current = tickerArray.find(t => t.symbol === currentPair.toUpperCase());
                                    if (current) {
                                        const price = parseFloat(current.lastPrice);
                                        const change = parseFloat(current.priceChangePercent);
                                        
                                        const priceEl = document.querySelector('.price-jump');
                                        if (priceEl) {
                                            priceEl.innerText = formatPrice(price);
                                            const obPrice = document.getElementById('last-price-ob');
                                            if (obPrice) obPrice.innerText = formatPrice(price);
                                        }
                                        
                                        const stats = document.querySelectorAll('.header-stat span');
                                        if (stats[0]) {
                                            stats[0].innerText = (change >= 0 ? '+' : '') + change.toFixed(2) + '%';
                                            stats[0].className = (change >= 0 ? 'text-success' : 'text-danger') + ' fw-bold';
                                        }
                                    }
                                }

                                // Update sidebar if allTicker is not active
                                if (!window.allTickerActive) {
                                    const sidebarRows = document.querySelectorAll('.coin-row');
                                    tickerArray.forEach(t => {
                                        if (t.symbol.endsWith('USDT')) {
                                            const sym = t.symbol.replace('USDT', '');
                                            sidebarRows.forEach(row => {
                                                if (row.getAttribute('data-symbol') === sym) {
                                                    const price = parseFloat(t.lastPrice);
                                                    const change = parseFloat(t.priceChangePercent);
                                                    row.querySelector('.price').innerText = formatPrice(price);
                                                    const changeEl = row.querySelector('.change');
                                                    changeEl.innerText = (change >= 0 ? '+' : '') + change.toFixed(2) + '%';
                                                    changeEl.className = 'change ' + (change >= 0 ? 'text-success' : 'text-danger');
                                                }
                                            });
                                        }
                                    });
                                }
                            } catch (e) {
                                console.error("Fallback polling failed", e);
                            }
                        }
                    }, 5000);
                }

                populateAllCoins().then(() => {
                    initTradingWS();
                    loadHistory();
                    setInterval(loadHistory, 10000); // Auto-refresh history every 10s
                });
                </script>


                <div class="order-history p-0">
                    <div class="d-flex gap-0 border-bottom border-secondary bg-dark history-tabs">
                        <h6 class="px-4 py-3 mb-0 active text-white bg-black" onclick="showHistoryTab('open')" id="tab-open" style="cursor: pointer; font-size: 13px; font-weight: bold; border-bottom: 2px solid var(--term-primary) !important;"><?= __('open_orders') ?></h6>
                        <h6 class="px-4 py-3 mb-0 text-white opacity-75" onclick="showHistoryTab('settlement')" id="tab-settlement" style="cursor: pointer; font-size: 13px;"><?= __('settlement_history') ?></h6>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-dark table-sm mb-0" id="history-table" style="font-size: 12px;">
                            <thead>
                                <tr class="text-muted" style="background: rgba(255,255,255,0.02);">
                                    <th class="ps-3 py-2"><?= __('time') ?></th>
                                    <th class="py-2"><?= __('trading_pair') ?></th>
                                    <th class="py-2"><?= __('type') ?></th>
                                    <th class="py-2"><?= __('direction') ?></th>
                                    <th class="py-2"><?= __('price') ?></th>
                                    <th class="py-2"><?= __('quantity') ?></th>
                                    <th class="py-2"><?= __('total') ?></th>
                                    <th class="py-2"><?= __('status') ?></th>
                                    <th class="pe-3 py-2 text-end"><?= __('operation') ?></th>
                                </tr>
                            </thead>
                            <tbody id="history-body">
                                <!-- Data injected by JS -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- Right Sidebar: Order Book -->
            <div class="terminal-right-sidebar">
                <div class="order-book">
                    <div class="ob-header">
                        <span><?= __('price') ?>(<?= __('USDT') ?>)</span>
                        <span><?= __('quantity') ?>(<?= __($currentSymbol) ?>)</span>
                    </div>

                    <div class="ob-list asks" id="ob-asks">
                        <?php for($i=0;$i<20;$i++): ?>
                            <div class="ob-row">
                                <span class="price">---</span>
                                <span class="amount">---</span>
                                <div class="ob-row-bg" style="width: 0%"></div>
                            </div>
                        <?php endfor; ?>
                    </div>
                    <div class="ob-mid-price">
                        <span class="val text-success" id="last-price-ob">---</span>
                        <span class="small text-muted" id="last-price-usd">---</span>
                    </div>
                    <div class="ob-list bids" id="ob-bids">
                        <?php for($i=0;$i<20;$i++): ?>
                            <div class="ob-row">
                                <span class="price">---</span>
                                <span class="amount">---</span>
                                <div class="ob-row-bg" style="width: 0%"></div>
                            </div>
                        <?php endfor; ?>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script>
    function toggleMobileSidebar() {
        document.getElementById('terminal-sidebar').classList.toggle('active');
        document.getElementById('sidebar-overlay').classList.toggle('active');
    }

    const historyData = {
        open: [],
        settlement: []
    };

    async function loadHistory() {
        try {
            const resp = await fetch('api/finance.php?action=get_orders&symbol=<?= $currentSymbol ?>&tab=<?= $activeTab ?>');
            const data = await resp.json();
            if (data.success) {
                historyData.open = data.open;
                historyData.settlement = data.settlement;
                showHistoryTab(showHistoryTab.currentTab || 'open');
            }
        } catch (e) {
            console.error("Failed to load history", e);
        }
    }

    function showHistoryTab(tab) {
        showHistoryTab.currentTab = tab;
        // Update tabs UI
        document.querySelectorAll('.history-tabs h6').forEach(el => {
            el.classList.remove('active', 'text-white', 'bg-black', 'opacity-100');
            el.classList.add('text-white', 'opacity-75');
            el.style.borderBottom = 'none';
        });
        const activeTab = document.getElementById('tab-' + tab);
        if (activeTab) {
            activeTab.classList.add('active', 'text-white', 'bg-black', 'opacity-100');
            activeTab.classList.remove('opacity-75');
            activeTab.style.borderBottom = '2px solid var(--term-primary)';
        }

        // Update table content
        const body = document.getElementById('history-body');
        body.innerHTML = '';
        
        if (!historyData[tab] || historyData[tab].length === 0) {
            body.innerHTML = '<tr><td colspan="9" class="text-center py-5 text-muted"><?= __("no_records_found") ?></td></tr>';
            return;
        }

        historyData[tab].forEach(row => {
            const tr = document.createElement('tr');
            const isProfit = row.status_type === 'won' || row.status_type === 'Profit';
            const isLoss = row.status_type === 'lost' || row.status_type === 'loss' || row.status_type === 'Loss';
            const isExecuting = row.status_type === 'executing' || row.status_type === 0 || row.status_type === 'open';
            
            const statusClass = isProfit ? 'text-success' : (isLoss ? 'text-danger' : 'text-info');
            const statusBg = isProfit ? 'bg-success' : (isLoss ? 'bg-danger' : 'bg-info');
            
            let displayStatus = row.status;
            if (isExecuting) {
                if (row.secondsLeft <= 0 && row.type_raw === 'binary') {
                    displayStatus = '<?= __("settling") ?>';
                } else if (row.secondsLeft > 0) {
                    displayStatus = '<?= __("executing") ?> (' + row.secondsLeft + '<?= __('unit_seconds') ?>)';
                }
            }
            if (isProfit) displayStatus = '<?= __("profit") ?>';
            if (isLoss) displayStatus = '<?= __("loss") ?>';

            // Format total/profit for settled orders
            let totalDisplay = row.total;
            if (tab === 'settlement' && (isProfit || isLoss)) {
                const pl = parseFloat(row.pnl || 0).toFixed(2);
                const total = parseFloat(row.total || 0).toFixed(2);
                const plClass = pl >= 0 ? 'text-success' : 'text-danger';
                totalDisplay = `<div class="${plClass} fw-bold" style="font-size: 14px;">${pl >= 0 ? '+' : ''}${pl}</div>
                                <div class="small opacity-75 text-muted">${total} <?= __('USDT') ?></div>`;
            }

            const isUp = row.side_type === 'up' || row.side_type === 'long' || row.side_type === 'buy';

            let operationHtml = `<button class="btn btn-sm btn-dark px-2 py-0" style="font-size: 10px;"><?= __("details") ?></button>`;
            if (tab === 'open' && row.type_raw === 'contract') {
                operationHtml = `<button onclick="closeContractOrder(${row.id})" class="btn btn-sm btn-danger px-2 py-0" style="font-size: 10px;"><?= __("close") ?></button>`;
            }

            tr.innerHTML = `
                <td class="ps-3 py-3 text-white" style="font-size: 11px;">${row.time}</td>
                <td class="py-3 fw-bold text-white">${row.pair}</td>
                <td class="py-3"><span class="small bg-secondary bg-opacity-25 px-1 rounded">${row.type}</span></td>
                <td class="py-3 ${isUp ? 'text-success' : 'text-danger'}">
                    <i class="bi bi-graph-${isUp ? 'up' : 'down'} me-1"></i>${row.side}
                </td>
                <td class="py-3">${row.price}</td>
                <td class="py-3">${row.amount}</td>
                <td class="py-3">${totalDisplay}</td>
                <td class="py-3"><span class="badge ${statusBg} bg-opacity-10 ${statusClass} rounded-pill px-2" style="font-size: 10px;">${displayStatus}</span></td>
                <td class="pe-3 py-3 text-end">${operationHtml}</td>
            `;
            body.appendChild(tr);
        });
    }

    function closeContractOrder(id) {
        if (!confirm('<?= __("confirm_close_pos") ?>')) return;
        const closePrice = parseFloat(document.querySelector('.price-jump').innerText.replace(/,/g, ''));
        const formData = new FormData();
        formData.append('action', 'close_order');
        formData.append('order_id', id);
        formData.append('close_price', closePrice);

        fetch('api/contract.php', {
            method: 'POST',
            body: formData
        })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                showMsg('<?= __("pos_closed") ?>', 'success');
                loadHistory();
            } else {
                showMsg(data.error, 'error');
            }
        });
    }

    // Initialize with open orders
    showHistoryTab('open');
    </script>

    <!-- Order Countdown Popup Modal -->
    <div class="order-popup-overlay" id="order-popup-overlay">
        <div class="order-popup position-relative">
            <button class="btn-close btn-close-white position-absolute top-0 end-0 m-3" onclick="hideOrderPopup()" aria-label="Close" style="z-index: 10;"></button>
            
            <div id="popup-countdown-content">
                <h5><?= __('order_in_progress') ?></h5>
                
                <div class="countdown-circle">
                    <svg width="200" height="200" viewBox="0 0 200 200">
                        <circle class="bg" cx="100" cy="100" r="90"></circle>
                        <circle class="progress" id="popup-progress" cx="100" cy="100" r="90"></circle>
                    </svg>
                    <div class="time-text" id="popup-time-text">60</div>
                </div>

                <div class="popup-details">
                    <div class="popup-row">
                        <span class="label"><?= __('current_price') ?></span>
                        <span class="value" id="popup-price">---</span>
                    </div>
                    <div class="popup-row">
                        <span class="label"><?= __('cycle') ?></span>
                        <span class="value" id="popup-cycle">60<?= __('unit_seconds') ?></span>
                    </div>
                    <div class="popup-row">
                        <span class="label"><?= __('direction') ?></span>
                        <span class="value" id="popup-direction">---</span>
                    </div>
                    <div class="popup-row">
                        <span class="label"><?= __('quantity') ?></span>
                        <span class="value" id="popup-quantity">---</span>
                    </div>
                    <div class="popup-row">
                        <span class="label"><?= __('opening_price') ?></span>
                        <span class="value" id="popup-open-price">---</span>
                    </div>
                </div>

                <div class="popup-footer">
                    <?= __('final_price_settlement') ?>
                </div>
            </div>
            
            <div id="popup-result-content" style="display: none;"></div>
        </div>
    </div>
    <!-- Error Modal Popup -->
    <div class="error-modal-overlay" id="error-modal-overlay" onclick="closeErrorModal()">
        <div class="error-modal" onclick="event.stopPropagation()">
            <div class="error-modal-icon">
                <i class="bi bi-exclamation-octagon-fill"></i>
            </div>
            <h4><?= __('warning') ?></h4>
            <p id="error-modal-msg"><?= __("error_msg_placeholder") ?></p>
            <button class="btn btn-primary rounded-pill px-5 py-2 fw-bold" onclick="closeErrorModal()"><?= __('confirm') ?></button>
        </div>
    </div>
    <?php
}
?>
