@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(5, 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 .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; }

.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);
}
@endsection

@section('content')

@php
    $totalTrades = $trades->total();
    $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. 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>

    {{-- 5. 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>

    <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','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>

{{-- Trades table --}}
<div class="dark-card">
    <div class="hs-table-header">Recent 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>Action</th>
                        <th class="text-end">Price</th>
                        <th class="text-end">Volume</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)">Market</td>
                    <td class="text-end" style="font-variant-numeric:tabular-nums;font-size:.83rem">
                        {{ number_format($trade->price, $trade->symbol->decimal_places ?? 2) }}
                    </td>
                    <td class="text-end fw-semibold" style="font-variant-numeric:tabular-nums;font-size:.83rem">
                        ${{ number_format($trade->total_cost, 2) }}
                    </td>
                    <td><span class="badge-filled">Filled</span></td>
                    <td class="text-end" style="color:var(--text-muted);font-size:.82rem">—</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>

@endsection