<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Live Terminal - Global E-commerce Arbitrage Store</title>
    <link rel="shortcut icon" href="{{ asset('images/logo-sm.png') }}">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=IBM+Plex+Mono:ital,wght@0,300;0,400;0,500;1,400&family=DM+Sans:wght@300;400;500;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="/css/live-terminal.css?v={{ time() }}">
</head>

<body>

    {{-- TOP BAR --}}
    <div class="lt-topbar">
        <a href="{{ url('/') }}" class="lt-topbar-brand">
            <img src="{{ asset('images/logo-sm.png') }}" alt="GE-AS" class="lt-topbar-logo">
            <span class="lt-topbar-name">Global <span class="lt-accent">E-Commerce</span></span>
        </a>
        <div class="lt-topbar-right">
            <span class="lt-topbar-user">{{ Auth::user()->name ?? '' }}</span>
            <a href="{{ url('/home') }}" class="lt-topbar-back">&larr; Dashboard</a>
        </div>
    </div>

    {{-- SESSION STRIP --}}
    <div class="lt-strip">
        <div class="lt-strip-left">
            <div class="lt-strip-pair">
                <span class="lt-strip-symbol" id="ltSymbol">GE-AS LIVE</span>
                <span class="lt-strip-badge" id="ltBadge">BETWEEN SESSIONS</span>
            </div>
            <div class="lt-strip-stats">
                <div class="lt-strip-stat">
                    <span class="lt-ss-label">24h Trades</span>
                    <span class="lt-ss-value" id="ltTrades">0</span>
                </div>
                <div class="lt-strip-stat">
                    <div class="lt-ss-label">Platform Vol</div>
                    <div class="lt-ss-value" id="ltPlatformVol">--</div>
                </div>
                <div class="lt-strip-stat">
                    <span class="lt-ss-label">Manual Vol</span>
                    <span class="lt-ss-value" id="ltVolume">$0</span>
                </div>
                <div class="lt-strip-stat">
                    <span class="lt-ss-label">Traders</span>
                    <span class="lt-ss-value" id="ltTraders">0</span>
                </div>
                <div class="lt-strip-stat">
                    <span class="lt-ss-label">AI Bots</span>
                    <span class="lt-ss-value lt-c-green" id="ltBots">0</span>
                </div>
            </div>
        </div>
        <div class="lt-strip-right">
            <div>
                <div class="lt-cd-label" id="ltCdLabel">NEXT SESSION</div>
                <div class="lt-cd" id="ltCountdown">--:--:--</div>
            </div>
            <div class="lt-sessions-row">
                <span class="lt-sess-pill" id="ltPill1">DAWN 01:00</span>
                <span class="lt-sess-pill" id="ltPill2">MIDDAY 09:00</span>
                <span class="lt-sess-pill" id="ltPill3">DUSK 17:00</span>
            </div>
        </div>
    </div>

    {{-- HERO CHART --}}
    <div class="lt-hero">
        <div class="lt-hero-header">
            <div class="lt-hero-left">
                <span class="lt-hero-value" id="ltHeroValue">$0.00</span>
                <span class="lt-hero-change lt-c-green" id="ltHeroChange">+0.00%</span>
            </div>
            <div class="lt-hero-right">
                <span class="lt-hero-label">PLATFORM TRADING VOLUME</span>
                <span class="lt-hero-live"><span class="lt-dot"></span> LIVE</span>
            </div>
        </div>
        <div class="lt-hero-canvas">
            <canvas id="heroChart"></canvas>
        </div>
    </div>

    {{-- MAIN GRID: Feed + Activity | Plans --}}
    <div class="lt-grid">

        {{-- LEFT: Feed + Activity Chart --}}
        <div class="lt-col-main">
            {{-- Feed --}}
            <div class="lt-panel">
                <div class="lt-ph">
                    <span class="lt-ph-title">LIVE TRADES</span>
                    <span class="lt-live-tag"><span class="lt-dot"></span> LIVE</span>
                </div>
                <div class="lt-feed" id="ltFeed">
                    <div class="lt-feed-empty" id="ltFeedEmpty">Connecting...</div>
                </div>
            </div>
            {{-- Activity Chart --}}
            <div class="lt-panel">
                <div class="lt-ph">
                    <span class="lt-ph-title">DAILY BIDS (7D)</span>
                    <span class="lt-ph-val" id="ltActVal">--</span>
                </div>
                <div class="lt-canvas-sm">
                    <canvas id="activityChart"></canvas>
                </div>
            </div>
        </div>

        {{-- RIGHT: AI Plan Cards --}}
        <div class="lt-col-plans">
            <div class="lt-ph">
                <span class="lt-ph-title">AI TRADING PLANS</span>
            </div>
            <div class="lt-plans-scroll" id="ltPlanCards"></div>
        </div>
    </div>

    {{-- PLAN CURVES (full width) --}}
    <div class="lt-curves">
        <div class="lt-ph">
            <span class="lt-ph-title">AI PERFORMANCE -- 30 DAYS</span>
            <span class="lt-legend" id="ltLegend"></span>
        </div>
        <div class="lt-canvas-curves">
            <canvas id="planCurves"></canvas>
        </div>
        <div class="lt-disclaim">Aggregated live data. Individual results vary.</div>
    </div>

    {{-- BOTTOM BAR --}}
    <div class="lt-bottom">
        <span id="ltBottomText">GE-AS.COM -- All Systems Operational</span>
        <span class="lt-bot-right">
            <span class="lt-dot" id="ltBottomDot"></span>
            <span id="ltBottomStatus">CONNECTING</span>
        </span>
    </div>

    <script src="/js/live-terminal.js?v={{ time() }}"></script>
</body>

</html>