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

<x-layouts.app title="Sales | Tarnova" page-title="Sales">
    <x-slot:headerActions>
        <a href="{{ route('invoices.create') }}" class="primary-button">New invoice</a>
        <a href="{{ route('quotations.create') }}" class="secondary-button">New quotation</a>
    </x-slot:headerActions>

    <x-sales-module-nav />

    <section class="grid gap-4 sm:grid-cols-2 xl:grid-cols-6">
        <div class="metric-card"><p class="metric-label">Total Invoices</p><p class="metric-value">{{ number_format($summary['total_invoices']) }}</p></div>
        <div class="metric-card"><p class="metric-label">Outstanding</p><p class="metric-value">{{ $money($summary['outstanding_balance']) }}</p></div>
        <div class="metric-card"><p class="metric-label">Paid</p><p class="metric-value">{{ number_format($summary['paid_invoices']) }}</p></div>
        <div class="metric-card"><p class="metric-label">Active Quotations</p><p class="metric-value">{{ number_format($summary['active_quotations']) }}</p></div>
        <div class="metric-card"><p class="metric-label">Recurring</p><p class="metric-value">{{ number_format($summary['active_recurring']) }}</p></div>
        <div class="metric-card"><p class="metric-label">Active Credits</p><p class="metric-value">{{ number_format($summary['active_credit_notes']) }}</p></div>
    </section>

    <section class="grid gap-6 xl:grid-cols-3">
        <div class="section-card">
            <h3 class="section-title">Recent invoices</h3>
            <div class="mt-5 space-y-3">
                @forelse ($recentInvoices 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="{{ $invoice->statusBadgeClass() }}">{{ $invoice->statusLabel() }}</span>
                    </a>
                @empty
                    <x-empty-state title="No invoices yet" description="Create an invoice to start tracking sales." />
                @endforelse
            </div>
        </div>
        <div class="section-card">
            <h3 class="section-title">Recent quotations</h3>
            <div class="mt-5 space-y-3">
                @forelse ($recentQuotations as $quotation)
                    <a href="{{ route('quotations.edit', $quotation) }}" 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">{{ $quotation->quotation_number }}</strong><span class="block text-xs text-slate-500">{{ $quotation->client?->name ?? 'No client' }}</span></span>
                        <span class="{{ $quotation->statusBadgeClass() }}">{{ $quotation->statusLabel() }}</span>
                    </a>
                @empty
                    <x-empty-state title="No quotations yet" description="Create a quotation when a client asks for pricing." />
                @endforelse
            </div>
        </div>
        <div class="section-card">
            <h3 class="section-title">Recent credit notes</h3>
            <div class="mt-5 space-y-3">
                @forelse ($recentCreditNotes as $creditNote)
                    <a href="{{ route('credit-notes.show', $creditNote) }}" 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">{{ $creditNote->credit_note_number }}</strong><span class="block text-xs text-slate-500">{{ $creditNote->invoice?->invoice_number ?? 'No invoice' }}</span></span>
                        <span class="font-semibold text-slate-900">{{ $money($creditNote->amount) }}</span>
                    </a>
                @empty
                    <x-empty-state title="No credit notes yet" description="Credits will appear here." />
                @endforelse
            </div>
        </div>
    </section>
</x-layouts.app>