@extends('layouts.finance')

@section('title', 'Net Worth Detail')
@section('subtitle', 'Full breakdown of assets and liabilities')

@section('content')
@php
    $displayCurrency = 'PKR';
    $fmt = fn($usd) => $metrics->moneyIn($usd, 'USD', $displayCurrency);
    $palette = ['#6366f1','#10b981','#f59e0b','#06b6d4','#ec4899','#ef4444','#8b5cf6','#0d9488'];
    $netWorth = $kpis['net_worth'];

    $assetLabels  = array_keys($components);
    $assetValues  = array_values($components);
    $liabLabels   = array_keys($liabilities);
    $liabValues   = array_values($liabilities);

    $totalAssets = array_sum($assetValues);
    $totalLiab   = array_sum($liabValues);
@endphp

{{-- Back link --}}
<div class="mb-4">
    <a href="{{ route('dashboard') }}" class="btn btn-ghost" style="font-size:13px">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>
        Back to Dashboard
    </a>
</div>

{{-- Hero KPI Row --}}
<section class="grid kpi-grid gap-3 mb-6">
    <div class="card kpi-card" style="background:linear-gradient(135deg,#eef2ff,#faf5ff);border-color:#c7d2fe">
        <div class="kpi-icon ico-bg-indigo"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 1v22M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg></div>
        <div class="kpi-label">Net Worth</div>
        <div class="kpi-value" style="color:#3730a3">{{ $fmt($netWorth) }}</div>
        <div class="kpi-sub">Assets minus liabilities</div>
    </div>
    <div class="card kpi-card">
        <div class="kpi-icon ico-bg-green"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/></svg></div>
        <div class="kpi-label">Total Assets</div>
        <div class="kpi-value" style="color:#10b981">{{ $fmt($totalAssets) }}</div>
        <div class="kpi-sub">{{ count($components) }} asset categories</div>
    </div>
    <div class="card kpi-card">
        <div class="kpi-icon ico-bg-red"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></svg></div>
        <div class="kpi-label">Total Liabilities</div>
        <div class="kpi-value" style="color:#ef4444">{{ $fmt($totalLiab) }}</div>
        <div class="kpi-sub">{{ count($liabilities) }} liability categories</div>
    </div>
    <div class="card kpi-card">
        <div class="kpi-icon ico-bg-amber"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v20M5 9l7-7 7 7"/></svg></div>
        <div class="kpi-label">Zakat Estimate</div>
        <div class="kpi-value" style="color:#d97706">{{ $fmt($kpis['zakat']) }}</div>
        <div class="kpi-sub">2.5% of net worth</div>
    </div>
</section>

{{-- Charts + Breakdown --}}
<section class="grid grid-cols-1 gap-4 mb-6" style="grid-template-columns:1fr 1fr">
    {{-- Asset Donut --}}
    <div class="card p-5">
        <div class="flex items-center justify-between mb-3">
            <h3 class="font-semibold">Asset Breakdown</h3>
            <span class="pill pill-green">PKR eq.</span>
        </div>
        <div style="height:260px;position:relative"><canvas id="assetChart"></canvas></div>
    </div>

    {{-- Liability Donut --}}
    <div class="card p-5">
        <div class="flex items-center justify-between mb-3">
            <h3 class="font-semibold">Liability Breakdown</h3>
            <span class="pill pill-rose">PKR eq.</span>
        </div>
        @if($totalLiab > 0)
            <div style="height:260px;position:relative"><canvas id="liabChart"></canvas></div>
        @else
            <div style="height:260px;display:flex;align-items:center;justify-content:center;color:var(--muted);background:var(--bg-2);border-radius:12px;font-size:13px">No liabilities recorded.</div>
        @endif
    </div>
</section>

{{-- 6-month trend --}}
<section class="card p-5 mb-6">
    <div class="flex items-center justify-between mb-3">
        <h3 class="font-semibold">Revenue vs. Expenses — 6 Months</h3>
        <span class="pill">USD</span>
    </div>
    <div style="height:260px;position:relative"><canvas id="trendChart"></canvas></div>
</section>

{{-- Line-item table --}}
<section class="card mb-6">
    <div class="section-head"><h2>Net Worth Components</h2></div>
    <table>
        <thead>
            <tr>
                <th>Component</th>
                <th>Type</th>
                <th class="right">USD Value</th>
                <th class="right">PKR Equivalent</th>
            </tr>
        </thead>
        <tbody>
            @foreach($components as $label => $usdVal)
            <tr class="row-hover">
                <td>{{ $label }}</td>
                <td><span class="pill pill-green" style="font-size:10px">Asset</span></td>
                <td class="right">{{ $metrics->money($usdVal) }}</td>
                <td class="right">{{ $fmt($usdVal) }}</td>
            </tr>
            @endforeach
            @foreach($liabilities as $label => $usdVal)
            <tr class="row-hover">
                <td>{{ $label }}</td>
                <td><span class="pill pill-rose" style="font-size:10px">Liability</span></td>
                <td class="right" style="color:#ef4444">-{{ $metrics->money($usdVal) }}</td>
                <td class="right" style="color:#ef4444">-{{ $fmt($usdVal) }}</td>
            </tr>
            @endforeach
            <tr style="font-weight:700;background:var(--bg-2)">
                <td colspan="2">Net Worth</td>
                <td class="right" style="color:{{ $netWorth >= 0 ? '#10b981' : '#ef4444' }}">{{ $metrics->money($netWorth) }}</td>
                <td class="right" style="color:{{ $netWorth >= 0 ? '#10b981' : '#ef4444' }}">{{ $fmt($netWorth) }}</td>
            </tr>
        </tbody>
    </table>
</section>

{{-- Insights --}}
<section class="card p-5">
    <h3 class="font-semibold mb-3">Insights</h3>
    <div class="grid grid-cols-1 gap-3" style="grid-template-columns:repeat(3,1fr)">
        <div style="background:var(--bg-2);border-radius:12px;padding:14px">
            <div class="kpi-label">Debt-to-Asset Ratio</div>
            <div class="text-xl" style="font-weight:700;margin-top:4px">
                {{ $totalAssets > 0 ? number_format(($totalLiab / $totalAssets) * 100, 1) : '0.0' }}%
            </div>
            <div class="text-xs muted">Lower is healthier</div>
        </div>
        <div style="background:var(--bg-2);border-radius:12px;padding:14px">
            <div class="kpi-label">Liquid (Bank + Transit)</div>
            <div class="text-xl" style="font-weight:700;margin-top:4px">{{ $fmt($kpis['bank_total'] + $kpis['transit']) }}</div>
            <div class="text-xs muted">Immediately accessible</div>
        </div>
        <div style="background:var(--bg-2);border-radius:12px;padding:14px">
            <div class="kpi-label">Illiquid Assets</div>
            <div class="text-xl" style="font-weight:700;margin-top:4px">{{ $fmt($kpis['inventory']) }}</div>
            <div class="text-xs muted">Inventory</div>
        </div>
    </div>
</section>

@push('scripts')
<script src="{{ asset('chart.umd.min.js') }}"></script>
<script>
(function () {
    'use strict';
    var palette = @json($palette);
    function sliceColors(n) { var o=[]; for(var i=0;i<n;i++) o.push(palette[i%palette.length]); return o; }

    Chart.defaults.font.family = 'Inter, system-ui, sans-serif';
    Chart.defaults.font.size   = 12;

    // Asset donut
    new Chart(document.getElementById('assetChart'), {
        type: 'doughnut',
        data: {
            labels: @json($assetLabels),
            datasets: [{ data: @json($assetValues), backgroundColor: sliceColors(@json(count($assetLabels))), borderWidth: 2, borderColor: '#fff' }]
        },
        options: {
            responsive: true, maintainAspectRatio: false,
            plugins: {
                legend: { position: 'bottom', labels: { boxWidth: 10, padding: 10, font: { size: 11 } } },
                tooltip: { callbacks: { label: function(c) { return ' $' + c.raw.toLocaleString('en-US',{maximumFractionDigits:0}); } } }
            }
        }
    });

    // Liability donut
    var liabEl = document.getElementById('liabChart');
    if (liabEl) {
        new Chart(liabEl, {
            type: 'doughnut',
            data: {
                labels: @json($liabLabels),
                datasets: [{ data: @json($liabValues), backgroundColor: ['#ef4444','#f97316'], borderWidth: 2, borderColor: '#fff' }]
            },
            options: {
                responsive: true, maintainAspectRatio: false,
                plugins: {
                    legend: { position: 'bottom', labels: { boxWidth: 10, padding: 10, font: { size: 11 } } },
                    tooltip: { callbacks: { label: function(c) { return ' $' + c.raw.toLocaleString('en-US',{maximumFractionDigits:0}); } } }
                }
            }
        });
    }

    // Trend bar
    new Chart(document.getElementById('trendChart'), {
        type: 'bar',
        data: {
            labels: @json($trend['labels']),
            datasets: [
                { label: 'Revenue', data: @json($trend['revenue']), backgroundColor: 'rgba(16,185,129,.8)', borderRadius: 5 },
                { label: 'Expenses', data: @json($trend['expenses']), backgroundColor: 'rgba(239,68,68,.8)', borderRadius: 5 }
            ]
        },
        options: {
            responsive: true, maintainAspectRatio: false,
            interaction: { mode: 'index', intersect: false },
            plugins: {
                legend: { position: 'bottom', labels: { boxWidth: 10, padding: 10, font: { size: 11 } } },
                tooltip: { callbacks: { label: function(c) { return ' '+c.dataset.label+': $'+c.raw.toLocaleString('en-US',{maximumFractionDigits:0}); } } }
            },
            scales: {
                x: { grid: { display: false } },
                y: { grid: { color: 'rgba(0,0,0,.05)' }, ticks: { callback: function(v) { return '$'+(v>=1000?(v/1000).toFixed(0)+'k':v); } } }
            }
        }
    });
}());
</script>
@endpush
@endsection