@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(4, 1fr);
    gap: .75rem;
    margin-bottom: 1.1rem;
}
@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 .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 .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; }

/* 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; }
@endsection

@section('content')

@php
    $posCount = $positions->count();
    $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. Total Invested --}}
    <div class="pf-card pf-card--blue">
        <div class="pc-label">Total Invested</div>
        <div class="pc-value">${{ number_format($totalInvested, 2) }}</div>
        <div class="pc-sub">Cost basis</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. Current Value --}}
    <div class="pf-card pf-card--teal">
        <div class="pc-label">Current Value</div>
        <div class="pc-value">${{ number_format($totalValue, 2) }}</div>
        <div class="pc-sub">At market prices</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 }}${{ 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>

</div>

{{-- Positions table --}}
<div class="dark-card">
    <div class="card-header" style="font-weight:700;font-size:.9rem">Open Positions</div>
    <div class="card-body p-0">
        @if($positions->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 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($positions as $pos)
                @php
                    $lp      = (float)($pos->symbol?->latestPrice?->price ?? 0);
                    $val     = $pos->quantity * $lp;
                    $pnl     = ($lp - $pos->avg_price) * $pos->quantity;
                    $pnlPct  = $pos->avg_price > 0 ? (($lp - $pos->avg_price) / $pos->avg_price) * 100 : 0;
                    [$icn, $icColor] = SymbolPresentation::baseIconPair($pos->symbol);
                    $icIsImg = str_starts_with($icn, 'img:');
                @endphp
                <tr>
                    <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 class="text-end" style="font-variant-numeric:tabular-nums">
                        {{ rtrim(rtrim(number_format($pos->quantity, 8), '0'), '.') }}
                    </td>
                    <td class="text-end" style="font-variant-numeric:tabular-nums">
                        {{ number_format($pos->avg_price, $pos->symbol->decimal_places ?? 2) }}
                    </td>
                    <td class="text-end" style="font-variant-numeric:tabular-nums">
                        {{ $lp > 0 ? number_format($lp, $pos->symbol->decimal_places ?? 2) : '—' }}
                    </td>
                    <td class="text-end fw-semibold" style="font-variant-numeric:tabular-nums">
                        {{ $lp > 0 ? '$'.number_format($val, 2) : '—' }}
                    </td>
                    <td class="text-end fw-semibold" style="color:{{ $pnl >= 0 ? '#0ecb81' : '#f6465d' }};font-variant-numeric:tabular-nums">
                        {{ $lp > 0 ? ($pnl >= 0 ? '+' : '').number_format($pnl, 2) : '—' }}
                    </td>
                    <td class="text-end" 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">
                            <a href="{{ route('portal.trade', $pos->symbol_id) }}"
                               style="display:inline-block;padding:.22rem .6rem;font-size:.72rem;font-weight:700;border-radius:4px;background:#0ecb811a;color:#0ecb81;border:1px solid #0ecb8133;text-decoration:none">
                               Buy
                            </a>
                            <a href="{{ route('portal.trade', ['symbolId'=>$pos->symbol_id,'side'=>'sell']) }}"
                               style="display:inline-block;padding:.22rem .6rem;font-size:.72rem;font-weight:700;border-radius:4px;background:#f6465d1a;color:#f6465d;border:1px solid #f6465d33;text-decoration:none">
                               Sell
                            </a>
                        </div>
                    </td>
                </tr>
                @endforeach
                </tbody>
            </table>
        </div>
        @endif
    </div>
</div>

@endsection