@extends('layouts.admin', [
    'title' => 'Invoice Report',
    'pageTitle' => 'Invoice Report',
    'active' => 'reports',
])

@section('content')
    <div class="space-y-5">
        <div class="flex min-w-0 flex-col gap-3 2xl:flex-row 2xl:items-center 2xl:justify-between">
            <p class="text-sm font-medium leading-6 text-booklio-muted">Monitor invoice volume, paid and unpaid totals, overdue invoices, and collection health.</p>
            @include('admin.reports.partials.nav', ['activeTab' => 'invoices'])
        </div>

        @include('admin.reports.partials.filters')

        <section class="grid gap-5 sm:grid-cols-2 xl:grid-cols-5">
            @foreach ($kpis as $item)
                <x-ui.card>
                    <p class="text-sm font-semibold text-slate-600">{{ $item['label'] }}</p>
                    <p class="mt-3 text-3xl font-extrabold">{{ $item['value'] }}</p>
                    <p @class([
                        'mt-4 text-xs font-semibold',
                        'text-emerald-600' => ($item['tone'] ?? null) === 'success',
                        'text-amber-600' => ($item['tone'] ?? null) === 'warning',
                        'text-red-600' => ($item['tone'] ?? null) === 'danger',
                        'text-booklio-muted' => ! in_array(($item['tone'] ?? null), ['success', 'warning', 'danger'], true),
                    ])>{{ $item['note'] }}</p>
                </x-ui.card>
            @endforeach
        </section>

        <section class="grid gap-5 xl:grid-cols-[minmax(0,1fr)_360px]">
            <x-ui.card title="Invoice Amount Summary">
                <div class="mt-4 h-64 rounded-xl border border-booklio-border bg-slate-50 p-5">
                    <div class="flex h-full items-end gap-4">
                        @forelse ($amountBars as $bar)
                            <div class="flex-1 rounded-t-lg bg-booklio-primary" style="height: {{ $bar['height'] }}px"></div>
                        @empty
                            <div class="flex h-full w-full items-center justify-center text-sm font-bold text-booklio-muted">No invoices in this range.</div>
                        @endforelse
                    </div>
                </div>
            </x-ui.card>
            <x-ui.card title="Collection Health">
                <div class="space-y-4">
                    @foreach ($collectionHealth as $item)
                        <div><div class="flex justify-between text-sm font-bold"><span class="text-booklio-muted">{{ $item['label'] }}</span><span>{{ $item['percent'] }}%</span></div><div class="mt-2 h-2 rounded-full bg-slate-100"><div class="h-2 rounded-full {{ $item['class'] }}" style="width: {{ $item['percent'] }}%"></div></div></div>
                    @endforeach
                </div>
            </x-ui.card>
        </section>

        <x-ui.card title="Invoice Table" padding="p-0">
            <x-ui.table :headers="['Invoice', 'Customer', 'Amount', 'Date', 'Status']">
                @forelse ($invoices as $invoice)
                    <tr class="hover:bg-slate-50/80">
                        <td class="text-sm font-extrabold text-booklio-primary">{{ $invoice->invoice_number }}</td>
                        <td class="text-sm font-extrabold">{{ $invoice->customer?->name ?? '-' }}</td>
                        <td class="text-sm font-extrabold">{{ strtoupper($invoice->currency ?? 'USD') }} {{ number_format((float) $invoice->total, 2) }}</td>
                        <td class="text-sm font-semibold">{{ $invoice->issue_date?->format('M d, Y') }}</td>
                        <td><x-ui.badge :variant="match($invoice->status_value) { 'paid' => 'success', 'unpaid', 'partial' => 'warning', 'overdue', 'cancelled' => 'danger', default => 'muted' }">{{ $invoice->status_label }}</x-ui.badge></td>
                    </tr>
                @empty
                    <tr><td colspan="5" class="text-center text-booklio-muted">No invoices found.</td></tr>
                @endforelse
            </x-ui.table>
            <div class="p-5"><x-ui.pagination :paginator="$invoices" /></div>
        </x-ui.card>
    </div>
@endsection