@extends('layouts.finance')

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

@section('content')
@php
    $settings = $data['settings'];
    $accounts = $data['bank_accounts'];
    $walletAccounts = $accounts->filter(fn($account) => trim((string) ($account->transaction_category ?? '')) === 'Wallets');
    $usAccounts = $accounts
        ->where('currency', 'USD')
        ->reject(fn($account) => trim((string) ($account->transaction_category ?? '')) === 'Wallets');
    $pkAccounts = $accounts->where('currency', 'PKR');
    $auAccounts = $accounts->where('currency', 'AUD');
    $cards = $data['credit_cards'];
    $inventoryProducts = $data['inventory_products'] ?? collect();
    $inventoryUnits = $inventoryProducts->sum(fn($p) => $p->stock);
    $kpis = $data['kpis'];
    $kuickpayToday = $data['kuickpay_today'] ?? ['total' => 0, 'count' => 0, 'fee' => 0, 'payout_date' => null, 'received' => false];
    $kuickpayPendingYesterday = $data['kuickpay_pending_yesterday'] ?? ['date' => null, 'remaining' => 0, 'net' => 0, 'fee' => 0, 'gross' => 0, 'status' => null];
    $kuickpayBacklog = $data['kuickpay_pending_backlog'] ?? ['total' => 0, 'count' => 0];
    $verification = $data['verification'] ?? [
        'currency' => 'PKR',
        'business_total' => 0,
        'business_total_before_liabilities' => 0,
        'inventory_amount' => 0,
        'lent_amount' => 0,
        'transit_amount' => 0,
        'credit_card_debt' => 0,
        'loan_debt' => 0,
        'liabilities_total' => 0,
        'bank_balance' => 0,
        'kuickpay_today_amount' => 0,
        'kuickpay_today_fee' => 0,
        'kuickpay_today_net' => 0,
        'store_credit_amount' => 0,
        'store_credit_source' => null,
        'kuickpay_pending_balance' => 0,
        'kuickpay_pending_gross' => 0,
    ];
    $displayCurrency = 'PKR';
    $displayMoney = fn($amount) => $metrics->moneyIn($amount, 'USD', $displayCurrency);
    $agentPointCards = app(\App\Support\AgentPointsReportService::class)->dashboardCards();
    $kuickpayPendingTotal = (float) ($verification['kuickpay_pending_balance'] ?? (($kuickpayPendingYesterday['remaining'] ?? 0) + ($kuickpayBacklog['total'] ?? 0)));
    $kuickpayPendingGross = (float) ($verification['kuickpay_pending_gross'] ?? 0);
    // Before-fee (gross) equivalent of yesterday's unsettled remaining, proportional.
    $kuickpayYesterdayGross = (($kuickpayPendingYesterday['net'] ?? 0) > 0)
        ? (float) ($kuickpayPendingYesterday['gross'] ?? 0) * (($kuickpayPendingYesterday['remaining'] ?? 0) / $kuickpayPendingYesterday['net'])
        : 0.0;
    $kuickpayPendingDayCount = (int) ($kuickpayBacklog['count'] ?? 0) + (((float) ($kuickpayPendingYesterday['remaining'] ?? 0)) > 0 ? 1 : 0);
    // PayFast settlement mirror (same shape as KuickPay).
    $payfastToday = $data['payfast_today'] ?? ['total' => 0, 'count' => 0, 'fee' => 0, 'payout_date' => null, 'received' => false];
    $payfastPendingYesterday = $data['payfast_pending_yesterday'] ?? ['date' => null, 'remaining' => 0, 'net' => 0, 'fee' => 0, 'gross' => 0, 'status' => null];
    $payfastBacklog = $data['payfast_pending_backlog'] ?? ['total' => 0, 'count' => 0];
    $payfastTodayNet = max(0.0, (float) ($payfastToday['total'] ?? 0) - (float) ($payfastToday['fee'] ?? 0));
    $payfastPendingTotal = (float) ($verification['payfast_pending_balance'] ?? (($payfastPendingYesterday['remaining'] ?? 0) + ($payfastBacklog['total'] ?? 0)));
    $payfastPendingGross = (float) ($verification['payfast_pending_gross'] ?? 0);
    $payfastPendingDayCount = (int) ($payfastBacklog['count'] ?? 0) + (((float) ($payfastPendingYesterday['remaining'] ?? 0)) > 0 ? 1 : 0);
    $kuickpayProviderCards = collect($metrics->kuickpayProviders())->map(function ($provider, $key) use ($metrics) {
        $today = $metrics->kuickpayToday($key);

        return [
            'key' => $key,
            'label' => $provider['label'],
            'prefix' => $provider['prefix'],
            'today' => $today,
            'net' => max(0.0, (float) ($today['total'] ?? 0) - (float) ($today['fee'] ?? 0)),
        ];
    });

    $usSubtotal = $usAccounts->sum(fn($a) => $a->current_balance);
    $walletSubtotal = $walletAccounts->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));
    $runningProfit = $data['running_profit'] ?? ['years' => [], 'current_year_profit' => 0];
    $currentYearExpense = (float) ($runningProfit['years'][0]['expenses'] ?? 0);
    $currentYearProfit = (float) ($runningProfit['current_year_profit'] ?? ($kpis['running_profit_year'] ?? 0));
    $bankLogo = fn($account) => strtoupper(substr($account->bank_name ?: $account->name, 0, 4));
    $bankColor = fn($currency) => $currency === 'PKR' ? '#1e3a8a' : ($currency === 'AUD' ? '#0d9488' : '#6366f1');
@endphp

<div id="finance-dashboard-live-root">
<section class="mb-6">
    <div class="flex items-center justify-between mb-3">
        <div>
            <h2 class="text-base font-bold" style="margin:0">Overall</h2>
            <p class="text-xs" style="color:var(--muted);margin:2px 0 0">Core business cards and live monthly / yearly totals</p>
        </div>
        <span class="pill pill-amber">{{ $verification['currency'] }}</span>
    </div>
    <div class="grid kpi-grid gap-3">
        <a href="{{ route('dashboard.cards.business-total') }}" class="card kpi-card card-hover" style="display:block;text-decoration:none;color:inherit;background:linear-gradient(135deg,#fffbeb,#ffffff);border-color:#fde68a">
            <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="M3 3v18h18"/><path d="M19 9l-5 5-4-4-3 3"/></svg></div>
            <div class="kpi-label">Total Amount in Business</div>
            <div class="kpi-value">{{ $metrics->money($verification['business_total'], $verification['currency']) }}</div>
            <div class="kpi-sub" style="margin-top:4px;color:#92400e">Before liabilities {{ $metrics->money($verification['business_total_before_liabilities'] ?? $verification['business_total'], $verification['currency']) }}</div>
            <div class="kpi-sub">Bank + inventory + lent + transit + KuickPay - liabilities</div>
        </a>
        <a href="{{ route('dashboard.cards.inventory') }}" class="card kpi-card card-hover" style="display:block;text-decoration:none;color:inherit">
            <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 Amount</div>
            <div class="kpi-value">{{ $metrics->money($verification['inventory_amount'], $verification['currency']) }}</div>
            <div class="kpi-sub">{{ number_format($inventoryUnits) }} units in stock</div>
        </a>
        <a href="{{ route('dashboard.cards.collectible') }}" class="card kpi-card card-hover" style="display:block;text-decoration:none;color:inherit">
            <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"/></svg></div>
            <div class="kpi-label">Lent Amount</div>
            <div class="kpi-value">{{ $metrics->money($verification['lent_amount'], $verification['currency']) }}</div>
            <div class="kpi-sub">Open collectible balance</div>
        </a>
        <a href="{{ route('dashboard.cards.bank') }}" class="card kpi-card card-hover" style="display:block;text-decoration:none;color:inherit">
            <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">{{ $metrics->money($verification['bank_balance'], $verification['currency']) }}</div>
            <div class="kpi-sub">All active bank accounts</div>
        </a>
        <a href="{{ route('dashboard.cards.networth') }}" class="card kpi-card card-hover" style="cursor:pointer;display:block;text-decoration:none;color:inherit">
        <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>
        
    </a>
    <a href="{{ route('dashboard.cards.store-credit') }}" class="card kpi-card card-hover" style="display:block;text-decoration:none;color:inherit">
            <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="M20 12V7a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-1"/><path d="M16 12h5v3h-5a1.5 1.5 0 0 1 0-3z"/></svg></div>
            <div class="kpi-label">Store Credit</div>
            <div class="kpi-value">{{ $metrics->money($verification['store_credit_amount'], $verification['currency']) }}</div>
            <div class="kpi-sub">Available across all users</div>
        </a>
        <a href="{{ route('dashboard.cards.transit') }}" class="card kpi-card card-hover" style="cursor:pointer;display:block;text-decoration:none;color:inherit">
        <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>
    </a>
     <a href="{{ route('dashboard.cards.expenses') }}" class="card kpi-card card-hover" style="cursor:pointer;display:block;text-decoration:none;color:inherit">
        <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>
    </a>
    <a href="{{ route('dashboard.cards.revenue') }}" class="card kpi-card card-hover" style="cursor:pointer;display:block;text-decoration:none;color:inherit">
        <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>
    </a>
    <a href="{{ route('dashboard.cards.profit') }}" class="card kpi-card card-hover" style="cursor:pointer;display:block;text-decoration:none;color:inherit">
        <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">Profit (Mo.)</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>
    </a>
      <a href="{{ route('dashboard.cards.debt') }}" class="card kpi-card card-hover" style="cursor:pointer;display:block;text-decoration:none;color:inherit;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>
    </a>
    
     <a href="{{ route('dashboard.cards.expenses') }}" class="card kpi-card card-hover" style="cursor:pointer;display:block;text-decoration:none;color:inherit">
        <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">Expense (Year)</div>
        <div class="kpi-value" style="color:#ef4444">{{ $displayMoney($currentYearExpense) }}</div>
    </a>
    <a href="{{ route('dashboard.cards.running-profit') }}" class="card kpi-card card-hover" style="cursor:pointer;display:block;text-decoration:none;color:inherit;background:linear-gradient(135deg,{{ $currentYearProfit >= 0 ? '#ecfdf5,#ffffff' : '#fef2f2,#ffffff' }});border-color:{{ $currentYearProfit >= 0 ? '#a7f3d0' : '#fecaca' }}">
        <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">Profit (Year)</div>
        <div class="kpi-value" style="color:{{ $currentYearProfit >= 0 ? '#10b981' : '#ef4444' }}">{{ $displayMoney($currentYearProfit) }}</div>
    </a>
    </div>
</section>

<section class="mb-6">
    <div class="flex items-center justify-between mb-3">
        <div>
            <h2 class="text-base font-bold" style="margin:0">Charitable &amp; Zakaat</h2>
            <p class="text-xs" style="color:var(--muted);margin:2px 0 0">Giving and obligation estimates</p>
        </div>
    </div>
    <div class="grid kpi-grid gap-3">
        <a href="{{ route('dashboard.cards.charity') }}" class="card kpi-card card-hover" style="cursor:pointer;display:block;text-decoration:none;color:inherit">
            <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="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg></div>
            <div class="kpi-label">Charity</div>
            <div class="kpi-value" style="color:#db2777">{{ $displayMoney($kpis['charity']) }}</div>
            <div class="kpi-sub">2% of monthly net profit</div>
        </a>
        <a href="{{ route('dashboard.cards.zakat') }}" class="card kpi-card card-hover" style="cursor:pointer;display:block;text-decoration:none;color:inherit">
            <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>
        </a>
    </div>
</section>

<section class="mb-6">
    <div class="flex items-center justify-between mb-3">
        <div>
            <h2 class="text-base font-bold" style="margin:0">KuickPay</h2>
            <p class="text-xs" style="color:var(--muted);margin:2px 0 0">Provider collections, fees, and pending balances</p>
        </div>
        <span class="pill pill-green">Live</span>
    </div>
    <div class="grid kpi-grid gap-3">
        @foreach($kuickpayProviderCards as $providerCard)
            <a href="{{ route('dashboard.cards.kuickpay', ['provider' => $providerCard['key'], 'mode' => 'date', 'from' => now()->toDateString(), 'to' => now()->toDateString()]) }}" class="card kpi-card card-hover" style="display:block;text-decoration:none;color:inherit">
                <div class="kpi-icon ico-bg-green"><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">{{ $providerCard['label'] }}</div>
                <div class="kpi-value">{{ $metrics->money($providerCard['net'], $verification['currency']) }}</div>
                <div class="kpi-sub">Before fee {{ $metrics->money($providerCard['today']['total'] ?? 0, $verification['currency']) }} · Pending {{ $metrics->money($verification['kuickpay_pending_balance'] ?? 0, $verification['currency']) }}</div>
            </a>
        @endforeach
        <a href="{{ route('dashboard.cards.kuickpay', ['mode' => 'date', 'from' => now()->toDateString(), 'to' => now()->toDateString()]) }}" class="card kpi-card card-hover" style="display:block;text-decoration:none;color:inherit">
            <div class="kpi-icon ico-bg-teal"><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"/><line x1="6" y1="15" x2="10" y2="15"/></svg></div>
            <div class="kpi-label">All KuickPay — Today</div>
            <div class="kpi-value">{{ $metrics->money(($kuickpayToday['total'] ?? 0) - ($kuickpayToday['fee'] ?? 0), 'PKR') }}</div>
            <div class="kpi-sub">Before fee {{ $metrics->money($kuickpayToday['total'], 'PKR') }} · Fee {{ $metrics->money($kuickpayToday['fee'] ?? 0, 'PKR') }}</div>
        </a>
        <a href="{{ route('dashboard.cards.kuickpay', ['mode' => 'date', 'from' => now()->toDateString(), 'to' => now()->toDateString()]) }}" class="card kpi-card card-hover" style="display:block;text-decoration:none;color:inherit">
            <div class="kpi-icon ico-bg-red"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 1v22"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7H14a3.5 3.5 0 0 1 0 7H7"/></svg></div>
            <div class="kpi-label">All KuickPay Fee</div>
            <div class="kpi-value" style="color:#ef4444">{{ $metrics->money($verification['kuickpay_today_fee'], $verification['currency']) }}</div>
            <div class="kpi-sub">{{ number_format($kuickpayToday['count'] ?? 0) }} paid today</div>
        </a>
        <a href="{{ route('dashboard.cards.kuickpay-pending') }}" class="card kpi-card card-hover" style="display:block;text-decoration:none;color:inherit{{ $verification['kuickpay_pending_balance'] > 0 ? ';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"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg></div>
            <div class="kpi-label">Examism KuickPay Pending Balance</div>
            <div class="kpi-value" style="color:#e11d48">{{ $metrics->money($verification['kuickpay_pending_balance'], $verification['currency']) }}</div>
            <div class="kpi-sub">Before fee {{ $metrics->money($kuickpayPendingGross, $verification['currency']) }} · net unsettled</div>
        </a>
    </div>
</section>

<section class="mb-6">
    <div class="flex items-center justify-between mb-3">
        <div>
            <h2 class="text-base font-bold" style="margin:0">PayFast</h2>
            <p class="text-xs" style="color:var(--muted);margin:2px 0 0">Today collections and unsettled pending balance</p>
        </div>
        <span class="pill pill-cyan">Live</span>
    </div>
    <div class="grid kpi-grid gap-3">
        <a href="{{ route('dashboard.cards.payfast', ['mode' => 'date', 'from' => now()->toDateString(), 'to' => now()->toDateString()]) }}" class="card kpi-card card-hover" style="display:block;text-decoration:none;color:inherit">
            <div class="kpi-icon ico-bg-cyan"><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"/><path d="M2 10h20"/><path d="M6 15h5"/></svg></div>
            <div class="kpi-label">PayFast — Today</div>
            <div class="kpi-value" style="color:#0891b2">{{ $metrics->money($payfastTodayNet, 'PKR') }}</div>
            <div class="kpi-sub">Before fee {{ $metrics->money($payfastToday['total'] ?? 0, 'PKR') }} · Fee {{ $metrics->money($payfastToday['fee'] ?? 0, 'PKR') }}</div>
        </a>
        <a href="{{ route('dashboard.cards.payfast-pending') }}" class="card kpi-card card-hover" style="display:block;text-decoration:none;color:inherit{{ $payfastPendingTotal > 0 ? ';background:#ecfeff;border-color:#a5f3fc' : '' }}">
            <div class="kpi-icon ico-bg-cyan"><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">PayFast Pending Balance</div>
            <div class="kpi-value" style="color:#0e7490">{{ $metrics->money($payfastPendingTotal, 'PKR') }}</div>
            <div class="kpi-sub">Before fee {{ $metrics->money($payfastPendingGross, 'PKR') }} · {{ number_format($payfastPendingDayCount) }} pending day(s)</div>
        </a>
    </div>
</section>

<section class="mb-6">
    <div class="flex items-center justify-between mb-3">
        <div>
            <h2 class="text-base font-bold" style="margin:0">Factory</h2>
            <p class="text-xs" style="color:var(--muted);margin:2px 0 0">Current month factory expense and revenue cards</p>
        </div>
        <span class="pill pill-teal">Monthly</span>
    </div>
    <div class="grid kpi-grid gap-3">
        <a href="{{ route('dashboard.cards.factory-expense') }}" class="card kpi-card card-hover" style="cursor:pointer;display:block;text-decoration:none;color:inherit;background:linear-gradient(135deg,#fff7ed,#ffffff);border-color:#fed7aa">
            <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="M3 21h18"/><path d="M5 21V8l7-5 7 5v13"/><path d="M9 21v-7h6v7"/></svg></div>
            <div class="kpi-label">Expense</div>
            <div class="kpi-value" style="color:#ea580c">{{ $displayMoney($kpis['factory_expense'] ?? 0) }}</div>
            <div class="kpi-sub">Factory expense rows and factory payments</div>
        </a>
        <a href="{{ route('dashboard.cards.factory-payout') }}" class="card kpi-card card-hover" style="cursor:pointer;display:block;text-decoration:none;color:inherit;background:linear-gradient(135deg,#ecfdf5,#ffffff);border-color:#a7f3d0">
            <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="M3 3v18h18"/><path d="m7 13 4-4 3 3 5-6"/><path d="M18 6h1v5"/></svg></div>
            <div class="kpi-label">Revenue</div>
            <div class="kpi-value" style="color:#059669">{{ $displayMoney($kpis['factory_payout'] ?? 0) }}</div>
            <div class="kpi-sub">Bank credits marked Factory Payout</div>
        </a>
    </div>
</section>

<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">Wallets <span class="pill pill-cyan">USD</span></h2>
            <p class="text-xs" style="color:var(--muted);margin:0">Live balances across all wallet and gateway accounts</p>
        </div>
        <div class="text-right">
            <div class="section-title">Subtotal</div>
            <div class="text-xl font-bold">{{ $metrics->money($walletSubtotal) }}</div>
        </div>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3">
        @forelse($walletAccounts as $account)
            <div class="card card-hover p-4">
                <div class="flex items-center justify-between mb-3">
                    <div class="bank-logo" style="background:#06b6d415;color:#0891b2;border:1px solid #06b6d444">{{ $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 wallet accounts yet.</div>
        @endforelse
    </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">
    <a href="{{ route('dashboard.cards.inventory') }}" class="card card-hover p-5" style="display:block;text-decoration:none;color:inherit">
        <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>
            <span class="editable-display">{{ number_format($metrics->convert($kpis['inventory'], 'USD', 'PKR'), 2, '.', '') }}</span>
        </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>
                <span class="editable-display small">{{ $inventoryUnits }}</span>
            </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, $inventoryUnits) : 0) }}</div>
            </div>
        </div>
    </a>

    <a href="{{ route('dashboard.cards.transit') }}" class="card card-hover p-5" style="display:block;text-decoration:none;color:inherit">
        <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>
            <span class="editable-display">{{ number_format($metrics->convert($kpis['transit'], 'USD', 'PKR'), 2, '.', '') }}</span>
        </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">Transit invoices</div>
                <span class="editable-display small">{{ \App\Models\FinanceInvoice::where('status', 'transit')->count() }}</span>
            </div>
            <div>
                <div style="color:var(--muted)" class="text-xs">Source</div>
                <div class="font-semibold mt-3">Invoice status</div>
            </div>
        </div>
    </a>

    <a href="{{ route('dashboard.cards.networth') }}" class="card card-hover p-5" style="display:block;text-decoration:none;color:inherit;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>
    </a>
</section>
</div>

<!-- CHARTS -->
@php
    $trendData    = $metrics->trendMonths(6);
    $bankChart    = $data['charts']['bank_allocation'];
    $expChart     = $data['charts']['expense_breakdown'];

    // Palette used consistently across all three charts
    $palette = ['#6366f1','#10b981','#f59e0b','#06b6d4','#ec4899','#ef4444','#8b5cf6','#0d9488','#f97316','#3b82f6'];
@endphp
<section class="grid grid-cols-1 lg:grid-cols-3 gap-4 mb-6">

    {{-- Bank Allocation doughnut --}}
    <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>
        @if(count($bankChart['labels']) > 0)
            <div style="height:260px;position:relative"><canvas id="bankAllocChart"></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 accounts with positive balances yet.
            </div>
        @endif
    </div>

    {{-- Expense Breakdown doughnut --}}
    <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>
        @if(count($expChart['labels']) > 0)
            <div style="height:260px;position:relative"><canvas id="expBreakChart"></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 expenses recorded this month.
            </div>
        @endif
    </div>

    {{-- Revenue vs Expenses 6-month bar --}}
    <a href="{{ route('dashboard.cards.revenue') }}" class="card card-hover p-5" style="display:block;text-decoration:none;color:inherit">
        <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;position:relative"><canvas id="trendBarChart"></canvas></div>
    </a>

</section>

@push('scripts')
<script src="{{ asset('chart.umd.min.js') }}"></script>
<script>
(function () {
    'use strict';

    var refreshUrl = @json(route('dashboard'));
    var refreshRootId = 'finance-dashboard-live-root';
    var refreshIntervalMs = 65000;
    var refreshInFlight = false;
    var animationDurationMs = 60000;
    var animationRunningCount = 0;

    function parseNumericValue(text) {
        if (!text) {
            return null;
        }

        var cleaned = String(text).replace(/,/g, '').match(/-?\d+(?:\.\d+)?/);
        return cleaned ? parseFloat(cleaned[0]) : null;
    }

    function formatLike(sourceText, value) {
        var source = String(sourceText || '');
        var decimalsMatch = source.replace(/,/g, '').match(/\.\d+/);
        var decimals = decimalsMatch ? decimalsMatch[0].length - 1 : 0;
        var formatted = Number(value || 0).toLocaleString('en-US', {
            minimumFractionDigits: decimals,
            maximumFractionDigits: decimals
        });

        if (source.includes('Rs ')) {
            return 'Rs ' + formatted;
        }
        if (source.includes('A$')) {
            return 'A$' + formatted;
        }
        if (source.includes('$')) {
            return '$' + formatted;
        }

        return formatted;
    }

    function animateValueChange(element, previousText, nextText) {
        if (!element) {
            return;
        }

        var currentText = String(previousText || '').trim();
        var currentValue = parseNumericValue(currentText);
        var nextValue = parseNumericValue(nextText);

        if (currentValue === null || nextValue === null || currentText === nextText.trim()) {
            element.textContent = nextText;
            return;
        }

        var tickMs = 1000;
        var totalSteps = Math.max(1, Math.round(animationDurationMs / tickMs));
        var currentStep = 0;

        animationRunningCount += 1;

        var timer = setInterval(function () {
            currentStep += 1;

            var progress = Math.min(currentStep / totalSteps, 1);
            var value = currentValue + ((nextValue - currentValue) * progress);

            element.textContent = formatLike(nextText, value);

            if (progress >= 1) {
                clearInterval(timer);
                element.textContent = nextText;
                animationRunningCount = Math.max(0, animationRunningCount - 1);
            }
        }, tickMs);

        // Show the previous value first, then begin stepping slowly.
        element.textContent = currentText;

        if (currentText === nextText.trim()) {
            clearInterval(timer);
            animationRunningCount = Math.max(0, animationRunningCount - 1);
        }
    }

    function captureNumericSnapshots(root) {
        var selectors = ['.kpi-value', '.text-xl.font-bold', '.editable-display', '.editable-display.small'];
        var snapshots = [];

        selectors.forEach(function (selector) {
            root.querySelectorAll(selector).forEach(function (node) {
                snapshots.push(node.textContent.trim());
            });
        });

        return snapshots;
    }

    function syncAnimatedNumbers(currentRoot, previousSnapshots) {
        var selectors = ['.kpi-value', '.text-xl.font-bold', '.editable-display', '.editable-display.small'];
        var snapshotIndex = 0;

        selectors.forEach(function (selector) {
            currentRoot.querySelectorAll(selector).forEach(function (node) {
                if (typeof previousSnapshots[snapshotIndex] === 'undefined') {
                    snapshotIndex += 1;
                    return;
                }

                animateValueChange(node, previousSnapshots[snapshotIndex], node.textContent.trim());
                snapshotIndex += 1;
            });
        });
    }

    function refreshDashboardCards() {
        if (refreshInFlight || document.hidden || animationRunningCount > 0) {
            return;
        }

        refreshInFlight = true;

        fetch(refreshUrl + '?_live_refresh=' + Date.now(), {
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            },
            credentials: 'same-origin'
        })
            .then(function (response) {
                if (!response.ok) {
                    throw new Error('Dashboard refresh failed');
                }

                return response.text();
            })
            .then(function (html) {
                var parser = new DOMParser();
                var doc = parser.parseFromString(html, 'text/html');
                var nextRoot = doc.getElementById(refreshRootId);
                var currentRoot = document.getElementById(refreshRootId);

                if (!nextRoot || !currentRoot) {
                    return;
                }

                var previousSnapshots = captureNumericSnapshots(currentRoot);
                currentRoot.innerHTML = nextRoot.innerHTML;
                syncAnimatedNumbers(currentRoot, previousSnapshots);
            })
            .catch(function () {
                // Silent failure: the dashboard keeps the last successful values.
            })
            .finally(function () {
                refreshInFlight = false;
            });
    }

    setInterval(refreshDashboardCards, refreshIntervalMs);
})();
</script>
<script>
(function () {
    'use strict';

    // Data injected server-side — all values are already numbers/strings,
    // encoded by Laravel's @@json() which HTML-entity-encodes the output.
    var bankLabels  = @json($bankChart['labels']);
    var bankValues  = @json($bankChart['values']);
    var expLabels   = @json($expChart['labels']);
    var expValues   = @json($expChart['values']);
    var trendLabels = @json($trendData['labels']);
    var trendRev    = @json($trendData['revenue']);
    var trendExp    = @json($trendData['expenses']);

    var palette = @json($palette);

    // Shared Chart.js defaults
    Chart.defaults.font.family = "Inter, system-ui, -apple-system, sans-serif";
    Chart.defaults.font.size   = 12;

    function sliceColors(count) {
        var out = [];
        for (var i = 0; i < count; i++) {
            out.push(palette[i % palette.length]);
        }
        return out;
    }

    // Bank Allocation doughnut
    var bankEl = document.getElementById('bankAllocChart');
    if (bankEl && bankLabels.length > 0) {
        new Chart(bankEl, {
            type: 'doughnut',
            data: {
                labels: bankLabels,
                datasets: [{
                    data: bankValues,
                    backgroundColor: sliceColors(bankLabels.length),
                    borderWidth: 2,
                    borderColor: '#ffffff'
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { position: 'bottom', labels: { boxWidth: 10, padding: 10, font: { size: 11 } } },
                    tooltip: {
                        callbacks: {
                            label: function(ctx) {
                                var val = ctx.raw;
                                return ' $' + val.toLocaleString('en-US', { maximumFractionDigits: 0 });
                            }
                        }
                    }
                }
            }
        });
    }

    // Expense Breakdown doughnut
    var expEl = document.getElementById('expBreakChart');
    if (expEl && expLabels.length > 0) {
        new Chart(expEl, {
            type: 'doughnut',
            data: {
                labels: expLabels,
                datasets: [{
                    data: expValues,
                    backgroundColor: sliceColors(expLabels.length),
                    borderWidth: 2,
                    borderColor: '#ffffff'
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { position: 'bottom', labels: { boxWidth: 10, padding: 10, font: { size: 11 } } },
                    tooltip: {
                        callbacks: {
                            label: function(ctx) {
                                var val = ctx.raw;
                                return ' $' + val.toLocaleString('en-US', { maximumFractionDigits: 0 });
                            }
                        }
                    }
                }
            }
        });
    }

    // Revenue vs Expenses bar
    var trendEl = document.getElementById('trendBarChart');
    if (trendEl) {
        new Chart(trendEl, {
            type: 'bar',
            data: {
                labels: trendLabels,
                datasets: [
                    {
                        label: 'Revenue',
                        data: trendRev,
                        backgroundColor: 'rgba(16, 185, 129, 0.8)',
                        borderRadius: 5
                    },
                    {
                        label: 'Expenses',
                        data: trendExp,
                        backgroundColor: 'rgba(239, 68, 68, 0.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(ctx) {
                                var val = ctx.raw;
                                return ' ' + ctx.dataset.label + ': $' + val.toLocaleString('en-US', { maximumFractionDigits: 0 });
                            }
                        }
                    }
                },
                scales: {
                    x: { grid: { display: false } },
                    y: {
                        grid: { color: 'rgba(0,0,0,0.05)' },
                        ticks: {
                            callback: function(val) {
                                return '$' + (val >= 1000 ? (val/1000).toFixed(0) + 'k' : val);
                            }
                        }
                    }
                }
            }
        });
    }
}());
</script>
@endpush
@endsection