@php
    $money = fn ($value) => 'R '.number_format((float) $value, 2);
@endphp

<x-layouts.app title="Finance | Tarnova" page-title="Finance">
    <x-slot:headerActions>
        <a href="{{ route('payments-collections.index') }}" class="primary-button">Payments & Collections</a>
        @can('view-financial-reports')
            <a href="{{ route('reports.exports.collections') }}" class="secondary-button">Export Collections</a>
        @endcan
    </x-slot:headerActions>

    <x-workspace-module-nav workspace="finance" />

    <section class="grid gap-4 sm:grid-cols-2 xl:grid-cols-5">
        <div class="metric-card"><p class="metric-label">Total Received</p><p class="metric-value">{{ $money($summary['total_received']) }}</p></div>
        <div class="metric-card"><p class="metric-label">Outstanding Balance</p><p class="metric-value">{{ $money($summary['outstanding_balance']) }}</p></div>
        <div class="metric-card"><p class="metric-label">Overdue Balance</p><p class="metric-value text-amber-700">{{ $money($summary['overdue_balance']) }}</p></div>
        <div class="metric-card"><p class="metric-label">Pending Verification</p><p class="metric-value">{{ number_format($summary['pending_verification']) }}</p></div>
        <div class="metric-card"><p class="metric-label">This Month Revenue</p><p class="metric-value">{{ $money($summary['this_month_revenue']) }}</p></div>
    </section>

    <section class="grid gap-6 xl:grid-cols-3">
        <div class="section-card">
            <h3 class="section-title">Recent payments</h3>
            <div class="mt-5 space-y-3">
                @forelse ($recentPayments as $payment)
                    <a href="{{ route('invoices.show', $payment->invoice) }}" class="flex items-center justify-between gap-4 rounded-2xl border border-slate-200/80 bg-white/70 px-4 py-3 text-sm hover:border-brand-100 hover:bg-brand-50/50">
                        <span><strong class="text-slate-900">{{ $payment->invoice?->invoice_number }}</strong><span class="block text-xs text-slate-500">{{ $payment->invoice?->client?->name ?? 'No client' }}</span></span>
                        <span class="font-semibold text-slate-900">{{ $money($payment->amount_paid) }}</span>
                    </a>
                @empty
                    <x-empty-state title="No payments yet" description="Approved payments will appear here." />
                @endforelse
            </div>
        </div>
        <div class="section-card">
            <h3 class="section-title">Pending verification</h3>
            <div class="mt-5 space-y-3">
                @forelse ($pendingVerification as $payment)
                    <a href="{{ route('invoices.show', $payment->invoice) }}" class="flex items-center justify-between gap-4 rounded-2xl border border-slate-200/80 bg-white/70 px-4 py-3 text-sm hover:border-brand-100 hover:bg-brand-50/50">
                        <span><strong class="text-slate-900">{{ $payment->invoice?->invoice_number }}</strong><span class="block text-xs text-slate-500">{{ $payment->invoice?->client?->name ?? 'No client' }}</span></span>
                        <span class="status-badge status-partially-paid">Pending</span>
                    </a>
                @empty
                    <x-empty-state title="No pending payments" description="EFT proofs awaiting review will appear here." />
                @endforelse
            </div>
        </div>
        <div class="section-card">
            <h3 class="section-title">Overdue invoices</h3>
            <div class="mt-5 space-y-3">
                @forelse ($overdueInvoices as $invoice)
                    <a href="{{ route('invoices.show', $invoice) }}" class="flex items-center justify-between gap-4 rounded-2xl border border-slate-200/80 bg-white/70 px-4 py-3 text-sm hover:border-brand-100 hover:bg-brand-50/50">
                        <span><strong class="text-slate-900">{{ $invoice->invoice_number }}</strong><span class="block text-xs text-slate-500">{{ $invoice->client?->name ?? 'No client' }}</span></span>
                        <span class="font-semibold text-slate-900">{{ $money($invoice->balance_due ?? $invoice->remainingBalance()) }}</span>
                    </a>
                @empty
                    <x-empty-state title="No overdue invoices" description="Past-due balances will appear here." />
                @endforelse
            </div>
        </div>
    </section>
</x-layouts.app>