@php $fmt = app(\App\Services\Formatter::class); @endphp

<div>
    <x-ui.page-header title="Invoices" :subtitle="$this->rangeLabel()" />

    <div class="grid gap-4 sm:grid-cols-3">
        <x-ui.stat label="Billed" :value="$fmt->money($totals['billed'])" :sub="$totals['count'].' invoice(s)'" icon="receipt" />
        <x-ui.stat label="Collected" :value="$fmt->money($totals['collected'])" icon="banknote" color="green" />
        <x-ui.stat label="Outstanding" :value="$fmt->money($outstanding)" icon="alert"
                   :color="$outstanding > 0 ? 'amber' : 'slate'" />
    </div>

    <div class="my-4 flex flex-wrap items-end gap-2">
        <x-ui.search-bar placeholder="Invoice number or shop…" />

        <x-ui.date-range />

        <select wire:model.live="status" class="field-input w-auto py-1.5 text-xs">
            <option value="">All statuses</option>
            @foreach ($statuses as $value => $label)
                <option value="{{ $value }}">{{ $label }}</option>
            @endforeach
        </select>

        <label class="flex items-center gap-1.5 pb-2 text-xs text-slate-600 dark:text-slate-300">
            <input type="checkbox" wire:model.live="overdueOnly" class="rounded border-slate-300">
            Overdue only
        </label>

        @if ($this->hasActiveFilters())
            <button type="button" wire:click="clearFilters" class="btn btn-ghost btn-sm">
                <x-ui.icon name="x" class="h-3.5 w-3.5" /> Clear
            </button>
        @endif
    </div>

    <x-ui.card :padded="false">
        @if ($rows->isEmpty())
            <x-ui.empty icon="receipt" title="No invoices in this range" />
        @else
            <x-ui.table>
                <x-slot:head>
                    <tr>
                        <x-ui.th sortable="{{ $sortField }}" field="invoice_number" :direction="$sortDirection">Number</x-ui.th>
                        <th>Shop</th>
                        <th>Plan</th>
                        <x-ui.th sortable="{{ $sortField }}" field="issued_on" :direction="$sortDirection">Issued</x-ui.th>
                        <x-ui.th sortable="{{ $sortField }}" field="due_on" :direction="$sortDirection">Due</x-ui.th>
                        <x-ui.th sortable="{{ $sortField }}" field="total" :direction="$sortDirection" align="right">Total</x-ui.th>
                        <th class="num">Balance</th>
                        <th>Status</th>
                        <th></th>
                    </tr>
                </x-slot:head>

                @foreach ($rows as $invoice)
                    <tr>
                        <td class="tabular text-xs font-medium">{{ $invoice->invoice_number }}</td>
                        <td>
                            <a href="{{ route('tenants.show', $invoice->tenant_id) }}" wire:navigate
                               class="text-brand hover:underline">{{ $invoice->tenant?->business_name ?? '—' }}</a>
                        </td>
                        <td class="text-xs">{{ $invoice->subscription?->plan?->name ?? '—' }}</td>
                        <td class="text-xs">{{ $fmt->date($invoice->issued_on) }}</td>
                        <td class="text-xs">
                            {{ $fmt->date($invoice->due_on) }}
                            @if ($invoice->isOverdue()) <x-ui.badge color="red">Overdue</x-ui.badge> @endif
                        </td>
                        <td class="num">{{ $fmt->money($invoice->total) }}</td>
                        <td class="num">{{ $fmt->money($invoice->balance()) }}</td>
                        <td><x-ui.badge :color="$invoice->status->color()">{{ $invoice->status->label() }}</x-ui.badge></td>
                        <td class="text-right">
                            <a href="{{ route('invoices.pdf', $invoice) }}" target="_blank"
                               class="rounded p-1.5 text-slate-400 hover:bg-slate-100 hover:text-brand dark:hover:bg-slate-800"
                               title="Download PDF">
                                <x-ui.icon name="download" class="h-4 w-4" />
                            </a>
                        </td>
                    </tr>
                @endforeach
            </x-ui.table>

            <x-resource.pagination :rows="$rows" />
        @endif
    </x-ui.card>
</div>