@php use App\Support\SymbolPresentation; @endphp
@extends('portal.layouts.master')
@section('title', 'Trade History')
@section('page-title', 'Trade History')

@section('extra-css')
/* ── Stat cards ── */
.hs-cards {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: .75rem;
    margin-bottom: 1rem;
}
@media (max-width: 1200px) { .hs-cards { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .hs-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .hs-cards { grid-template-columns: 1fr; } }

.hs-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 10px; padding: .85rem 1rem .6rem;
    display: flex; flex-direction: column; min-height: 108px;
    position: relative; overflow: hidden;
}
.hs-card::before {
    content: ''; position: absolute; inset: 0;
    background: var(--hc-grad, transparent);
    opacity: .18; pointer-events: none; border-radius: 10px;
}
.hs-card--blue   { --hc-grad: linear-gradient(135deg,#3b82f6,transparent 65%); }
.hs-card--green  { --hc-grad: linear-gradient(135deg,#0ecb81,transparent 65%); }
.hs-card--red    { --hc-grad: linear-gradient(135deg,#f6465d,transparent 65%); }
.hs-card--purple { --hc-grad: linear-gradient(135deg,#8b5cf6,transparent 65%); }
.hs-card--amber  { --hc-grad: linear-gradient(135deg,#f59e0b,transparent 65%); }
.hs-card--cyan   { --hc-grad: linear-gradient(135deg,#06b6d4,transparent 65%); }

.hs-card .hc-label {
    font-size: .6rem; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--text-secondary); margin-bottom: .25rem;
}
.hs-card .hc-value {
    font-size: 1.65rem; font-weight: 800; line-height: 1;
    letter-spacing: -.02em; color: var(--text-primary); margin-bottom: auto;
}
.hs-card--green  .hc-value { color: #0ecb81; }
.hs-card--red    .hc-value { color: #f6465d; }
.hs-card--amber  .hc-value { color: #f59e0b; }
.hs-card--purple .hc-value { color: #a78bfa; }
.hs-card--cyan   .hc-value { color: #22d3ee; }

.hc-chart { margin-top: .5rem; height: 38px; overflow: hidden; }
.hc-chart svg { width: 100%; height: 100%; display: block; }

/* donut gauge */
.hc-gauge { display: flex; align-items: center; justify-content: flex-end; margin-top: .3rem; }
.hc-gauge svg { width: 52px; height: 52px; }
.hc-gauge-track { fill: none; stroke: rgba(245,158,11,.2); stroke-width: 6; }
.hc-gauge-fill  {
    fill: none; stroke: #f59e0b; stroke-width: 6; stroke-linecap: round;
    transform: rotate(-90deg); transform-origin: 50% 50%;
}
.hc-gauge-num { font-size: .85rem; font-weight: 800; fill: #f59e0b; }

/* ── Filters ── */
.hs-filters {
    display: flex; gap: .65rem; align-items: center;
    flex-wrap: wrap; margin-bottom: 1rem;
}
.hs-filters .form-select,
.hs-filters .form-control {
    background: var(--bg-card) !important; border-color: var(--border) !important;
    color: var(--text-primary) !important; font-size: .82rem;
    padding: .4rem .7rem; border-radius: 7px; min-width: 0;
}
.hs-filters .form-select { max-width: 160px; }
.hs-filters .form-control { max-width: 150px; }
.hs-filters .form-control::placeholder { color: var(--text-muted); }

/* ── Table ── */
.hs-table-header {
    padding: .8rem 1rem;
    font-size: .72rem; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
}
.symbol-cell { display: flex; align-items: center; gap: .55rem; }
.symbol-mini-icon {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--bg-tertiary); display: flex;
    align-items: center; justify-content: center;
    font-size: .82rem; overflow: hidden; flex-shrink: 0;
}
.symbol-mini-icon img { width: 16px; height: 16px; object-fit: contain; border-radius: 50%; }

.badge-filled {
    display: inline-block; padding: .18rem .55rem; border-radius: 4px;
    font-size: .65rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    background: rgba(14,203,129,.15); color: #0ecb81; border: 1px solid rgba(14,203,129,.25);
}
.badge-buy {
    display: inline-block; padding: .22rem .6rem; border-radius: 5px;
    font-size: .7rem; font-weight: 700; background: rgba(14,203,129,.15);
    color: #0ecb81; border: 1px solid rgba(14,203,129,.25);
}
.badge-sell {
    display: inline-block; padding: .22rem .6rem; border-radius: 5px;
    font-size: .7rem; font-weight: 700; background: rgba(246,70,93,.15);
    color: #f6465d; border: 1px solid rgba(246,70,93,.25);
}
.badge-call, .badge-put, .badge-binary-status {
    display: inline-block; padding: .22rem .55rem; border-radius: 5px;
    font-size: .68rem; font-weight: 750; text-transform: uppercase;
}
.badge-call { color: #0ecb81; background: rgba(14,203,129,.14); border: 1px solid rgba(14,203,129,.24); }
.badge-put { color: #f6465d; background: rgba(246,70,93,.14); border: 1px solid rgba(246,70,93,.24); }
.badge-binary-status.open { color: #3b82f6; background: rgba(59,130,246,.13); }
.badge-binary-status.won { color: #0ecb81; background: rgba(14,203,129,.13); }
.badge-binary-status.lost { color: #f6465d; background: rgba(246,70,93,.13); }
.badge-binary-status.cancelled { color: var(--text-muted); background: rgba(132,142,156,.13); }
.badge-binary-status.manually_settled { color: #f59e0b; background: rgba(245,158,11,.13); }
.hs-history-section + .hs-history-section { margin-top: 1rem; }
.hs-history-note { margin: -.25rem 0 1rem; padding: .7rem .85rem; border: 1px solid var(--border); border-radius: 8px; background: rgba(59,130,246,.06); color: var(--text-secondary); font-size: .78rem; line-height: 1.5; }
.hs-tabs { display:flex; gap:.45rem; flex-wrap:wrap; margin:0 0 1rem; padding:.3rem; border:1px solid var(--border); border-radius:10px; background:var(--bg-card); }
.hs-tab { border:1px solid transparent; border-radius:7px; padding:.55rem .85rem; background:transparent; color:var(--text-secondary); font-size:.78rem; font-weight:700; cursor:pointer; transition:all .15s ease; }
.hs-tab:hover { color:var(--text-primary); background:rgba(59,130,246,.08); }
.hs-tab.is-active { color:var(--text-primary); background:rgba(111,78,210,.28); border-color:rgba(139,92,246,.55); }
.hs-history-pane { display:none; }
.hs-history-pane.is-active { display:block; }
@endsection

@section('content')

@php
    $gaugeR = 20;
    $gaugeCircum = 2 * M_PI * $gaugeR;
    $gaugeDash = $openPositions > 0 ? $gaugeCircum * 0.72 : 0;
@endphp

{{-- Stat cards --}}
<div class="hs-cards">

    {{-- 1. Total Trades --}}
    <div class="hs-card hs-card--blue">
        <div class="hc-label">Total Trades</div>
        <div class="hc-value">{{ $totalTrades }}</div>
        <div class="hc-chart">
            <svg viewBox="0 0 120 38" preserveAspectRatio="none">
                <defs>
                    <linearGradient id="hsBlue" x1="0" y1="0" x2="0" y2="1">
                        <stop offset="0%" stop-color="#3b82f6" stop-opacity=".35"/>
                        <stop offset="100%" stop-color="#3b82f6" stop-opacity="0"/>
                    </linearGradient>
                </defs>
                <path d="M0,32 C15,30 25,26 40,22 C55,18 65,14 80,10 C95,6 108,8 120,5 L120,38 L0,38 Z"
                      fill="url(#hsBlue)"/>
                <path d="M0,32 C15,30 25,26 40,22 C55,18 65,14 80,10 C95,6 108,8 120,5"
                      fill="none" stroke="#3b82f6" stroke-width="1.5" stroke-linecap="round"/>
            </svg>
        </div>
    </div>

    {{-- 2. Total Buys --}}
    <div class="hs-card hs-card--green">
        <div class="hc-label">Total Buys</div>
        <div class="hc-value">{{ $buyCount }}</div>
        <div class="hc-chart">
            <svg viewBox="0 0 120 38" preserveAspectRatio="none">
                <defs>
                    <linearGradient id="hsGreen" x1="0" y1="0" x2="0" y2="1">
                        <stop offset="0%" stop-color="#0ecb81" stop-opacity=".35"/>
                        <stop offset="100%" stop-color="#0ecb81" stop-opacity="0"/>
                    </linearGradient>
                </defs>
                <path d="M0,34 C15,32 30,28 50,22 C70,16 85,12 100,8 C110,5 116,4 120,3 L120,38 L0,38 Z"
                      fill="url(#hsGreen)"/>
                <path d="M0,34 C15,32 30,28 50,22 C70,16 85,12 100,8 C110,5 116,4 120,3"
                      fill="none" stroke="#0ecb81" stroke-width="1.5" stroke-linecap="round"/>
            </svg>
        </div>
    </div>

    {{-- 3. Total Sells --}}
    <div class="hs-card hs-card--red">
        <div class="hc-label">Total Sells</div>
        <div class="hc-value">{{ $sellCount }}</div>
        <div class="hc-chart">
            <svg viewBox="0 0 120 38" preserveAspectRatio="none">
                <defs>
                    <linearGradient id="hsRed" x1="0" y1="0" x2="0" y2="1">
                        <stop offset="0%" stop-color="#f6465d" stop-opacity=".25"/>
                        <stop offset="100%" stop-color="#f6465d" stop-opacity="0"/>
                    </linearGradient>
                </defs>
                @if($sellCount > 0)
                    <path d="M0,8 C15,10 30,16 50,22 C70,28 85,32 120,34 L120,38 L0,38 Z"
                          fill="url(#hsRed)"/>
                    <path d="M0,8 C15,10 30,16 50,22 C70,28 85,32 120,34"
                          fill="none" stroke="#f6465d" stroke-width="1.5" stroke-linecap="round"/>
                @else
                    {{-- flat line when no sells --}}
                    <line x1="0" y1="28" x2="120" y2="28" stroke="#f6465d55" stroke-width="1.5" stroke-dasharray="4 3"/>
                @endif
            </svg>
        </div>
    </div>

    {{-- 4. Binary Options --}}
    <div class="hs-card hs-card--cyan">
        <div class="hc-label">Binary Options</div>
        <div class="hc-value">{{ $binaryCount }}</div>
        <div class="hc-chart">
            <svg viewBox="0 0 120 38" preserveAspectRatio="none">
                <defs>
                    <linearGradient id="hsCyan" x1="0" y1="0" x2="0" y2="1">
                        <stop offset="0%" stop-color="#06b6d4" stop-opacity=".3"/>
                        <stop offset="100%" stop-color="#06b6d4" stop-opacity="0"/>
                    </linearGradient>
                </defs>
                @if($binaryCount > 0)
                    <path d="M0,31 C14,29 24,23 36,25 C49,27 61,16 73,18 C86,20 98,9 120,6 L120,38 L0,38 Z" fill="url(#hsCyan)"/>
                    <path d="M0,31 C14,29 24,23 36,25 C49,27 61,16 73,18 C86,20 98,9 120,6" fill="none" stroke="#06b6d4" stroke-width="1.5" stroke-linecap="round"/>
                @else
                    <line x1="0" y1="28" x2="120" y2="28" stroke="#06b6d455" stroke-width="1.5" stroke-dasharray="4 3"/>
                @endif
            </svg>
        </div>
    </div>

    {{-- 5. Total Volume --}}
    <div class="hs-card hs-card--purple">
        <div class="hc-label">Total Volume</div>
        <div class="hc-value">${{ number_format($totalVolume, 2) }}</div>
        <div class="hc-chart">
            <svg viewBox="0 0 120 38" preserveAspectRatio="none">
                @php $vbars = [6,10,8,14,10,18,14,20,16,24,18,28,20,26,22,30,24,28,26,32]; @endphp
                @foreach($vbars as $vi => $vh)
                    <rect x="{{ $vi * 6 }}" y="{{ 38 - $vh }}" width="4.5" height="{{ $vh }}"
                          fill="#8b5cf6" opacity="{{ 0.3 + ($vi / count($vbars)) * 0.7 }}" rx="1"/>
                @endforeach
            </svg>
        </div>
    </div>

    {{-- 6. Open Positions --}}
    <div class="hs-card hs-card--amber">
        <div class="hc-label">Open Positions</div>
        <div class="hc-value">{{ $openPositions }}</div>
        <div class="hc-gauge">
            <svg viewBox="0 0 48 48">
                <circle class="hc-gauge-track" cx="24" cy="24" r="{{ $gaugeR }}"/>
                <circle class="hc-gauge-fill" cx="24" cy="24" r="{{ $gaugeR }}"
                    stroke-dasharray="{{ round($gaugeDash, 2) }} {{ round($gaugeCircum, 2) }}"/>
                <text x="24" y="29" text-anchor="middle" class="hc-gauge-num">{{ $openPositions }}</text>
            </svg>
        </div>
    </div>

</div>

{{-- Filters --}}
<form method="GET" action="{{ route('portal.history') }}" class="hs-filters">
    <select name="symbol_id" class="form-select">
        <option value="">All Instruments</option>
        @foreach($symbols as $sym)
        <option value="{{ $sym->id }}" {{ request('symbol_id') == $sym->id ? 'selected' : '' }}>
            {{ $sym->name }}
        </option>
        @endforeach
    </select>

    <select name="side" class="form-select">
        <option value="">All Sides</option>
        <option value="buy"  {{ request('side') === 'buy'  ? 'selected' : '' }}>Buy</option>
        <option value="sell" {{ request('side') === 'sell' ? 'selected' : '' }}>Sell</option>
    </select>

    <select name="product" class="form-select">
        <option value="all" @selected(in_array($product, ['', 'all'], true))>All Products</option>
        <option value="asset" @selected($product === 'asset')>Asset Trading</option>
        <option value="leveraged" @selected($product === 'leveraged')>Leveraged Trading</option>
        <option value="binary" @selected($product === 'binary')>Binary Options</option>
        <option value="prediction" @selected($product === 'prediction')>Prediction Markets</option>
    </select>

    <input type="text" name="from" class="form-control" placeholder="dd/mm/yyyy"
           value="{{ request('from') }}"
           onfocus="this.type='date'" onblur="if(!this.value)this.type='text'">

    <input type="text" name="to" class="form-control" placeholder="dd/mm/yyyy"
           value="{{ request('to') }}"
           onfocus="this.type='date'" onblur="if(!this.value)this.type='text'">

    <button type="submit" class="btn btn-accent btn-sm" style="font-size:.82rem;padding:.42rem .85rem;border-radius:7px">
        Filter
    </button>

    @if(request()->hasAny(['symbol_id','side','product','from','to']))
    <a href="{{ route('portal.history') }}" class="btn btn-outline-dark-custom btn-sm"
       style="font-size:.82rem;padding:.42rem .85rem;border-radius:7px">Clear</a>
    @endif
</form>

<div class="hs-history-note" role="note">
    <strong>How to read this history:</strong> Market order means the trade was executed immediately at the current market quote.
    Entry price is the opening price; close price is the closing price; realized P&amp;L is the result after closing.
</div>

@php
    $historyTab = in_array($product, ['asset', 'leveraged', 'binary', 'prediction'], true) ? $product : 'all';
@endphp
<div class="hs-tabs" role="tablist" aria-label="Trade history products">
    <button type="button" class="hs-tab {{ $historyTab === 'all' ? 'is-active' : '' }}" role="tab" aria-selected="{{ $historyTab === 'all' ? 'true' : 'false' }}" data-history-tab="all">All Trades ({{ $allCounts->sum() }})</button>
    <button type="button" class="hs-tab {{ $historyTab === 'leveraged' ? 'is-active' : '' }}" role="tab" aria-selected="{{ $historyTab === 'leveraged' ? 'true' : 'false' }}" data-history-tab="leveraged">Leveraged ({{ $allCounts->get('leveraged', 0) }})</button>
    <button type="button" class="hs-tab {{ $historyTab === 'asset' ? 'is-active' : '' }}" role="tab" aria-selected="{{ $historyTab === 'asset' ? 'true' : 'false' }}" data-history-tab="asset">Asset ({{ $allCounts->get('asset', 0) }})</button>
    <button type="button" class="hs-tab {{ $historyTab === 'binary' ? 'is-active' : '' }}" role="tab" aria-selected="{{ $historyTab === 'binary' ? 'true' : 'false' }}" data-history-tab="binary">Binary ({{ $allCounts->get('binary', 0) }})</button>
    <button type="button" class="hs-tab {{ $historyTab === 'prediction' ? 'is-active' : '' }}" role="tab" aria-selected="{{ $historyTab === 'prediction' ? 'true' : 'false' }}" data-history-tab="prediction">Prediction ({{ $allCounts->get('prediction', 0) }})</button>
</div>

<div class="dark-card hs-history-section hs-history-pane {{ $historyTab === 'all' ? 'is-active' : '' }}" data-history-pane="all">
    <div class="hs-table-header">All Trades</div>
    <div class="card-body p-0">@include('shared.trade-history-timeline', ['history' => $allHistory, 'dark' => true])</div>
</div>

<div class="dark-card hs-history-section hs-history-pane {{ $historyTab === 'prediction' ? 'is-active' : '' }}" data-history-pane="prediction">
    <div class="hs-table-header">Prediction Market History</div>
    <div class="card-body p-0">@include('shared.trade-history-timeline', ['history' => $predictionHistory, 'dark' => true])</div>
</div>

{{-- Trades table --}}
<div class="dark-card hs-history-section hs-history-pane {{ $historyTab === 'asset' ? 'is-active' : '' }}" data-history-pane="asset">
    <div class="hs-table-header">Market Trade History</div>
    <div class="card-body p-0">
        @if($trades->isEmpty())
            <div class="p-5 text-center" style="color:var(--text-muted)">
                <i class="fas fa-clock-rotate-left fa-2x mb-3" style="opacity:.25"></i>
                <div>No trades found.</div>
            </div>
        @else
        <div class="table-responsive">
            <table class="dark-table w-100">
                <thead>
                    <tr>
                        <th>Time</th>
                        <th>Type</th>
                        <th>Instrument</th>
                        <th>Order type</th>
                        <th class="text-end">Execution price</th>
                        <th class="text-end">Quantity</th>
                        <th class="text-end">Fee</th>
                        <th class="text-end">USD value</th>
                        <th>Status</th>
                        <th class="text-end">P&amp;L</th>
                    </tr>
                </thead>
                <tbody>
                @foreach($trades as $trade)
                @php
                    [$icn, $icColor] = SymbolPresentation::baseIconPair($trade->symbol);
                    $icIsImg = str_starts_with($icn, 'img:');
                    $pair = SymbolPresentation::pairLabel($trade->symbol);
                @endphp
                <tr>
                    <td style="color:var(--text-secondary);white-space:nowrap;font-size:.8rem">
                        {{ $trade->traded_at->format('M j, Y H:i:s') }}
                    </td>
                    <td>
                        <span class="badge-{{ $trade->side }}">{{ strtoupper($trade->side) }}</span>
                    </td>
                    <td>
                        <div class="symbol-cell">
                            <div class="symbol-mini-icon" style="background:{{ $icn ? $icColor.'22' : 'var(--bg-tertiary)' }}">
                                @if($icIsImg)
                                    <img src="{{ substr($icn,4) }}" alt=""
                                         onerror="this.style.display='none';this.nextElementSibling.style.display='block'">
                                    <span style="display:none;font-size:.52rem;font-weight:700;color:{{ $icColor }}">
                                        {{ strtoupper(substr($trade->symbol->name??'?',0,2)) }}
                                    </span>
                                @elseif($icn)
                                    <i class="{{ $icn }}" style="color:{{ $icColor }};font-size:.78rem"></i>
                                @else
                                    <span style="font-size:.52rem;font-weight:700;color:var(--text-secondary)">
                                        {{ strtoupper(substr($trade->symbol->name??'?',0,2)) }}
                                    </span>
                                @endif
                            </div>
                            <span style="font-weight:600;font-size:.83rem">{{ $pair }}</span>
                        </div>
                    </td>
                    <td style="font-size:.82rem;color:var(--text-secondary)" title="Executed immediately at the latest available market price.">Market order</td>
                    <td class="text-end" style="font-variant-numeric:tabular-nums;font-size:.83rem">
                        <span style="font-size:.68rem;color:var(--text-muted)">{{ $trade->side === 'buy' ? 'Entry' : 'Close' }}</span><br>
                        {{ number_format($trade->price, $trade->symbol->decimal_places ?? 2) }}
                    </td>
                    <td class="text-end" style="font-variant-numeric:tabular-nums;font-size:.83rem">
                        {{ rtrim(rtrim(number_format((float) $trade->quantity, 8), '0'), '.') }}
                    </td>
                    <td class="text-end" style="font-variant-numeric:tabular-nums;font-size:.83rem">
                        USD {{ number_format((float) $trade->fee, 2) }}
                    </td>
                    <td class="text-end fw-semibold" style="font-variant-numeric:tabular-nums;font-size:.83rem">
                        {{ $trade->currency ?: 'USD' }} {{ number_format($trade->total_cost, 2) }}
                    </td>
                    <td><span class="badge-filled">Filled</span></td>
                    @php $realizedPnl = $trade->side === 'sell' && $trade->realized_pnl !== null ? (float) $trade->realized_pnl : null; @endphp
                    <td class="text-end" style="font-weight:700;color:{{ $realizedPnl === null || abs($realizedPnl) < 0.00000001 ? 'var(--text-muted)' : ($realizedPnl > 0 ? '#0ecb81' : '#f6465d') }};font-size:.82rem">
                        @if($realizedPnl === null) —
                        @else {{ $realizedPnl > 0 ? '+' : ($realizedPnl < 0 ? '-' : '') }}{{ $trade->currency }} {{ number_format(abs($realizedPnl), 2) }}
                        @endif
                    </td>
                </tr>
                @endforeach
                </tbody>
            </table>
        </div>

        @if($trades->hasPages())
        <div class="p-3 d-flex justify-content-center">
            {{ $trades->withQueryString()->links('pagination::bootstrap-5') }}
        </div>
        @endif
        @endif
    </div>
</div>

{{-- Leveraged-position history --}}
<div class="dark-card hs-history-section hs-history-pane {{ $historyTab === 'leveraged' ? 'is-active' : '' }}" data-history-pane="leveraged">
    <div class="hs-table-header d-flex align-items-center justify-content-between"><span>Leveraged Trading History</span><span style="font-size:.68rem;color:var(--text-muted);letter-spacing:0;text-transform:none">{{ $leveragedCount }} position{{ $leveragedCount === 1 ? '' : 's' }}</span></div>
    <div class="card-body p-0">
        @if($leveragedHistory->isEmpty())
            <div class="p-5 text-center" style="color:var(--text-muted)"><i class="fas fa-bolt fa-2x mb-3" style="opacity:.25"></i><div>No leveraged positions found.</div></div>
        @else
        <div class="table-responsive"><table class="dark-table w-100"><thead><tr>
            <th>Opened</th><th>Closed</th><th>Instrument</th><th>Direction</th><th class="text-end">Leverage</th><th class="text-end">Margin</th><th class="text-end">Exposure</th><th class="text-end">Entry price</th><th class="text-end">Close price</th><th>Exit reason</th><th>Status</th><th class="text-end">Realized P&amp;L</th>
        </tr></thead><tbody>
        @foreach($leveragedHistory as $position)
        @php [$licon, $lcolor] = SymbolPresentation::baseIconPair($position->symbol); $ldecimals = $position->symbol->decimal_places ?? 2; @endphp
        <tr>
            <td style="white-space:nowrap;font-size:.78rem;color:var(--text-secondary)">{{ optional($position->opened_at)->format('M j, Y H:i:s') ?: '—' }}</td>
            <td style="white-space:nowrap;font-size:.78rem;color:var(--text-secondary)">{{ optional($position->closed_at)->format('M j, Y H:i:s') ?: '—' }}</td>
            <td><div class="symbol-cell"><div class="symbol-mini-icon" style="background:{{ $lcolor }}22"><i class="{{ $licon }}" style="color:{{ $lcolor }};font-size:.78rem"></i></div><span style="font-weight:600;font-size:.83rem">{{ $position->symbol->name ?? 'Unknown asset' }}</span></div></td>
            <td><span class="badge-{{ $position->direction === 'up' ? 'buy' : 'sell' }}">{{ strtoupper($position->direction) }}</span></td>
            <td class="text-end">{{ $position->leverage }}×</td>
            <td class="text-end">USD {{ number_format($position->margin, 2) }}</td>
            <td class="text-end">USD {{ number_format($position->exposure, 2) }}</td>
            <td class="text-end">{{ number_format($position->entry_price, $ldecimals) }}</td>
            <td class="text-end">{{ $position->close_price !== null ? number_format($position->close_price, $ldecimals) : '—' }}</td>
            <td>{{ ['manual' => 'Manual close', 'stop_loss' => 'Stop Loss', 'take_profit' => 'Take Profit', 'liquidation' => 'Liquidated', 'liquidated' => 'Liquidated'][$position->close_reason] ?? ucfirst(str_replace('_', ' ', $position->close_reason ?: '—')) }}</td>
            <td><span class="badge-filled">{{ ucfirst($position->status) }}</span></td>
            <td class="text-end" style="color:{{ (float) $position->realized_pnl >= 0 ? '#0ecb81' : '#f6465d' }}">{{ $position->realized_pnl === null ? '—' : (($position->realized_pnl >= 0 ? '+' : '-') . 'USD ' . number_format(abs($position->realized_pnl), 2)) }}</td>
        </tr>
        @endforeach
        </tbody></table></div>
        @if($leveragedHistory->hasPages())<div class="p-3 d-flex justify-content-center">{{ $leveragedHistory->withQueryString()->links('pagination::bootstrap-5') }}</div>@endif
        @endif
    </div>
</div>

{{-- Binary-options history is a separate data source from standard market trades. --}}
<div class="dark-card hs-history-section hs-history-pane {{ $historyTab === 'binary' ? 'is-active' : '' }}" data-history-pane="binary">
    <div class="hs-table-header d-flex align-items-center justify-content-between">
        <span>Binary Options History</span>
        <span style="font-size:.68rem;color:var(--text-muted);letter-spacing:0;text-transform:none">{{ $binaryOptions->total() }} trade{{ $binaryOptions->total() === 1 ? '' : 's' }}</span>
    </div>
    <div class="card-body p-0">
        @if($binaryOptions->isEmpty())
            <div class="p-5 text-center" style="color:var(--text-muted)">
                <i class="fas fa-chart-bar fa-2x mb-3" style="opacity:.25"></i>
                <div>No binary-option trades found.</div>
            </div>
        @else
        <div class="table-responsive">
            <table class="dark-table w-100">
                <thead>
                    <tr>
                        <th>Time</th>
                        <th>Instrument</th>
                        <th>Direction</th>
                        <th class="text-end">Stake</th>
                        <th class="text-end">Strike</th>
                        <th class="text-end">Close price</th>
                        <th>Status</th>
                        <th class="text-end">P&amp;L</th>
                    </tr>
                </thead>
                <tbody>
                @foreach($binaryOptions as $option)
                @php
                    [$binaryIcon, $binaryColor] = SymbolPresentation::baseIconPair($option->symbol);
                    $binaryIconIsImg = str_starts_with($binaryIcon, 'img:');
                    $binaryDecimals = ($option->symbol->decimal_places ?? 2);
                    $binaryPnl = $option->status === 'won' || ($option->status === 'manually_settled' && (float) $option->profit > 0)
                        ? (float) $option->profit
                        : ($option->status === 'lost' ? -(float) $option->stake : null);
                @endphp
                <tr>
                    <td style="color:var(--text-secondary);white-space:nowrap;font-size:.8rem">
                        {{ $option->created_at->format('M j, Y H:i:s') }}
                    </td>
                    <td>
                        <div class="symbol-cell">
                            <div class="symbol-mini-icon" style="background:{{ $binaryIcon ? $binaryColor.'22' : 'var(--bg-tertiary)' }}">
                                @if($binaryIconIsImg)
                                    <img src="{{ substr($binaryIcon,4) }}" alt=""
                                         onerror="this.style.display='none';this.nextElementSibling.style.display='block'">
                                    <span style="display:none;font-size:.52rem;font-weight:700;color:{{ $binaryColor }}">{{ strtoupper(substr($option->symbol->name ?? '?',0,2)) }}</span>
                                @elseif($binaryIcon)
                                    <i class="{{ $binaryIcon }}" style="color:{{ $binaryColor }};font-size:.78rem"></i>
                                @else
                                    <span style="font-size:.52rem;font-weight:700">{{ strtoupper(substr($option->symbol->name ?? '?',0,2)) }}</span>
                                @endif
                            </div>
                            <span style="font-weight:600;font-size:.83rem">{{ $option->symbol->name ?? 'Unknown asset' }}</span>
                        </div>
                    </td>
                    <td><span class="badge-{{ $option->direction }}">{{ strtoupper($option->direction) }}</span></td>
                    <td class="text-end fw-semibold">{{ $option->currency }} {{ number_format($option->stake, 2) }}</td>
                    <td class="text-end">{{ number_format($option->strike_price, $binaryDecimals) }}</td>
                    <td class="text-end">{{ $option->close_price !== null ? number_format($option->close_price, $binaryDecimals) : '—' }}</td>
                    <td><span class="badge-binary-status {{ $option->status }}">{{ str_replace('_', ' ', $option->status) }}</span></td>
                    <td class="text-end" style="font-weight:700;color:{{ $binaryPnl === null ? 'var(--text-muted)' : ($binaryPnl >= 0 ? '#0ecb81' : '#f6465d') }}">
                        @if($binaryPnl === null) —
                        @else {{ $binaryPnl >= 0 ? '+' : '-' }}{{ $option->currency }} {{ number_format(abs($binaryPnl), 2) }}
                        @endif
                    </td>
                </tr>
                @endforeach
                </tbody>
            </table>
        </div>

        @if($binaryOptions->hasPages())
        <div class="p-3 d-flex justify-content-center">
            {{ $binaryOptions->withQueryString()->links('pagination::bootstrap-5') }}
        </div>
        @endif
        @endif
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const tabs = document.querySelectorAll('[data-history-tab]');
    const panes = document.querySelectorAll('[data-history-pane]');
    tabs.forEach(function (tab) {
        tab.addEventListener('click', function () {
            const target = tab.dataset.historyTab;
            tabs.forEach(function (item) {
                const active = item === tab;
                item.classList.toggle('is-active', active);
                item.setAttribute('aria-selected', active ? 'true' : 'false');
            });
            panes.forEach(function (pane) {
                pane.classList.toggle('is-active', pane.dataset.historyPane === target);
            });
        });
    });
});
</script>
@endpush

@endsection