@extends('nexus.layouts.app')

@section('page-title', 'Live Terminal')
@section('sys-mode', 'LIVE TERMINAL')

@section('head')
    <link rel="stylesheet" href="/nexus/nexus-terminal.css?v={{ time() }}">
@endsection

@section('content')

    {{-- STAT BAR --}}
    <div class="t-stats">
        <div class="t-stat t-stat-session">
            <div class="t-stat-label" id="termSessionLabel">ENGINE INACTIVE</div>
            <div class="t-countdown" id="termCountdown">--:--</div>
            <div class="t-stat-sub" id="termCountdownSub">AWAITING ACTIVATION</div>
        </div>
        <div class="t-stat">
            <div class="t-stat-label">BIDS</div>
            <div class="t-stat-value orange" id="termBids">0</div>
            <div class="t-stat-sub" id="termBidsDelta"></div>
        </div>
        <div class="t-stat">
            <div class="t-stat-label">SELLS EVAL</div>
            <div class="t-stat-value" id="termSells">0</div>
            <div class="t-stat-sub" id="termSellsDelta"></div>
        </div>
        <div class="t-stat">
            <div class="t-stat-label">PENDING</div>
            <div class="t-stat-value orange" id="termPending">0</div>
            <div class="t-stat-sub" id="termPendingDelta"></div>
        </div>
        <div class="t-stat">
            <div class="t-stat-label">APPROVED</div>
            <div class="t-stat-value text-green" id="termApproved">0</div>
            <div class="t-stat-sub" id="termApprovedDelta"></div>
        </div>
        <div class="t-stat">
            <div class="t-stat-label">REJECTED</div>
            <div class="t-stat-value text-red" id="termRejected">0</div>
            <div class="t-stat-sub" id="termRejectedDelta"></div>
        </div>
        <div class="t-stat">
            <div class="t-stat-label">VOLUME</div>
            <div class="t-stat-value" id="termVolume">$0</div>
            <div class="t-stat-sub" id="termVolumeDelta"></div>
        </div>
        <div class="t-stat">
            <div class="t-stat-label">PROFIT</div>
            <div class="t-stat-value text-green" id="termProfit">$0.00</div>
            <div class="t-stat-sub" id="termProfitDelta"></div>
        </div>
    </div>

    {{-- MAIN AREA: CHART + SIDEBAR --}}
    <div class="t-main">

        {{-- CHART COLUMN --}}
        <div class="t-chart-col">
            <div class="t-hero-header">
                <div class="t-hero-left">
                    <span class="t-hero-value" id="termChartValue">$0.00</span>
                    <span class="t-hero-change text-green" id="termChartChange">+0.00%</span>
                </div>
                <div class="t-hero-right">
                    <span class="t-hero-label">NEXUS PLATFORM VALUE</span>
                    <span class="t-hero-live"><span class="live-dot"></span> LIVE</span>
                </div>
            </div>
            <div class="t-hero-canvas">
                <canvas id="heroChart"></canvas>
            </div>
        </div>

        {{-- SIDEBAR COLUMN --}}
        <div class="t-sidebar">

            {{-- ALERTS --}}
            <div id="termAlerts" class="t-alerts-area"></div>

            {{-- SYSTEM VITALS --}}
            <div class="t-section">
                <div class="t-section-title" style="display:flex; justify-content:space-between; align-items:baseline;">
                    SYSTEM VITALS
                    <span class="t-health-chip stagnant" id="gaugeHealthLabel">STAGNANT</span>
                </div>
                <div class="t-gauge">
                    <div class="t-gauge-row">
                        <span class="t-gauge-label">Liquidity Index</span>
                        <span class="t-gauge-value" id="gaugeLiquidity">0.0%</span>
                    </div>
                    <div class="t-gauge-track"><div class="t-gauge-fill green" id="gaugeLiquidityBar" style="width: 0%;"></div></div>
                </div>
                <div class="t-gauge">
                    <div class="t-gauge-row">
                        <span class="t-gauge-label">Fairness Score</span>
                        <span class="t-gauge-value" id="gaugeFairness">0%</span>
                    </div>
                    <div class="t-gauge-track"><div class="t-gauge-fill green" id="gaugeFairnessBar" style="width: 0%;"></div></div>
                </div>
                <div class="t-gauge">
                    <div class="t-gauge-row">
                        <span class="t-gauge-label">Session Win Rate</span>
                        <span class="t-gauge-value orange" id="gaugeWinRate">0.0%</span>
                    </div>
                    <div class="t-gauge-track"><div class="t-gauge-fill orange" id="gaugeWinRateBar" style="width: 0%;"></div></div>
                </div>
                <div class="t-gauge">
                    <div class="t-gauge-row">
                        <span class="t-gauge-label">Active Bidders</span>
                        <span class="t-gauge-value" id="gaugeUsers">0</span>
                    </div>
                    <div class="t-gauge-track"><div class="t-gauge-fill white" id="gaugeUsersBar" style="width: 0%;"></div></div>
                </div>
                <div class="t-gauge">
                    <div class="t-gauge-row">
                        <span class="t-gauge-label">Users at Cap</span>
                        <span class="t-gauge-value" id="gaugeCapped">0</span>
                    </div>
                    <div class="t-gauge-track"><div class="t-gauge-fill red" id="gaugeCappedBar" style="width: 0%;"></div></div>
                </div>
            </div>

            {{-- BOT GOVERNANCE --}}
            <div class="t-section">
                <div class="t-section-title">BOT GOVERNANCE</div>
                <div class="t-bots-header">
                    <span class="t-bots-count orange" id="botTotal">0</span>
                    <span class="t-bots-label">active bots</span>
                </div>
                <div class="t-bots-strip">
                    <div class="t-bot-cell">
                        <span class="t-bot-val text-green" id="botOnTrack">0</span>
                        <span class="t-bot-lbl">ON TRACK</span>
                    </div>
                    <div class="t-bot-cell">
                        <span class="t-bot-val text-yellow" id="botHot">0</span>
                        <span class="t-bot-lbl">HOT</span>
                    </div>
                    <div class="t-bot-cell">
                        <span class="t-bot-val text-red" id="botCold">0</span>
                        <span class="t-bot-lbl">COLD</span>
                    </div>
                </div>
                <div class="t-bots-meta">
                    <span>Capital: <span id="botCapital">$0</span></span>
                    <span>Last cycle: <span id="botLastCycle">Standby</span></span>
                </div>
            </div>

            {{-- SESSION SCHEDULE --}}
            <div class="t-section t-section-grow">
                <div class="t-section-title">SESSION SCHEDULE</div>
                <div id="termSchedule">
                    <div class="t-session-row" id="termSession1">
                        <div class="t-session-left"><span class="t-session-num">S1</span> ASIA-PAC</div>
                        <div class="t-session-right"><span class="text-dim">01:00-02:00</span></div>
                    </div>
                    <div class="t-session-row" id="termSession2">
                        <div class="t-session-left"><span class="t-session-num">S2</span> EUROPE</div>
                        <div class="t-session-right"><span class="text-dim">09:00-10:00</span></div>
                    </div>
                    <div class="t-session-row" id="termSession3">
                        <div class="t-session-left"><span class="t-session-num">S3</span> AMERICAS</div>
                        <div class="t-session-right"><span class="text-dim">17:00-18:00</span></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- MINI CHARTS ROW --}}
    <div class="t-mini-row">
        <div class="t-mini">
            <div class="t-mini-header">
                <span class="t-mini-label">TRADING ACTIVITY</span>
                <span class="t-mini-value orange" id="miniActivityVal">--</span>
            </div>
            <canvas id="miniActivity" height="48"></canvas>
        </div>
        <div class="t-mini">
            <div class="t-mini-header">
                <span class="t-mini-label">VOLUME FLOW</span>
                <span class="t-mini-value text-green" id="miniVolumeVal">--</span>
            </div>
            <canvas id="miniVolume" height="48"></canvas>
        </div>
        <div class="t-mini">
            <div class="t-mini-header">
                <span class="t-mini-label">CUMULATIVE PROFIT</span>
                <span class="t-mini-value text-yellow" id="miniProfitVal">--</span>
            </div>
            <canvas id="miniProfit" height="48"></canvas>
        </div>
    </div>

    {{-- TRADE FEED (FULL WIDTH) --}}
    <div class="t-feed-section">
        <div class="t-feed-header">
            <span class="t-feed-title">LIVE TRADE FEED</span>
            <span class="t-feed-live"><span class="live-dot"></span> STREAMING</span>
        </div>
        <div class="t-feed" id="termFeed"></div>
    </div>

    {{-- BOTTOM BAR --}}
    <div class="t-bottom" id="termBottom">
        <span id="termBottomText">NEXUS ENGINE v1.0 -- GE-AS.COM -- Engine inactive. Awaiting activation.</span>
        <span class="t-bottom-status">
            <span class="live-dot" id="termBottomDot"></span>
            <span id="termBottomStatus">CONNECTING...</span>
        </span>
    </div>

@endsection


@section('scripts')
    <script src="/nexus/nexus-terminal.js?v={{ time() }}"></script>
@endsection