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

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

.pf-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 10px; padding: 1rem 1.1rem .65rem;
    display: flex; flex-direction: column;
    min-height: 120px; position: relative; overflow: hidden;
}
.pf-card::before {
    content: ''; position: absolute; inset: 0;
    background: var(--pc-grad, transparent);
    opacity: .18; pointer-events: none; border-radius: 10px;
}
.pf-card--blue   { --pc-grad: linear-gradient(135deg,#3b82f6,transparent 65%); }
.pf-card--teal   { --pc-grad: linear-gradient(135deg,#0d9488,transparent 65%); }
.pf-card--green  { --pc-grad: linear-gradient(135deg,#0ecb81,transparent 65%); }
.pf-card--purple { --pc-grad: linear-gradient(135deg,#8b5cf6,transparent 65%); }
.pf-card--amber  { --pc-grad: linear-gradient(135deg,#f59e0b,transparent 65%); }
.pf-card--cyan   { --pc-grad: linear-gradient(135deg,#06b6d4,transparent 65%); }
.pf-position-summary { display:flex; align-items:center; gap:1.25rem; flex-wrap:nowrap; white-space:nowrap; overflow-x:auto; padding:.75rem .85rem; font-size:.78rem; color:var(--text-secondary); }
.pf-position-summary span { display:inline-flex; align-items:center; gap:.28rem; }
.pf-position-summary strong { color:var(--text-muted); font-weight:500; }
.pf-position-summary b { color:var(--text-primary); font-weight:600; font-variant-numeric:tabular-nums; }
@media (max-width: 768px) { .pf-position-summary { gap:.85rem; } }

.pf-card .pc-label {
    font-size: .6rem; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--text-secondary); margin-bottom: .3rem;
}
.pf-card .pc-value {
    font-size: 1.75rem; font-weight: 800; line-height: 1;
    letter-spacing: -.02em; color: var(--text-primary); margin-bottom: .1rem;
}
.pf-card--green .pc-value { color: #0ecb81; }
.pf-card--purple .pc-value { color: #a78bfa; }
.pf-card--amber .pc-value { color: #fbbf24; }
.pf-card--cyan .pc-value { color: #22d3ee; }
.pf-card .pc-sub {
    font-size: .68rem; color: var(--text-muted); margin-bottom: auto;
}
.pf-card .pc-sub.profit { color: #0ecb81; }
.pf-card .pc-sub.loss   { color: #f6465d; }
.pc-latest { display:flex; flex-direction:column; justify-content:center; flex:1; min-width:0; }
.pc-latest-name { color:var(--text-primary); font-size:1rem; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pc-latest-meta { color:var(--text-secondary); font-size:.68rem; margin-top:.25rem; }
.pc-latest-amount { color:#22d3ee; font-size:.82rem; font-weight:700; margin-top:.25rem; }

/* mini charts */
.pc-chart { margin-top: .6rem; height: 42px; overflow: hidden; }
.pc-chart svg { width: 100%; height: 100%; display: block; }

/* donut gauge */
.pc-gauge { display: flex; align-items: center; justify-content: center; flex: 1; padding: .2rem 0; }
.pc-gauge svg { width: 68px; height: 68px; }
.pc-gauge-track { fill: none; stroke: rgba(139,92,246,.2); stroke-width: 7; }
.pc-gauge-fill  {
    fill: none; stroke: #8b5cf6; stroke-width: 7; stroke-linecap: round;
    transform: rotate(-90deg); transform-origin: 50% 50%;
}
.pc-gauge-num { font-size: 1.1rem; font-weight: 800; fill: #a78bfa; }

/* table */
.symbol-cell { display: flex; align-items: center; gap: .6rem; }
.symbol-icon {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--bg-tertiary); display: flex;
    align-items: center; justify-content: center;
    font-size: .85rem; color: var(--text-secondary); font-weight: 600;
    flex-shrink: 0; overflow: hidden;
}
.symbol-icon img { width: 20px; height: 20px; object-fit: contain; border-radius: 50%; }
.cat-badge {
    font-size: .62rem; font-weight: 600; padding: .18rem .5rem;
    border-radius: 4px; text-transform: uppercase; letter-spacing: .03em;
}
.cat-crypto      { background: rgba(245,158,11,.15); color: #f59e0b; }
.cat-forex       { background: rgba(14,203,129,.15);  color: #0ecb81; }
.cat-stocks      { background: rgba(59,130,246,.15);  color: #3b82f6; }
.cat-commodities { background: rgba(168,85,247,.15);  color: #a855f7; }
.pf-breakdown { display:flex; gap:1rem; flex-wrap:wrap; margin:-.25rem 0 1rem; padding:.75rem 1rem; background:var(--bg-card); border:1px solid var(--border); border-radius:8px; }
.pf-breakdown-item { min-width:160px; }
.pf-breakdown-item span { display:block; color:var(--text-muted); font-size:.67rem; text-transform:uppercase; letter-spacing:.05em; }
.pf-breakdown-item strong { font-size:.92rem; }
.pf-warning { margin-bottom:1rem; padding:.65rem .85rem; border:1px solid rgba(245,158,11,.35); border-radius:7px; background:rgba(245,158,11,.08); color:#fbbf24; font-size:.77rem; }
.pf-section { margin-top:1rem; }
.pf-status { font-size:.64rem; padding:.14rem .4rem; border-radius:4px; text-transform:uppercase; }
.pf-status.current { color:#0ecb81; background:rgba(14,203,129,.12); }
.pf-status.delayed,.pf-status.unavailable { color:#f59e0b; background:rgba(245,158,11,.12); }
.pf-position-sections { display:flex; flex-direction:column; }
#portfolioLeveragedPositions { order:1; }
#portfolioPositionSummary { order:2; }
#portfolioPredictionPositions { order:3; }
#portfolioBinaryPositions { order:4; }
#portfolioMarketPositions { order:5; margin-top:1rem; }

/* close-position toast */
.cp-toast {
    position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999;
    display: flex; align-items: flex-start; gap: .75rem;
    min-width: 280px; max-width: 420px;
    padding: .9rem 1rem; border-radius: 10px;
    background: #0f1923; border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 8px 32px rgba(0,0,0,.45);
    font-size: .84rem; line-height: 1.45;
    animation: cpToastIn .25s ease;
}
.cp-toast.success { border-left: 3px solid #0ecb81; }
.cp-toast.error   { border-left: 3px solid #f6465d; }
.cp-toast-icon    { font-size: 1.1rem; flex-shrink: 0; margin-top: .05rem; }
.cp-toast.success .cp-toast-icon { color: #0ecb81; }
.cp-toast.error   .cp-toast-icon { color: #f6465d; }
.cp-toast-close   { margin-left: auto; background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 0 0 0 .5rem; flex-shrink: 0; }
.partial-close-modal { position:fixed; inset:0; z-index:10000; display:grid; place-items:center; padding:1rem; background:rgba(0,0,0,.65); }
.partial-close-modal[hidden] { display:none; }
.partial-close-dialog { position:relative; width:min(420px,100%); padding:1.25rem; border:1px solid var(--border); border-radius:12px; background:var(--bg-card); box-shadow:0 18px 60px rgba(0,0,0,.5); }
.partial-close-dialog h3 { margin:0 0 .35rem; font-size:1.05rem; }
.partial-close-x { position:absolute; top:.65rem; right:.75rem; border:0; background:none; color:var(--text-muted); font-size:1.5rem; cursor:pointer; }
.partial-close-available { margin-top:.45rem; color:var(--text-muted); font-size:.78rem; }
.partial-close-error { margin-top:.65rem; color:#f6465d; font-size:.8rem; }
.partial-close-actions { display:flex; justify-content:flex-end; gap:.5rem; margin-top:1rem; }
@keyframes cpToastIn { from { opacity:0; transform: translateY(12px); } to { opacity:1; transform: translateY(0); } }
@endsection

@section('content')

@php
    $mainCurrency = $valuation['main_currency'];
    $posCount = $valuation['counts']['total'];
    $totalPnl = $valuation['total_pnl'];
    $totalPnlPct = $valuation['total_pnl_pct'];
    $pnlSign  = $totalPnl >= 0 ? '+' : '';
    $pnlColor = $totalPnl >= 0 ? '#0ecb81' : '#f6465d';
    /* gauge — fill circumference based on capped position count (max visual 10) */
    $gaugeR       = 24;
    $gaugeCircum  = 2 * M_PI * $gaugeR;
    $gaugeFill    = $posCount > 0 ? min(1, $posCount / max(1, $posCount)) : 0; // always full when >0
    $gaugeDash    = $gaugeCircum * 0.75; // fixed 75% arc to look nice when count >=1
    if ($posCount === 0) { $gaugeDash = 0; }
@endphp

<div class="pf-cards">

    {{-- 1. Net Funded --}}
    <div class="pf-card pf-card--blue">
        <div class="pc-label">Net Funded</div>
        <div class="pc-value">{{ $mainCurrency }} {{ number_format($valuation['net_funded'], 2) }}</div>
        <div class="pc-sub">Approved deposits minus withdrawals</div>
        <div class="pc-chart">
            <svg viewBox="0 0 160 42" preserveAspectRatio="none">
                {{-- Dotted sparkline --}}
                @php $dotPts = [38,35,34,36,33,30,28,31,26,24,22,25,20,18,16,19,14,12,10,8]; @endphp
                @foreach($dotPts as $di => $dv)
                    <circle cx="{{ $di * 8 + 4 }}" cy="{{ $dv }}" r="1.8"
                        fill="#3b82f6" opacity="{{ 0.3 + ($di / count($dotPts)) * 0.7 }}"/>
                @endforeach
                <path d="M4,38 C20,36 40,34 60,30 C80,26 100,22 120,16 C140,10 152,8 156,8"
                      fill="none" stroke="#3b82f680" stroke-width="1" stroke-dasharray="3 3"/>
            </svg>
        </div>
    </div>

    {{-- 2. Portfolio Equity --}}
    <div class="pf-card pf-card--teal">
        <div class="pc-label">Portfolio Equity</div>
        <div class="pc-value">{{ $mainCurrency }} {{ number_format($valuation['equity'], 2) }}</div>
        <div class="pc-sub">Cash plus open-position value</div>
        <div class="pc-chart">
            <svg viewBox="0 0 160 42" preserveAspectRatio="none">
                <defs>
                    <linearGradient id="tealGrad" x1="0" y1="0" x2="0" y2="1">
                        <stop offset="0%" stop-color="#0d9488" stop-opacity=".55"/>
                        <stop offset="100%" stop-color="#0d9488" stop-opacity="0"/>
                    </linearGradient>
                </defs>
                <path d="M0,40 C20,38 40,34 65,28 C90,22 110,16 130,10 C145,6 155,4 160,3 L160,42 L0,42 Z"
                      fill="url(#tealGrad)"/>
                <path d="M0,40 C20,38 40,34 65,28 C90,22 110,16 130,10 C145,6 155,4 160,3"
                      fill="none" stroke="#0d9488" stroke-width="2" stroke-linecap="round"/>
            </svg>
        </div>
    </div>

    {{-- 3. Total P&L --}}
    <div class="pf-card pf-card--green">
        <div class="pc-label">Total P&amp;L</div>
        <div class="pc-value">{{ $pnlSign }}{{ $mainCurrency }} {{ number_format(abs($totalPnl), 2) }}</div>
        <div class="pc-sub {{ $totalPnlPct >= 0 ? 'profit' : 'loss' }}">
            {{ $totalPnlPct >= 0 ? '+' : '' }}{{ number_format($totalPnlPct, 2) }}%
        </div>
        <div class="pc-chart">
            <svg viewBox="0 0 160 42" preserveAspectRatio="none">
                @php $bars = [10,14,8,18,12,22,16,28,20,32,24,36,28,34,30,38,32,36,34,40]; @endphp
                @foreach($bars as $bi => $bh)
                    <rect x="{{ $bi * 8 + 1 }}" y="{{ 42 - $bh }}" width="5.5" height="{{ $bh }}"
                          fill="{{ $totalPnl >= 0 ? '#0ecb81' : '#f6465d' }}"
                          opacity="{{ 0.3 + ($bi / count($bars)) * 0.7 }}" rx="1.5"/>
                @endforeach
            </svg>
        </div>
    </div>

    {{-- 4. Open Positions --}}
    <div class="pf-card pf-card--purple">
        <div class="pc-label">Open Positions</div>
        <div class="pc-value">{{ $posCount }}</div>
        <div class="pc-sub">Active instruments</div>
        <div class="pc-gauge">
            <svg viewBox="0 0 64 64">
                <circle class="pc-gauge-track" cx="32" cy="32" r="{{ $gaugeR }}"/>
                <circle class="pc-gauge-fill" cx="32" cy="32" r="{{ $gaugeR }}"
                    stroke-dasharray="{{ round($gaugeDash, 2) }} {{ round($gaugeCircum, 2) }}"/>
                <text x="32" y="37" text-anchor="middle" class="pc-gauge-num">{{ $posCount }}</text>
            </svg>
        </div>
    </div>

    {{-- 5. USD Credit --}}
    <div class="pf-card pf-card--amber">
        <div class="pc-label">USD Credit</div>
        <div class="pc-value" id="portfolioCreditBalance">USD {{ number_format($valuation['credit'], 2) }}</div>
        <div class="pc-sub">Trading credit · Not withdrawable</div>
        <div class="pc-chart">
            <svg viewBox="0 0 160 42" preserveAspectRatio="none">
                <path d="M0,34 C22,31 38,35 58,25 C78,15 96,23 116,14 C132,8 145,12 160,5 L160,42 L0,42 Z" fill="rgba(245,158,11,.14)"/>
                <path d="M0,34 C22,31 38,35 58,25 C78,15 96,23 116,14 C132,8 145,12 160,5" fill="none" stroke="#f59e0b" stroke-width="1.5"/>
            </svg>
        </div>
    </div>

    {{-- 6. Latest Trade --}}
    <div class="pf-card pf-card--cyan">
        <div class="pc-label">Latest Trade</div>
        @if($latestTrade)
            <div class="pc-latest">
                <div class="pc-latest-name" title="{{ $latestTrade['instrument'] }}">{{ $latestTrade['instrument'] }}</div>
                <div class="pc-latest-meta">{{ $latestTrade['type'] }} · {{ $latestTrade['direction'] }} · {{ $latestTrade['traded_at']?->format('M d, H:i') }}</div>
                <div class="pc-latest-amount">{{ $latestTrade['currency'] }} {{ number_format($latestTrade['amount'], 2) }}</div>
            </div>
        @else
            <div class="pc-latest">
                <div class="pc-latest-name">No trades yet</div>
                <div class="pc-latest-meta">Your newest trade will appear here.</div>
            </div>
        @endif
    </div>

</div>

<div class="pf-breakdown">
    <div class="pf-breakdown-item"><span>Cash Balance</span><strong id="portfolioCashBalance">{{ $mainCurrency }} {{ number_format($valuation['cash'], 2) }}</strong></div>
    <div class="pf-breakdown-item"><span>Position Cost Basis</span><strong>{{ $mainCurrency }} {{ number_format($valuation['position_cost_basis'], 2) }}</strong></div>
    <div class="pf-breakdown-item"><span>Current Market Exposure</span><strong id="portfolioMarketExposure">{{ $mainCurrency }} {{ number_format($valuation['position_market_value'], 2) }}</strong></div>
    <div class="pf-breakdown-item"><span>Position Mix</span><strong>{{ $valuation['counts']['regular'] }} market · {{ $valuation['counts']['leveraged'] }} leveraged · {{ $valuation['counts']['prediction'] }} prediction · {{ $valuation['counts']['binary'] }} binary</strong></div>
</div>

@if(!$valuation['is_complete'])
<div class="pf-warning">
    <i class="fas fa-triangle-exclamation me-1"></i>
    Some values are estimated because current pricing or currency conversion is unavailable.
    <span title="{{ implode(' ', $valuation['warnings']) }}">Details</span>
</div>
@endif

{{-- Positions table --}}
<div class="pf-position-sections">
<div class="dark-card" id="portfolioMarketPositions">
    <div class="card-header" style="font-weight:700;font-size:.9rem">Market Positions</div>
    <div class="card-body p-0">
        @if($valuation['regular_rows']->isEmpty())
            <div class="p-5 text-center" style="color:var(--text-muted)">
                <i class="fas fa-briefcase fa-2x mb-3" style="opacity:.25"></i>
                <div class="mb-3">No open positions yet.</div>
                <a href="{{ route('portal.markets') }}" class="btn btn-accent btn-sm">Browse Markets</a>
            </div>
        @else
        <div class="table-responsive">
            <table class="dark-table w-100">
                <thead>
                    <tr>
                        <th>Instrument</th>
                        <th>Category</th>
                        <th>Direction</th>
                        <th class="text-end">Quantity</th>
                        <th class="text-end">Avg Entry</th>
                        <th class="text-end">Current Price</th>
                        <th class="text-end">Value</th>
                        <th class="text-end">P&amp;L ($)</th>
                        <th class="text-end">P&amp;L (%)</th>
                        <th class="text-center">Actions</th>
                    </tr>
                </thead>
                <tbody>
                @foreach($valuation['regular_rows'] as $row)
                @php
                    $pos     = $row['position'];
                    $lp      = $row['latest'];
                    $val     = $row['value'] ?? 0;
                    $cost    = $row['cost'] ?? 0;
                    $pnl     = $val - $cost;
                    $pnlPct  = $cost > 0 ? ($pnl / $cost) * 100 : 0;
                    [$icn, $icColor] = SymbolPresentation::baseIconPair($pos->symbol);
                    $icIsImg = str_starts_with($icn, 'img:');
                @endphp
                <tr data-position-id="{{ $pos->id }}" data-symbol-id="{{ $pos->symbol_id }}" data-decimals="{{ $pos->symbol->decimal_places ?? 2 }}">
                    <td>
                        <div class="symbol-cell">
                            <div class="symbol-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='flex'">
                                    <span style="display:none;font-size:.6rem;font-weight:700;color:{{ $icColor }}">
                                        {{ strtoupper(substr($pos->symbol->name??'?',0,2)) }}
                                    </span>
                                @elseif($icn)
                                    <i class="{{ $icn }}" style="color:{{ $icColor }}"></i>
                                @else
                                    <span style="font-size:.62rem;font-weight:700;color:var(--text-secondary)">
                                        {{ strtoupper(substr($pos->symbol->name??'?',0,2)) }}
                                    </span>
                                @endif
                            </div>
                            <div>
                                <div style="font-weight:600;font-size:.85rem">{{ $pos->symbol->name ?? '-' }}</div>
                                <div style="font-size:.7rem;color:var(--text-muted)">
                                    {{ $pos->symbol->base_currency ?? strtoupper(substr($pos->symbol->name??'',0,3)) }}
                                </div>
                            </div>
                        </div>
                    </td>
                    <td>
                        <span class="cat-badge cat-{{ $pos->symbol->category ?? 'crypto' }}">
                            {{ ucfirst($pos->symbol->category ?? '-') }}
                        </span>
                    </td>
                    <td><span class="badge-buy">BUY / LONG</span></td>
                    <td class="text-end position-quantity" style="font-variant-numeric:tabular-nums">
                        {{ rtrim(rtrim(number_format($pos->quantity, 8), '0'), '.') }}
                    </td>
                    <td class="text-end position-avg" style="font-variant-numeric:tabular-nums">
                        {{ number_format($pos->avg_price, $pos->symbol->decimal_places ?? 2) }}
                    </td>
                    <td class="text-end position-current" style="font-variant-numeric:tabular-nums">
                        {{ $lp > 0 ? number_format($lp, $pos->symbol->decimal_places ?? 2) : '—' }}
                    </td>
                    <td class="text-end fw-semibold position-value" style="font-variant-numeric:tabular-nums">
                        {{ $mainCurrency }} {{ number_format($val, 2) }}
                    </td>
                    <td class="text-end fw-semibold position-pnl" style="color:{{ $pnl >= 0 ? '#0ecb81' : '#f6465d' }};font-variant-numeric:tabular-nums">
                        {{ $lp > 0 ? ($pnl >= 0 ? '+' : '').number_format($pnl, 2) : '—' }}
                    </td>
                    <td class="text-end position-pnl-pct" style="color:{{ $pnlPct >= 0 ? '#0ecb81' : '#f6465d' }};font-variant-numeric:tabular-nums">
                        {{ $lp > 0 ? ($pnlPct >= 0 ? '+' : '').number_format($pnlPct, 2).'%' : '—' }}
                    </td>
                    <td class="text-center">
                        <div style="display:inline-flex;gap:.3rem;flex-wrap:wrap;justify-content:center">
                            <button type="button" class="btn btn-sm btn-outline-warning partial-close-btn"
                                data-position-id="{{ $pos->id }}" data-symbol-id="{{ $pos->symbol_id }}"
                                data-symbol="{{ $pos->symbol->name ?? '?' }}" data-quantity="{{ $pos->quantity }}"
                                onclick="openPartialClose(this)">Partial close</button>
                            <button type="button"
                                onclick="closePosition({{ $pos->id }}, '{{ addslashes($pos->symbol->name ?? '?') }}', this)"
                                data-close-url="{{ route('portal.trade.close', $pos->id) }}"
                                style="padding:.22rem .6rem;font-size:.72rem;font-weight:700;border-radius:4px;background:rgba(246,70,93,.08);color:#f6465d;border:1px solid rgba(246,70,93,.3);cursor:pointer">
                                Close
                            </button>
                        </div>
                    </td>
                </tr>
                @endforeach
                </tbody>
            </table>
        </div>
        @endif
    </div>
</div>

@if($valuation['leveraged_rows']->isNotEmpty())
<div class="dark-card pf-section" id="portfolioLeveragedPositions">
    <div class="card-header" style="font-weight:700;font-size:.9rem">Leveraged Positions</div>
    <div class="card-body p-0"><div class="table-responsive"><table class="dark-table w-100">
        <thead><tr><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</th><th class="text-end">Current</th><th class="text-end">Stop Loss</th><th class="text-end">Take Profit</th><th class="text-end">P&amp;L</th><th class="text-end">Position Value</th><th>Status</th><th class="text-center">Action</th></tr></thead>
        <tbody>@foreach($valuation['leveraged_rows'] as $row)
            @php
                $leveraged = $row['position'];
                $leveragedDecimals = $leveraged->symbol?->decimal_places ?? 2;
                $leveragedPnl = $row['pnl'];
            @endphp
            <tr data-leveraged-position-id="{{ $leveraged->id }}">
                <td><div style="font-weight:600">{{ $leveraged->symbol?->name ?? 'Unknown asset' }}</div><small style="color:var(--text-muted)">{{ $leveraged->symbol?->display_symbol ?? '—' }}</small></td>
                <td><span class="badge-{{ $leveraged->direction === 'up' ? 'buy' : 'sell' }}">{{ strtoupper($leveraged->direction) }}</span></td>
                <td class="text-end">{{ $leveraged->leverage }}×</td>
                <td class="text-end">USD {{ number_format($leveraged->margin, 2) }}@if((float) $leveraged->credit_margin > 0)<small style="display:block;color:var(--text-muted)">Credit {{ number_format($leveraged->credit_margin, 2) }}</small>@endif</td>
                <td class="text-end">USD {{ number_format($leveraged->exposure, 2) }}</td>
                <td class="text-end">{{ number_format($leveraged->entry_price, $leveragedDecimals) }}</td>
                <td class="text-end">{{ number_format($row['latest'], $leveragedDecimals) }}</td>
                <td class="text-end">{{ $leveraged->stop_loss !== null ? number_format($leveraged->stop_loss, $leveragedDecimals) : '—' }}</td>
                <td class="text-end">{{ $leveraged->take_profit !== null ? number_format($leveraged->take_profit, $leveragedDecimals) : '—' }}</td>
                <td class="text-end" style="font-weight:700;color:{{ abs($leveragedPnl) < 0.00000001 ? 'var(--text-muted)' : ($leveragedPnl > 0 ? '#0ecb81' : '#f6465d') }}">{{ $leveragedPnl > 0 ? '+' : '' }}USD {{ number_format($leveragedPnl, 2) }}</td>
                <td class="text-end fw-semibold">USD {{ number_format($row['positionValue'], 2) }}</td>
                <td><span class="pf-status {{ $row['priceStatus'] }}">{{ $row['priceStatus'] }}</span></td>
                <td class="text-center"><button type="button" class="btn btn-sm btn-outline-danger leveraged-portfolio-close" data-close-url="{{ route('portal.leveraged.close', $leveraged->id) }}" data-symbol="{{ $leveraged->symbol?->name ?? 'position' }}" onclick="closeLeveragedPosition(this)" title="Close leveraged position" aria-label="Close leveraged position">Close</button></td>
            </tr>
        @endforeach</tbody>
    </table></div></div>
</div>
@endif

@php $portfolioSummary = $valuation['summary']; @endphp
<div class="dark-card pf-section" id="portfolioPositionSummary">
    <div class="pf-position-summary" aria-label="Open positions summary">
        <span><strong>Balance:</strong> <b id="portfolioSummaryBalance">USD {{ number_format($portfolioSummary['balance'], 2) }}</b></span>
        <span><strong>Credit:</strong> <b id="portfolioSummaryCredit">USD {{ number_format($portfolioSummary['credit'], 2) }}</b></span>
        <span><strong>Equity:</strong> <b id="portfolioSummaryEquity">USD {{ number_format($portfolioSummary['equity'], 2) }}</b></span>
        <span><strong>Margin:</strong> <b id="portfolioSummaryMargin">USD {{ number_format($portfolioSummary['margin'], 2) }}</b></span>
        <span><strong>Margin level:</strong> <b id="portfolioSummaryMarginLevel">{{ $portfolioSummary['margin_level'] === null ? 'N/A' : number_format($portfolioSummary['margin_level'], 2).'%' }}</b></span>
        <span><strong>Free margin:</strong> <b id="portfolioSummaryFreeMargin">USD {{ number_format($portfolioSummary['free_margin'], 2) }}</b></span>
        <span><strong>P&amp;L:</strong> <b id="portfolioSummaryPnl" style="color:{{ $portfolioSummary['unrealized_pnl'] >= 0 ? '#0ecb81' : '#f6465d' }}">{{ $portfolioSummary['unrealized_pnl'] >= 0 ? '+' : '-' }}USD {{ number_format(abs($portfolioSummary['unrealized_pnl']), 2) }}</b></span>
    </div>
</div>

@if($valuation['prediction_rows']->isNotEmpty())
<div class="dark-card pf-section" id="portfolioPredictionPositions">
    <div class="card-header" style="font-weight:700;font-size:.9rem">Prediction-Market Positions</div>
    <div class="card-body p-0"><div class="table-responsive"><table class="dark-table w-100">
        <thead><tr><th>Market</th><th>Outcome</th><th class="text-end">Shares</th><th class="text-end">Avg Price</th><th class="text-end">Current</th><th class="text-end">Cost Basis</th><th class="text-end">Value</th><th class="text-end">P&amp;L</th><th>Status</th></tr></thead>
        <tbody>@foreach($valuation['prediction_rows'] as $row)
            @php $predictionPnl = ($row['value'] ?? 0) - ($row['cost'] ?? 0); @endphp
            <tr>
                <td style="max-width:320px">{{ $row['position']->question }}</td>
                <td><span class="cat-badge {{ $row['position']->outcome === 'YES' ? 'cat-forex' : '' }}">{{ $row['position']->outcome }}</span></td>
                <td class="text-end">{{ rtrim(rtrim(number_format($row['shares'], 8), '0'), '.') }}</td>
                <td class="text-end">{{ number_format($row['average'] * 100, 2) }}¢</td>
                <td class="text-end">{{ number_format($row['latest'] * 100, 2) }}¢</td>
                <td class="text-end">{{ $mainCurrency }} {{ number_format($row['cost'] ?? 0, 2) }}</td>
                <td class="text-end">{{ $mainCurrency }} {{ number_format($row['value'] ?? 0, 2) }}</td>
                <td class="text-end" style="color:{{ $predictionPnl >= 0 ? '#0ecb81' : '#f6465d' }}">{{ $predictionPnl >= 0 ? '+' : '' }}{{ number_format($predictionPnl, 2) }}</td>
                <td><span class="pf-status {{ $row['priceStatus'] }}">{{ $row['priceStatus'] }}</span></td>
            </tr>
        @endforeach</tbody>
    </table></div></div>
</div>
@endif

@if($valuation['binary_rows']->isNotEmpty())
<div class="dark-card pf-section" id="portfolioBinaryPositions">
    <div class="card-header" style="font-weight:700;font-size:.9rem">Open Binary Options</div>
    <div class="card-body p-0"><div class="table-responsive"><table class="dark-table w-100">
        <thead><tr><th>Instrument</th><th>Direction</th><th class="text-end">Strike</th><th class="text-end">Stake at Cost</th><th>Expires</th></tr></thead>
        <tbody>@foreach($valuation['binary_rows'] as $row)<tr>
            <td>{{ $row['option']->symbol?->name ?? '—' }}</td>
            <td>{{ strtoupper($row['option']->direction) }}</td>
            <td class="text-end">{{ number_format($row['option']->strike_price, 5) }}</td>
            <td class="text-end">{{ $mainCurrency }} {{ number_format($row['stake'] ?? 0, 2) }}</td>
            <td>{{ $row['option']->expires_at?->format('M d, Y H:i') ?? '—' }}</td>
        </tr>@endforeach</tbody>
    </table></div></div>
</div>
@endif

</div>

<div id="partialCloseModal" class="partial-close-modal" hidden aria-hidden="true">
    <div class="partial-close-dialog" role="dialog" aria-modal="true" aria-labelledby="partialCloseTitle">
        <button type="button" class="partial-close-x" onclick="closePartialClose()" aria-label="Close">&times;</button>
        <h3 id="partialCloseTitle">Partial close</h3>
        <p id="partialCloseDescription" class="text-muted mb-3"></p>
        <label for="partialCloseQuantity" class="form-label">Quantity to close</label>
        <input id="partialCloseQuantity" class="form-control" type="number" min="0.00000001" step="any" inputmode="decimal">
        <div class="partial-close-available">Available: <strong id="partialCloseAvailable">—</strong></div>
        <div id="partialCloseError" class="partial-close-error" hidden></div>
        <div class="partial-close-actions">
            <button type="button" class="btn btn-secondary" onclick="closePartialClose()">Cancel</button>
            <button type="button" class="btn btn-danger" id="partialCloseSubmit" onclick="submitPartialClose()">Confirm partial close</button>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
function cpShowToast(type, message) {
    document.querySelectorAll('.cp-toast').forEach(function(t) { t.remove(); });
    var icon = type === 'success' ? 'fa-circle-check' : 'fa-circle-xmark';
    var el = document.createElement('div');
    el.className = 'cp-toast ' + type;
    el.innerHTML =
        '<i class="fas ' + icon + ' cp-toast-icon"></i>' +
        '<span>' + message + '</span>' +
        '<button class="cp-toast-close" aria-label="Close">&times;</button>';
    el.querySelector('.cp-toast-close').addEventListener('click', function() { el.remove(); });
    document.body.appendChild(el);
    setTimeout(function() { if (el.parentNode) el.remove(); }, 8000);
}

var partialCloseState = { symbolId: null, symbol: '', available: 0, row: null };
function openPartialClose(btn) {
    partialCloseState = {
        symbolId: btn.getAttribute('data-symbol-id'),
        symbol: btn.getAttribute('data-symbol') || 'position',
        available: parseFloat(btn.getAttribute('data-quantity') || '0'),
        row: btn.closest('tr[data-position-id]')
    };
    document.getElementById('partialCloseDescription').textContent = 'Close part of your ' + partialCloseState.symbol + ' position at the current market price.';
    document.getElementById('partialCloseAvailable').textContent = partialCloseState.available;
    var input = document.getElementById('partialCloseQuantity');
    input.value = '';
    input.max = partialCloseState.available;
    document.getElementById('partialCloseError').hidden = true;
    document.getElementById('partialCloseSubmit').disabled = false;
    var modal = document.getElementById('partialCloseModal');
    modal.hidden = false;
    modal.setAttribute('aria-hidden', 'false');
    input.focus();
}
function closePartialClose() {
    var modal = document.getElementById('partialCloseModal');
    modal.hidden = true;
    modal.setAttribute('aria-hidden', 'true');
    partialCloseState = { symbolId: null, symbol: '', available: 0, row: null };
}
function formatPositionNumber(value, decimals) {
    return Number(value).toLocaleString(undefined, { minimumFractionDigits: decimals, maximumFractionDigits: decimals });
}
function submitPartialClose() {
    var input = document.getElementById('partialCloseQuantity');
    var quantity = parseFloat(input.value);
    var error = document.getElementById('partialCloseError');
    if (!Number.isFinite(quantity) || quantity <= 0 || quantity > partialCloseState.available + 1e-12) {
        error.textContent = 'Enter a quantity greater than zero and no more than ' + partialCloseState.available + '.';
        error.hidden = false;
        return;
    }
    if (!confirm('Close ' + quantity + ' ' + partialCloseState.symbol + ' at the current market price?')) return;
    var submit = document.getElementById('partialCloseSubmit');
    submit.disabled = true;
    error.hidden = true;
    var csrf = document.querySelector('meta[name="csrf-token"]');
    var body = new URLSearchParams({ symbol_id: partialCloseState.symbolId, side: 'sell', quantity: String(quantity), currency: 'USD' });
    fetch('{{ route('portal.trade.execute') }}', {
        method: 'POST', body: body,
        headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest', 'X-CSRF-TOKEN': csrf ? csrf.getAttribute('content') : '', 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' },
        credentials: 'same-origin'
    }).then(function(response) {
        return response.json().then(function(data) { return { ok: response.ok, data: data }; });
    }).then(function(result) {
        if (!result.ok || !result.data.success) throw new Error(result.data.message || 'Could not partially close position.');
        var position = result.data.position || {};
        var row = partialCloseState.row;
        if (position.closed || !row || position.quantity <= 0) {
            if (row) row.remove();
        } else {
            var decimals = parseInt(row.getAttribute('data-decimals') || '2', 10);
            row.querySelector('.position-quantity').textContent = Number(position.quantity).toLocaleString(undefined, { maximumFractionDigits: 8 });
            row.querySelector('.position-avg').textContent = formatPositionNumber(position.avg_price, decimals);
            row.querySelector('.position-current').textContent = formatPositionNumber(result.data.price, decimals);
            row.querySelector('.position-value').textContent = 'USD ' + formatPositionNumber(position.value, 2);
            var pnl = Number(position.pnl || 0), pct = Number(position.pnl_pct || 0);
            var pnlCell = row.querySelector('.position-pnl'), pctCell = row.querySelector('.position-pnl-pct');
            pnlCell.textContent = (pnl >= 0 ? '+' : '') + formatPositionNumber(pnl, 2); pnlCell.style.color = pnl >= 0 ? '#0ecb81' : '#f6465d';
            pctCell.textContent = (pct >= 0 ? '+' : '') + formatPositionNumber(pct, 2) + '%'; pctCell.style.color = pct >= 0 ? '#0ecb81' : '#f6465d';
            var partial = row.querySelector('.partial-close-btn');
            if (partial) { partial.setAttribute('data-quantity', position.quantity); partialCloseState.available = position.quantity; }
        }
        cpShowToast('success', result.data.message || 'Position partially closed.');
        closePartialClose();
        refreshPortfolioState();
    }).catch(function(error) {
        error = error && error.message ? error.message : 'Network error. Please try again.';
        document.getElementById('partialCloseError').textContent = error;
        document.getElementById('partialCloseError').hidden = false;
        submit.disabled = false;
    });
}

function refreshPortfolioState() {
    fetch('{{ route('portal.portfolio.state') }}', { headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }, credentials: 'same-origin' })
        .then(function(response) { return response.json(); })
        .then(function(data) {
            if (!data.success || !data.summary) return;
            var s = data.summary;
            var money = function(v) { return 'USD ' + formatPositionNumber(Math.abs(Number(v || 0)), 2); };
            var set = function(id, text) { var el = document.getElementById(id); if (el) el.textContent = text; };
            set('portfolioSummaryBalance', money(s.balance));
            set('portfolioSummaryCredit', money(s.credit));
            set('portfolioSummaryEquity', money(s.equity));
            set('portfolioSummaryMargin', money(s.margin));
            set('portfolioSummaryFreeMargin', money(s.free_margin));
            set('portfolioSummaryMarginLevel', s.margin_level === null ? 'N/A' : formatPositionNumber(s.margin_level, 2) + '%');
            var pnl = Number(s.unrealized_pnl || 0), pnlEl = document.getElementById('portfolioSummaryPnl');
            set('portfolioSummaryPnl', (pnl >= 0 ? '+' : '-') + money(pnl));
            if (pnlEl) pnlEl.style.color = pnl >= 0 ? '#0ecb81' : '#f6465d';
            set('portfolioCashBalance', money(data.cash));
            set('portfolioCreditBalance', money(s.credit));
            set('portfolioMarketExposure', money(data.position_market_value));
        }).catch(function() { /* polling/state refresh can retry on the next action */ });
}

function closePosition(positionId, symbolName, btn) {
    if (!confirm('Close your full position in ' + symbolName + ' at the current market price?\n\nProceeds will be credited to your account immediately.')) {
        return;
    }
    var url  = btn.getAttribute('data-close-url');
    var csrf = document.querySelector('meta[name="csrf-token"]');
    btn.disabled = true;
    btn.textContent = '…';

    fetch(url, {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'X-Requested-With': 'XMLHttpRequest',
            'X-CSRF-TOKEN': csrf ? csrf.getAttribute('content') : ''
        },
        credentials: 'same-origin'
    })
    .then(function(r) { return r.json(); })
    .then(function(data) {
        if (data.success) {
            cpShowToast('success', data.message);
            var row = btn.closest('tr');
            if (row) {
                row.style.transition = 'opacity .4s';
                row.style.opacity = '0';
                setTimeout(function() { row.remove(); }, 400);
            }
            refreshPortfolioState();
        } else {
            cpShowToast('error', data.message || 'Could not close position.');
            btn.disabled = false;
            btn.textContent = 'Close';
        }
    })
    .catch(function() {
        cpShowToast('error', 'Network error. Please try again.');
        btn.disabled = false;
        btn.textContent = 'Close';
    });
}

function closeLeveragedPosition(btn) {
    var symbolName = btn.getAttribute('data-symbol') || 'this position';
    if (!confirm('Close your leveraged position in ' + symbolName + ' at the current market price?')) return;

    var csrf = document.querySelector('meta[name="csrf-token"]');
    btn.disabled = true;
    btn.textContent = '…';
    fetch(btn.getAttribute('data-close-url'), {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'X-Requested-With': 'XMLHttpRequest',
            'X-CSRF-TOKEN': csrf ? csrf.getAttribute('content') : ''
        },
        credentials: 'same-origin'
    })
    .then(function(response) {
        return response.json().then(function(data) { return { ok: response.ok, data: data }; });
    })
    .then(function(result) {
        if (!result.ok || !result.data.success) throw new Error(result.data.message || 'Could not close position.');
        cpShowToast('success', result.data.message || 'Position closed.');
        var row = btn.closest('tr[data-leveraged-position-id]');
        if (row) {
            row.style.transition = 'opacity .25s';
            row.style.opacity = '0';
            setTimeout(function() { row.remove(); }, 250);
        }
    })
    .catch(function(error) {
        cpShowToast('error', error.message || 'Could not close position.');
        btn.disabled = false;
        btn.textContent = 'Close';
    });
}
</script>
@endpush