@extends('layouts.app')
@section('title', 'Trades')
@section('content')
<h1>Trade history</h1>
<p class="label">Updates every {{ $pollSeconds }} seconds</p>
<div class="card">
    <table id="trades-table">
        <thead><tr><th>Pair</th><th>Side</th><th>Lot</th><th>PnL</th><th>Entry</th><th>Exit</th></tr></thead>
        <tbody></tbody>
    </table>
</div>
@endsection
@push('scripts')
<script>
const pollMs = {{ $pollSeconds * 1000 }};
async function load() {
    const r = await fetch('/api/trades/summary', { credentials: 'same-origin', headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' } });
    if (!r.ok) return;
    const j = await r.json();
    const tb = document.querySelector('#trades-table tbody');
    tb.innerHTML = (j.trades || []).map(t => `<tr>
        <td>${t.symbol||'-'}</td><td>${t.side||'-'}</td><td>${t.lot}</td>
        <td>${(t.unrealized_pnl ?? t.pnl).toFixed(2)}</td>
        <td>${t.entry_at ? new Date(t.entry_at).toLocaleString() : '-'}</td>
        <td>${t.exit_at ? new Date(t.exit_at).toLocaleString() : '-'}</td>
    </tr>`).join('');
}
load();
setInterval(load, pollMs);
</script>
@endpush