@php
    $statusBadge = [
        'DRAFT' => 'slate', 'SENT' => 'sky', 'PARTIAL' => 'amber',
        'PAID' => 'emerald', 'OVERDUE' => 'rose', 'VOID' => 'slate',
    ];
    $kpiAccent = [
        'indigo' => '#6366f1', 'amber' => '#f59e0b',
        'emerald' => '#10b981', 'sky' => '#0ea5e9',
        'rose' => '#f43f5e',
    ];
    $avatarColors = [
        'bg-indigo-100 text-indigo-700', 'bg-emerald-100 text-emerald-700',
        'bg-amber-100 text-amber-700', 'bg-sky-100 text-sky-700',
        'bg-rose-100 text-rose-700', 'bg-violet-100 text-violet-700',
    ];
    $initials = function (?string $name): string {
        $parts = collect(preg_split('/\s+/', trim((string) $name)))->filter();
        if ($parts->isEmpty()) {
            return '—';
        }
        return $parts->take(2)->map(fn ($w) => mb_strtoupper(mb_substr($w, 0, 1)))->implode('');
    };
    $avatarColor = fn (?string $name): string => $avatarColors[abs(crc32((string) $name)) % count($avatarColors)];

    // Public links the customer gets: the portal page is the payment page (Pay
    // button where Paynow is live, banking details otherwise), and WhatsApp
    // shares that same link with the balance owed pre-filled. Both come off the
    // model so the wording can't drift from what the emails send.
    $paymentUrl = fn ($invoice) => $invoice->portalUrl();
    $whatsappUrl = fn ($invoice) => $invoice->whatsAppShareUrl();
@endphp

<div class="px-4 py-8 sm:px-6 lg:px-8">
    <div class="mx-auto max-w-7xl space-y-6">

        <x-sales-doc-tabs />

        <x-page-header :title="__('Invoices')" :subtitle="__('Create, track and collect on your invoices.')">
            @if ($tab === 'recurring')
                @if ($canManageRecurring)
                    <x-button wire:click="createRecurring" type="button">
                        <x-icon name="plus" class="-ms-1 me-1.5 h-4 w-4" />
                        {{ __('New Recurring') }}
                    </x-button>
                @endif
            @elseif ($canManage)
                <x-button wire:click="create" type="button">
                    <x-icon name="plus" class="-ms-1 me-1.5 h-4 w-4" />
                    {{ __('New Invoice') }}
                </x-button>
            @endif
        </x-page-header>

        <!-- Tabs: Invoices | Recurring | Credit notes -->
        {{-- max-w-full + scroll: three tabs are wider than a 320px screen, and a tab strip must never be what widens the page. --}}
        <div class="no-scrollbar inline-flex max-w-full overflow-x-auto rounded-xl border border-slate-200 bg-slate-50 p-1 text-sm font-medium">
            <button
                type="button"
                wire:click="$set('tab', 'invoices')"
                class="inline-flex items-center gap-1.5 rounded-lg px-3.5 py-1.5 transition {{ $tab === 'invoices' ? 'bg-white text-indigo-600 shadow-sm ring-1 ring-slate-200' : 'text-slate-500 hover:text-slate-700' }}"
            >
                <x-icon name="document-currency-dollar" class="h-4 w-4" />
                {{ __('Invoices') }}
            </button>
            <button
                type="button"
                wire:click="$set('tab', 'recurring')"
                class="inline-flex items-center gap-1.5 rounded-lg px-3.5 py-1.5 transition {{ $tab === 'recurring' ? 'bg-white text-indigo-600 shadow-sm ring-1 ring-slate-200' : 'text-slate-500 hover:text-slate-700' }}"
            >
                <x-icon name="arrow-path" class="h-4 w-4" />
                {{ __('Recurring') }}
            </button>
            <button
                type="button"
                wire:click="$set('tab', 'credits')"
                class="inline-flex items-center gap-1.5 rounded-lg px-3.5 py-1.5 transition {{ $tab === 'credits' ? 'bg-white text-indigo-600 shadow-sm ring-1 ring-slate-200' : 'text-slate-500 hover:text-slate-700' }}"
            >
                <x-icon name="arrow-uturn-left" class="h-4 w-4" />
                {{ __('Credit Notes') }}
            </button>
        </div>

        {{-- Void requests waiting on an approver. Shown to everyone: the raiser
             needs to see their ask is still in flight, the approver needs to act. --}}
        @if ($pendingVoidCount > 0 && ! $pendingOnly)
            <div class="flex flex-wrap items-center justify-between gap-3 rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm">
                <div class="flex items-center gap-2 text-amber-900">
                    <x-icon name="exclamation-triangle" class="h-5 w-5 shrink-0 text-amber-500" />
                    <span>
                        {{ trans_choice('{1}:count invoice is waiting to be voided.|[2,*]:count invoices are waiting to be voided.', $pendingVoidCount, ['count' => $pendingVoidCount]) }}
                        @if ($canApproveVoid)
                            {{ __('Nothing has changed on them until you decide.') }}
                        @else
                            {{ __('An administrator has to approve them.') }}
                        @endif
                    </span>
                </div>
                <button type="button" wire:click="showPendingVoids" class="rounded-lg bg-amber-600 px-3 py-1.5 text-xs font-semibold text-white transition hover:bg-amber-700">
                    {{ __('Review') }}
                </button>
            </div>
        @elseif ($pendingOnly)
            <div class="flex flex-wrap items-center justify-between gap-3 rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm">
                <div class="flex items-center gap-2 text-amber-900">
                    <x-icon name="exclamation-triangle" class="h-5 w-5 shrink-0 text-amber-500" />
                    <span>{{ __('Showing only invoices with a void request awaiting approval.') }}</span>
                </div>
                <button type="button" wire:click="clearPendingFilter" class="rounded-lg border border-amber-300 bg-white px-3 py-1.5 text-xs font-semibold text-amber-800 transition hover:bg-amber-100">
                    {{ __('Show all invoices') }}
                </button>
            </div>
        @endif

        <!-- KPI cards -->
        <section class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-5">
            @foreach ($kpis as $kpi)
                @php $accent = $kpiAccent[$kpi['color']] ?? $kpiAccent['indigo']; @endphp
                <x-card class="group relative flex flex-col overflow-hidden p-5 ring-slate-200/70 transition hover:-translate-y-0.5 hover:shadow-lg hover:shadow-slate-300/40">
                    <div class="flex items-start justify-between gap-2">
                        <p class="truncate text-[11px] font-semibold uppercase tracking-wider text-slate-400" title="{{ $kpi['label'] }}">{{ $kpi['label'] }}</p>
                        <span class="flex items-center justify-center rounded-xl text-white shadow-sm ring-1 ring-white/40" style="height: 2rem; width: 2rem; background: linear-gradient(135deg, {{ $accent }}, {{ $accent }}bb)">
                            <x-icon :name="$kpi['icon']" class="h-4 w-4" />
                        </span>
                    </div>
                    <p class="mt-3 font-bold leading-none tracking-tight text-slate-900 tabular-nums" style="font-size: 19px;">{{ $kpi['value'] }}</p>
                    <span class="mt-2.5 inline-flex w-fit items-center gap-1 rounded-full bg-slate-100 px-2 py-1 text-[11px] font-semibold text-slate-500">{{ $kpi['sub'] }}</span>
                </x-card>
            @endforeach
        </section>

        @if ($tab === 'invoices')
        <x-card>
            <!-- Filters -->
            <div class="flex flex-col gap-2.5 border-b border-slate-100 p-4 sm:p-6 lg:flex-row lg:flex-nowrap lg:items-center">
                <!-- Search -->
                <div class="relative w-full min-w-0 lg:w-56">
                    <span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3.5 text-slate-400">
                        <x-icon name="magnifying-glass" class="h-5 w-5" />
                    </span>
                    <input
                        type="text"
                        wire:model.live.debounce.300ms="search"
                        placeholder="{{ __('Search invoices...') }}"
                        class="block h-11 w-full rounded-xl border-slate-300 pl-10 text-sm shadow-sm transition focus:border-indigo-500 focus:ring-indigo-500"
                    />
                </div>

                <!-- Status -->
                <select
                    wire:model.live="statusFilter"
                    class="h-11 w-full min-w-0 rounded-xl border-slate-300 text-sm shadow-sm transition focus:border-indigo-500 focus:ring-indigo-500 lg:w-36"
                >
                    <option value="">{{ __('All statuses') }}</option>
                    @foreach ($statuses as $s)
                        <option value="{{ $s }}">{{ __(\App\Models\Invoice::DISPLAY_LABELS[$s] ?? $s) }}</option>
                    @endforeach
                </select>

                <!-- Type -->
                <select
                    wire:model.live="originFilter"
                    class="h-11 w-full min-w-0 rounded-xl border-slate-300 text-sm shadow-sm transition focus:border-indigo-500 focus:ring-indigo-500 lg:w-36"
                >
                    <option value="">{{ __('All types') }}</option>
                    <option value="sales">{{ __('Sales') }}</option>
                    <option value="income">{{ __('Rental / Income') }}</option>
                </select>

                <!-- Customer -->
                <select
                    wire:model.live="customerFilter"
                    class="h-11 w-full min-w-0 rounded-xl border-slate-300 text-sm shadow-sm transition focus:border-indigo-500 focus:ring-indigo-500 lg:w-44"
                >
                    <option value="">{{ __('All customers') }}</option>
                    @foreach ($customers as $customer)
                        <option value="{{ $customer->id }}">{{ $customer->name }}</option>
                    @endforeach
                </select>

                <!-- Date range (unified control) -->
                <div class="flex h-11 w-full min-w-0 items-center gap-1 rounded-xl border border-slate-300 bg-white px-3 shadow-sm transition focus-within:border-indigo-500 focus-within:ring-1 focus-within:ring-indigo-500 lg:w-auto">
                    <x-icon name="calendar" class="h-4 w-4 shrink-0 text-slate-400" />
                    <input
                        type="date"
                        wire:model.live="startDate"
                        class="h-full w-full min-w-0 border-0 bg-transparent p-0 text-sm text-slate-600 focus:ring-0 lg:w-[6.75rem]"
                        aria-label="{{ __('Start date') }}"
                    />
                    <span class="shrink-0 text-slate-300">–</span>
                    <input
                        type="date"
                        wire:model.live="endDate"
                        class="h-full w-full min-w-0 border-0 bg-transparent p-0 text-sm text-slate-600 focus:ring-0 lg:w-[6.75rem]"
                        aria-label="{{ __('End date') }}"
                    />
                </div>

                <!-- Filters toggle -->
                <button
                    type="button"
                    wire:click="toggleFilters"
                    class="relative inline-flex h-11 w-full shrink-0 items-center justify-center gap-1.5 rounded-xl border px-4 text-sm font-medium shadow-sm transition lg:w-auto {{ $showFilters ? 'border-indigo-300 bg-indigo-50 text-indigo-700' : 'border-slate-300 bg-white text-slate-700 hover:bg-slate-50' }}"
                >
                    <x-icon name="funnel" class="h-4 w-4" />
                    {{ __('Filters') }}
                    @if ($this->hasActiveFilters)
                        <span class="absolute -right-1 -top-1 flex h-2.5 w-2.5 rounded-full bg-indigo-500 ring-2 ring-white"></span>
                    @endif
                </button>
            </div>

            <!-- Advanced filters panel -->
            @if ($showFilters)
                <div class="border-b border-slate-100 bg-slate-50/60 p-4 sm:p-6">
                    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
                        <div>
                            <x-label for="minTotal" value="{{ __('Min total') }}" />
                            <x-input id="minTotal" type="number" step="0.01" min="0" class="mt-1 block w-full" wire:model.live.debounce.400ms="minTotal" placeholder="0.00" />
                        </div>
                        <div>
                            <x-label for="maxTotal" value="{{ __('Max total') }}" />
                            <x-input id="maxTotal" type="number" step="0.01" min="0" class="mt-1 block w-full" wire:model.live.debounce.400ms="maxTotal" placeholder="0.00" />
                        </div>
                        <div>
                            <x-label for="sortBy" value="{{ __('Sort by') }}" />
                            <select id="sortBy" wire:model.live="sortBy" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                <option value="latest">{{ __('Newest first') }}</option>
                                <option value="oldest">{{ __('Oldest first') }}</option>
                                <option value="total_desc">{{ __('Total (high to low)') }}</option>
                                <option value="total_asc">{{ __('Total (low to high)') }}</option>
                                <option value="due">{{ __('Due date') }}</option>
                            </select>
                        </div>
                        <div class="flex items-end">
                            <button
                                type="button"
                                wire:click="clearFilters"
                                @disabled(! $this->hasActiveFilters)
                                class="inline-flex items-center gap-1.5 rounded-xl border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-sm transition hover:bg-slate-50 disabled:cursor-not-allowed disabled:opacity-50"
                            >
                                <x-icon name="x-mark" class="h-4 w-4" />
                                {{ __('Clear all') }}
                            </button>
                        </div>
                    </div>
                </div>
            @endif

            @if ($invoices->isEmpty())
                <div class="p-6">
                    <x-empty-state
                        icon="document-currency-dollar"
                        :title="__('No invoices found')"
                        :message="$this->hasActiveFilters ? __('Try adjusting your search or filters.') : __('Get started by creating your first invoice.')"
                    >
                        @if ($canManage && ! $this->hasActiveFilters)
                            <x-button wire:click="create" type="button">
                                <x-icon name="plus" class="-ms-1 me-1.5 h-4 w-4" />
                                {{ __('New Invoice') }}
                            </x-button>
                        @endif
                    </x-empty-state>
                </div>
            @else
                @php
                    // Row actions live in the floating selection bar, so every
                    // row carries a tick box instead of a strip of icons. The
                    // header box selects / clears this page.
                    $pageIds = $invoices->getCollection()->modelKeys();
                    $pageAllTicked = $pageIds !== [] && array_diff($pageIds, $selected) === [];
                @endphp

                <!-- Table (desktop) -->
                <div class="hidden overflow-x-auto sm:block">
                    <table class="min-w-full divide-y divide-slate-200">
                        <thead class="bg-slate-50">
                            <tr>
                                <th class="w-10 px-3 lg:px-4 py-3 text-left">
                                    <input type="checkbox"
                                           wire:click="togglePage(@js($pageIds))"
                                           @checked($pageAllTicked)
                                           title="{{ $pageAllTicked ? __('Clear this page') : __('Select this page') }}"
                                           aria-label="{{ __('Select every invoice on this page') }}"
                                           class="h-4 w-4 rounded border-slate-300 text-indigo-600 shadow-sm focus:ring-indigo-500" />
                                </th>
                                <th class="px-3 lg:px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Invoice No.') }}</th>
                                <th class="px-3 lg:px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Customer') }}</th>
                                <th class="px-3 lg:px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('For') }}</th>
                                <th class="px-3 lg:px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Status') }}</th>
                                <th class="px-3 lg:px-4 py-3 text-right text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Total') }}</th>
                                <th class="px-3 lg:px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Date') }}</th>
                                <th class="w-10 px-3 lg:px-4 py-3 text-right">
                                    <input type="checkbox"
                                           wire:click="togglePage(@js($pageIds))"
                                           @checked($pageAllTicked)
                                           title="{{ $pageAllTicked ? __('Clear this page') : __('Select this page') }}"
                                           aria-label="{{ __('Select every invoice on this page') }}"
                                           class="h-4 w-4 rounded border-slate-300 text-indigo-600 shadow-sm focus:ring-indigo-500" />
                                </th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 bg-white">
                            @foreach ($invoices as $invoice)
                                @php
                                    $due = $invoice->due_date;
                                    $daysLeft = $due ? (int) round(\Illuminate\Support\Carbon::today()->diffInDays($due, false)) : null;
                                    $showDue = $due && ! in_array($invoice->status, ['PAID', 'VOID'], true) && (float) $invoice->balance_due > 0;
                                    $isPartial = (float) $invoice->amount_paid > 0 && (float) $invoice->balance_due > 0;
                                @endphp
                                @php $ticked = in_array($invoice->id, $selected, true); @endphp
                                <tr wire:key="invoice-{{ $invoice->id }}" class="transition {{ $ticked ? 'bg-indigo-50/70' : 'hover:bg-slate-50/75' }}">
                                    <td class="w-10 whitespace-nowrap px-3 lg:px-4 py-4">
                                        <input type="checkbox"
                                               wire:click="toggleSelection({{ $invoice->id }})"
                                               @checked($ticked)
                                               aria-label="{{ __('Select :number', ['number' => $invoice->invoice_number]) }}"
                                               class="h-4 w-4 rounded border-slate-300 text-indigo-600 shadow-sm focus:ring-indigo-500" />
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4">
                                        {{-- The note count stays on the row, not in the selection bar:
                                             it is an at-a-glance signal, and nobody ticks a row to
                                             discover there was something written on it. --}}
                                        <div class="flex items-center gap-1.5">
                                            <a href="{{ route('invoices.preview', $invoice) }}" wire:navigate
                                               title="{{ __('View invoice') }}"
                                               class="text-sm font-semibold text-indigo-600 transition hover:text-indigo-800 hover:underline">
                                                {{ $invoice->invoice_number }}
                                            </a>
                                            <x-notes-button :for="$invoice" size="sm" class="shrink-0" />
                                        </div>
                                        <p class="text-xs text-slate-400">#{{ $invoice->id }}</p>
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4">
                                        <div class="flex items-center gap-3">
                                            <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-xs font-semibold {{ $avatarColor($invoice->payerName()) }}">
                                                {{ $initials($invoice->payerName()) }}
                                            </span>
                                            <div class="min-w-0">
                                                <p class="truncate text-sm font-medium text-slate-900">{{ $invoice->payerName() ?: '—' }}</p>
                                                @if ($invoice->payerEmail())
                                                    <p class="truncate text-xs text-slate-400">{{ $invoice->payerEmail() }}</p>
                                                @endif
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-3 lg:px-4 py-4">
                                        <x-document-summary :items="$invoice->lineItems" :empty="__('Nothing billed yet')" />
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm">
                                        <div class="flex flex-wrap items-center gap-1.5">
                                            <x-invoice-status :invoice="$invoice" />
                                            @if ($invoice->isIncome())
                                                <span title="{{ __('Other income, created from the Income page') }}"
                                                      class="inline-flex items-center gap-0.5 rounded-full bg-cyan-50 px-1.5 py-0.5 text-[10px] font-medium leading-tight text-cyan-700 ring-1 ring-inset ring-cyan-600/15">
                                                    <x-icon name="building-office" class="h-2.5 w-2.5" />
                                                    {{ __('Rental / Income') }}
                                                </span>
                                            @endif
                                            @if ($invoice->recurring_invoice_id)
                                                <x-badge color="indigo" title="{{ __('From a recurring schedule') }}">
                                                    <x-icon name="arrow-path" class="h-3 w-3" />
                                                    {{ __('Recurring') }}
                                                </x-badge>
                                            @endif
                                            @if ($invoice->hasPendingVoid())
                                                <x-badge color="amber" title="{{ __('Void requested by :who: :why', ['who' => $invoice->voidRequester?->name ?? __('a colleague'), 'why' => $invoice->void_reason]) }}">
                                                    <x-icon name="exclamation-triangle" class="h-3 w-3" />
                                                    {{ __('Void requested') }}
                                                </x-badge>
                                            @elseif ($invoice->voidWasDeclined())
                                                <x-badge color="slate" title="{{ __('Void request declined: :why', ['why' => $invoice->void_decline_reason ?: __('no reason given')]) }}">
                                                    {{ __('Void declined') }}
                                                </x-badge>
                                            @endif
                                        </div>
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right">
                                        <p class="text-sm font-semibold text-slate-900">{{ $invoice->currency_code }} {{ number_format((float) $invoice->total, 2) }}</p>
                                        @if ($isPartial)
                                            <p class="text-xs font-medium text-amber-600">{{ __('Bal') }}: {{ number_format((float) $invoice->balance_due, 2) }}</p>
                                        @endif
                                        @if ((float) $invoice->refunded_total > 0)
                                            <p class="text-[11px] font-medium text-rose-500">{{ __('Refunded') }}: {{ number_format((float) $invoice->refunded_total, 2) }}</p>
                                        @endif
                                        @if ((float) $invoice->credited_total > 0)
                                            <p class="text-[11px] font-medium text-violet-500" title="{{ __('Held as credit on the customer’s account') }}">{{ __('Credited') }}: {{ number_format((float) $invoice->credited_total, 2) }}</p>
                                        @endif
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm">
                                        <p class="text-slate-600">{{ $invoice->created_at?->format('Y-m-d') }}</p>
                                        @if ($showDue)
                                            @if ($daysLeft < 0)
                                                <p class="text-xs font-medium text-rose-500">{{ __('Overdue') }}</p>
                                            @elseif ($daysLeft === 0)
                                                <p class="text-xs font-medium text-amber-600">{{ __('Due today') }}</p>
                                            @else
                                                <p class="text-xs font-medium text-amber-600">{{ trans_choice('{1} :count day to due|[2,*] :count days to due', $daysLeft, ['count' => $daysLeft]) }}</p>
                                            @endif
                                        @elseif ($invoice->status === 'PAID')
                                            <p class="text-xs font-medium text-emerald-600">{{ __('Paid') }}</p>
                                        @endif
                                    </td>
                                    <td class="w-10 whitespace-nowrap px-3 lg:px-4 py-4 text-right">
                                        <input type="checkbox"
                                               wire:click="toggleSelection({{ $invoice->id }})"
                                               @checked($ticked)
                                               aria-label="{{ __('Select :number', ['number' => $invoice->invoice_number]) }}"
                                               class="h-4 w-4 rounded border-slate-300 text-indigo-600 shadow-sm focus:ring-indigo-500" />
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <!-- Cards (mobile) -->
                <div class="divide-y divide-slate-100 sm:hidden">
                    @foreach ($invoices as $invoice)
                        @php
                            $due = $invoice->due_date;
                            $daysLeft = $due ? (int) round(\Illuminate\Support\Carbon::today()->diffInDays($due, false)) : null;
                            $showDue = $due && ! in_array($invoice->status, ['PAID', 'VOID'], true) && (float) $invoice->balance_due > 0;
                            $isPartial = (float) $invoice->amount_paid > 0 && (float) $invoice->balance_due > 0;
                        @endphp
                        @php $ticked = in_array($invoice->id, $selected, true); @endphp
                        <div wire:key="invoice-mobile-{{ $invoice->id }}" class="p-4 {{ $ticked ? 'bg-indigo-50/70' : '' }}">
                            <div class="flex min-w-0 items-start gap-3">
                                <input type="checkbox"
                                       wire:click="toggleSelection({{ $invoice->id }})"
                                       @checked($ticked)
                                       aria-label="{{ __('Select :number', ['number' => $invoice->invoice_number]) }}"
                                       class="mt-2.5 h-4 w-4 shrink-0 rounded border-slate-300 text-indigo-600 shadow-sm focus:ring-indigo-500" />
                                <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-xs font-semibold {{ $avatarColor($invoice->payerName()) }}">
                                    {{ $initials($invoice->payerName()) }}
                                </span>
                                <div class="min-w-0 flex-1">
                                    <div class="flex items-center gap-1.5">
                                        <a href="{{ route('invoices.preview', $invoice) }}" wire:navigate
                                           class="text-sm font-semibold text-indigo-600 hover:underline">{{ $invoice->invoice_number }}</a>
                                        <x-notes-button :for="$invoice" size="sm" class="shrink-0" />
                                    </div>
                                    <p class="truncate text-sm text-slate-700">{{ $invoice->payerName() ?: '—' }}</p>
                                    <x-document-summary :items="$invoice->lineItems" variant="card" :empty="__('Nothing billed yet')" />
                                    <p class="mt-2 flex flex-wrap items-center gap-1.5">
                                        <x-invoice-status :invoice="$invoice" />
                                        @if ($invoice->isIncome())
                                            <span title="{{ __('Other income, created from the Income page') }}" class="inline-flex items-center gap-0.5 rounded-full bg-cyan-50 px-1.5 py-0.5 text-[10px] font-medium leading-tight text-cyan-700 ring-1 ring-inset ring-cyan-600/15"><x-icon name="building-office" class="h-2.5 w-2.5" />{{ __('Rental / Income') }}</span>
                                        @endif
                                        @if ($invoice->recurring_invoice_id)
                                            <x-badge color="indigo"><x-icon name="arrow-path" class="h-3 w-3" />{{ __('Recurring') }}</x-badge>
                                        @endif
                                        @if ($invoice->hasPendingVoid())
                                            <x-badge color="amber"><x-icon name="exclamation-triangle" class="h-3 w-3" />{{ __('Void requested') }}</x-badge>
                                        @elseif ($invoice->voidWasDeclined())
                                            <x-badge color="slate">{{ __('Void declined') }}</x-badge>
                                        @endif
                                    </p>
                                    <p class="mt-2 text-sm font-semibold text-slate-900">{{ $invoice->currency_code }} {{ number_format((float) $invoice->total, 2) }}</p>
                                    @if ($isPartial)
                                        <p class="text-xs font-medium text-amber-600">{{ __('Balance') }}: {{ number_format((float) $invoice->balance_due, 2) }}</p>
                                    @endif
                                    @if ((float) $invoice->refunded_total > 0)
                                        <p class="text-[11px] font-medium text-rose-500">{{ __('Refunded') }}: {{ number_format((float) $invoice->refunded_total, 2) }}</p>
                                    @endif
                                    @if ((float) $invoice->credited_total > 0)
                                        <p class="text-[11px] font-medium text-violet-500">{{ __('Credited') }}: {{ number_format((float) $invoice->credited_total, 2) }}</p>
                                    @endif
                                    <p class="mt-1 text-xs text-slate-400">
                                        {{ $invoice->created_at?->format('Y-m-d') }}
                                        @if ($showDue)
                                            @if ($daysLeft < 0)
                                                · <span class="font-medium text-rose-500">{{ __('Overdue') }}</span>
                                            @elseif ($daysLeft === 0)
                                                · <span class="font-medium text-amber-600">{{ __('Due today') }}</span>
                                            @else
                                                · <span class="font-medium text-amber-600">{{ trans_choice('{1} :count day to due|[2,*] :count days to due', $daysLeft, ['count' => $daysLeft]) }}</span>
                                            @endif
                                        @endif
                                    </p>

                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>

                <!-- Pagination -->
                <div class="flex flex-col gap-3 border-t border-slate-100 px-4 py-3 sm:flex-row sm:items-center sm:justify-between sm:px-6">
                    <div class="flex items-center gap-2 text-sm text-slate-500">
                        <span>{{ __('Rows per page') }}</span>
                        <select wire:model.live="perPage" class="rounded-lg border-slate-300 py-1 pl-2 pr-7 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            <option value="10">10</option>
                            <option value="25">25</option>
                            <option value="50">50</option>
                        </select>
                    </div>
                    <div>
                        {{ $invoices->onEachSide(1)->links() }}
                    </div>
                </div>
            @endif
        </x-card>

        {{--
            Floating action bar. Tick one row and it offers everything that used
            to sit in the row's icon strip, now with labels; tick several and it
            narrows to the actions that are safe to run across a batch.
        --}}
        <x-selection-bar :count="count($selected)" :noun="trans_choice('{1} invoice selected|[2,*] invoices selected', count($selected))">
            @if ($selectedInvoice)
                @php
                    $inv = $selectedInvoice;
                    // One highlighted "next step". Money owed outranks sending,
                    // and whichever loses falls through to the More menu so no
                    // action can go missing on any status.
                    $canSend = $canManage && $inv->status !== 'VOID';
                    $payIsPrimary = $canRecordPayment && $inv->status !== 'VOID' && (float) $inv->balance_due > 0;
                    $sendIsPrimary = $canSend && ! $payIsPrimary;
                @endphp

                <x-selection-action icon="eye" :href="route('invoices.preview', $inv)" wire:navigate>
                    {{ __('View') }}
                </x-selection-action>

                @if ($payIsPrimary)
                    <x-selection-action icon="banknotes" tone="primary" wire:click="recordPayment({{ $inv->id }})">
                        {{ __('Record payment') }}
                    </x-selection-action>
                @elseif ($sendIsPrimary)
                    <x-selection-action icon="paper-airplane" tone="primary" wire:click="sendToCustomer({{ $inv->id }})"
                                        wire:confirm="{{ __('Email this invoice to the customer?') }}" wire:loading.attr="disabled">
                        {{ __('Send') }}
                    </x-selection-action>
                @endif

                <x-invoice-pdf-link :invoice="$inv"
                    class="inline-flex h-9 shrink-0 items-center gap-1.5 whitespace-nowrap rounded-xl px-3 text-sm font-medium text-slate-200 transition hover:bg-white/10 hover:text-white">
                    <x-icon name="arrow-down-tray" class="h-4 w-4" />
                    {{ __('PDF') }}
                </x-invoice-pdf-link>

                @if ($canManage && $inv->status !== 'VOID' && ($inv->status !== 'PAID' || $canEditPaid))
                    <x-selection-action icon="pencil-square" wire:click="edit({{ $inv->id }})">
                        {{ $inv->requiresEditReason() ? __('Edit (reason)') : __('Edit') }}
                    </x-selection-action>
                @endif

                {{-- The rest, behind one more click so the bar stays readable.
                     It opens upward (`bottom-full`) because the bar is pinned to
                     the bottom of the viewport. --}}
                <x-dropdown align="right" width="60" dropdownClasses="bottom-full mb-2" contentClasses="py-1 bg-white">
                    <x-slot name="trigger">
                        <button type="button"
                                class="inline-flex h-9 shrink-0 items-center gap-1.5 whitespace-nowrap rounded-xl px-3 text-sm font-medium text-slate-200 transition hover:bg-white/10 hover:text-white">
                            <x-icon name="ellipsis-horizontal" class="h-4 w-4" />
                            {{ __('More') }}
                        </button>
                    </x-slot>
                    <x-slot name="content">
                        @if ($canSend && ! $sendIsPrimary)
                            <button type="button" wire:click="sendToCustomer({{ $inv->id }})" wire:confirm="{{ __('Email this invoice to the customer?') }}" wire:loading.attr="disabled"
                                    class="flex w-full items-center gap-2.5 px-4 py-2 text-left text-sm text-slate-700 transition hover:bg-slate-50">
                                <x-icon name="paper-airplane" class="h-4 w-4 text-slate-400" />{{ __('Email to customer') }}
                            </button>
                        @endif
                        @if ($inv->status !== 'VOID')
                            <button type="button"
                                    x-data="{ copied: false }"
                                    x-on:click.stop="navigator.clipboard.writeText(@js($paymentUrl($inv))).then(() => { copied = true; setTimeout(() => copied = false, 1500) })"
                                    class="flex w-full items-center gap-2.5 px-4 py-2 text-left text-sm text-slate-700 transition hover:bg-slate-50">
                                <x-icon name="link" class="h-4 w-4 text-slate-400" />
                                <span x-text="copied ? '{{ __('Copied!') }}' : '{{ __('Copy payment link') }}'">{{ __('Copy payment link') }}</span>
                            </button>
                            <a href="{{ $whatsappUrl($inv) }}" target="_blank" rel="noopener"
                               class="flex w-full items-center gap-2.5 px-4 py-2 text-left text-sm text-slate-700 transition hover:bg-slate-50">
                                <x-icon name="whatsapp" class="h-4 w-4 text-emerald-500" />{{ __('Share on WhatsApp') }}
                            </a>
                        @endif
                        <x-notes-button :for="$inv" variant="link"
                            class="flex w-full items-center gap-2.5 px-4 py-2 text-left text-sm !text-slate-700 transition hover:bg-slate-50" />
                        @if ($canRecordPayment && $inv->status !== 'VOID' && (float) $inv->amount_paid > 0)
                            <button type="button" wire:click="recordRefund({{ $inv->id }})"
                                    class="flex w-full items-center gap-2.5 px-4 py-2 text-left text-sm text-slate-700 transition hover:bg-slate-50">
                                <x-icon name="arrow-uturn-left" class="h-4 w-4 text-slate-400" />{{ __('Refund customer') }}
                            </button>
                        @endif

                        {{-- Void: the only way a settled invoice leaves circulation. An
                             approver gets Approve/Decline once a request is pending. --}}
                        @if ($inv->status !== 'VOID')
                            @if ($inv->hasPendingVoid() && $canApproveVoid)
                                <div class="my-1 border-t border-slate-100"></div>
                                <button type="button" wire:click="openVoid({{ $inv->id }})"
                                        class="flex w-full items-center gap-2.5 px-4 py-2 text-left text-sm text-emerald-600 transition hover:bg-emerald-50">
                                    <x-icon name="check-circle" class="h-4 w-4" />{{ __('Approve the void request') }}
                                </button>
                                <button type="button" wire:click="openVoidDecline({{ $inv->id }})"
                                        class="flex w-full items-center gap-2.5 px-4 py-2 text-left text-sm text-rose-600 transition hover:bg-rose-50">
                                    <x-icon name="x-circle" class="h-4 w-4" />{{ __('Decline the void request') }}
                                </button>
                            @elseif (! $inv->hasPendingVoid() && ($canApproveVoid || $canRequestVoid))
                                <div class="my-1 border-t border-slate-100"></div>
                                <button type="button" wire:click="openVoid({{ $inv->id }})"
                                        class="flex w-full items-center gap-2.5 px-4 py-2 text-left text-sm text-amber-600 transition hover:bg-amber-50">
                                    <x-icon name="no-symbol" class="h-4 w-4" />{{ $canApproveVoid ? __('Void this invoice') : __('Request a void') }}
                                </button>
                            @endif
                        @endif
                        @if ($canDelete && ! $inv->isDeletionLocked())
                            <div class="my-1 border-t border-slate-100"></div>
                            <button type="button" wire:click="delete({{ $inv->id }})" wire:confirm="{{ __('Are you sure you want to delete this invoice?') }}"
                                    class="flex w-full items-center gap-2.5 px-4 py-2 text-left text-sm text-rose-600 transition hover:bg-rose-50">
                                <x-icon name="trash" class="h-4 w-4" />{{ __('Delete') }}
                            </button>
                        @endif
                    </x-slot>
                </x-dropdown>
            @else
                @if ($canManage)
                    <x-selection-action icon="paper-airplane" tone="primary" wire:click="bulkSend"
                                        wire:confirm="{{ __('Email each selected invoice to its customer?') }}" wire:loading.attr="disabled">
                        {{ __('Email to customers') }}
                    </x-selection-action>
                @endif
                @if ($canDelete)
                    <x-selection-action icon="trash" tone="danger" wire:click="bulkDelete"
                                        wire:confirm="{{ __('Delete every selected invoice? This cannot be undone.') }}">
                        {{ __('Delete') }}
                    </x-selection-action>
                @endif
            @endif
        </x-selection-bar>
        @elseif ($tab === 'recurring')
        @php
            $recurringBadge = ['active' => 'emerald', 'paused' => 'amber'];
        @endphp
        <x-card>
            <!-- Filters -->
            <div class="flex flex-col gap-3 border-b border-slate-100 p-4 sm:flex-row sm:items-center sm:p-5">
                <div class="relative flex-1 sm:max-w-md">
                    <span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-slate-400">
                        <x-icon name="magnifying-glass" class="h-5 w-5" />
                    </span>
                    <input
                        type="text"
                        wire:model.live.debounce.300ms="search"
                        placeholder="{{ __('Search by customer...') }}"
                        class="block w-full rounded-xl border-slate-300 pl-10 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
                    />
                </div>
                <div class="w-full sm:w-52">
                    <select
                        wire:model.live="recurringStatusFilter"
                        class="block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
                    >
                        <option value="">{{ __('All statuses') }}</option>
                        @foreach ($recurringStatuses as $s)
                            <option value="{{ $s }}">{{ ucfirst($s) }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <!-- Table (desktop) -->
            <div class="hidden overflow-x-auto sm:block">
                <table class="min-w-full divide-y divide-slate-100">
                    <thead>
                        <tr class="bg-slate-50/80">
                            <th class="px-3 lg:px-4 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Customer') }}</th>
                            <th class="px-3 lg:px-4 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Frequency') }}</th>
                            <th class="px-3 lg:px-4 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Status') }}</th>
                            <th class="px-3 lg:px-4 py-3.5 text-right text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Amount') }}</th>
                            <th class="px-3 lg:px-4 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Next Run') }}</th>
                            <th class="px-3 lg:px-4 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Ends') }}</th>
                            <th class="px-3 lg:px-4 py-3.5 text-right text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Actions') }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100">
                        @forelse ($profiles as $profile)
                            @php
                                $sub = collect($profile->line_items ?? [])->reduce(fn ($c, $l) => $c + ((float) ($l['qty'] ?? 0) * (float) ($l['unit_price'] ?? 0) - (float) ($l['discount'] ?? 0)), 0.0);
                                $taxable = $sub - (float) $profile->discount;
                                $amount = round($taxable + ($taxable * (float) $profile->vat_rate / 100), 2);
                            @endphp
                            <tr wire:key="profile-{{ $profile->id }}" class="transition-colors hover:bg-slate-50/70">
                                <td class="px-3 lg:px-4 py-4 text-sm font-semibold text-slate-900">{{ $profile->customer?->name ?: '—' }}</td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm text-slate-600">
                                    {{ __('Every') }} {{ $profile->interval > 1 ? $profile->interval . ' ' : '' }}{{ ucfirst($profile->frequency) }}
                                </td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm">
                                    <x-badge :color="$recurringBadge[$profile->status] ?? 'slate'">{{ ucfirst($profile->status) }}</x-badge>
                                </td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm font-medium text-slate-900">{{ $profile->currency_code }} {{ number_format($amount, 2) }}</td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm text-slate-500">{{ $profile->next_run_date?->format('Y-m-d') ?: '—' }}</td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm text-slate-500">{{ $profile->end_date?->format('Y-m-d') ?: '—' }}</td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm font-medium">
                                    @if ($canManageRecurring)
                                        <div class="flex items-center justify-end gap-3">
                                            <button wire:click="toggleRecurringStatus({{ $profile->id }})" class="text-amber-600 transition hover:text-amber-700">
                                                {{ $profile->status === 'active' ? __('Pause') : __('Resume') }}
                                            </button>
                                            <button wire:click="editRecurring({{ $profile->id }})" class="text-indigo-600 transition hover:text-indigo-700">{{ __('Edit') }}</button>
                                            <button
                                                wire:click="deleteRecurring({{ $profile->id }})"
                                                wire:confirm="{{ __('Are you sure you want to delete this recurring profile?') }}"
                                                class="text-rose-600 transition hover:text-rose-700"
                                            >{{ __('Delete') }}</button>
                                        </div>
                                    @else
                                        <span class="text-xs text-slate-400">—</span>
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" class="px-3 lg:px-4 py-12">
                                    <x-empty-state
                                        icon="arrow-path"
                                        :title="__('No recurring profiles found')"
                                        :message="__('Create a recurring profile to automatically generate invoices on a schedule.')"
                                        class="border-0"
                                    >
                                        @if ($canManageRecurring)
                                            <x-button wire:click="createRecurring" type="button">
                                                <x-icon name="plus" class="-ms-1 me-1.5 h-4 w-4" />
                                                {{ __('New Recurring') }}
                                            </x-button>
                                        @endif
                                    </x-empty-state>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <!-- Cards (mobile) -->
            <div class="divide-y divide-slate-100 sm:hidden">
                @forelse ($profiles as $profile)
                    @php
                        $sub = collect($profile->line_items ?? [])->reduce(fn ($c, $l) => $c + ((float) ($l['qty'] ?? 0) * (float) ($l['unit_price'] ?? 0) - (float) ($l['discount'] ?? 0)), 0.0);
                        $taxable = $sub - (float) $profile->discount;
                        $amount = round($taxable + ($taxable * (float) $profile->vat_rate / 100), 2);
                    @endphp
                    <div wire:key="profile-mobile-{{ $profile->id }}" class="p-4">
                        <div class="flex items-start justify-between gap-4">
                            <div class="min-w-0">
                                <p class="text-sm font-semibold text-slate-900">{{ $profile->customer?->name ?: '—' }}</p>
                                <p class="text-sm text-slate-500">{{ __('Every') }} {{ $profile->interval > 1 ? $profile->interval . ' ' : '' }}{{ ucfirst($profile->frequency) }}</p>
                                <p class="mt-1.5"><x-badge :color="$recurringBadge[$profile->status] ?? 'slate'">{{ ucfirst($profile->status) }}</x-badge></p>
                                <p class="mt-2 text-sm font-medium text-slate-900">{{ $profile->currency_code }} {{ number_format($amount, 2) }}</p>
                                <p class="text-xs text-slate-500">{{ __('Next') }}: {{ $profile->next_run_date?->format('Y-m-d') ?: '—' }}</p>
                            </div>
                            @if ($canManageRecurring)
                                <div class="flex shrink-0 flex-col items-end gap-2 text-sm font-medium">
                                    <button wire:click="toggleRecurringStatus({{ $profile->id }})" class="text-amber-600">
                                        {{ $profile->status === 'active' ? __('Pause') : __('Resume') }}
                                    </button>
                                    <button wire:click="editRecurring({{ $profile->id }})" class="text-indigo-600">{{ __('Edit') }}</button>
                                    <button
                                        wire:click="deleteRecurring({{ $profile->id }})"
                                        wire:confirm="{{ __('Are you sure you want to delete this recurring profile?') }}"
                                        class="text-rose-600"
                                    >{{ __('Delete') }}</button>
                                </div>
                            @endif
                        </div>
                    </div>
                @empty
                    <div class="p-6">
                        <x-empty-state
                            icon="arrow-path"
                            :title="__('No recurring profiles found')"
                            :message="__('Create a recurring profile to automatically generate invoices on a schedule.')"
                            class="border-0"
                        >
                            @if ($canManageRecurring)
                                <x-button wire:click="createRecurring" type="button">
                                    <x-icon name="plus" class="-ms-1 me-1.5 h-4 w-4" />
                                    {{ __('New Recurring') }}
                                </x-button>
                            @endif
                        </x-empty-state>
                    </div>
                @endforelse
            </div>

            <!-- Pagination -->
            @if ($profiles->hasPages())
                <div class="border-t border-slate-100 px-4 py-3 sm:px-6">
                    {{ $profiles->links() }}
                </div>
            @endif
        </x-card>
        @else
        {{-- Credit notes: money we are holding for a customer that is no longer
             backed by a sale. Raised by a void (or an invoice edited down). --}}
        @php
            $creditBadge = [
                'open' => 'amber', 'partly_applied' => 'sky', 'applied' => 'emerald',
                'refunded' => 'slate', 'cancelled' => 'rose',
            ];
            $creditLabel = [
                'open' => __('Open'), 'partly_applied' => __('Part applied'), 'applied' => __('Applied'),
                'refunded' => __('Paid out'), 'cancelled' => __('Written off'),
            ];
        @endphp
        <x-card>
            <div class="border-b border-slate-100 p-4 sm:p-6">
                <div class="relative w-full sm:max-w-md">
                    <span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3.5 text-slate-400">
                        <x-icon name="magnifying-glass" class="h-5 w-5" />
                    </span>
                    <input type="text" wire:model.live.debounce.300ms="search"
                           placeholder="{{ __('Search by credit note, customer or invoice...') }}"
                           class="block h-11 w-full rounded-xl border-slate-300 pl-10 text-sm shadow-sm transition focus:border-indigo-500 focus:ring-indigo-500" />
                </div>
                <p class="mt-3 text-xs text-slate-500">
                    {{ __('A credit note is cash still in the bank that has stopped being revenue. It comes back as revenue when the customer spends it on another invoice.') }}
                </p>
            </div>

            <!-- Table (desktop) -->
            <div class="hidden overflow-x-auto sm:block">
                <table class="min-w-full divide-y divide-slate-100">
                    <thead>
                        <tr class="bg-slate-50/80">
                            <th class="px-3 lg:px-4 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Credit note') }}</th>
                            <th class="px-3 lg:px-4 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Customer') }}</th>
                            <th class="px-3 lg:px-4 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Status') }}</th>
                            <th class="px-3 lg:px-4 py-3.5 text-right text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Amount') }}</th>
                            <th class="px-3 lg:px-4 py-3.5 text-right text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Remaining') }}</th>
                            <th class="px-3 lg:px-4 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Issued') }}</th>
                            <th class="px-3 lg:px-4 py-3.5 text-right text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Actions') }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 bg-white">
                        @forelse ($credits as $note)
                            <tr wire:key="credit-{{ $note->id }}" class="transition hover:bg-slate-50/75">
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4">
                                    <p class="text-sm font-semibold text-slate-900">{{ $note->credit_number ?: '—' }}</p>
                                    <p class="text-xs text-slate-400">{{ $note->source_label }}</p>
                                </td>
                                <td class="px-3 lg:px-4 py-4">
                                    <p class="text-sm text-slate-900">{{ $note->customer?->name ?: '—' }}</p>
                                    @if ($note->invoice)
                                        <p class="text-xs text-slate-400">{{ __('From') }} {{ $note->invoice->invoice_number }}</p>
                                    @endif
                                </td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4">
                                    <x-badge :color="$creditBadge[$note->state] ?? 'slate'">{{ $creditLabel[$note->state] ?? $note->state }}</x-badge>
                                </td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm font-semibold text-slate-900">
                                    {{ $note->currency_code }} {{ number_format((float) $note->amount, 2) }}
                                </td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm">
                                    <span class="{{ $note->remaining > 0 ? 'font-semibold text-amber-600' : 'text-slate-400' }}">
                                        {{ number_format($note->remaining, 2) }}
                                    </span>
                                </td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm text-slate-600">
                                    {{ $note->issued_at?->format('Y-m-d') }}
                                    <p class="text-xs text-slate-400">{{ $note->issuer?->name }}</p>
                                </td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right">
                                    <div class="flex items-center justify-end gap-0.5">
                                        @if ($note->isOpen())
                                            @if ($canRecordPayment)
                                                <button type="button" wire:click="openApplyCredit({{ $note->id }})" title="{{ __('Apply to an invoice') }}"
                                                        class="inline-flex h-7 w-7 items-center justify-center rounded-lg text-slate-400 transition hover:bg-emerald-50 hover:text-emerald-600">
                                                    <x-icon name="check-circle" class="h-3.5 w-3.5" />
                                                </button>
                                                <button type="button" wire:click="openCreditPayout({{ $note->id }})" title="{{ __('Pay the balance out in cash') }}"
                                                        class="inline-flex h-7 w-7 items-center justify-center rounded-lg text-slate-400 transition hover:bg-rose-50 hover:text-rose-600">
                                                    <x-icon name="banknotes" class="h-3.5 w-3.5" />
                                                </button>
                                            @endif
                                            @if ($canApproveVoid)
                                                <button type="button" wire:click="openCreditCancel({{ $note->id }})" title="{{ __('Write this credit off') }}"
                                                        class="inline-flex h-7 w-7 items-center justify-center rounded-lg text-slate-400 transition hover:bg-slate-100 hover:text-slate-700">
                                                    <x-icon name="no-symbol" class="h-3.5 w-3.5" />
                                                </button>
                                            @endif
                                        @else
                                            <span class="text-xs text-slate-400">{{ __('Closed') }}</span>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" class="px-4 py-10">
                                    <x-empty-state icon="arrow-uturn-left" :title="__('No credit notes')"
                                        :description="__('Credit notes appear here when a paid invoice is voided and the customer leaves the money on account.')" />
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <!-- Cards (mobile) -->
            <div class="divide-y divide-slate-100 sm:hidden">
                @forelse ($credits as $note)
                    <div wire:key="credit-mobile-{{ $note->id }}" class="p-4">
                        <div class="flex items-start justify-between gap-3">
                            <div class="min-w-0">
                                <p class="text-sm font-semibold text-slate-900">{{ $note->credit_number ?: '—' }}</p>
                                <p class="truncate text-sm text-slate-700">{{ $note->customer?->name ?: '—' }}</p>
                                <p class="mt-2"><x-badge :color="$creditBadge[$note->state] ?? 'slate'">{{ $creditLabel[$note->state] ?? $note->state }}</x-badge></p>
                            </div>
                            <div class="shrink-0 text-right">
                                <p class="text-sm font-semibold text-slate-900">{{ $note->currency_code }} {{ number_format((float) $note->amount, 2) }}</p>
                                <p class="text-xs text-amber-600">{{ __('Left') }}: {{ number_format($note->remaining, 2) }}</p>
                            </div>
                        </div>
                        @if ($note->isOpen())
                            <div class="mt-3 flex flex-wrap items-center gap-1 border-t border-slate-100 pt-3">
                                @if ($canRecordPayment)
                                    <button type="button" wire:click="openApplyCredit({{ $note->id }})" title="{{ __('Apply to an invoice') }}"
                                            class="inline-flex h-7 w-7 items-center justify-center rounded-lg text-slate-400 transition hover:bg-emerald-50 hover:text-emerald-600">
                                        <x-icon name="check-circle" class="h-3.5 w-3.5" />
                                    </button>
                                    <button type="button" wire:click="openCreditPayout({{ $note->id }})" title="{{ __('Pay out in cash') }}"
                                            class="inline-flex h-7 w-7 items-center justify-center rounded-lg text-slate-400 transition hover:bg-rose-50 hover:text-rose-600">
                                        <x-icon name="banknotes" class="h-3.5 w-3.5" />
                                    </button>
                                @endif
                                @if ($canApproveVoid)
                                    <button type="button" wire:click="openCreditCancel({{ $note->id }})" title="{{ __('Write off') }}"
                                            class="inline-flex h-7 w-7 items-center justify-center rounded-lg text-slate-400 transition hover:bg-slate-100 hover:text-slate-700">
                                        <x-icon name="no-symbol" class="h-3.5 w-3.5" />
                                    </button>
                                @endif
                            </div>
                        @endif
                    </div>
                @empty
                    <div class="p-4">
                        <x-empty-state icon="arrow-uturn-left" :title="__('No credit notes')"
                            :description="__('Credit notes appear here when a paid invoice is voided and the customer leaves the money on account.')" />
                    </div>
                @endforelse
            </div>

            @if ($credits->hasPages())
                <div class="border-t border-slate-100 px-4 py-3 sm:px-6">
                    {{ $credits->links() }}
                </div>
            @endif
        </x-card>
        @endif
    </div>

    <!-- Create / Edit Modal -->
    <x-dialog-modal wire:model.live="showModal" maxWidth="2xl">
        <x-slot name="title">
            @if ($formMode === 'recurring')
                {{ $editingRecurringId ? __('Edit Recurring Schedule') : __('New Recurring Schedule') }}
            @else
                {{ $editingId ? __('Edit Invoice') : __('New Invoice') }}
            @endif
        </x-slot>

        <x-slot name="content">
            <div class="grid grid-cols-1 gap-4">
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <div>
                        <x-label for="customer_id" value="{{ __('Customer') }}" />
                        <select id="customer_id" wire:model="customer_id" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            <option value="">{{ __('Select a customer...') }}</option>
                            @foreach ($customers as $customer)
                                <option value="{{ $customer->id }}">{{ $customer->name }}</option>
                            @endforeach
                        </select>
                        <x-input-error for="customer_id" class="mt-2" />
                    </div>

                    <div>
                        <x-label for="currency_code" value="{{ __('Currency') }}" />
                        <select id="currency_code" wire:model.live="currency_code" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            <option value="">{{ __('Select a currency...') }}</option>
                            @foreach ($currencies as $currency)
                                <option value="{{ $currency->code }}">{{ $currency->code }}, {{ $currency->name }}</option>
                            @endforeach
                        </select>
                        <x-currency-banking-hint :currency="$currency_code" />
                        <x-input-error for="currency_code" class="mt-2" />
                    </div>
                </div>

                <!-- Line items -->
                <div>
                    <div class="flex items-center justify-between">
                        <x-label value="{{ __('Line Items') }}" />
                        <button type="button" wire:click="addLine" class="inline-flex items-center gap-1 text-sm font-medium text-indigo-600 transition hover:text-indigo-700">
                            <x-icon name="plus" class="h-4 w-4" />
                            {{ __('Add line') }}
                        </button>
                    </div>
                    <x-input-error for="lines" class="mt-2" />

                    <div class="mt-2 space-y-3">
                        @foreach ($lines as $i => $line)
                            @php
                                $lineMode = $this->linePricingMode($line);
                                $lineDimensional = $lineMode !== 'fixed';
                            @endphp
                            <div wire:key="line-{{ $i }}" class="rounded-xl border border-slate-200 bg-slate-50/50 p-3">
                                <div class="grid grid-cols-1 items-start gap-2 sm:grid-cols-12">
                                    <div class="sm:col-span-3">
                                        <span class="mb-1 block text-xs font-medium text-slate-500">{{ __('Product') }}</span>
                                        <select wire:model.live="lines.{{ $i }}.product_id" class="block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                            <option value="">{{ __('Custom') }}</option>
                                            @foreach ($products as $product)
                                                <option value="{{ $product->id }}">{{ $product->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="sm:col-span-3">
                                        <span class="mb-1 block text-xs font-medium text-slate-500">{{ __('Name') }}</span>
                                        <x-input type="text" class="block w-full text-sm" wire:model="lines.{{ $i }}.name" />
                                        <x-input-error for="lines.{{ $i }}.name" class="mt-1" />
                                    </div>
                                    <div class="sm:col-span-2">
                                        <span class="mb-1 block text-xs font-medium text-slate-500">{{ __('Qty') }}</span>
                                        <x-input type="number" step="0.01" min="0" class="block w-full text-sm" wire:model.live="lines.{{ $i }}.qty" />
                                    </div>
                                    <div class="sm:col-span-2">
                                        <span class="mb-1 block text-xs font-medium text-slate-500">{{ $lineDimensional ? ($lineMode === 'per_sqm' ? __('Price / m²') : __('Price / m')) : __('Unit Price') }}</span>
                                        <x-input type="number" step="0.01" min="0" class="block w-full text-sm" wire:model.live="lines.{{ $i }}.unit_price" />
                                    </div>
                                    <div class="sm:col-span-2">
                                        <span class="mb-1 block text-xs font-medium text-slate-500">{{ __('Discount') }}</span>
                                        <x-input type="number" step="0.01" min="0" class="block w-full text-sm" wire:model.live="lines.{{ $i }}.discount" />
                                    </div>
                                </div>

                                {{-- Dimensional inputs: only for products priced per m² / linear m. --}}
                                @if ($lineDimensional)
                                    @php
                                        $factor = $this->lineAreaFactor($line);
                                        $bothDims = (float) ($line['width_m'] ?? 0) > 0
                                            && ($lineMode === 'per_linear_m' || (float) ($line['height_m'] ?? 0) > 0);
                                    @endphp
                                    <div class="mt-2 rounded-lg border border-indigo-100 bg-indigo-50/40 p-2.5">
                                        <div class="grid grid-cols-1 items-end gap-2 sm:grid-cols-12">
                                            <div class="sm:col-span-3">
                                                <span class="mb-1 block text-xs font-medium text-indigo-700">{{ __('Width (m)') }}</span>
                                                <x-input type="number" step="0.0001" min="0" class="block w-full text-sm" wire:model.live="lines.{{ $i }}.width_m" placeholder="{{ __('e.g. 1.2') }}" />
                                            </div>
                                            <div class="sm:col-span-3">
                                                <span class="mb-1 block text-xs font-medium {{ $lineMode === 'per_linear_m' ? 'text-slate-400' : 'text-indigo-700' }}">{{ __('Height (m)') }}</span>
                                                <x-input type="number" step="0.0001" min="0" class="block w-full text-sm" wire:model.live="lines.{{ $i }}.height_m" @disabled($lineMode === 'per_linear_m') placeholder="{{ $lineMode === 'per_linear_m' ? __('n/a') : __('e.g. 2.0') }}" />
                                            </div>
                                            <div class="sm:col-span-6">
                                                <p class="text-xs text-indigo-700">
                                                    @if ($lineMode === 'per_sqm')
                                                        <x-icon name="arrows-pointing-out" class="-mt-0.5 mr-0.5 inline h-3.5 w-3.5" />
                                                        {{ $bothDims
                                                            ? __(':factor m² × qty × price/m²', ['factor' => rtrim(rtrim(number_format($factor, 4), '0'), '.')])
                                                            : __('Enter width × height to price by area.') }}
                                                    @else
                                                        <x-icon name="arrows-pointing-out" class="-mt-0.5 mr-0.5 inline h-3.5 w-3.5" />
                                                        {{ $bothDims
                                                            ? __(':factor m × qty × price/m', ['factor' => rtrim(rtrim(number_format($factor, 4), '0'), '.')])
                                                            : __('Enter the length to price per linear metre.') }}
                                                    @endif
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                @endif

                                {{-- Garment details: colour + size breakdown flow through to the job and delivery note. --}}
                                <div class="mt-2 grid grid-cols-1 items-start gap-2 sm:grid-cols-12">
                                    <div class="sm:col-span-3">
                                        <span class="mb-1 block text-xs font-medium text-slate-500">{{ __('Colour') }}</span>
                                        <x-input type="text" class="block w-full text-sm" wire:model="lines.{{ $i }}.colour" placeholder="{{ __('e.g. White') }}" />
                                    </div>
                                    <div class="sm:col-span-9">
                                        <span class="mb-1 block text-xs font-medium text-slate-500">{{ __('Size breakdown') }}</span>
                                        <x-input type="text" class="block w-full text-sm" wire:model="lines.{{ $i }}.size_breakdown" placeholder="{{ __('e.g. S: 7, M: 11, L: 5, XL: 4') }}" />
                                    </div>
                                </div>

                                <div class="mt-2 grid grid-cols-1 items-center gap-2 sm:grid-cols-12">
                                    <div class="sm:col-span-9">
                                        <textarea rows="2" class="block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500" placeholder="{{ __('Description (optional), press Enter for a new line') }}" wire:model="lines.{{ $i }}.description"></textarea>
                                    </div>
                                    <div class="text-right text-sm font-medium text-slate-700 sm:col-span-2">
                                        {{ number_format($this->lineSubtotal($line), 2) }}
                                    </div>
                                    <div class="text-right sm:col-span-1">
                                        <button type="button" wire:click="removeLine({{ $i }})" class="text-sm font-medium text-rose-600 transition hover:text-rose-700">{{ __('Remove') }}</button>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>

                <!-- Totals -->
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <div class="grid grid-cols-1 gap-4">
                        <div>
                            <x-label for="discount" value="{{ __('Discount') }}" />
                            <x-input id="discount" type="number" step="0.01" min="0" class="mt-1 block w-full" wire:model.live="discount" />
                            <x-input-error for="discount" class="mt-2" />
                        </div>
                        <div>
                            <x-label for="vat_rate" value="{{ __('VAT %') }}" />
                            <x-input id="vat_rate" type="number" step="0.01" min="0" max="100" class="mt-1 block w-full" wire:model.live="vat_rate" />
                            <x-input-error for="vat_rate" class="mt-2" />
                        </div>
                        <div>
                            <x-label for="payment_method_id" value="{{ __('Payment Method') }}" />
                            <select id="payment_method_id" wire:model.live="payment_method_id" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                <option value="">{{ __('Not specified (no charge)') }}</option>
                                @foreach ($paymentMethods as $method)
                                    <option value="{{ $method->id }}">{{ $method->pickerLabel() }}</option>
                                @endforeach
                            </select>
                            <p class="mt-1 text-xs text-slate-500">
                                {{ __('Methods carrying a charge add it to the total.') }}
                                <a href="{{ route('payment-methods.index') }}" class="font-medium text-indigo-600 hover:text-indigo-800">{{ __('Set rates') }}</a>
                            </p>
                            {{-- Says out loud what the choice does to the printed document: the
                                 account number rides on the bank method alone, because that is the
                                 only total that has the transfer charge in it. --}}
                            @php $bankingMethod = $paymentMethods->firstWhere('id', (int) $payment_method_id); @endphp
                            <p class="mt-1 text-xs text-slate-500">
                                {{ $bankingMethod?->isBankTransfer()
                                    ? __('Your bank details will print on this invoice.')
                                    : __('No bank details will print on this invoice.') }}
                            </p>
                            <x-input-error for="payment_method_id" class="mt-2" />
                        </div>
                    </div>
                    <div class="space-y-2 rounded-xl bg-slate-50 p-4 text-sm ring-1 ring-slate-100">
                        <div class="flex justify-between">
                            <span class="text-slate-500">{{ __('Subtotal') }}</span>
                            <span class="font-medium text-slate-900">{{ number_format($totals['subtotal'], 2) }}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-slate-500">{{ __('Discount') }}</span>
                            <span class="font-medium text-slate-900">- {{ number_format($totals['discount'], 2) }}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-slate-500">{{ __('VAT') }}</span>
                            <span class="font-medium text-slate-900">{{ number_format($totals['vat'], 2) }}</span>
                        </div>
                        @if ($totals['surcharge_label'])
                            <div class="flex justify-between gap-3">
                                <span class="text-amber-700">{{ $totals['surcharge_label'] }}</span>
                                <span class="whitespace-nowrap font-medium text-amber-700">+ {{ number_format($totals['surcharge'], 2) }}</span>
                            </div>
                        @endif
                        <div class="flex justify-between border-t border-slate-200 pt-2 text-base font-semibold">
                            <span class="text-slate-900">{{ __('Total') }}</span>
                            <span class="text-indigo-600">{{ $currency_code }} {{ number_format($totals['total'], 2) }}</span>
                        </div>
                    </div>
                </div>

                <!-- Recurring schedule -->
                @if ($formMode !== 'recurring')
                    <label class="flex items-start gap-3 rounded-xl border border-slate-200 bg-slate-50/50 p-3">
                        <input type="checkbox" wire:model.live="is_recurring" class="mt-0.5 rounded border-slate-300 text-indigo-600 shadow-sm focus:ring-indigo-500" />
                        <span>
                            <span class="block text-sm font-medium text-slate-900">{{ __('Repeat this invoice automatically') }}</span>
                            <span class="block text-xs text-slate-500">{{ __('Also create a recurring schedule that generates future invoices.') }}</span>
                        </span>
                    </label>
                @endif

                @if ($is_recurring || $formMode === 'recurring')
                    <div class="rounded-xl border border-indigo-100 bg-indigo-50/40 p-4">
                        <div class="mb-3 flex items-center gap-2 text-sm font-semibold text-indigo-700">
                            <x-icon name="arrow-path" class="h-4 w-4" />
                            {{ __('Recurring schedule') }}
                        </div>
                        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                            <div>
                                <x-label for="frequency" value="{{ __('Frequency') }}" />
                                <select id="frequency" wire:model="frequency" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                    @foreach ($frequencies as $f)
                                        <option value="{{ $f }}">{{ ucfirst($f) }}</option>
                                    @endforeach
                                </select>
                                <x-input-error for="frequency" class="mt-2" />
                            </div>
                            <div>
                                <x-label for="interval" value="{{ __('Interval (every N)') }}" />
                                <x-input id="interval" type="number" step="1" min="1" max="60" class="mt-1 block w-full" wire:model="interval" />
                                <x-input-error for="interval" class="mt-2" />
                            </div>
                            <div>
                                <x-label for="next_run_date" value="{{ __('Next Run Date') }}" />
                                <x-input id="next_run_date" type="date" class="mt-1 block w-full" wire:model="next_run_date" />
                                <x-input-error for="next_run_date" class="mt-2" />
                            </div>
                            <div>
                                <x-label for="end_date" value="{{ __('End Date (optional)') }}" />
                                <x-input id="end_date" type="date" class="mt-1 block w-full" wire:model="end_date" />
                                <x-input-error for="end_date" class="mt-2" />
                            </div>
                            @if ($formMode === 'recurring')
                                <div>
                                    <x-label for="recurring_status" value="{{ __('Status') }}" />
                                    <select id="recurring_status" wire:model="recurring_status" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                        @foreach ($recurringStatuses as $s)
                                            <option value="{{ $s }}">{{ ucfirst($s) }}</option>
                                        @endforeach
                                    </select>
                                    <x-input-error for="recurring_status" class="mt-2" />
                                </div>
                            @endif
                        </div>
                    </div>
                @endif

                @if ($formMode !== 'recurring')
                    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                        <div>
                            <x-label for="status" value="{{ __('Status') }}" />
                            {{-- VOID is not offered here: it is reached through the
                                 void workflow, which settles the cash behind the sale. --}}
                            <select id="status" wire:model="status" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                @foreach ($statuses as $s)
                                    @continue($s === 'VOID')
                                    <option value="{{ $s }}">{{ $s }}</option>
                                @endforeach
                            </select>
                            <x-input-error for="status" class="mt-2" />
                        </div>
                        <div>
                            <x-label for="due_date" value="{{ __('Due Date') }}" />
                            <x-input id="due_date" type="date" class="mt-1 block w-full" wire:model="due_date" />
                            <x-input-error for="due_date" class="mt-2" />
                        </div>
                    </div>

                    {{-- Editing a settled invoice: the reason is mandatory and is
                         written to the invoice, its notes and the audit trail. --}}
                    @if ($this->editingRequiresReason())
                        @php $edited = $this->editingInvoice(); @endphp
                        <div class="rounded-xl border border-amber-200 bg-amber-50 p-4">
                            <div class="flex items-start gap-2">
                                <x-icon name="exclamation-triangle" class="mt-0.5 h-5 w-5 shrink-0 text-amber-500" />
                                <div class="min-w-0 flex-1">
                                    <p class="text-sm font-semibold text-amber-900">{{ __('This invoice has already been paid against') }}</p>
                                    <p class="mt-1 text-xs text-amber-800">
                                        {{ __(':paid of :total has been collected. If you drop the total below that, the difference becomes a credit note the customer can spend or take back. If you raise it, the invoice goes back to part-paid with a balance due.', [
                                            'paid' => $edited?->currency_code . ' ' . number_format((float) ($edited?->amount_paid ?? 0), 2),
                                            'total' => number_format((float) ($edited?->total ?? 0), 2),
                                        ]) }}
                                    </p>
                                    <div class="mt-3">
                                        <x-label for="edit_reason" value="{{ __('Why are you changing it?') }}" />
                                        <textarea id="edit_reason" rows="2" wire:model="edit_reason"
                                                  placeholder="{{ __('e.g. Customer was billed for 200 shirts, only 180 were delivered.') }}"
                                                  class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"></textarea>
                                        <x-input-error for="edit_reason" class="mt-2" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif
                @endif

                <div>
                    <x-label for="notes" value="{{ __('Notes') }}" />
                    <textarea id="notes" rows="2" wire:model="notes" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"></textarea>
                    <x-input-error for="notes" class="mt-2" />
                </div>
            </div>
        </x-slot>

        <x-slot name="footer">
            <x-secondary-button wire:click="closeModal" wire:loading.attr="disabled">
                {{ __('Cancel') }}
            </x-secondary-button>

            <x-button class="ms-3" wire:click="save" wire:loading.attr="disabled">
                {{ __('Save') }}
            </x-button>
        </x-slot>
    </x-dialog-modal>

    <!-- Record Payment Modal -->
    <x-dialog-modal wire:model.live="showPaymentModal" maxWidth="2xl">
        <x-slot name="title">
            {{ __('Record Payment') }}
            @if ($payInvoice)
                <span class="text-sm font-normal text-slate-500">— {{ $payInvoice->invoice_number }}</span>
            @endif
        </x-slot>

        <x-slot name="content">
            @if ($payInvoice)
                <div class="mb-4 grid grid-cols-3 gap-2 rounded-xl bg-slate-50 p-4 text-sm ring-1 ring-slate-100">
                    <div>
                        <p class="text-slate-500">{{ __('Total') }}</p>
                        <p class="font-semibold text-slate-900">{{ $payInvoice->currency_code }} {{ number_format((float) $payInvoice->total, 2) }}</p>
                    </div>
                    <div>
                        <p class="text-slate-500">{{ __('Paid') }}</p>
                        <p class="font-semibold text-emerald-600">{{ number_format((float) $payInvoice->amount_paid, 2) }}</p>
                    </div>
                    <div>
                        <p class="text-slate-500">{{ __('Balance Due') }}</p>
                        <p class="font-semibold text-slate-900">{{ number_format((float) $payInvoice->balance_due, 2) }}</p>
                    </div>
                </div>
            @endif

            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                <div>
                    <x-label for="pay_amount" value="{{ __('Amount') }}" />
                    <x-input id="pay_amount" type="number" step="0.01" min="0" class="mt-1 block w-full" wire:model.live.debounce.400ms="pay_amount" />
                    <x-input-error for="pay_amount" class="mt-2" />
                </div>
                <div>
                    <x-label for="pay_channel" value="{{ __('Channel') }}" />
                    <select id="pay_channel" wire:model.live="pay_channel" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        @foreach ($channels as $channel)
                            <option value="{{ $channel }}">{{ $channel }}</option>
                        @endforeach
                    </select>
                    <x-input-error for="pay_channel" class="mt-2" />
                </div>
                <div class="sm:col-span-2">
                    <x-label for="pay_kind" value="{{ __('Payment type') }}" />
                    <select id="pay_kind" wire:model="pay_kind" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        @foreach (\App\Models\Payment::KIND_LABELS as $kindValue => $kindLabel)
                            <option value="{{ $kindValue }}">{{ __($kindLabel) }}</option>
                        @endforeach
                    </select>
                    <p class="mt-1 text-xs text-slate-400">{{ __('Deposits and balances are reported as separate income lines. Suggested from this invoice’s history — change it if the customer called it something else.') }}</p>
                    <x-input-error for="pay_kind" class="mt-2" />
                </div>

                @if ($paySurcharge > 0)
                    <div class="sm:col-span-2 rounded-xl bg-amber-50 px-4 py-3 text-sm ring-1 ring-amber-100">
                        <div class="flex items-center justify-between">
                            <span class="text-amber-700">{{ __('Money-transfer surcharge (:rate%)', ['rate' => rtrim(rtrim(number_format(\App\Models\Payment::SURCHARGE_RATE * 100, 2), '0'), '.')]) }}</span>
                            <span class="font-semibold text-amber-800">{{ $payInvoice?->currency_code }} {{ number_format($paySurcharge, 2) }}</span>
                        </div>
                        <div class="mt-1 flex items-center justify-between border-t border-amber-200 pt-1">
                            <span class="text-amber-700">{{ __('Total to collect') }}</span>
                            <span class="font-bold text-amber-900">{{ $payInvoice?->currency_code }} {{ number_format((float) ($pay_amount ?: 0) + $paySurcharge, 2) }}</span>
                        </div>
                        <p class="mt-1 text-xs text-amber-600">{{ __('The surcharge is added to what the customer pays and lands in treasury; it does not reduce the invoice balance.') }}</p>
                    </div>
                @endif
                <div class="sm:col-span-2">
                    <x-label for="pay_fund_account_id" value="{{ __('Deposit Into') }}" />
                    <select id="pay_fund_account_id" wire:model="pay_fund_account_id" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        <option value="">{{ __('Select an account...') }}</option>
                        @foreach ($payAccounts as $account)
                            <option value="{{ $account->id }}">{{ $account->name }}</option>
                        @endforeach
                    </select>
                    @if ($payInvoice && $payAccounts->isEmpty())
                        <p class="mt-1 text-xs text-rose-500">
                            {{ __('No active :currency account exists. Create one under Treasury first.', ['currency' => $payInvoice->currency_code]) }}
                        </p>
                    @else
                        <p class="mt-1 text-xs text-slate-400">{{ __('Which account this money lands in.') }}</p>
                    @endif
                    <x-input-error for="pay_fund_account_id" class="mt-2" />
                </div>
                <div class="sm:col-span-2">
                    <x-label for="pay_charge" value="{{ __('Transaction charge') }}" />
                    <x-input id="pay_charge" type="number" step="0.01" min="0" placeholder="0.00" class="mt-1 block w-full" wire:model.live.debounce.400ms="pay_charge" />
                    <p class="mt-1 text-xs text-slate-400">{{ __('Bank/EcoCash fee this account skims off the deposit. Leave blank if none.') }}</p>
                    @if ($paySuggestedCharge !== '' && $pay_charge === $paySuggestedCharge && $payInvoice?->paymentMethod)
                        <p class="mt-1 text-xs text-slate-500">
                            {{ __('Suggested from :method (:rate). Change it if the statement says otherwise.', [
                                'method' => $payInvoice->paymentMethod->name,
                                'rate' => $payInvoice->paymentMethod->costLabel(),
                            ]) }}
                        </p>
                    @endif
                    <x-input-error for="pay_charge" class="mt-2" />
                    @php
                        $payChargeVal = round((float) ($pay_charge ?: 0), 2);
                    @endphp
                    @if ($payChargeVal > 0)
                        <div class="mt-2 rounded-xl bg-sky-50 px-4 py-3 text-sm ring-1 ring-sky-100">
                            <div class="flex items-center justify-between">
                                <span class="text-sky-700">{{ __('Net landing in the account') }}</span>
                                <span class="font-bold text-sky-900">{{ $payInvoice?->currency_code }} {{ number_format((float) ($pay_amount ?: 0) - $payChargeVal, 2) }}</span>
                            </div>
                            <p class="mt-1 text-xs text-sky-600">{{ __('The invoice is still settled in full; the fee is booked as a bank charge in your P&L.') }}</p>
                        </div>
                    @endif
                </div>
                <div>
                    <x-label for="pay_reference" value="{{ __('Reference') }}" />
                    <x-input id="pay_reference" type="text" class="mt-1 block w-full" wire:model="pay_reference" />
                    <x-input-error for="pay_reference" class="mt-2" />
                </div>
                <div>
                    <x-label for="pay_paid_at" value="{{ __('Paid At') }}" />
                    <x-input id="pay_paid_at" type="datetime-local" class="mt-1 block w-full" wire:model="pay_paid_at" />
                    <x-input-error for="pay_paid_at" class="mt-2" />
                </div>
                <div class="sm:col-span-2">
                    <x-label for="pay_notes" value="{{ __('Notes') }}" />
                    <textarea id="pay_notes" rows="2" wire:model="pay_notes" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"></textarea>
                    <x-input-error for="pay_notes" class="mt-2" />
                </div>
            </div>

            <!-- Payment & refund history (one chronological timeline) -->
            @if ($payInvoice && ($payInvoice->payments->isNotEmpty() || $payInvoice->refunds->isNotEmpty()))
                @php
                    // Fold payments (money in) and refunds (money out) into a single
                    // list ordered newest-first, tagging each with its direction.
                    $timeline = $payInvoice->payments->map(fn ($p) => [
                        'type' => 'payment', 'at' => $p->paid_at, 'model' => $p,
                    ])->concat($payInvoice->refunds->map(fn ($r) => [
                        'type' => 'refund', 'at' => $r->refunded_at, 'model' => $r,
                    ]))->sortByDesc('at')->values();
                @endphp
                <div class="mt-6">
                    <x-label value="{{ __('Payment & Refund History') }}" />
                    <div class="mt-2 divide-y divide-slate-100 rounded-xl border border-slate-200">
                        @foreach ($timeline as $entry)
                            @php $item = $entry['model']; @endphp
                            @if ($entry['type'] === 'payment')
                                <div wire:key="payment-{{ $item->id }}" class="flex items-center justify-between px-3 py-2.5 text-sm">
                                    <div>
                                        <p class="font-medium text-slate-900">{{ $payInvoice->currency_code }} {{ number_format((float) $item->amount, 2) }} <span class="font-normal text-slate-500">· {{ $item->channel }}</span></p>
                                        <p class="text-xs text-slate-500">
                                            {{ optional($item->paid_at)->format('Y-m-d H:i') }}
                                            @if ((float) $item->surcharge > 0) · {{ __('surcharge') }} {{ number_format((float) $item->surcharge, 2) }} @endif
                                            @if ($item->reference) · {{ $item->reference }} @endif
                                        </p>
                                    </div>
                                    <div class="flex items-center gap-2">
                                        <span class="text-xs text-slate-400">{{ $item->recorder?->name }}</span>
                                        <x-notes-button :for="$item" size="sm" :count="$item->notes()->count()"
                                                        :title="$payInvoice->invoice_number.' · '.number_format((float) $item->amount, 2)" />
                                    </div>
                                </div>
                            @else
                                <div wire:key="refund-{{ $item->id }}" class="flex items-center justify-between px-3 py-2.5 text-sm">
                                    <div>
                                        <p class="font-medium text-rose-600">- {{ $payInvoice->currency_code }} {{ number_format((float) $item->amount, 2) }} <span class="font-normal text-slate-500">· {{ __('Refund') }} · {{ $item->reason_label }}</span></p>
                                        <p class="text-xs text-slate-500">
                                            {{ optional($item->refunded_at)->format('Y-m-d H:i') }}
                                            @if ($item->reference) · {{ $item->reference }} @endif
                                        </p>
                                    </div>
                                    <span class="text-xs text-slate-400">{{ $item->recorder?->name }}</span>
                                </div>
                            @endif
                        @endforeach
                    </div>
                </div>
            @endif
        </x-slot>

        <x-slot name="footer">
            <x-secondary-button wire:click="closePaymentModal" wire:loading.attr="disabled">
                {{ __('Cancel') }}
            </x-secondary-button>

            <x-button class="ms-3" wire:click="savePayment" wire:loading.attr="disabled">
                {{ __('Save Payment') }}
            </x-button>
        </x-slot>
    </x-dialog-modal>

    <!-- Refund modal -->
    <x-dialog-modal wire:model.live="showRefundModal" maxWidth="2xl">
        <x-slot name="title">
            {{ __('Refund Customer') }}
            @if ($refundInvoice)
                <span class="text-sm font-normal text-slate-500">— {{ $refundInvoice->invoice_number }}</span>
            @endif
        </x-slot>

        <x-slot name="content">
            @if ($refundInvoice)
                @php
                    $refundedTotal = $refundInvoice->refunded_total;
                    $netCollected = $refundInvoice->net_collected;
                @endphp
                <div class="mb-4 grid grid-cols-3 gap-2 rounded-xl bg-slate-50 p-4 text-sm ring-1 ring-slate-100">
                    <div>
                        <p class="text-slate-500">{{ __('Paid') }}</p>
                        <p class="font-semibold text-emerald-600">{{ $refundInvoice->currency_code }} {{ number_format((float) $refundInvoice->amount_paid, 2) }}</p>
                    </div>
                    <div>
                        <p class="text-slate-500">{{ __('Already refunded') }}</p>
                        <p class="font-semibold text-rose-600">{{ number_format($refundedTotal, 2) }}</p>
                    </div>
                    <div>
                        <p class="text-slate-500">{{ __('Net collected') }}</p>
                        <p class="font-semibold text-slate-900">{{ number_format($netCollected, 2) }}</p>
                    </div>
                </div>
                <p class="mb-4 rounded-xl bg-sky-50 px-4 py-3 text-xs text-sky-700 ring-1 ring-sky-100">
                    {{ __('A refund returns cash to the customer and reduces recognised revenue by the same amount. The invoice stays settled, its total and balance do not change.') }}
                </p>
            @endif

            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                <div>
                    <x-label for="refund_amount" value="{{ __('Amount') }}" />
                    <x-input id="refund_amount" type="number" step="0.01" min="0" class="mt-1 block w-full" wire:model.live.debounce.400ms="refund_amount" />
                    <x-input-error for="refund_amount" class="mt-2" />
                </div>
                <div>
                    <x-label for="refund_reason" value="{{ __('Reason') }}" />
                    <select id="refund_reason" wire:model="refund_reason" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        @foreach ($refundReasons as $value => $label)
                            <option value="{{ $value }}">{{ $label }}</option>
                        @endforeach
                    </select>
                    <x-input-error for="refund_reason" class="mt-2" />
                </div>
                <div class="sm:col-span-2">
                    <x-label for="refund_fund_account_id" value="{{ __('Pay Out From') }}" />
                    <select id="refund_fund_account_id" wire:model="refund_fund_account_id" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        <option value="">{{ __('Select an account...') }}</option>
                        @foreach ($refundAccounts as $account)
                            <option value="{{ $account->id }}">{{ $account->name }}</option>
                        @endforeach
                    </select>
                    @if ($refundInvoice && $refundAccounts->isEmpty())
                        <p class="mt-1 text-xs text-rose-500">
                            {{ __('No active :currency account exists. Create one under Treasury first.', ['currency' => $refundInvoice->currency_code]) }}
                        </p>
                    @else
                        <p class="mt-1 text-xs text-slate-400">{{ __('Which account the money leaves from.') }}</p>
                    @endif
                    <x-input-error for="refund_fund_account_id" class="mt-2" />
                </div>
                <div class="sm:col-span-2">
                    <x-label for="refund_charge" value="{{ __('Transaction charge') }}" />
                    <x-input id="refund_charge" type="number" step="0.01" min="0" placeholder="0.00" class="mt-1 block w-full" wire:model.live.debounce.400ms="refund_charge" />
                    <p class="mt-1 text-xs text-slate-400">{{ __('Bank/EcoCash fee to send the money out. Booked as a bank charge. Leave blank if none.') }}</p>
                    <x-input-error for="refund_charge" class="mt-2" />
                </div>
                <div>
                    <x-label for="refund_reference" value="{{ __('Reference') }}" />
                    <x-input id="refund_reference" type="text" class="mt-1 block w-full" wire:model="refund_reference" />
                    <x-input-error for="refund_reference" class="mt-2" />
                </div>
                <div>
                    <x-label for="refund_refunded_at" value="{{ __('Refunded At') }}" />
                    <x-input id="refund_refunded_at" type="datetime-local" class="mt-1 block w-full" wire:model="refund_refunded_at" />
                    <x-input-error for="refund_refunded_at" class="mt-2" />
                </div>
                <div class="sm:col-span-2">
                    <x-label for="refund_notes" value="{{ __('Notes') }}" />
                    <textarea id="refund_notes" rows="2" wire:model="refund_notes" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"></textarea>
                    <x-input-error for="refund_notes" class="mt-2" />
                </div>
            </div>

            <!-- Refund history -->
            @if ($refundInvoice && $refundInvoice->refunds->isNotEmpty())
                <div class="mt-6">
                    <x-label value="{{ __('Refund History') }}" />
                    <div class="mt-2 divide-y divide-slate-100 rounded-xl border border-slate-200">
                        @foreach ($refundInvoice->refunds->sortByDesc('refunded_at') as $refund)
                            <div wire:key="refund-{{ $refund->id }}" class="flex items-center justify-between px-3 py-2.5 text-sm">
                                <div>
                                    <p class="font-medium text-slate-900">{{ $refundInvoice->currency_code }} {{ number_format((float) $refund->amount, 2) }} <span class="font-normal text-slate-500">· {{ $refund->reason_label }}</span></p>
                                    <p class="text-xs text-slate-500">
                                        {{ optional($refund->refunded_at)->format('Y-m-d H:i') }}
                                        @if ($refund->reference) · {{ $refund->reference }} @endif
                                    </p>
                                </div>
                                <span class="text-xs text-slate-400">{{ $refund->recorder?->name }}</span>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif
        </x-slot>

        <x-slot name="footer">
            <x-secondary-button wire:click="closeRefundModal" wire:loading.attr="disabled">
                {{ __('Cancel') }}
            </x-secondary-button>

            <x-button class="ms-3" wire:click="saveRefund" wire:loading.attr="disabled">
                {{ __('Save Refund') }}
            </x-button>
        </x-slot>
    </x-dialog-modal>

    <!-- Void modal: raise a request, or (for an approver) void the invoice -->
    <x-dialog-modal wire:model.live="showVoidModal" maxWidth="2xl">
        <x-slot name="title">
            @if ($voidInvoice?->hasPendingVoid() && $canApproveVoid)
                {{ __('Approve void request') }}
            @elseif ($canApproveVoid)
                {{ __('Void invoice') }}
            @else
                {{ __('Request a void') }}
            @endif
        </x-slot>

        <x-slot name="content">
            @if ($voidInvoice)
                @php
                    $cur = $voidInvoice->currency_code;
                    $unsettled = $voidInvoice->unsettledCash();
                    $keep = min($this->retainedAmount($unsettled), $unsettled);
                    $giveBack = round($unsettled - $keep, 2);
                    $shortfall = round($voidCostsIncurred - $keep, 2);
                    // One shared formula for every segmented control in this modal.
                    $seg = fn (bool $on): string => $on
                        ? 'bg-white text-indigo-600 shadow-sm ring-1 ring-slate-200'
                        : 'text-slate-500 hover:text-slate-700';
                @endphp

                {{-- Summary strip: who, how much, and what is at stake. --}}
                <div class="flex flex-wrap items-baseline justify-between gap-x-6 gap-y-2 border-b border-slate-100 pb-4">
                    <div class="min-w-0">
                        <p class="text-sm font-semibold text-slate-900">{{ $voidInvoice->invoice_number }}</p>
                        <p class="truncate text-xs text-slate-500">{{ $voidInvoice->payerName() ?: '—' }}</p>
                    </div>
                    <div class="flex items-baseline gap-5 text-right">
                        <div>
                            <p class="text-[10px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Collected') }}</p>
                            <p class="text-sm font-bold tabular-nums text-slate-900">{{ $cur }} {{ number_format($unsettled, 2) }}</p>
                        </div>
                        <div>
                            <p class="text-[10px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Spent on job') }}</p>
                            <p class="text-sm font-bold tabular-nums {{ $shortfall > 0.01 ? 'text-rose-600' : 'text-slate-900' }}">{{ $cur }} {{ number_format($voidCostsIncurred, 2) }}</p>
                        </div>
                    </div>
                </div>

                @if ($voidInvoice->hasPendingVoid())
                    <div class="mt-4 rounded-xl bg-amber-50 px-4 py-3 text-xs">
                        <p class="font-semibold text-amber-900">
                            {{ __('Requested by :who, :when', [
                                'who' => $voidInvoice->voidRequester?->name ?? __('a colleague'),
                                'when' => $voidInvoice->void_requested_at?->diffForHumans(),
                            ]) }}
                        </p>
                        <p class="mt-0.5 text-amber-800">{{ $voidInvoice->void_reason }}</p>
                    </div>
                @endif

                <div class="mt-5 space-y-5">
                    {{-- Reason --}}
                    <div>
                        <x-label for="void_reason" value="{{ __('Why?') }}" />
                        <textarea id="void_reason" rows="2" wire:model="void_reason"
                                  placeholder="{{ __('e.g. Customer cancelled before production started.') }}"
                                  class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"></textarea>
                        <x-input-error for="void_reason" class="mt-2" />
                    </div>

                    @if ($unsettled > 0)
                        {{-- Cancellation charge: % or flat amount, one live summary. --}}
                        <div>
                            <div class="flex flex-wrap items-center justify-between gap-2">
                                <x-label for="void_retain" value="{{ __('Cancellation charge') }}" />
                                <div class="flex items-center gap-1 rounded-xl border border-slate-200 bg-slate-50 p-1 text-xs font-medium">
                                    <button type="button" wire:click="$set('void_retain_mode', 'amount')"
                                            class="rounded-lg px-2.5 py-1 transition {{ $seg($void_retain_mode === 'amount') }}">{{ $cur }}</button>
                                    <button type="button" wire:click="$set('void_retain_mode', 'percent')"
                                            class="rounded-lg px-2.5 py-1 transition {{ $seg($void_retain_mode === 'percent') }}">%</button>
                                </div>
                            </div>

                            <div class="relative mt-1">
                                @if ($void_retain_mode === 'percent')
                                    <x-input id="void_retain" type="number" step="0.01" min="0" max="100"
                                             class="block w-full pr-10 tabular-nums" wire:model.live="void_retain_pct" placeholder="0" />
                                    <span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3.5 text-sm text-slate-400">%</span>
                                @else
                                    <x-input id="void_retain" type="number" step="0.01" min="0" :max="$unsettled"
                                             class="block w-full pl-12 tabular-nums" wire:model.live="void_retain" placeholder="0.00" />
                                    <span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3.5 text-sm text-slate-400">{{ $cur }}</span>
                                @endif
                            </div>
                            <x-input-error for="void_retain" class="mt-2" />
                            <x-input-error for="void_retain_pct" class="mt-2" />

                            <div class="mt-2 flex flex-wrap items-center gap-x-4 gap-y-1 text-xs">
                                <span class="font-medium text-emerald-700">{{ __('You keep') }} {{ $cur }} {{ number_format($keep, 2) }}</span>
                                <span class="text-slate-500">{{ __('Customer gets back') }} {{ $cur }} {{ number_format($giveBack, 2) }}</span>
                            </div>
                            @if ($shortfall > 0.01)
                                <p class="mt-1 text-xs font-medium text-rose-600">
                                    {{ __('Writes off :loss of work you have already paid for.', ['loss' => $cur . ' ' . number_format($shortfall, 2)]) }}
                                </p>
                            @endif
                        </div>

                        {{-- Where the returned money goes --}}
                        <div @class(['opacity-40' => $giveBack <= 0])>
                            <x-label :value="__('Return :amount as', ['amount' => $cur . ' ' . number_format($giveBack, 2)])" />
                            <div class="mt-1 grid grid-cols-2 gap-1 rounded-xl border border-slate-200 bg-slate-50 p-1 text-sm font-medium">
                                @foreach ($settlements as $key => $label)
                                    <button type="button" wire:click="$set('void_settlement', '{{ $key }}')" @disabled($giveBack <= 0)
                                            class="rounded-lg px-3 py-1.5 transition {{ $seg($void_settlement === $key) }}">
                                        {{ $key === 'refund' ? __('Cash refund') : __('Credit note') }}
                                    </button>
                                @endforeach
                            </div>
                            <p class="mt-1.5 text-xs text-slate-500">
                                {{ $void_settlement === 'refund'
                                    ? __('Leaves the account today and shows in Treasury as a refund.')
                                    : __('No money moves. They can spend it on a future invoice, or take it in cash later.') }}
                            </p>
                            <x-input-error for="void_settlement" class="mt-2" />
                        </div>

                        @if ($void_settlement === 'refund' && $giveBack > 0)
                            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                                <div>
                                    <x-label for="void_fund_account_id" value="{{ __('Paid from') }}" />
                                    <select id="void_fund_account_id" wire:model="void_fund_account_id" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                        <option value="">{{ __('Select an account...') }}</option>
                                        @foreach ($voidAccounts as $account)
                                            <option value="{{ $account->id }}">{{ $account->name }}</option>
                                        @endforeach
                                    </select>
                                    <x-input-error for="void_fund_account_id" class="mt-2" />
                                </div>
                                <div>
                                    <x-label for="void_charge" value="{{ __('Bank charge') }}" />
                                    <x-input id="void_charge" type="number" step="0.01" min="0" class="mt-1 block w-full tabular-nums" wire:model="void_charge" placeholder="{{ __('Optional') }}" />
                                    <x-input-error for="void_charge" class="mt-2" />
                                </div>
                            </div>
                        @endif
                    @else
                        <p class="text-xs text-slate-500">{{ __('Nothing was collected on this invoice, so there is nothing to settle.') }}</p>
                    @endif

                    {{-- What happens to the production job(s) --}}
                    @if ($voidInvoice->jobs->isNotEmpty())
                        <div>
                            <x-label :value="trans_choice('{1}Production job|[2,*]Production jobs', $voidInvoice->jobs->count())" />
                            <div class="mt-1 grid grid-cols-2 gap-1 rounded-xl border border-slate-200 bg-slate-50 p-1 text-sm font-medium">
                                @foreach ($voidJobActions as $key => $label)
                                    <button type="button" wire:click="$set('void_job_action', '{{ $key }}')"
                                            class="rounded-lg px-3 py-1.5 transition {{ $seg($void_job_action === $key) }}">
                                        {{ $key === 'cancel' ? __('Cancel job') : __('Keep job') }}
                                    </button>
                                @endforeach
                            </div>
                            <p class="mt-1.5 text-xs text-slate-500">
                                {{ $void_job_action === 'cancel'
                                    ? __('Confirmed productions are reversed and the stock goes back. What you cannot recover stays costed.')
                                    : __('Nothing is unwound. The job keeps its costs and earns only the charge above.') }}
                                <span class="text-slate-400">· {{ $voidInvoice->jobs->pluck('job_number')->join(', ') }}</span>
                            </p>
                            <x-input-error for="void_job_action" class="mt-2" />
                        </div>
                    @endif

                    <p class="border-t border-slate-100 pt-4 text-xs text-slate-400">
                        {{ __('The invoice, its payments and its line items are all kept. The reversal is dated today, so the month the money came in is never rewritten, and costs on the cancelled work move out of cost of sales.') }}
                    </p>
                </div>
            @endif
        </x-slot>

        <x-slot name="footer">
            <x-secondary-button wire:click="closeVoidModal" wire:loading.attr="disabled">
                {{ __('Cancel') }}
            </x-secondary-button>

            <x-danger-button class="ms-3" wire:click="submitVoid" wire:loading.attr="disabled">
                @if ($canApproveVoid)
                    {{ $voidInvoice?->hasPendingVoid() ? __('Approve & Void') : __('Void Invoice') }}
                @else
                    {{ __('Send Request') }}
                @endif
            </x-danger-button>
        </x-slot>
    </x-dialog-modal>

    <!-- Decline a void request -->
    <x-dialog-modal wire:model.live="showVoidDeclineModal" maxWidth="lg">
        <x-slot name="title">{{ __('Decline void request') }}</x-slot>

        <x-slot name="content">
            <p class="text-sm text-slate-600">
                {{ __('The invoice stands. The request and your refusal both stay on record, so tell them why.') }}
            </p>
            <div class="mt-4">
                <x-label for="void_decline_note" value="{{ __('Note (optional)') }}" />
                <textarea id="void_decline_note" rows="3" wire:model="void_decline_note"
                          class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"></textarea>
                <x-input-error for="void_decline_note" class="mt-2" />
            </div>
        </x-slot>

        <x-slot name="footer">
            <x-secondary-button wire:click="closeVoidDecline" wire:loading.attr="disabled">{{ __('Cancel') }}</x-secondary-button>
            <x-danger-button class="ms-3" wire:click="submitVoidDecline" wire:loading.attr="disabled">{{ __('Decline Request') }}</x-danger-button>
        </x-slot>
    </x-dialog-modal>

    <!-- Apply a credit note to an invoice -->
    <x-dialog-modal wire:model.live="showCreditApplyModal" maxWidth="lg">
        <x-slot name="title">{{ __('Apply credit to an invoice') }}</x-slot>

        <x-slot name="content">
            @if ($credit)
                <div class="rounded-xl bg-slate-50 p-4 text-sm">
                    <p class="font-semibold text-slate-900">{{ $credit->credit_number }}</p>
                    <p class="text-slate-500">
                        {{ $credit->customer?->name }} ·
                        {{ __('remaining') }} {{ $credit->currency_code }} {{ number_format($credit->remaining, 2) }}
                    </p>
                </div>

                <div class="mt-4 space-y-4">
                    <div>
                        <x-label for="credit_invoice_id" value="{{ __('Settle which invoice?') }}" />
                        <select id="credit_invoice_id" wire:model="credit_invoice_id" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            <option value="">{{ __('Select an invoice...') }}</option>
                            @foreach ($creditInvoices as $target)
                                <option value="{{ $target->id }}">
                                    {{ $target->invoice_number }}, {{ __('owes') }} {{ $target->currency_code }} {{ number_format((float) $target->balance_due, 2) }}
                                </option>
                            @endforeach
                        </select>
                        <x-input-error for="credit_invoice_id" class="mt-2" />
                        @if ($creditInvoices->isEmpty())
                            <p class="mt-1 text-xs text-amber-600">{{ __('This customer has no unpaid invoices in :currency.', ['currency' => $credit->currency_code]) }}</p>
                        @endif
                    </div>

                    <div>
                        <x-label for="credit_amount" value="{{ __('Amount to apply') }}" />
                        <x-input id="credit_amount" type="number" step="0.01" min="0" class="mt-1 block w-full" wire:model="credit_amount" />
                        <x-input-error for="credit_amount" class="mt-2" />
                    </div>

                    <p class="rounded-xl border border-slate-200 bg-white p-3 text-xs text-slate-500">
                        {{ __('No cash moves, the money is already in the bank. The invoice is settled and the revenue is recognised now, in this month.') }}
                    </p>
                </div>
            @endif
        </x-slot>

        <x-slot name="footer">
            <x-secondary-button wire:click="closeCreditModals" wire:loading.attr="disabled">{{ __('Cancel') }}</x-secondary-button>
            <x-button class="ms-3" wire:click="saveApplyCredit" wire:loading.attr="disabled">{{ __('Apply Credit') }}</x-button>
        </x-slot>
    </x-dialog-modal>

    <!-- Pay a credit note out in cash -->
    <x-dialog-modal wire:model.live="showCreditPayoutModal" maxWidth="lg">
        <x-slot name="title">{{ __('Pay the credit out') }}</x-slot>

        <x-slot name="content">
            @if ($credit)
                <p class="text-sm text-slate-600">
                    {{ __('Hand :amount back to :customer. The money leaves the account today; profit does not change, because this credit stopped counting as revenue when it was raised.', [
                        'amount' => $credit->currency_code . ' ' . number_format($credit->remaining, 2),
                        'customer' => $credit->customer?->name ?: __('the customer'),
                    ]) }}
                </p>
                <div class="mt-4">
                    <x-label for="credit_fund_account_id" value="{{ __('Pay from account') }}" />
                    <select id="credit_fund_account_id" wire:model="credit_fund_account_id" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        <option value="">{{ __('Select an account...') }}</option>
                        @foreach ($creditAccounts as $account)
                            <option value="{{ $account->id }}">{{ $account->name }} ({{ $account->currency_code }})</option>
                        @endforeach
                    </select>
                    <x-input-error for="credit_fund_account_id" class="mt-2" />
                </div>
            @endif
        </x-slot>

        <x-slot name="footer">
            <x-secondary-button wire:click="closeCreditModals" wire:loading.attr="disabled">{{ __('Cancel') }}</x-secondary-button>
            <x-danger-button class="ms-3" wire:click="saveCreditPayout" wire:loading.attr="disabled">{{ __('Pay Out') }}</x-danger-button>
        </x-slot>
    </x-dialog-modal>

    <!-- Write a credit note off -->
    <x-dialog-modal wire:model.live="showCreditCancelModal" maxWidth="lg">
        <x-slot name="title">{{ __('Write this credit off') }}</x-slot>

        <x-slot name="content">
            @if ($credit)
                <p class="text-sm text-slate-600">
                    {{ __('The customer will never spend the remaining :amount and it is not going back to them. Writing it off returns that money to revenue in this month.', [
                        'amount' => $credit->currency_code . ' ' . number_format($credit->remaining, 2),
                    ]) }}
                </p>
                <div class="mt-4">
                    <x-label for="credit_cancel_reason" value="{{ __('Why?') }}" />
                    <textarea id="credit_cancel_reason" rows="3" wire:model="credit_cancel_reason"
                              placeholder="{{ __('e.g. Customer closed their account and waived the balance.') }}"
                              class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"></textarea>
                    <x-input-error for="credit_cancel_reason" class="mt-2" />
                </div>
            @endif
        </x-slot>

        <x-slot name="footer">
            <x-secondary-button wire:click="closeCreditModals" wire:loading.attr="disabled">{{ __('Cancel') }}</x-secondary-button>
            <x-danger-button class="ms-3" wire:click="saveCreditCancel" wire:loading.attr="disabled">{{ __('Write Off') }}</x-danger-button>
        </x-slot>
    </x-dialog-modal>
</div>