@extends('portal.layouts.master')
@section('title', $symbol->name . ' Position')
@section('page-title', $symbol->name)

@section('extra-css')
.stat-pills { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.stat-pill {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 8px; padding: .65rem 1rem; flex: 1; min-width: 130px;
}
.stat-pill .lbl { font-size: .68rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; }
.stat-pill .val { font-size: 1.05rem; font-weight: 700; margin-top: .1rem; }
#perf_chart { width: 100%; height: 420px; }
@endsection

@section('content')

<div class="mb-3">
    <a href="{{ route('portal.portfolio') }}" style="font-size:.85rem"><i class="fas fa-arrow-left me-1"></i> Back to Portfolio</a>
</div>

{{-- Symbol header --}}
<div class="d-flex align-items-center gap-3 mb-4">
    <div style="width:42px;height:42px;border-radius:50%;background:var(--bg-tertiary);display:flex;align-items:center;justify-content:center;font-size:.8rem;color:var(--text-secondary);font-weight:700">
        {{ strtoupper(substr($symbol->name, 0, 2)) }}
    </div>
    <div>
        <h4 class="mb-0 fw-bold">{{ $symbol->name }}</h4>
        <div style="font-size:.82rem;color:var(--text-muted)"><code style="color:var(--accent)">{{ $symbol->tv_symbol }}</code> · {{ ucfirst($symbol->category) }}</div>
    </div>
    @if($latestPrice > 0)
    <div class="ms-auto text-end">
        <div id="positionLivePrice" style="font-size:1.6rem;font-weight:700">{{ \App\Support\MarketPriceFormatter::format($latestPrice) }}</div>
        <div id="positionPriceStatus" style="font-size:.8rem;color:var(--text-muted)">Twelve Data</div>
    </div>
    @endif
    <a href="{{ route('portal.trade', $symbol->id) }}" class="btn btn-accent ms-3" style="font-size:.85rem"><i class="fas fa-exchange-alt me-1"></i> Trade</a>
</div>

{{-- Position stats --}}
@if($position && (float) $position->quantity > 0)
<div class="stat-pills">
    <div class="stat-pill">
        <div class="lbl">Quantity</div>
        <div class="val">{{ rtrim(rtrim(number_format($position->quantity, 8), '0'), '.') }}</div>
    </div>
    <div class="stat-pill">
        <div class="lbl">Avg. Entry</div>
        <div class="val">{{ number_format($position->avg_price, $symbol->decimal_places) }}</div>
    </div>
    <div class="stat-pill">
        <div class="lbl">Current Value</div>
        <div class="val">{{ $latestPrice > 0 ? '$' . number_format($currentValue, 2) : '—' }}</div>
    </div>
    <div class="stat-pill">
        <div class="lbl">Unrealised P&amp;L</div>
        @if($latestPrice > 0)
        <div class="val {{ $unrealisedPnl >= 0 ? 'text-profit' : 'text-loss' }}">
            {{ ($unrealisedPnl >= 0 ? '+' : '') . number_format($unrealisedPnl, 2) }}
            <span style="font-size:.8rem;font-weight:400">({{ ($pnlPercent >= 0 ? '+' : '') . number_format($pnlPercent, 2) }}%)</span>
        </div>
        @else
        <div class="val" style="color:var(--text-muted)">—</div>
        @endif
    </div>
</div>
@endif

{{-- Performance Chart --}}
<div class="dark-card mb-4" style="overflow:hidden">
    <div class="card-body p-0" style="background:#131722">
        <div style="padding:.75rem 1rem .25rem;color:var(--text-secondary);font-size:.78rem;letter-spacing:.3px;text-transform:uppercase">
            Twelve Data Price History
            @if($position && $position->avg_price > 0)
            · <span style="color:#f59e0b">&#9135;&#9135; Entry @ {{ number_format($position->avg_price, $symbol->decimal_places) }}</span>
            @endif
            <span style="float:right;display:flex;gap:.4rem">
                <select id="positionChartRange" aria-label="Chart range"><option value="4h">4H</option><option value="1d" selected>1D</option><option value="1w">1W</option><option value="1m">1M</option><option value="1y">1Y</option></select>
                <select id="positionChartInterval" aria-label="Chart interval"><option value="1m">1m</option><option value="5m">5m</option><option value="15m" selected>15m</option><option value="1h">1h</option><option value="1d">1D</option></select>
            </span>
        </div>
        <div id="perf_chart"></div>
    </div>
</div>

{{-- Trade history --}}
<div class="dark-card">
    <div class="card-header"><i class="fas fa-list me-2"></i>Trade History — {{ $symbol->name }}</div>
    <div class="card-body p-0">
        @if($trades->isEmpty())
            <div class="p-3 text-center" style="color:var(--text-muted);font-size:.9rem">No trades yet for this symbol.</div>
        @else
        <div class="table-responsive">
            <table class="dark-table w-100">
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>Side</th>
                        <th class="text-end">Quantity</th>
                        <th class="text-end">Price</th>
                        <th class="text-end">Total</th>
                        <th>Currency</th>
                    </tr>
                </thead>
                <tbody>
                @foreach($trades as $trade)
                <tr>
                    <td style="color:var(--text-secondary)">{{ $trade->traded_at->format('Y-m-d H:i') }}</td>
                    <td><span class="badge badge-{{ $trade->side }}">{{ strtoupper($trade->side) }}</span></td>
                    <td class="text-end">{{ rtrim(rtrim(number_format($trade->quantity, 8), '0'), '.') }}</td>
                    <td class="text-end">{{ number_format($trade->price, $symbol->decimal_places) }}</td>
                    <td class="text-end fw-semibold">{{ number_format($trade->total_cost, 2) }}</td>
                    <td>{{ $trade->currency }}</td>
                </tr>
                @endforeach
                </tbody>
            </table>
        </div>
        @endif
    </div>
</div>

@endsection

@section('page-js')
<script src="https://unpkg.com/lightweight-charts@5.2.0/dist/lightweight-charts.standalone.production.js"></script>
<script src="{{ asset('js/twelve-data-chart.js') }}?v=14"></script>
<script>
(function () {
    const container = document.getElementById('perf_chart');
    if (!container || !window.TwelveDataChart) return;
    window.TwelveDataChart.create({
        container: container,
        symbolId: {{ $symbol->id }},
        chartUrl: @json(route('portal.markets.chart', ['symbolId' => '__SYMBOL_ID__'])),
        pricesUrl: @json(route('portal.markets.prices', ['light' => 1])),
        interval: '15m', range: '1d', entryPrice: {{ (float) ($position->avg_price ?? 0) }},
        advancedIndicators: true,
        indicatorStorageKey: 'ast.portal.chart.indicators.v2',
        rangeControl: '#positionChartRange', intervalControl: '#positionChartInterval',
        statusElement: '#positionPriceStatus',
        onQuote: function (quote) {
            var node = document.getElementById('positionLivePrice');
            if (node) node.textContent = window.TwelveDataChart.formatPrice(quote.price);
        }
    });
})();
</script>
@endsection