@extends('layouts.finance')

@section('title', 'Dashboard')
@section('subtitle', 'Consolidated view across US, Pakistan & Australia')

@section('content')
@php
    $settings = $data['settings'];
    $accounts = $data['bank_accounts'];
    $usAccounts = $accounts->where('currency', 'USD');
    $pkAccounts = $accounts->where('currency', 'PKR');
    $auAccounts = $accounts->where('currency', 'AUD');
    $cards = $data['credit_cards'];
    $kpis = $data['kpis'];
    $displayCurrency = 'PKR';
    $displayMoney = fn($amount) => $metrics->moneyIn($amount, 'USD', $displayCurrency);

    $usSubtotal = $usAccounts->sum(fn($a) => $a->current_balance);
    $pkSubtotal = $pkAccounts->sum(fn($a) => $a->current_balance);
    $auSubtotal = $auAccounts->sum(fn($a) => $a->current_balance);
    $cardPayable = $cards->sum(fn($c) => $metrics->usd($c->payable_balance, $c->currency));
    $cardLimit = $cards->sum(fn($c) => $metrics->usd($c->credit_limit, $c->currency));

    $bankLogo = fn($account) => strtoupper(substr($account->bank_name ?: $account->name, 0, 4));
    $bankColor = fn($currency) => $currency === 'PKR' ? '#1e3a8a' : ($currency === 'AUD' ? '#0d9488' : '#6366f1');
@endphp

<!-- KPI ROW -->
<section class="grid kpi-grid gap-3 mb-6">
    <div class="card kpi-card card-hover">
        <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">{{ $displayMoney($kpis['net_worth']) }}</div>
        <div class="kpi-sub">Assets - Liabilities</div>
    </div>
    <div class="card kpi-card card-hover">
        <div class="kpi-icon ico-bg-purple"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 21h18M5 21V10l7-5 7 5v11"/></svg></div>
        <div class="kpi-label">Bank Balance</div>
        <div class="kpi-value">{{ $displayMoney($kpis['bank_total']) }}</div>
        <div class="kpi-sub">{{ $metrics->money($usSubtotal) }} US - {{ $metrics->money($pkSubtotal, 'PKR') }} PK - {{ $metrics->money($auSubtotal, 'AUD') }} AU</div>
    </div>
    <div class="card kpi-card card-hover">
        <div class="kpi-icon ico-bg-cyan"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 16V8l-9-5-9 5v8l9 5z"/></svg></div>
        <div class="kpi-label">Inventory</div>
        <div class="kpi-value">{{ $displayMoney($kpis['inventory']) }}</div>
        <div class="kpi-sub">Vouchers on hand</div>
    </div>
    <div class="card kpi-card card-hover">
        <div class="kpi-icon ico-bg-amber"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg></div>
        <div class="kpi-label">In Transit</div>
        <div class="kpi-value">{{ $displayMoney($kpis['transit']) }}</div>
        <div class="kpi-sub">Pending settlements</div>
    </div>
    <div class="card kpi-card card-hover">
        <div class="kpi-icon ico-bg-teal"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="8" y1="13" x2="16" y2="13"/><line x1="8" y1="17" x2="13" y2="17"/></svg></div>
        <div class="kpi-label">Collectible</div>
        <div class="kpi-value">{{ $displayMoney($kpis['collectible']) }}</div>
        <div class="kpi-sub">Open receivables</div>
    </div>
    <div class="card kpi-card card-hover">
        <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"/><polyline points="17 6 23 6 23 12"/></svg></div>
        <div class="kpi-label">Revenue (Mo.)</div>
        <div class="kpi-value" style="color:#10b981">{{ $displayMoney($kpis['revenue']) }}</div>
        <div class="kpi-sub">Current month</div>
    </div>
    <div class="card kpi-card card-hover">
        <div class="kpi-icon ico-bg-red"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 18 13.5 8.5 8.5 13.5 1 6"/><polyline points="17 18 23 18 23 12"/></svg></div>
        <div class="kpi-label">Expenses (Mo.)</div>
        <div class="kpi-value" style="color:#ef4444">{{ $displayMoney($kpis['expenses']) }}</div>
        <div class="kpi-sub">All running costs</div>
    </div>
    <div class="card kpi-card card-hover" style="background:#fff1f2;border-color:#fecdd3">
        <div class="kpi-icon ico-bg-rose"><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 Debt</div>
        <div class="kpi-value" style="color:#e11d48">{{ $displayMoney($kpis['debt']) }}</div>
        <div class="kpi-sub">{{ $displayMoney($cardPayable) }} CC - {{ $displayMoney(max(0, $kpis['debt'] - $cardPayable)) }} Loans</div>
    </div>
    <div class="card kpi-card card-hover">
        <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 2v20"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7H14a3.5 3.5 0 0 1 0 7H7"/><path d="M6 2h12"/></svg></div>
        <div class="kpi-label">Zakat</div>
        <div class="kpi-value" style="color:#d97706">{{ $displayMoney($kpis['zakat']) }}</div>
        <div class="kpi-sub">2.5% estimate</div>
    </div>
    <div class="card kpi-card card-hover">
        <div class="kpi-icon ico-bg-pink"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v20M5 9l7-7 7 7M5 15l7 7 7-7"/></svg></div>
        <div class="kpi-label">Net Profit</div>
        <div class="kpi-value" style="color:{{ $kpis['profit'] >= 0 ? '#10b981' : '#ef4444' }}">{{ $displayMoney($kpis['profit']) }}</div>
        <div class="kpi-sub">{{ number_format($kpis['margin'], 1) }}% margin</div>
    </div>
</section>

@foreach([
    ['title' => 'Balance in US Banks', 'pill' => 'USD', 'pillClass' => 'pill-blue', 'accounts' => $usAccounts, 'subtotal' => $metrics->money($usSubtotal), 'subtitle' => 'Live balances across all American accounts'],
    ['title' => 'Balance in Pakistan Banks', 'pill' => 'PKR', 'pillClass' => 'pill-amber', 'accounts' => $pkAccounts, 'subtotal' => $metrics->money($pkSubtotal, 'PKR'), 'subtitle' => 'Live balances across all Pakistani accounts'],
    ['title' => 'Balance in Australian Banks', 'pill' => 'AUD', 'pillClass' => 'pill-teal', 'accounts' => $auAccounts, 'subtotal' => $metrics->money($auSubtotal, 'AUD'), 'subtitle' => 'Live balances across all Australian accounts'],
] as $group)
    <section class="mb-6">
        <div class="flex items-center justify-between mb-3">
            <div>
                <h2 class="text-base font-bold flex items-center gap-2">{{ $group['title'] }} <span class="pill {{ $group['pillClass'] }}">{{ $group['pill'] }}</span></h2>
                <p class="text-xs" style="color:var(--muted);margin:0">{{ $group['subtitle'] }}</p>
            </div>
            <div class="text-right">
                <div class="section-title">Subtotal</div>
                <div class="text-xl font-bold">{{ $group['subtotal'] }}</div>
                @if($group['pill'] !== 'USD')
                    <div class="text-xs" style="color:var(--muted)">{{ $metrics->money($metrics->usd($group['accounts']->sum(fn($a) => $a->current_balance), $group['pill'])) }} USD eq.</div>
                @endif
            </div>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3">
            @forelse($group['accounts'] as $account)
                <div class="card card-hover p-4">
                    <div class="flex items-center justify-between mb-3">
                        <div class="bank-logo" style="background:{{ $bankColor($account->currency) }}15;color:{{ $bankColor($account->currency) }};border:1px solid {{ $bankColor($account->currency) }}44">{{ $bankLogo($account) }}</div>
                        <span class="pill">{{ $account->account_number ? '****'.substr($account->account_number, -4) : 'No #'}} </span>
                    </div>
                    <div class="text-sm font-semibold">{{ $account->name }}</div>
                    <div class="text-xs" style="color:var(--muted)">{{ $account->bank_name }}</div>
                    <div class="divider my-3"></div>
                    <div class="text-xl font-bold">{{ $metrics->money($account->current_balance, $account->currency) }}</div>
                    @if($account->currency !== 'USD')
                        <div class="text-xs" style="color:var(--muted)">{{ $metrics->money($metrics->usd($account->current_balance, $account->currency)) }} USD eq.</div>
                    @endif
                </div>
            @empty
                <div class="card p-4 text-sm" style="color:var(--muted)">No {{ $group['pill'] }} accounts yet.</div>
            @endforelse
        </div>
    </section>
@endforeach

<!-- CREDIT CARDS -->
<section class="mb-6">
    <div class="flex items-center justify-between mb-3">
        <div>
            <h2 class="text-base font-bold flex items-center gap-2">Credit Cards <span class="pill pill-rose">Liability</span></h2>
            <p class="text-xs" style="color:var(--muted);margin:0">Limits, balances payable, and due dates</p>
        </div>
        <div class="text-right">
            <div class="section-title">Total Payable</div>
            <div class="text-xl font-bold" style="color:#e11d48">{{ $metrics->money($cardPayable) }}</div>
            <div class="text-xs" style="color:var(--muted)">of {{ $metrics->money($cardLimit) }} limit</div>
        </div>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3">
        @forelse($cards as $card)
            @php $util = (float) $card->credit_limit > 0 ? min(100, ((float) $card->payable_balance / (float) $card->credit_limit) * 100) : 0; @endphp
            <div class="cc" style="background:{{ $card->color ?: 'linear-gradient(135deg,#6366f1,#8b5cf6)' }}">
                <div class="cc-row flex items-center justify-between">
                    <div class="cc-chip"></div>
                    <div style="font-size:12px;font-weight:800">{{ $card->short_name ?: strtoupper(substr($card->issuer, 0, 4)) }}</div>
                </div>
                <div class="cc-row">
                    <div class="label">Payable</div>
                    <div style="font-size:22px;font-weight:800">{{ $metrics->money($card->payable_balance, $card->currency) }}</div>
                    <div style="font-size:12px;opacity:.85">Limit {{ $metrics->money($card->credit_limit, $card->currency) }}</div>
                </div>
                <div class="cc-row">
                    <div class="flex justify-between" style="font-size:11px;opacity:.85"><span>{{ $card->card_name }}</span><span>{{ number_format($util, 0) }}%</span></div>
                    <div class="cc-meter"><div style="width:{{ $util }}%"></div></div>
                    <div style="font-size:11px;opacity:.85;margin-top:8px">Due {{ $card->due_date?->format('M d') ?: 'Not set' }}</div>
                </div>
            </div>
        @empty
            <div class="card p-4 text-sm" style="color:var(--muted)">No credit cards yet.</div>
        @endforelse
    </div>
</section>

<!-- INVENTORY + TRANSIT + COMPANY VALUE -->
<section class="grid grid-cols-1 lg:grid-cols-3 gap-4 mb-6">
    <div class="card p-5">
        <div class="flex items-center justify-between mb-2">
            <span class="section-title">Inventory Value</span>
            <span class="pill pill-cyan">Vouchers</span>
        </div>
        <div class="flex items-baseline gap-2">
            <span class="text-xl font-bold">Rs</span>
            <input type="number" class="editable" value="{{ number_format($metrics->convert($kpis['inventory'], 'USD', 'PKR'), 2, '.', '') }}" readonly>
        </div>
        <div class="divider mb-3 mt-3"></div>
        <div class="grid grid-cols-2 gap-3 text-sm">
            <div>
                <div style="color:var(--muted)" class="text-xs">Units in stock</div>
                <input type="number" class="editable small" value="{{ \App\Models\VoucherProduct::where('is_active', true)->get()->sum(fn($p) => $p->stock) }}" readonly>
            </div>
            <div>
                <div style="color:var(--muted)" class="text-xs">Avg. cost / unit</div>
                <div class="font-semibold mt-3">{{ $displayMoney($kpis['inventory'] > 0 ? $kpis['inventory'] / max(1, \App\Models\VoucherProduct::where('is_active', true)->get()->sum(fn($p) => $p->stock)) : 0) }}</div>
            </div>
        </div>
    </div>

    <div class="card p-5">
        <div class="flex items-center justify-between mb-2">
            <span class="section-title">Amount in Transit</span>
            <span class="pill pill-amber">Pending</span>
        </div>
        <div class="flex items-baseline gap-2">
            <span class="text-xl font-bold">Rs</span>
            <input type="number" class="editable" value="{{ number_format($metrics->convert($settings['amount_in_transit'], 'USD', 'PKR'), 2, '.', '') }}" readonly>
        </div>
        <div class="divider mb-3 mt-3"></div>
        <div class="grid grid-cols-2 gap-3 text-sm">
            <div>
                <div style="color:var(--muted)" class="text-xs">US -> PK transfers</div>
                <input type="number" class="editable small" value="{{ number_format($metrics->convert($settings['transit_us_pk'], 'USD', 'PKR'), 2, '.', '') }}" readonly>
            </div>
            <div>
                <div style="color:var(--muted)" class="text-xs">Customer settlements</div>
                <input type="number" class="editable small" value="{{ number_format($metrics->convert($settings['transit_customer'], 'USD', 'PKR'), 2, '.', '') }}" readonly>
            </div>
        </div>
    </div>

    <div class="card p-5" style="background:linear-gradient(135deg,#eef2ff 0%, #faf5ff 100%);border-color:#c7d2fe">
        <div class="flex items-center justify-between mb-2">
            <span class="section-title" style="color:#4338ca">Overall Net Worth</span>
            <span class="pill pill-green">Live</span>
        </div>
        <div class="text-xl font-bold mt-3" style="color:#3730a3;font-size:30px">{{ $displayMoney($kpis['net_worth']) }}</div>
        <div class="divider mb-3 mt-3"></div>
        <div class="text-sm space-y-1">
            <div class="flex justify-between"><span style="color:var(--muted)">Bank balances</span><span>{{ $displayMoney($kpis['bank_total']) }}</span></div>
            <div class="flex justify-between"><span style="color:var(--muted)">Inventory</span><span>{{ $displayMoney($kpis['inventory']) }}</span></div>
            <div class="flex justify-between"><span style="color:var(--muted)">In transit</span><span>{{ $displayMoney($kpis['transit']) }}</span></div>
            <div class="flex justify-between"><span style="color:var(--muted)">Collectible</span><span>{{ $displayMoney($kpis['collectible']) }}</span></div>
            <div class="flex justify-between" style="color:#e11d48"><span>Total debt</span><span>-{{ $displayMoney($kpis['debt']) }}</span></div>
        </div>
    </div>
</section>

<!-- CHARTS -->
<section class="grid grid-cols-1 lg:grid-cols-3 gap-4 mb-6">
    <div class="card p-5">
        <div class="flex items-center justify-between mb-3">
            <h3 class="font-semibold">Bank Allocation</h3>
            <span class="pill">USD eq.</span>
        </div>
        <div style="height:260px;display:flex;align-items:center;justify-content:center;color:var(--muted);background:var(--bg-2);border-radius:12px">Chart area</div>
    </div>
    <div class="card p-5">
        <div class="flex items-center justify-between mb-3">
            <h3 class="font-semibold">Expense Breakdown</h3>
            <span class="pill">This month</span>
        </div>
        <div style="height:260px;display:flex;align-items:center;justify-content:center;color:var(--muted);background:var(--bg-2);border-radius:12px">Chart area</div>
    </div>
    <div class="card p-5">
        <div class="flex items-center justify-between mb-3">
            <h3 class="font-semibold">Revenue vs. Expenses</h3>
            <span class="pill">Last 6 months</span>
        </div>
        <div style="height:260px;display:flex;align-items:center;justify-content:center;color:var(--muted);background:var(--bg-2);border-radius:12px">Chart area</div>
    </div>
</section>
@endsection