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

@section('content')

    <style>

        .quote-card {
            border: 1px solid #ccc;
            padding: 12px;
            margin: 10px 0;
            border-radius: 6px;
            background: #f9f9f9;
        }
        .green {
            color: green;
        }
        .red {
            color: red;
        }
    </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 Two Live Trading </h2>
                </div>
            </div>
        </div>
    </section>

    <div id="market-data-container"></div>


@endsection

<script>
    const symbols = ['.STOXX', '.GDAXI', '.FTSE', '.FCHI', '.FTMIB', 'FSLR', 'SMCI', 'APP', 'UNH', 'HUM', 'ELV'];
    const apiUrl = `https://quote.cnbc.com/quote-html-webservice/restQuote/symbolType/symbol?symbols=${symbols.join('%7C')}&requestMethod=itv&noform=1&partnerId=2&fund=1&exthrs=1&output=json&events=1`;

    async function fetchAndRenderMarketData() {
        try {
            const res = await fetch(apiUrl);
            const result = await res.json();
            const data = result.FormattedQuoteResult.FormattedQuote;
            const container = document.getElementById('market-data-container');

            data.forEach(item => {
                const changeClass = item.changetype === "UP" ? "green" : "red";
                let card = document.getElementById(`quote-${item.symbol.replace(/\W/g, '')}`);

                const content = `
                    <h3>${item.name} (${item.symbol})</h3>
                    <p><strong>Last:</strong> ${item.last}</p>
                    <p><strong>Change:</strong> <span class="${changeClass}">${item.change} (${item.change_pct})</span></p>
                    <p><strong>Open:</strong> ${item.open}</p>
                    <p><strong>High:</strong> ${item.high}</p>
                    <p><strong>Low:</strong> ${item.low}</p>
                    <p><strong>Prev Close:</strong> ${item.previous_day_closing}</p>
                    <p><strong>52W High:</strong> ${item.yrhiprice}</p>
                    <p><strong>52W Low:</strong> ${item.yrloprice}</p>
                    <p><strong>Volume:</strong> ${item.volume_alt}</p>
                    <p><strong>Last Updated:</strong> ${item.last_timedate}</p>
                    <hr>
                `;

                if (card) {
                    card.innerHTML = content; // just update
                } else {
                    const div = document.createElement('div');
                    div.className = 'quote-card';
                    div.id = `quote-${item.symbol.replace(/\W/g, '')}`;
                    div.innerHTML = content;
                    container.appendChild(div);
                }
            });
        } catch (error) {
            console.error("API Error:", error);
        }
    }

    // Initial fetch
    fetchAndRenderMarketData();

    // Auto refresh every 60 seconds
    setInterval(fetchAndRenderMarketData, 40000);
</script>