<?php
if (isset($_GET['json'])) {
    $apiKey = 'aTUXIrihT_vnT_o6Bjyi';
    $symbols = 'EURUSD,GBPUSD,AUDUSD,USDCAD,USDJPY';

    $url = "https://marketdata.tradermade.com/api/v1/live?currency=$symbols&api_key=$apiKey";

    $response = file_get_contents($url);
    $data = json_decode($response, true);

    if (!empty($data['quotes'])) {
        $result = [];
        foreach ($data['quotes'] as $quote) {
            $result[$quote['currency']] = $quote['mid'];
        }
        echo json_encode($result);
    } else {
        echo json_encode(["error" => "No quotes received"]);
    }
    exit;
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Live Forex Quotes</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            font-family: 'Segoe UI', sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 20px;
        }
        .quotes-container {
            display: flex;
            flex-wrap: wrap;
            gap: 16px;
            justify-content: center;
        }
        .quote-card {
            background: #fff;
            border-radius: 10px;
            box-shadow: 0 3px 10px rgba(0,0,0,0.05);
            padding: 15px 20px;
            width: 150px;
            text-align: center;
            transition: transform 0.2s ease;
        }
        .quote-card:hover {
            transform: scale(1.03);
        }
        .symbol {
            font-weight: 600;
            font-size: 18px;
            color: #333;
        }
        .price {
            font-size: 16px;
            color: #007BFF;
            margin-top: 5px;
        }
        .spread {
            font-size: 13px;
            color: #666;
            margin-top: 3px;
        }

        @media (max-width: 600px) {
            .quote-card {
                width: 100%;
                max-width: 300px;
            }
        }
    </style>
</head>
<body>

<h2 style="text-align:center; margin-bottom: 25px;">📈 Live Forex Quotes</h2>

<div class="quotes-container" id="quote-list">
    <p>Loading...</p>
</div>

<script>
function loadQuotes() {
    fetch('?json=1')
        .then(response => response.json())
        .then(data => {
            const spreads = {
                EURUSD: 1,
                GBPUSD: 2,
                AUDUSD: 4,
                USDCAD: 6,
                USDJPY: 5
            };

            const container = document.getElementById('quote-list');
            container.innerHTML = '';

            for (const symbol in data) {
                const price = parseFloat(data[symbol]).toFixed(5);
                const spread = spreads[symbol] ?? '-';

                const card = document.createElement('div');
                card.className = 'quote-card';
                card.innerHTML = `
                    <div class="symbol">${symbol}</div>
                    <div class="price">${price}</div>
                    <div class="spread">Spread: ${spread}</div>
                `;
                container.appendChild(card);
            }
        }).catch(() => {
            document.getElementById('quote-list').innerHTML = '<p style="color:red;">⚠️ Failed to fetch quotes.</p>';
        });
}

loadQuotes();
setInterval(loadQuotes, 5000);
</script>

</body>
</html>
