@extends('layouts.app')
@section('title', 'Trade ' . $current?->symbol)
@push('head')
    <script src="https://s3.tradingview.com/tv.js"></script>
    @vite(['resources/js/trade.js'])
@endpush
@section('content')
@php use App\Support\Money; @endphp

@if(! $current)
    <div class="card">No instruments are configured yet. An administrator must run the instrument seeder.</div>
@else
{{-- Account bar (live) --}}
<div class="mb-4 grid grid-cols-2 gap-3 md:grid-cols-6" id="account-bar">
    @foreach(['balance' => 'Balance', 'equity' => 'Equity', 'unrealized' => 'Floating P&L', 'usedMargin' => 'Used margin', 'freeMargin' => 'Free margin', 'marginLevel' => 'Margin level'] as $k => $label)
        <div class="card !p-3"><div class="text-xs uppercase tracking-wide text-slate-500">{{ $label }}</div>
            <div class="text-lg font-bold" data-metric="{{ $k }}">{{ $k === 'marginLevel' ? ($metrics->marginLevel !== null ? Money::fmt($metrics->marginLevel).' %' : '—') : Money::fmt($metrics->$k) }}</div></div>
    @endforeach
</div>

<div class="grid gap-4 xl:grid-cols-[200px_1fr_320px]">
    {{-- Markets --}}
    <div class="card !p-0 overflow-hidden">
        <div class="border-b px-3 py-2 text-xs font-semibold uppercase tracking-wide text-slate-500">Markets</div>
        <ul id="markets">
            @foreach($instruments as $i)
                <li>
                    <a href="{{ route('trade.index', ['symbol' => $i->symbol]) }}" data-symbol="{{ $i->symbol }}" data-dp="{{ $i->price_precision }}"
                       class="flex items-center justify-between border-b border-slate-100 px-3 py-2 text-sm hover:bg-slate-50 {{ $i->symbol === $current->symbol ? 'bg-brand-50' : '' }}">
                        <span class="font-semibold">{{ $i->base }}<span class="text-slate-400">/USDT</span></span>
                        <span class="text-right"><span class="block font-mono" data-mid>—</span><span class="block text-xs" data-chg></span></span>
                    </a>
                </li>
            @endforeach
        </ul>
    </div>

    {{-- Chart --}}
    <div class="card !p-0 overflow-hidden"><div id="tv_chart" style="height: 520px"></div></div>

    {{-- Order ticket --}}
    <div class="card">
        <h2 class="card-title">New order · {{ $current->base }}/USDT</h2>
        <form id="order-form" class="space-y-3" autocomplete="off">
            <input type="hidden" name="symbol" value="{{ $current->symbol }}">
            <div class="grid grid-cols-2 gap-2" role="radiogroup" aria-label="Side">
                <label class="cursor-pointer"><input type="radio" name="side" value="sell" class="peer sr-only">
                    <div class="rounded-lg border-2 border-transparent bg-red-50 p-2 text-center peer-checked:border-down">
                        <div class="text-xs font-semibold text-down">SELL</div><div class="font-mono text-sm" id="px-bid">—</div></div></label>
                <label class="cursor-pointer"><input type="radio" name="side" value="buy" class="peer sr-only" checked>
                    <div class="rounded-lg border-2 border-transparent bg-green-50 p-2 text-center peer-checked:border-up">
                        <div class="text-xs font-semibold text-up">BUY</div><div class="font-mono text-sm" id="px-ask">—</div></div></label>
            </div>
            <div class="grid grid-cols-2 gap-2">
                <div><label class="label">Type</label>
                    <select name="type" class="input"><option value="market">Market</option><option value="limit">Limit</option></select></div>
                <div><label class="label">Leverage</label>
                    <select name="leverage" class="input">
                        @foreach(collect([1, 2, 5, 10, 20, 50, 100, 200, 500])->filter(fn ($l) => $l <= $current->max_leverage) as $l)
                            <option value="{{ $l }}" @selected($l === min(10, $current->max_leverage))>{{ $l }}x</option>
                        @endforeach
                    </select></div>
            </div>
            <div><label class="label">Size ({{ $current->base }}) <span class="text-slate-400">min {{ $current->min_qty + 0 }}</span></label>
                <input name="quantity" inputmode="decimal" class="input" placeholder="{{ $current->min_qty + 0 }}" required></div>
            <div id="limit-row" class="hidden"><label class="label">Limit price</label><input name="limit_price" inputmode="decimal" class="input"></div>
            <div class="grid grid-cols-2 gap-2">
                <div><label class="label">Stop-loss</label><input name="stop_loss" inputmode="decimal" class="input" placeholder="optional"></div>
                <div><label class="label">Take-profit</label><input name="take_profit" inputmode="decimal" class="input" placeholder="optional"></div>
            </div>
            <div class="rounded-lg bg-slate-50 p-2 text-xs text-slate-600">
                Est. margin <strong id="est-margin">—</strong> USDT · est. fee <strong id="est-fee">—</strong> USDT
            </div>
            <button type="submit" class="btn-primary w-full" id="submit-btn">Place order</button>
            <p id="order-msg" class="hidden text-sm" role="alert"></p>
        </form>
    </div>
</div>

{{-- Positions --}}
<div class="card mt-4 overflow-x-auto">
    <h2 class="card-title">Open positions</h2>
    <table class="tbl" id="positions-table">
        <thead><tr><th>Symbol</th><th>Side</th><th class="text-right">Size</th><th class="text-right">Entry</th><th class="text-right">Mark</th><th class="text-right">SL</th><th class="text-right">TP</th><th class="text-right">Margin</th><th class="text-right">P&amp;L</th><th></th></tr></thead>
        <tbody>
        @foreach($positions as $p)
            <tr data-id="{{ $p['id'] }}">
                <td>{{ $p['symbol'] }}</td><td class="{{ $p['side'] === 'buy' ? 'pos' : 'neg' }} font-semibold">{{ strtoupper($p['side']) }} {{ $p['leverage'] }}x</td>
                <td class="text-right">{{ Money::fmt($p['quantity'], 4) }}</td><td class="text-right">{{ Money::fmt($p['entry_price']) }}</td>
                <td class="text-right">{{ Money::fmt($p['mark_price']) }}</td><td class="text-right">{{ $p['stop_loss'] ? Money::fmt($p['stop_loss']) : '—' }}</td>
                <td class="text-right">{{ $p['take_profit'] ? Money::fmt($p['take_profit']) : '—' }}</td><td class="text-right">{{ Money::fmt($p['margin']) }}</td>
                <td class="text-right font-semibold {{ Money::isNegative($p['pnl']) ? 'neg' : 'pos' }}">{{ Money::fmt($p['pnl']) }}</td>
                <td class="text-right"><button class="btn-secondary btn-sm" data-close="{{ $p['id'] }}">Close</button></td>
            </tr>
        @endforeach
        </tbody>
    </table>
    <p id="no-positions" class="{{ $positions ? 'hidden' : '' }} py-3 text-sm text-slate-400">No open positions.</p>
</div>

<div class="mt-4 grid gap-4 lg:grid-cols-2">
    <div class="card overflow-x-auto">
        <h2 class="card-title">Pending orders</h2>
        <table class="tbl"><tbody>
            @forelse($orders as $o)
                <tr><td>{{ $o->instrument->symbol }}</td><td class="{{ $o->side->value === 'buy' ? 'pos' : 'neg' }}">{{ strtoupper($o->side->value) }}</td>
                    <td class="text-right">{{ Money::fmt((string) $o->quantity, 4) }} @ {{ Money::fmt((string) $o->limit_price) }}</td>
                    <td class="text-right"><button class="btn-secondary btn-sm" data-cancel="{{ $o->id }}">Cancel</button></td></tr>
            @empty<tr><td class="text-slate-400">No pending orders.</td></tr>@endforelse
        </tbody></table>
    </div>
    <div class="card overflow-x-auto">
        <h2 class="card-title">Recent closed trades</h2>
        <table class="tbl"><tbody>
            @forelse($history as $t)
                <tr><td>{{ $t->instrument->symbol }}</td><td class="{{ $t->side->value === 'buy' ? 'pos' : 'neg' }}">{{ strtoupper($t->side->value) }}</td>
                    <td class="text-xs text-slate-500">{{ $t->close_reason?->label() }}</td>
                    <td class="text-right font-semibold {{ Money::isNegative($t->netPnl()) ? 'neg' : 'pos' }}">{{ Money::fmt($t->netPnl()) }}</td></tr>
            @empty<tr><td class="text-slate-400">No closed trades yet.</td></tr>@endforelse
        </tbody></table>
    </div>
</div>

<script>
    window.TRADE = @json([
        'symbol' => $current->symbol, 'tvSymbol' => $current->tv_symbol, 'dp' => $current->price_precision, 'qtyDp' => $current->qty_precision,
        'userId' => auth()->id(), 'quotes' => $quotes,
        'feeRate' => \App\Services\Settings::string('trading.fee_rate'),
        'urls' => ['orders' => route('trade.orders.store'), 'account' => route('trade.account'), 'positionsBase' => url('/trade/positions'), 'ordersBase' => url('/trade/orders')],
    ]);
</script>
@endif
@endsection