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

<x-layouts.app title="Clients | Tarnova" page-title="Clients workspace">
    <x-slot:headerActions>
        <a href="{{ route('clients.create') }}" class="primary-button">New client</a>
        @can('view-financial-reports')
            <a href="{{ route('reports.exports.clients') }}" class="secondary-button">Export Clients</a>
        @endcan
    </x-slot:headerActions>

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

    <section class="grid gap-4 sm:grid-cols-3">
        <div class="metric-card"><p class="metric-label">Total Clients</p><p class="metric-value">{{ number_format($summary['total_clients']) }}</p></div>
        <div class="metric-card"><p class="metric-label">Active Clients</p><p class="metric-value">{{ number_format($summary['active_clients']) }}</p></div>
        <div class="metric-card"><p class="metric-label">Outstanding Clients</p><p class="metric-value">{{ number_format($summary['outstanding_clients']) }}</p></div>
    </section>

    <section class="grid gap-6 xl:grid-cols-3">
        <div class="section-card">
            <h3 class="section-title">Recent clients</h3>
            <div class="mt-5 space-y-3">
                @forelse ($recentClients as $client)
                    <a href="{{ route('clients.edit', $client) }}" 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">{{ $client->name }}</strong><span class="block text-xs text-slate-500">{{ $client->email ?: 'No email' }}</span></span>
                        <span class="text-xs font-semibold text-slate-500">{{ $client->invoices_count }} invoices</span>
                    </a>
                @empty
                    <x-empty-state title="No clients yet" description="Create a client to begin." />
                @endforelse
            </div>
        </div>
        <div id="client-statements" class="section-card scroll-mt-28">
            <h3 class="section-title">Recent statements</h3>
            <div class="mt-5 space-y-3">
                @forelse ($recentStatements as $statement)
                    <a href="{{ route('clients.statement', $statement->client) }}" class="block 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">
                        <strong class="text-slate-900">{{ $statement->client?->name ?? 'Client' }}</strong>
                        <span class="block text-xs text-slate-500">{{ optional($statement->created_at)->format('d M Y') }}</span>
                    </a>
                @empty
                    <x-empty-state title="No statements yet" description="Sent statements will appear here." />
                @endforelse
            </div>
        </div>
        <div class="section-card">
            <h3 class="section-title">Outstanding clients</h3>
            <div class="mt-5 space-y-3">
                @forelse ($outstandingClients as $client)
                    <div class="flex items-center justify-between gap-4 rounded-2xl border border-slate-200/80 bg-white/70 px-4 py-3 text-sm">
                        <span><strong class="text-slate-900">{{ $client->name }}</strong><span class="block text-xs text-slate-500">{{ $client->open_invoice_count }} open invoices</span></span>
                        <span class="font-semibold text-slate-900">{{ $money($client->outstanding_balance) }}</span>
                    </div>
                @empty
                    <x-empty-state title="No outstanding clients" description="Client balances are clear." />
                @endforelse
            </div>
        </div>
    </section>
</x-layouts.app>