@extends('layouts.front-layout')
@section('title') Test Live Trading  @endsection

@section('content')

    <style>
        .quote-card {
            border: 1px solid #ccc;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 20px;
            background-color: #f9f9f9;
        }
        .green {
            color: green;
        }
        .red {
            color: red;
        }

        .sidebar {
            margin: auto;
            width: 600px;
            background: #fff;
            padding: 20px;
            border-right: 1px solid #ccc;
        }

        .section-title {
            font-weight: bold;
            font-size: 16px;
            margin-top: 20px;
            border-bottom: 2px solid #003366;
            padding-bottom: 5px;
            color: #003366;
        }

        .quote, .mover {
            display: flex;
            justify-content: space-between;
            padding: 8px 0;
            border-bottom: 1px dashed #ddd;
        }

        .green {
            color: green;
        }

        .red {
            color: red;
        }

        .mover-detail {
            font-size: 12px;
            margin-top: -8px;
            margin-left: 5px;
        }

        input[type="search"] {
            width: 100%;
            padding: 5px;
            margin-bottom: 10px;
            border: 1px solid #ccc;
        }

        .quote-finder {
            margin-bottom: 20px;
        }

    </style>
    <section class="inner-banner">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <figure>
                        <img src="{{ pagesSingleImage('Send FeedBack', 'top_banner_image') }}" class="img-fluid" alt="">
                    </figure>
                </div>
                <div class="col-md-6">
                    <h2>Test Live Trading </h2>
                </div>
            </div>
        </div>
    </section>

    <div class="sidebar">
        <div class="quote-finder">
            <div class="section-title">QUOTE FINDER</div>
            <input type="search" placeholder="Search..." id="searchSymbol">
        </div>

        <div class="section-title">POPULAR QUOTES</div>
        <div id="popular-quotes">
            <!-- JS will populate -->
        </div>

        <div class="section-title">MARKET MOVERS</div>
        <div>
            <strong>TOP</strong>
            <div id="top-movers">
                <!-- Top movers will be inserted here -->
            </div>
            <strong style="margin-top:10px; display:block;">BOTTOM</strong>
            <div id="bottom-movers">
                <!-- Bottom movers will be inserted here -->
            </div>
        </div>
    </div>

@endsection

<script>
    window.onload = function () {
        const apiKey = 'demo'; // Replace with your actual API key
        const popularSymbols = ['AAPL', 'TSLA', 'NVDA'];
        const topMovers = ['SMCI', 'AMD', 'ARM'];
        const bottomMovers = ['RVTY', 'SOLV', 'TECH'];

        async function fetchQuote(symbol) {
            try {
                const res = await fetch(`https://api.twelvedata.com/quote?symbol=${symbol}&apikey=${apiKey}`);
                const data = await res.json();
                console.log(data);
                if (data.status === 'error') {
                    console.warn(`Error fetching ${symbol}: ${data.message}`);
                    return null;
                }
                return data;
            } catch (error) {
                console.error(`Network error for ${symbol}:`, error);
                return null;
            }
        }

        async function renderQuotes() {
            const container = document.getElementById('popular-quotes');
            container.innerHTML = ''; // Clear previous content

            for (const symbol of popularSymbols) {
                const data = await fetchQuote(symbol);
                if (!data) continue;

                const changeClass = parseFloat(data.percent_change) >= 0 ? 'green' : 'red';

                container.innerHTML += `
                    <div class="quote-card">
                        <h3>${data.name} (${data.symbol})</h3>
                        <p><strong>Exchange:</strong> ${data.exchange} (${data.mic_code})</p>
                        <p><strong>Currency:</strong> ${data.currency}</p>
                        <p><strong>Date:</strong> ${data.datetime}</p>
                        <p><strong>Open:</strong> ${data.open}</p>
                        <p><strong>High:</strong> ${data.high}</p>
                        <p><strong>Low:</strong> ${data.low}</p>
                        <p><strong>Close:</strong> ${data.close}</p>
                        <p><strong>Previous Close:</strong> ${data.previous_close}</p>
                        <p><strong>Change:</strong> ${data.change} <span class="${changeClass}">(${data.percent_change}%)</span></p>
                        <p><strong>Volume:</strong> ${data.volume}</p>
                        <p><strong>52-Week High:</strong> ${data.fifty_two_week.high}</p>
                        <p><strong>52-Week Low:</strong> ${data.fifty_two_week.low}</p>
                        <hr>
                    </div>
                `;
            }
        }

        async function renderMovers(ids, containerId) {
            const container = document.getElementById(containerId);
            if (!container) return;

            container.innerHTML = ''; // Clear previous data

            for (const symbol of ids) {
                const data = await fetchQuote(symbol);
                if (!data) continue;

                const changeClass = parseFloat(data.percent_change) >= 0 ? 'green' : 'red';

                container.innerHTML += `
                    <div class="quote">
                        <div>
                            <strong>${symbol}</strong>
                            <div class="mover-detail">${data.name}</div>
                        </div>
                        <div>
                            ${data.price}<br>
                            <span class="${changeClass}">${data.percent_change}%</span>
                        </div>
                    </div>
                `;
            }
        }

        // Initial call
        renderQuotes();
        renderMovers(topMovers, 'top-movers');
        renderMovers(bottomMovers, 'bottom-movers');

        // 🔄 Auto-refresh every 15 seconds (15000 ms)
        setInterval(() => {
            renderQuotes();
            renderMovers(topMovers, 'top-movers');
            renderMovers(bottomMovers, 'bottom-movers');
        }, 15000);
    };
</script>