@php
    $typeBadge = ['fixed' => 'sky', 'variable' => 'amber'];

    // Nav-tab icons for the three tables: the ledger, the overhead-nut analysis,
    // and payables (supplier bills).
    $tabIcon = [
        'all' => 'receipt-percent',
        'overheads' => 'building-office',
        'bills' => 'document-text',
    ];

    // Supplier-bill status → badge colour.
    $billBadge = [
        'draft' => 'slate',
        'awaiting_payment' => 'amber',
        'partial' => 'sky',
        'paid' => 'emerald',
        'cancelled' => 'rose',
    ];

    $costTypeBadge = ['overhead' => 'indigo', 'direct' => 'amber', 'none' => 'slate'];
    $sourceLabels = [
        'recurring' => __('Recurring expenses'),
        'payroll' => __('Payroll'),
        'fixed' => __('Fixed operating costs'),
    ];
@endphp

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

        {{-- Cashflow segmented control: Income (in) / Expenses (out). These two
             share one "Cashflow" sidebar entry; the toggle is how you move
             between them. --}}
        <x-cashflow-tabs />

        <x-page-header :title="__('Expenses')" :subtitle="__('Every cost the business carries, cost of sales, overheads, operating expenses and depreciation, classified in one place.')">
            @if ($canManageCategories)
                <x-secondary-button wire:click="openCategories" type="button">
                    <x-icon name="cog-6-tooth" class="-ms-1 me-1.5 h-4 w-4" />
                    {{ __('Categories') }}
                </x-secondary-button>
            @endif
            @if ($canManage)
                <x-button wire:click="create" type="button">
                    <x-icon name="plus" class="-ms-1 me-1.5 h-4 w-4" />
                    {{ __('New Expense') }}
                </x-button>
            @endif
        </x-page-header>

        {{-- Comprehensive period filter, drives every card and table below --}}
        <x-card class="p-4 sm:p-5">
            <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
                <div class="flex items-center gap-3">
                    <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-indigo-50 text-indigo-600">
                        <x-icon name="calendar" class="h-5 w-5" />
                    </span>
                    <div>
                        <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Reporting period') }}</p>
                        <p class="text-base font-semibold text-slate-900">{{ $periodLabel }}</p>
                    </div>
                </div>

                <div class="flex flex-col gap-3 sm:flex-row sm:items-center">
                    <div class="no-scrollbar inline-flex items-center gap-1 overflow-x-auto rounded-xl border border-slate-200 bg-slate-50 p-1">
                        @foreach ($periods as $key => $label)
                            <button
                                type="button"
                                wire:click="$set('period', '{{ $key }}')"
                                class="whitespace-nowrap rounded-lg px-3 py-1.5 text-xs font-semibold transition {{ $period === $key ? 'bg-white text-indigo-600 shadow-sm ring-1 ring-slate-200' : 'text-slate-500 hover:text-slate-700' }}"
                            >{{ __($label) }}</button>
                        @endforeach
                    </div>

                    @if ($period === 'custom')
                        <div class="flex items-center gap-2">
                            <input
                                type="date"
                                wire:model.live="startDate"
                                class="block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
                            />
                            <span class="text-slate-400">–</span>
                            <input
                                type="date"
                                wire:model.live="endDate"
                                class="block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
                            />
                        </div>
                    @endif
                </div>
            </div>
        </x-card>

        {{-- KPI cards, expense-focused, ordered left→right by priority. Money value
             locked at 19px per spec; single scrolling row like the Treasury page. --}}
        <section class="no-scrollbar -mx-1 flex snap-x gap-5 overflow-x-auto px-1 py-1">
            @foreach ($metrics as $m)
                @php
                    $tone = $m['delta'] === null
                        ? 'muted'
                        : (($m['delta'] >= 0) === $m['up_is_good'] ? 'up' : 'down');
                    $pill = ['up' => 'bg-emerald-50 text-emerald-700', 'down' => 'bg-rose-50 text-rose-700', 'muted' => 'bg-slate-100 text-slate-500'][$tone];
                @endphp
                <x-card class="group relative flex w-[calc((100%-4*1.25rem)/4.75)] min-w-[210px] shrink-0 snap-start 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="{{ $m['label'] }}">{{ $m['label'] }}</p>
                        <span class="flex shrink-0 items-center justify-center rounded-xl text-white shadow-sm ring-1 ring-white/40" style="height: 2rem; width: 2rem; background: linear-gradient(135deg, {{ $m['accent'] }}, {{ $m['accent'] }}bb)">
                            <x-icon :name="$m['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;">{{ $m['value'] }}</p>
                    <span class="mt-2.5 inline-flex w-fit items-center gap-1 rounded-full px-2 py-1 text-[11px] font-semibold {{ $pill }}">
                        @if ($m['delta'] !== null)
                            <x-icon :name="$m['delta'] >= 0 ? 'arrow-trending-up' : 'arrow-trending-down'" class="h-3 w-3 shrink-0" />
                            {{ number_format(abs($m['delta']), 0) }}%
                        @endif
                        <span class="truncate">{{ $m['sub'] }}</span>
                    </span>
                </x-card>
            @endforeach
        </section>

        {{-- ===================== WAITING TO BE POSTED =====================
             Recurring instructions (rent, salaries, subscriptions) that have
             fallen due. BillPro used to turn these into real expenses overnight,
             on its own. It does not any more: nothing below is in the ledger,
             and nothing goes in until somebody posts it here. --}}
        @if (! empty($dueTemplates))
            <x-card class="overflow-hidden ring-1 ring-amber-200">
                <div class="flex flex-col gap-3 border-b border-amber-100 bg-amber-50/60 p-4 sm:flex-row sm:items-center sm:justify-between sm:p-5">
                    <div class="flex items-start gap-3">
                        <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-amber-100 text-amber-700">
                            <x-icon name="clock" class="h-5 w-5" />
                        </span>
                        <div>
                            <h2 class="text-base font-semibold text-slate-900">
                                {{ __('Waiting to be posted') }}
                                <span class="ms-1 rounded-full bg-amber-100 px-2 py-0.5 text-[11px] font-semibold text-amber-700">{{ count($dueTemplates) }}</span>
                            </h2>
                            <p class="text-xs text-slate-500">{{ __('Recurring costs that have fallen due. None of these are in the ledger yet, they are posted only when you say so.') }}</p>
                        </div>
                    </div>
                </div>

                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-slate-100">
                        <thead>
                            <tr class="bg-slate-50/80 text-left text-[11px] font-semibold uppercase tracking-wider text-slate-500">
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Cost') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Frequency') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Due since') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Paid from') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Usual amount') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Actions') }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 bg-white">
                            @foreach ($dueTemplates as $due)
                                <tr wire:key="due-{{ $due['id'] }}" class="transition hover:bg-slate-50/70">
                                    <td class="px-3 lg:px-4 py-4 text-sm">
                                        <span class="block font-medium text-slate-900">{{ $due['label'] }}</span>
                                        @if ($due['detail'] !== '')
                                            <span class="block text-xs text-slate-400">{{ $due['detail'] }}</span>
                                        @endif
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm">
                                        <x-badge :color="$due['is_overhead'] ? 'indigo' : 'violet'">{{ $due['frequency'] }}</x-badge>
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm text-slate-500">
                                        {{ $due['due_on'] }}
                                        @if ($due['periods'] > 1)
                                            <span class="block text-xs font-semibold text-amber-600">{{ trans_choice(':count period outstanding|:count periods outstanding', $due['periods'], ['count' => $due['periods']]) }}</span>
                                        @endif
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm text-slate-500">
                                        {{ $due['account'] ?: __('Not set') }}
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm font-semibold tabular-nums text-slate-900">
                                        {{ $due['currency'] }} {{ number_format($due['amount'], 2) }}
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm font-medium">
                                        <div class="flex items-center justify-end gap-3">
                                            <button type="button" wire:click="openPost({{ $due['id'] }})" class="text-indigo-600 transition hover:text-indigo-800">{{ __('Post') }}</button>
                                            <button
                                                type="button"
                                                wire:click="skipRecurring({{ $due['id'] }})"
                                                wire:confirm="{{ __('Skip this period without posting anything? The schedule moves on to the next one.') }}"
                                                class="text-slate-400 transition hover:text-slate-600"
                                            >{{ __('Skip') }}</button>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </x-card>
        @endif

        {{-- Tabbed tables: the ledger holds every recorded expense; the other tabs
             are analysis (Overheads nut) and payables (Supplier Bills) --}}
        <div>
            <div class="no-scrollbar mb-4 flex flex-wrap items-center gap-1 overflow-x-auto rounded-xl border border-slate-200 bg-slate-50 p-1 text-sm font-medium">
                @foreach ($tabs as $key => $label)
                    <button
                        type="button"
                        wire:click="$set('tab', '{{ $key }}')"
                        class="flex items-center gap-1.5 whitespace-nowrap rounded-lg px-3.5 py-1.5 transition {{ $tab === $key ? 'bg-white text-indigo-600 shadow-sm ring-1 ring-slate-200' : 'text-slate-500 hover:text-slate-700' }}"
                    >
                        <x-icon :name="$tabIcon[$key] ?? 'receipt-percent'" class="h-4 w-4" />
                        {{ __($label) }}
                        @if ($key === 'bills' && $supplierBills['count'] > 0)
                            <span class="rounded-full bg-slate-100 px-1.5 text-[11px] font-semibold text-slate-500">{{ $supplierBills['count'] }}</span>
                        @endif
                    </button>
                @endforeach
            </div>

            {{-- ============================== ALL EXPENSES ============================== --}}
            @if ($tab === 'all')
                <x-card>
                    <!-- Filters: classification is the primary lens; category/type/method refine expense entries -->
                    <div class="flex flex-col gap-3 border-b border-slate-100 p-4 lg:flex-row lg:flex-wrap lg:items-center sm:p-5">
                        <div class="w-full sm:w-56">
                            <select wire:model.live="classFilter" class="block w-full rounded-xl border-slate-300 text-sm font-medium shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                @foreach ($classes as $key => $label)
                                    <option value="{{ $key }}">{{ __($label) }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="w-full sm:w-48">
                            <select wire:model.live="categoryFilter" class="block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                <option value="">{{ __('All categories') }}</option>
                                @foreach ($categories as $category)
                                    <option value="{{ $category->id }}">{{ $category->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="w-full sm:w-40">
                            <select wire:model.live="typeFilter" class="block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                <option value="">{{ __('All types') }}</option>
                                <option value="recurring">{{ __('Recurring') }}</option>
                                <option value="one_off">{{ __('One-off') }}</option>
                            </select>
                        </div>
                        <div class="w-full sm:w-48">
                            <select wire:model.live="paymentMethodFilter" class="block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                <option value="">{{ __('All payment methods') }}</option>
                                @foreach ($paymentMethods as $method)
                                    <option value="{{ $method }}">{{ $method }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="relative w-full flex-1 sm:min-w-[12rem]">
                            <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-4 w-4" />
                            </span>
                            <input
                                type="search"
                                wire:model.live.debounce.400ms="search"
                                placeholder="{{ __('Search expenses...') }}"
                                class="block w-full rounded-xl border-slate-300 pl-9 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
                            />
                        </div>
                        <div class="w-full sm:w-auto">
                            <x-secondary-button wire:click="export" type="button" class="w-full justify-center sm:w-auto">
                                <x-icon name="arrow-down-tray" class="-ms-1 me-1.5 h-4 w-4" />
                                {{ __('Export') }}
                            </x-secondary-button>
                        </div>
                    </div>

                    {{-- Unified ledger: operating expenses + job costs + depreciation, counted once each --}}
                    <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">{{ __('Date') }}</th>
                                    <th class="px-3 lg:px-4 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Description') }}</th>
                                    <th class="px-3 lg:px-4 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Classification') }}</th>
                                    <th class="px-3 lg:px-4 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Category') }}</th>
                                    <th class="px-3 lg:px-4 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Job / Vendor') }}</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">{{ __('Actions') }}</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-slate-100">
                                @forelse ($ledger as $row)
                                    <tr wire:key="ledger-{{ $row['class'] }}-{{ $row['id'] ?? $loop->index }}" class="transition-colors hover:bg-slate-50/70">
                                        <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm text-slate-600">{{ $row['date'] ?: '—' }}</td>
                                        <td class="px-3 lg:px-4 py-4 text-sm">
                                            <span class="font-medium text-slate-900">{{ \Illuminate\Support\Str::limit($row['description'], 40) }}</span>
                                            @if ($row['is_recurring'])
                                                <span class="ml-1 align-middle"><x-badge color="violet">{{ __('Recurring') }}</x-badge></span>
                                            @endif
                                        </td>
                                        <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm">
                                            <x-badge :color="$row['badge']">{{ $row['class_label'] }}</x-badge>
                                        </td>
                                        <td class="px-3 lg:px-4 py-4 text-sm text-slate-600">{{ $row['category'] }}</td>
                                        <td class="px-3 lg:px-4 py-4 text-sm text-slate-600">{{ $row['ref'] ?: '—' }}</td>
                                        <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm">
                                            <span class="font-semibold text-slate-900 tabular-nums">{{ $base }} {{ number_format($row['base_amount'], 2) }}</span>
                                            @if ($row['currency'] !== $base && abs($row['amount'] - $row['base_amount']) > 0.005)
                                                <span class="block text-xs text-slate-400 tabular-nums">{{ $row['currency'] }} {{ number_format($row['amount'], 2) }}</span>
                                            @endif
                                        </td>
                                        <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm font-medium">
                                            <div class="flex items-center justify-end gap-3">
                                                @if ($row['editable'])
                                                    <x-notes-button variant="link" type="expense" :id="$row['id']"
                                                                    :count="$row['notes_count'] ?? null" :title="$row['description']" />
                                                @endif
                                                @if ($row['editable'] && $canManage)
                                                    <button wire:click="edit({{ $row['id'] }})" class="text-indigo-600 transition hover:text-indigo-700">{{ __('Edit') }}</button>
                                                @endif
                                                @if ($row['editable'] && $canDelete)
                                                    <button
                                                        wire:click="delete({{ $row['id'] }})"
                                                        wire:confirm="{{ __('Are you sure you want to delete this expense?') }}"
                                                        class="text-rose-600 transition hover:text-rose-700"
                                                    >
                                                        <x-icon name="trash" class="h-4 w-4" />
                                                    </button>
                                                @elseif ($row['class'] === 'cogs')
                                                    <span class="text-xs text-slate-400">{{ __('On job') }}</span>
                                                @else
                                                    <span class="text-slate-300">—</span>
                                                @endif
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="7" class="px-6 py-12">
                                            <x-empty-state
                                                icon="receipt-percent"
                                                :title="__('No expenses found')"
                                                :message="__('Adjust the filters above, or record a new expense to get started.')"
                                                class="border-0"
                                            >
                                                @if ($canManage)
                                                    <x-button wire:click="create" type="button">
                                                        <x-icon name="plus" class="-ms-1 me-1.5 h-4 w-4" />
                                                        {{ __('New Expense') }}
                                                    </x-button>
                                                @endif
                                            </x-empty-state>
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    <!-- Cards (mobile) -->
                    <div class="divide-y divide-slate-100 sm:hidden">
                        @forelse ($ledger as $row)
                            <div wire:key="ledger-mobile-{{ $row['class'] }}-{{ $row['id'] ?? $loop->index }}" 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">{{ \Illuminate\Support\Str::limit($row['description'], 32) }}</p>
                                        <p class="mt-1 flex items-center gap-2 text-xs">
                                            <x-badge :color="$row['badge']">{{ $row['class_label'] }}</x-badge>
                                            <span class="truncate text-slate-500">{{ $row['category'] }}</span>
                                        </p>
                                        <p class="mt-2 text-sm font-semibold text-slate-900 tabular-nums">{{ $base }} {{ number_format($row['base_amount'], 2) }}</p>
                                        <p class="text-xs text-slate-500">{{ $row['date'] ?: '—' }}{{ $row['ref'] ? ' · '.$row['ref'] : '' }}</p>
                                    </div>
                                    @if ($row['editable'])
                                        <div class="flex shrink-0 flex-col items-end gap-2 text-sm font-medium">
                                            <x-notes-button variant="link" type="expense" :id="$row['id']"
                                                            :count="$row['notes_count'] ?? null" :title="$row['description']" />
                                            @if ($canManage)
                                                <button wire:click="edit({{ $row['id'] }})" class="text-indigo-600">{{ __('Edit') }}</button>
                                            @endif
                                            @if ($canDelete)
                                                <button
                                                    wire:click="delete({{ $row['id'] }})"
                                                    wire:confirm="{{ __('Are you sure you want to delete this expense?') }}"
                                                    class="text-rose-600"
                                                >{{ __('Delete') }}</button>
                                            @endif
                                        </div>
                                    @endif
                                </div>
                            </div>
                        @empty
                            <div class="p-6">
                                <x-empty-state
                                    icon="receipt-percent"
                                    :title="__('No expenses found')"
                                    :message="__('Adjust the filters above, or record a new expense to get started.')"
                                    class="border-0"
                                >
                                    @if ($canManage)
                                        <x-button wire:click="create" type="button">
                                            <x-icon name="plus" class="-ms-1 me-1.5 h-4 w-4" />
                                            {{ __('New Expense') }}
                                        </x-button>
                                    @endif
                                </x-empty-state>
                            </div>
                        @endforelse
                    </div>

                    <!-- Footer: rows-per-page + 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 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>
                            {{ $ledger->links() }}
                        </div>
                    </div>
                </x-card>
            @endif

            {{-- ============================== OVERHEADS ============================== --}}
            @if ($tab === 'overheads')
                <x-card>
                    <div class="flex flex-col gap-4 border-b border-slate-100 p-5 sm:flex-row sm:items-start sm:justify-between">
                        <div>
                            <h2 class="text-base font-semibold text-slate-900">{{ __('Overheads') }}</h2>
                            <p class="mt-0.5 text-sm text-slate-500">{{ __('The monthly nut break-even must clear, recurring costs classified as overhead, plus payroll and depreciation.') }}</p>
                            <div class="mt-2 flex flex-wrap gap-1.5">
                                @foreach ($overhead['source'] as $src)
                                    <x-badge color="indigo">{{ $sourceLabels[$src] ?? ucfirst($src) }}</x-badge>
                                @endforeach
                            </div>
                        </div>
                        <div class="flex items-center gap-5">
                            <div class="text-right">
                                <p class="text-xs font-medium uppercase tracking-wider text-slate-400">{{ __('Monthly overheads') }}</p>
                                <p class="text-2xl font-bold tracking-tight text-slate-900 tabular-nums">{{ $overhead['base'] }} {{ number_format($overhead['monthly'], 2) }}</p>
                                <p class="mt-0.5 text-xs text-slate-500">
                                    {{ __('Recurring') }} {{ $overhead['base'] }} {{ number_format($overhead['recurring'], 2) }}
                                    @if (in_array('payroll', $overhead['source'], true))
                                        · {{ __('Payroll') }} {{ $overhead['base'] }} {{ number_format($overhead['payroll'], 2) }}
                                    @endif
                                </p>
                            </div>
                            @if ($canManageCategories)
                                <x-secondary-button wire:click="openClassify" type="button">
                                    <x-icon name="adjustments-horizontal" class="-ms-1 me-1.5 h-4 w-4" />
                                    {{ __('Classify categories') }}
                                </x-secondary-button>
                            @endif
                        </div>
                    </div>

                    <div class="overflow-x-auto">
                        <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">{{ __('Overhead') }}</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">{{ __('Daily rate') }}</th>
                                    <th class="px-3 lg:px-4 py-3.5 text-right text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Monthly (:base)', ['base' => $overhead['base']]) }}</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-slate-100">
                                @forelse ($overhead['rows'] as $row)
                                    <tr class="transition-colors hover:bg-slate-50/70">
                                        <td class="px-3 lg:px-4 py-4 text-sm font-medium text-slate-900">{{ $row['label'] }}</td>
                                        <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm"><x-badge color="violet">{{ $row['frequency'] }}</x-badge></td>
                                        <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm text-slate-500">
                                            @if (! is_null($row['daily_rate']))
                                                {{ $overhead['base'] }} {{ number_format($row['daily_rate'], 2) }}/{{ __('day') }}
                                                <span class="block text-xs text-slate-400">
                                                    @if ($row['daily_basis'] === 'calendar')
                                                        {{ trans_choice(':count calendar day|:count calendar days', (int) $row['days'], ['count' => (int) $row['days']]) }}
                                                    @elseif ($row['daily_basis'] === 'working')
                                                        {{ trans_choice(':count working day|:count working days', (int) $row['days'], ['count' => (int) $row['days']]) }}
                                                    @else
                                                        {{ trans_choice(':count day|:count days', (int) $row['days'], ['count' => rtrim(rtrim(number_format((float) $row['days'], 1), '0'), '.')]) }}
                                                    @endif
                                                </span>
                                            @else
                                                <span class="text-slate-300">—</span>
                                            @endif
                                        </td>
                                        <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm font-semibold text-slate-900 tabular-nums">{{ $overhead['base'] }} {{ number_format($row['monthly_base'], 2) }}</td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="4" class="px-6 py-12">
                                            <x-empty-state icon="building-office" :title="__('No overheads classified yet')" :message="__('Use “Classify categories” to mark a category as overhead so its recurring spend joins the nut.')" class="border-0" />
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </x-card>
            @endif

            {{-- ============================== SUPPLIER BILLS ============================== --}}
            @if ($tab === 'bills')
                <x-card>
                    <div class="flex flex-col gap-3 border-b border-slate-100 p-5 sm:flex-row sm:items-center sm:justify-between">
                        <div>
                            <h2 class="text-base font-semibold text-slate-900">{{ __('Supplier Bills') }}</h2>
                            <p class="text-sm text-slate-500">{{ __('Accounts payable raised this period. Manage bills and payments on Purchasing.') }}</p>
                        </div>
                        <div class="flex items-center gap-5">
                            <div class="text-right">
                                <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Billed') }}</p>
                                <p class="text-lg font-bold text-slate-900 tabular-nums">{{ $supplierBills['base'] }} {{ number_format($supplierBills['total'], 2) }}</p>
                            </div>
                            <div class="text-right">
                                <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Outstanding') }}</p>
                                <p class="text-lg font-bold text-rose-600 tabular-nums">{{ $supplierBills['base'] }} {{ number_format($supplierBills['outstanding'], 2) }}</p>
                            </div>
                            <a href="{{ route('purchasing.index') }}" class="inline-flex items-center gap-1.5 rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm font-medium text-slate-700 shadow-sm transition hover:bg-slate-50">
                                <x-icon name="arrow-up-right" class="h-4 w-4 text-slate-400" />
                                {{ __('Purchasing') }}
                            </a>
                        </div>
                    </div>

                    <div class="overflow-x-auto">
                        <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">{{ __('Bill #') }}</th>
                                    <th class="px-3 lg:px-4 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Supplier') }}</th>
                                    <th class="px-3 lg:px-4 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Bill date') }}</th>
                                    <th class="px-3 lg:px-4 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Due') }}</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">{{ __('Total') }}</th>
                                    <th class="px-3 lg:px-4 py-3.5 text-right text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Balance') }}</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-slate-100">
                                @forelse ($supplierBills['rows'] as $bill)
                                    <tr wire:key="bill-{{ $bill['id'] }}" class="transition-colors hover:bg-slate-50/70">
                                        <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm font-medium text-slate-900">{{ $bill['number'] }}</td>
                                        <td class="px-3 lg:px-4 py-4 text-sm text-slate-600">{{ $bill['supplier'] }}</td>
                                        <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm text-slate-600">{{ $bill['date'] ?: '—' }}</td>
                                        <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm">
                                            @if ($bill['due'])
                                                <span class="{{ $bill['is_overdue'] ? 'font-semibold text-rose-600' : 'text-slate-600' }}">{{ $bill['due'] }}</span>
                                            @else
                                                <span class="text-slate-400">—</span>
                                            @endif
                                        </td>
                                        <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm"><x-badge :color="$billBadge[$bill['status']] ?? 'slate'">{{ $bill['status_label'] }}</x-badge></td>
                                        <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm font-semibold text-slate-900 tabular-nums">{{ $bill['currency'] }} {{ number_format($bill['total'], 2) }}</td>
                                        <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm font-semibold tabular-nums {{ $bill['balance'] > 0 ? 'text-rose-600' : 'text-slate-400' }}">{{ $bill['currency'] }} {{ number_format($bill['balance'], 2) }}</td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="7" class="px-6 py-12">
                                            <x-empty-state icon="document-text" :title="__('No supplier bills this period')" :message="__('Supplier invoices raised in the selected period will appear here.')" class="border-0" />
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </x-card>
            @endif
        </div>
    </div>

    <!-- Create / Edit Expense Modal -->
    <x-dialog-modal wire:model.live="showModal" maxWidth="2xl">
        <x-slot name="title">
            {{ $editingId ? __('Edit Expense') : __('New Expense') }}
        </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="expense_category_id" value="{{ __('Category') }}" />
                        <select id="expense_category_id" wire:model="expense_category_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="">{{ __('Uncategorised') }}</option>
                            @foreach ($categories as $category)
                                <option value="{{ $category->id }}">{{ $category->name }} ({{ $category->type }})</option>
                            @endforeach
                        </select>
                        <x-input-error for="expense_category_id" class="mt-2" />
                    </div>
                    <div>
                        <x-label for="incurred_on" value="{{ __('Date Incurred') }}" />
                        <x-input id="incurred_on" type="date" class="mt-1 block w-full" wire:model="incurred_on" />
                        <x-input-error for="incurred_on" class="mt-2" />
                    </div>
                </div>

                <div>
                    <x-label for="job_id" value="{{ __('Job (optional)') }}" />
                    <select id="job_id" wire:model="job_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 job-specific (company expense)') }}</option>
                        @foreach ($jobs as $job)
                            <option value="{{ $job->id }}">{{ $job->job_number }}{{ $job->title ? ', '.$job->title : '' }}</option>
                        @endforeach
                    </select>
                    <p class="mt-1 text-xs text-slate-500">{{ __('Link to a job to count this as a direct cost of that job (added to its profit). Leave blank for a general company expense.') }}</p>
                    <x-input-error for="job_id" class="mt-2" />
                </div>

                {{-- Marketing spend can be booked to a campaign (CRM, D13). --}}
                @if ($campaigns->isNotEmpty())
                    <div x-show="$wire.expense_category_id == {{ $marketingCategoryId }} || $wire.campaign_id" x-cloak>
                        <x-label for="campaign_id" value="{{ __('Marketing campaign (optional)') }}" />
                        <select id="campaign_id" wire:model="campaign_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 for a particular campaign') }}</option>
                            @foreach ($campaigns as $campaign)
                                <option value="{{ $campaign->id }}">{{ $campaign->name }} ({{ $campaign->code }})</option>
                            @endforeach
                        </select>
                        <p class="mt-1 text-xs text-slate-500">{{ __('The campaign shows this as its actual spend. Only Marketing expenses can be linked.') }}</p>
                        <x-input-error for="campaign_id" class="mt-2" />
                    </div>
                @endif

                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <div>
                        <x-label for="amount" value="{{ __('Amount') }}" />
                        <x-input id="amount" type="number" step="0.01" min="0" class="mt-1 block w-full" wire:model="amount" />
                        <x-input-error for="amount" class="mt-2" />
                    </div>
                    <div>
                        <x-label for="currency_code" value="{{ __('Currency') }}" />
                        <select id="currency_code" wire:model="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-input-error for="currency_code" class="mt-2" />
                    </div>
                </div>

                <div>
                    <x-label for="fund_account_id" value="{{ __('Payment Method') }}" />
                    <select id="fund_account_id" wire:model="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 ($fundAccounts as $account)
                            <option value="{{ $account->id }}">{{ $account->name }} ({{ $account->currency_code }})</option>
                        @endforeach
                    </select>
                    @if ($fundAccounts->isEmpty())
                        <p class="mt-1 text-xs text-rose-500">{{ __('No fund accounts yet, create one under Treasury first.') }}</p>
                    @else
                        <p class="mt-1 text-xs text-slate-400">{{ __('Which account this money comes out of. Must match the currency above.') }}</p>
                    @endif
                    <x-input-error for="fund_account_id" class="mt-2" />
                </div>

                <div>
                    <x-label for="charge" value="{{ __('Transaction charge') }}" />
                    <x-input id="charge" type="number" step="0.01" min="0" placeholder="0.00" class="mt-1 block w-full" wire:model="charge" />
                    <p class="mt-1 text-xs text-slate-400">{{ __('Bank/EcoCash fee to send this payment. Booked as a separate "Bank Charges" expense so the fee leaves the account and shows in your P&L. Leave blank if none.') }}</p>
                    <x-input-error for="charge" class="mt-2" />
                </div>

                <div>
                    <x-label for="vendor" value="{{ __('Vendor') }}" />
                    <x-input id="vendor" type="text" class="mt-1 block w-full" wire:model="vendor" />
                    <x-input-error for="vendor" class="mt-2" />
                </div>

                <div>
                    <x-label for="description" value="{{ __('Description') }}" />
                    <textarea id="description" rows="2" wire:model="description" 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="description" class="mt-2" />
                </div>

                <div class="rounded-xl border border-slate-200 bg-slate-50/50 p-3">
                    <label class="flex items-center gap-2">
                        <x-checkbox wire:model.live="is_recurring" />
                        <span class="text-sm font-medium text-slate-700">{{ __('This is a recurring expense') }}</span>
                    </label>

                    @if ($is_recurring)
                        <div class="mt-3">
                            <x-label for="recurring_frequency" value="{{ __('Frequency') }}" />
                            <select id="recurring_frequency" wire:model="recurring_frequency" 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 frequency...') }}</option>
                                @foreach ($frequencies as $frequency)
                                    <option value="{{ $frequency }}">{{ ucfirst($frequency) }}</option>
                                @endforeach
                            </select>
                            <x-input-error for="recurring_frequency" class="mt-2" />
                        </div>
                    @endif
                </div>

                {{-- Daily-rate basis (§15): spread an overhead's monthly cost across a chosen days-worked divisor. --}}
                <div class="rounded-xl border border-slate-200 bg-slate-50/50 p-3">
                    <x-label for="daily_rate_basis" value="{{ __('Daily-rate basis') }}" />
                    <select id="daily_rate_basis" wire:model.live="daily_rate_basis" 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="">{{ __('None, no daily rate') }}</option>
                        <option value="calendar">{{ __('Calendar days (days in the month, e.g. rent)') }}</option>
                        <option value="working">{{ __('Working days (team working-days/month, e.g. salaries)') }}</option>
                        <option value="custom">{{ __('Custom number of days') }}</option>
                    </select>
                    <p class="mt-1 text-xs text-slate-400">{{ __('Daily rate = monthly amount ÷ days worked. Shown on the overheads panel.') }}</p>
                    <x-input-error for="daily_rate_basis" class="mt-2" />

                    @if ($daily_rate_basis === 'custom')
                        <div class="mt-3">
                            <x-label for="daily_rate_days" value="{{ __('Days worked per month') }}" />
                            <x-input id="daily_rate_days" type="number" step="0.5" min="0.5" max="366" class="mt-1 block w-full" wire:model="daily_rate_days" />
                            <x-input-error for="daily_rate_days" class="mt-2" />
                        </div>
                    @endif
                </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>

    <!-- Manage Categories Modal -->
    <x-dialog-modal wire:model.live="showCategoryModal" maxWidth="2xl">
        <x-slot name="title">
            {{ __('Expense Categories') }}
        </x-slot>

        <x-slot name="content">
            <!-- Category form -->
            <div class="rounded-xl border border-slate-200 bg-slate-50/50 p-4">
                <p class="mb-3 text-sm font-semibold text-slate-700">
                    {{ $editingCategoryId ? __('Edit Category') : __('Add Category') }}
                </p>
                <div class="grid grid-cols-1 gap-3 sm:grid-cols-12">
                    <div class="sm:col-span-6">
                        <x-label for="category_name" value="{{ __('Name') }}" />
                        <x-input id="category_name" type="text" class="mt-1 block w-full text-sm" wire:model="category_name" />
                        <x-input-error for="category_name" class="mt-1" />
                    </div>
                    <div class="sm:col-span-3">
                        <x-label for="category_type" value="{{ __('Type') }}" />
                        <select id="category_type" wire:model="category_type" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            @foreach ($categoryTypes as $type)
                                <option value="{{ $type }}">{{ ucfirst($type) }}</option>
                            @endforeach
                        </select>
                        <x-input-error for="category_type" class="mt-1" />
                    </div>
                    <div class="sm:col-span-3">
                        <x-label for="category_cost_type" value="{{ __('Cost type') }}" />
                        <select id="category_cost_type" wire:model="category_cost_type" 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="overhead">{{ __('Overhead') }}</option>
                            <option value="direct">{{ __('Direct cost') }}</option>
                            <option value="none">{{ __('Unclassified') }}</option>
                        </select>
                        <x-input-error for="category_cost_type" class="mt-1" />
                    </div>
                    <div class="flex items-end sm:col-span-3">
                        <label class="flex items-center gap-2 pb-2">
                            <x-checkbox wire:model="category_is_active" />
                            <span class="text-sm font-medium text-slate-700">{{ __('Active') }}</span>
                        </label>
                    </div>
                </div>
                <div class="mt-3 flex items-center gap-3">
                    <x-button wire:click="saveCategory" wire:loading.attr="disabled" type="button">
                        {{ $editingCategoryId ? __('Update') : __('Add') }}
                    </x-button>
                    @if ($editingCategoryId)
                        <button type="button" wire:click="$call('resetCategoryForm')" class="text-sm font-medium text-slate-500 transition hover:text-slate-700">
                            {{ __('Cancel edit') }}
                        </button>
                    @endif
                </div>
            </div>

            <!-- Category list -->
            <div class="mt-4">
                @if ($categories->isNotEmpty())
                    <div class="divide-y divide-slate-100 rounded-xl border border-slate-200">
                        @foreach ($categories as $category)
                            <div wire:key="category-{{ $category->id }}" class="flex items-center justify-between px-4 py-3">
                                <div class="flex items-center gap-2">
                                    <span class="text-sm font-medium text-slate-900">{{ $category->name }}</span>
                                    <x-badge :color="$typeBadge[$category->type] ?? 'slate'">{{ $category->type }}</x-badge>
                                    @if (($category->cost_type ?? 'none') !== 'none')
                                        <x-badge :color="$category->cost_type === 'overhead' ? 'indigo' : 'amber'">{{ $category->cost_type === 'overhead' ? __('Overhead') : __('Direct') }}</x-badge>
                                    @endif
                                    @unless ($category->is_active)
                                        <x-badge color="slate">{{ __('Inactive') }}</x-badge>
                                    @endunless
                                </div>
                                <div class="flex items-center gap-3 text-sm font-medium">
                                    <button type="button" wire:click="editCategory({{ $category->id }})" class="text-indigo-600 transition hover:text-indigo-700">{{ __('Edit') }}</button>
                                    <button
                                        type="button"
                                        wire:click="deleteCategory({{ $category->id }})"
                                        wire:confirm="{{ __('Delete this category? Existing expenses keep their amounts but become uncategorised.') }}"
                                        class="text-rose-600 transition hover:text-rose-700"
                                    >{{ __('Delete') }}</button>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @else
                    <p class="rounded-xl border border-dashed border-slate-200 px-4 py-6 text-center text-sm text-slate-500">
                        {{ __('No categories yet. Add one above.') }}
                    </p>
                @endif
            </div>
        </x-slot>

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

    <!-- Classify categories popup (from the Overheads tab) -->
    <x-dialog-modal wire:model.live="showClassifyModal" maxWidth="lg">
        <x-slot name="title">
            {{ __('Classify categories') }}
        </x-slot>

        <x-slot name="content">
            <p class="text-sm text-slate-500">{{ __('Set how each category is treated in the break-even nut. Overheads count toward the monthly nut; direct costs belong to a job.') }}</p>

            @if (! empty($overhead['categories']))
                <div class="mt-4 divide-y divide-slate-100 rounded-xl border border-slate-200">
                    @foreach ($overhead['categories'] as $cat)
                        <div wire:key="classify-{{ $cat['id'] }}" class="flex items-center justify-between gap-3 px-4 py-3 text-sm">
                            <span class="min-w-0 flex-1">
                                <span class="block truncate font-medium text-slate-800">{{ $cat['name'] }}</span>
                                @if ($cat['monthly'] > 0)
                                    <span class="text-xs text-slate-400">{{ $overhead['base'] }} {{ number_format($cat['monthly'], 2) }}/{{ __('mo') }} {{ __('to the nut') }}</span>
                                @endif
                            </span>
                            @if ($canManageCategories)
                                <select
                                    wire:change="setCategoryCostType({{ $cat['id'] }}, $event.target.value)"
                                    class="shrink-0 rounded-lg border-slate-300 py-1 text-xs shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
                                >
                                    <option value="overhead" @selected($cat['cost_type'] === 'overhead')>{{ __('Overhead') }}</option>
                                    <option value="direct" @selected($cat['cost_type'] === 'direct')>{{ __('Direct cost') }}</option>
                                    <option value="none" @selected($cat['cost_type'] === 'none')>{{ __('Unclassified') }}</option>
                                </select>
                            @else
                                <x-badge :color="$costTypeBadge[$cat['cost_type']] ?? 'slate'">{{ ucfirst($cat['cost_type']) }}</x-badge>
                            @endif
                        </div>
                    @endforeach
                </div>
            @else
                <p class="mt-4 rounded-xl border border-dashed border-slate-200 px-4 py-6 text-center text-sm text-slate-500">{{ __('No categories yet.') }}</p>
            @endif
        </x-slot>

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

    <!-- Post a due recurring cost. The standing instruction says what rent
         usually is; this is where somebody confirms what it actually was. -->
    @php
        $posting = collect($dueTemplates)->firstWhere('id', $postingId);
    @endphp
    <x-dialog-modal wire:model.live="showPostModal" maxWidth="lg">
        <x-slot name="title">
            {{ $posting ? __('Post :label', ['label' => $posting['label']]) : __('Post recurring cost') }}
        </x-slot>

        <x-slot name="content">
            <p class="text-sm text-slate-500">
                {{ __('This records the cost in the ledger and takes the money out of the account you choose. Nothing is posted until you confirm here.') }}
            </p>

            <div class="mt-4 space-y-4">
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <div>
                        <x-label for="post_amount" value="{{ $posting ? __('Amount (:currency)', ['currency' => $posting['currency']]) : __('Amount') }}" />
                        <x-input id="post_amount" type="number" step="0.01" min="0" class="mt-1 block w-full" wire:model="post_amount" />
                        <p class="mt-1 text-xs text-slate-500">{{ __('Correct it if this period was different from the standing amount.') }}</p>
                        <x-input-error for="post_amount" class="mt-2" />
                    </div>
                    <div>
                        <x-label for="post_incurred_on" value="{{ __('Date incurred') }}" />
                        <x-input id="post_incurred_on" type="date" class="mt-1 block w-full" wire:model="post_incurred_on" />
                        <x-input-error for="post_incurred_on" class="mt-2" />
                    </div>
                </div>

                <div>
                    <x-label for="post_fund_account_id" value="{{ __('Paid from') }}" />
                    <select id="post_fund_account_id" wire:model="post_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 ($fundAccounts as $account)
                            <option value="{{ $account->id }}">{{ $account->name }} ({{ $account->currency_code }})</option>
                        @endforeach
                    </select>
                    <p class="mt-1 text-xs text-slate-500">{{ __('The account the money actually left. It must hold the same currency as the cost.') }}</p>
                    <x-input-error for="post_fund_account_id" class="mt-2" />
                </div>

                @if ($posting && $posting['periods'] > 1)
                    <label class="flex items-start gap-3 rounded-xl border border-amber-200 bg-amber-50/60 p-3">
                        <x-checkbox wire:model.live="post_all_periods" class="mt-0.5" />
                        <span class="text-sm">
                            <span class="block font-medium text-slate-800">{{ __('Post all :count outstanding periods', ['count' => $posting['periods']]) }}</span>
                            <span class="block text-xs text-slate-500">{{ __('One expense per period, each dated to its own period, at the amount above. Leave unticked to post only :date.', ['date' => $posting['due_on']]) }}</span>
                        </span>
                    </label>
                @endif
            </div>
        </x-slot>

        <x-slot name="footer">
            <x-secondary-button wire:click="closePostModal" wire:loading.attr="disabled">
                {{ __('Cancel') }}
            </x-secondary-button>
            <x-button class="ms-3" wire:click="postRecurring" wire:loading.attr="disabled" wire:target="postRecurring">
                <span wire:loading.remove wire:target="postRecurring">{{ __('Post expense') }}</span>
                <span wire:loading wire:target="postRecurring">{{ __('Posting...') }}</span>
            </x-button>
        </x-slot>
    </x-dialog-modal>
</div>