<?php include 'header.php'; ?>

<main style="padding: 60px 20px; background: #0b0e11; min-height: calc(100vh - 60px);">
    <div style="max-width: 500px; margin: 0 auto; background: #1e2329; padding: 40px; border-radius: 20px; border: 1px solid #2b3139;">
        <h2 style="margin-bottom: 30px; text-align: center; color: white;"><?php echo __('nav_convert'); ?></h2>
        
        <div style="margin-bottom: 25px;">
            <label style="color: #848e9c; font-size: 0.9rem; margin-bottom: 10px; display: block;">From</label>
            <div style="display: flex; align-items: center; background: #0b0e11; padding: 15px; border-radius: 12px; border: 1px solid #2b3139;">
                <input type="number" id="from-amount" value="100" style="flex: 1; background: transparent; border: none; color: white; font-size: 1.5rem; font-weight: bold; outline: none;">
                <div style="display: flex; align-items: center; gap: 8px; background: #1e2329; padding: 5px 12px; border-radius: 20px; cursor: pointer;">
                    <img src="https://raw.githubusercontent.com/spothq/cryptocurrency-icons/master/128/color/usdt.png" width="24">
                    <span style="font-weight: bold; color: white;">USDT</span>
                </div>
            </div>
            <div style="margin-top: 8px; color: #848e9c; font-size: 0.8rem; display: flex; justify-content: space-between;">
                <span>Available: 0.00 USDT</span>
                <span style="color: var(--primary-color); cursor: pointer;">Max</span>
            </div>
        </div>

        <div style="text-align: center; margin: -10px 0 15px;">
            <div style="width: 40px; height: 40px; background: #1e2329; border: 1px solid #2b3139; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--primary-color); cursor: pointer;">
                <i class="fas fa-exchange-alt fa-rotate-90"></i>
            </div>
        </div>

        <div style="margin-bottom: 30px;">
            <label style="color: #848e9c; font-size: 0.9rem; margin-bottom: 10px; display: block;">To</label>
            <div style="display: flex; align-items: center; background: #0b0e11; padding: 15px; border-radius: 12px; border: 1px solid #2b3139;">
                <input type="number" id="to-amount" readonly style="flex: 1; background: transparent; border: none; color: white; font-size: 1.5rem; font-weight: bold; outline: none;">
                <select id="target-crypto" onchange="updateConvert()" style="background: #1e2329; border: none; color: white; padding: 5px 10px; border-radius: 20px; font-weight: bold; cursor: pointer; outline: none;">
                    <option value="BTC">BTC</option>
                    <option value="ETH">ETH</option>
                    <option value="SOL">SOL</option>
                    <option value="BNB">BNB</option>
                </select>
            </div>
            <div id="rate-display" style="margin-top: 8px; color: #848e9c; font-size: 0.8rem; text-align: center;">
                1 USDT ≈ --.--- BTC
            </div>
        </div>

        <button class="btn-primary" style="width: 100%; padding: 16px; font-size: 1.1rem; font-weight: bold; border-radius: 12px; margin-bottom: 20px;">Preview Conversion</button>
        
        <div style="background: rgba(240, 185, 11, 0.05); border: 1px solid rgba(240, 185, 11, 0.1); padding: 15px; border-radius: 10px;">
            <div style="display: flex; align-items: center; gap: 10px; color: #F0B90B; font-size: 0.85rem;">
                <i class="fas fa-info-circle"></i>
                <span>Zero fees, instant settlement.</span>
            </div>
        </div>
    </div>
</main>

<script>
    const prices = {};
    const symbols = ['BTCUSDT', 'ETHUSDT', 'SOLUSDT', 'BNBUSDT'];
    
    const ws = new WebSocket('wss://stream.binance.com:9443/ws/' + symbols.map(s => s.toLowerCase() + '@ticker').join('/'));
    
    ws.onmessage = (event) => {
        const data = JSON.parse(event.data);
        prices[data.s.replace('USDT', '')] = parseFloat(data.c);
        updateConvert();
    };

    const fromInput = document.getElementById('from-amount');
    const toInput = document.getElementById('to-amount');
    const targetSelect = document.getElementById('target-crypto');
    const rateDisplay = document.getElementById('rate-display');

    function updateConvert() {
        const fromVal = parseFloat(fromInput.value) || 0;
        const target = targetSelect.value;
        const price = prices[target];
        
        if (price) {
            const result = fromVal / price;
            toInput.value = result.toFixed(8);
            rateDisplay.innerText = `1 USDT ≈ ${(1/price).toFixed(8)} ${target}`;
        }
    }

    fromInput.oninput = updateConvert;
</script>

<?php include 'footer.php'; ?>