@php
    $typeBadge = [
        'bank' => 'indigo', 'cash' => 'emerald', 'mobile_money' => 'sky',
        'director' => 'amber', 'other' => 'slate',
    ];
@endphp

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

        {{-- Header: all money actions live here now, ordered (right→left):
             New Account · Adjust · Transfer · Income · Expense --}}
        <x-page-header :title="__('Treasury')" :subtitle="__('Track where your money is held and how it moves between accounts.')">
            <a href="{{ route('expenses.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-rose-500" />
                {{ __('Expense') }}
            </a>
            <a href="{{ route('income.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-down-tray" class="h-4 w-4 text-emerald-500" />
                {{ __('Income') }}
            </a>
            @if ($canUpdate)
                <button type="button" wire:click="openTransfer" 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-path" class="h-4 w-4 text-slate-400" />
                    {{ __('Transfer') }}
                </button>
                <button type="button" wire:click="openAdjust" 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="pencil-square" class="h-4 w-4 text-slate-400" />
                    {{ __('Adjust') }}
                </button>
            @endif
            @if ($canCutOver)
                <a href="{{ route('treasury.cut_over') }}" wire:navigate 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="flag" class="h-4 w-4 text-violet-500" />
                    {{ __('Cut-over') }}
                </a>
            @endif
            @if ($canManage)
                <button type="button" wire:click="create" class="inline-flex items-center gap-1.5 rounded-lg bg-slate-900 px-3 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-slate-800">
                    <x-icon name="plus" class="h-4 w-4" />
                    {{ __('New Account') }}
                </button>
            @endif
        </x-page-header>

        {{-- KPI cards: Total Available + one per account holding > 1 (base),
             biggest first. Money value locked at 19px per spec. Kept on a single
             row that scrolls horizontally when the cards can't all fit —
             chevron buttons + wheel-to-horizontal scroll make the overflow reachable. --}}
        <div
            x-data="{
                atStart: true,
                atEnd: true,
                overflowing: false,
                update() {
                    const el = this.$refs.strip;
                    this.overflowing = el.scrollWidth > el.clientWidth + 1;
                    this.atStart = el.scrollLeft <= 1;
                    this.atEnd = el.scrollLeft >= el.scrollWidth - el.clientWidth - 1;
                },
                scrollBy(dir) {
                    this.$refs.strip.scrollBy({ left: dir * this.$refs.strip.clientWidth * 0.8, behavior: 'smooth' });
                },
                onWheel(e) {
                    if (Math.abs(e.deltaY) <= Math.abs(e.deltaX)) return;
                    const el = this.$refs.strip;
                    if (el.scrollWidth <= el.clientWidth) return;
                    el.scrollLeft += e.deltaY;
                    e.preventDefault();
                },
            }"
            x-init="update(); $nextTick(() => update()); new ResizeObserver(() => update()).observe($refs.strip)"
            class="relative -mx-1"
        >
            {{-- Left chevron --}}
            <button
                type="button"
                x-show="overflowing && !atStart"
                x-cloak
                x-transition.opacity
                @click="scrollBy(-1)"
                class="absolute left-0 top-1/2 z-10 -translate-y-1/2 flex h-9 w-9 items-center justify-center rounded-full border border-slate-200 bg-white text-slate-600 shadow-md transition hover:bg-slate-50"
                aria-label="{{ __('Scroll left') }}"
            >
                <x-icon name="chevron-left" class="h-5 w-5" />
            </button>
            {{-- Right chevron --}}
            <button
                type="button"
                x-show="overflowing && !atEnd"
                x-cloak
                x-transition.opacity
                @click="scrollBy(1)"
                class="absolute right-0 top-1/2 z-10 -translate-y-1/2 flex h-9 w-9 items-center justify-center rounded-full border border-slate-200 bg-white text-slate-600 shadow-md transition hover:bg-slate-50"
                aria-label="{{ __('Scroll right') }}"
            >
                <x-icon name="chevron-right" class="h-5 w-5" />
            </button>

            <section
                x-ref="strip"
                @scroll="update()"
                @wheel="onWheel($event)"
                class="no-scrollbar flex snap-x gap-5 overflow-x-auto scroll-smooth px-1 py-1"
            >
            @foreach ($kpis as $kpi)
                @php
                    $tone = $kpi['delta'] === null ? 'muted' : ($kpi['delta'] >= 0 ? '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-[200px] 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="{{ $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, {{ $kpi['accent'] }}, {{ $kpi['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 px-2 py-1 text-[11px] font-semibold {{ $pill }}">
                        @if ($kpi['delta'] !== null)
                            <x-icon :name="$kpi['delta'] >= 0 ? 'arrow-trending-up' : 'arrow-trending-down'" class="h-3 w-3 shrink-0" />
                            {{ number_format(abs($kpi['delta']), 0) }}% {{ __('vs last month') }}
                        @else
                            {{ __('No prior balance') }}
                        @endif
                    </span>
                </x-card>
            @endforeach
            </section>
        </div>

        {{-- Accounts Summary + Movement Ledger share one panel, switched by tabs --}}
        <div x-data="{ ttab: 'accounts' }">
            <div class="mb-4 inline-flex items-center gap-1 rounded-xl border border-slate-200 bg-slate-50 p-1 text-sm font-medium">
                <button
                    type="button"
                    @click="ttab = 'accounts'"
                    :class="ttab === 'accounts' ? 'bg-white text-indigo-600 shadow-sm ring-1 ring-slate-200' : 'text-slate-500 hover:text-slate-700'"
                    class="inline-flex items-center gap-1.5 rounded-lg px-3.5 py-1.5 transition"
                >
                    <x-icon name="banknotes" class="h-4 w-4" />
                    {{ __('Accounts Summary') }}
                </button>
                <button
                    type="button"
                    @click="ttab = 'ledger'"
                    :class="ttab === 'ledger' ? 'bg-white text-indigo-600 shadow-sm ring-1 ring-slate-200' : 'text-slate-500 hover:text-slate-700'"
                    class="inline-flex items-center gap-1.5 rounded-lg px-3.5 py-1.5 transition"
                >
                    <x-icon name="arrow-path" class="h-4 w-4" />
                    {{ __('Movement Ledger') }}
                </button>
            </div>

            {{-- Accounts summary, full width, auto-fitting columns --}}
            <x-card x-show="ttab === 'accounts'">
            <div class="flex flex-col gap-3 border-b border-slate-100 p-4 lg:flex-row lg:items-center lg:justify-start sm:p-5">
                <div class="flex flex-col gap-2 sm:flex-row sm:flex-wrap sm:items-center">
                    <div class="relative w-full sm:w-56">
                        <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 accounts...') }}"
                            class="block w-full rounded-xl border-slate-300 pl-9 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
                        />
                    </div>
                    <select wire:model.live="currencyFilter" class="block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:w-auto">
                        <option value="">{{ __('All currencies') }}</option>
                        @foreach ($currencyOptions as $code)
                            <option value="{{ $code }}">{{ $code }}</option>
                        @endforeach
                    </select>
                    <x-date-range-filter preset="accountsPreset" from="accountsFrom" to="accountsTo" :current="$accountsPreset" :options="$datePresets" />
                </div>
            </div>

            <!-- Table (desktop) -->
            <div class="hidden overflow-x-auto sm:block">
                <table class="w-full table-auto divide-y divide-slate-100">
                    <thead>
                        <tr class="bg-slate-50/80">
                            <th class="px-3 lg:px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Account') }}</th>
                            <th class="px-3 lg:px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Type') }}</th>
                            <th class="px-3 lg:px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Holder') }}</th>
                            <th class="px-3 lg:px-4 py-3 text-right text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Balance') }}</th>
                            <th class="px-3 lg:px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Last Activity') }}</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">{{ __('Actions') }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100">
                        @forelse ($accounts as $account)
                            <tr wire:key="account-{{ $account->id }}" class="align-middle transition-colors hover:bg-slate-50/70 {{ $account->is_active ? '' : 'opacity-60' }}">
                                <td class="px-3 lg:px-4 py-3.5 text-sm">
                                    <div class="flex items-center gap-3">
                                        <span class="flex shrink-0 items-center justify-center rounded-xl text-white shadow-sm" style="height: 2rem; width: 2rem; background: {{ $types[$account->type]['accent'] ?? '#94a3b8' }}">
                                            <x-icon :name="$types[$account->type]['icon'] ?? 'banknotes'" class="h-4 w-4" />
                                        </span>
                                        <div class="min-w-0">
                                            <p class="truncate font-semibold text-slate-900">{{ $account->name }}</p>
                                            @if ($account->reference)
                                                <p class="truncate text-xs font-medium text-slate-400">{{ $account->reference }}</p>
                                            @endif
                                        </div>
                                    </div>
                                </td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-3.5 text-sm">
                                    <x-badge :color="$typeBadge[$account->type] ?? 'slate'">{{ $account->type_label }}</x-badge>
                                </td>
                                <td class="px-3 lg:px-4 py-3.5 text-sm text-slate-500">{{ $account->holder?->name ?? '—' }}</td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-3.5 text-right text-sm font-bold tabular-nums {{ $account->balance < 0 ? 'text-rose-600' : 'text-slate-900' }}">
                                    {{ $account->currency_code }} {{ number_format($account->balance, 2) }}
                                </td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-3.5 text-sm text-slate-500">
                                    {{ $account->last_movement_at ? \Illuminate\Support\Carbon::parse($account->last_movement_at)->format('Y-m-d') : '—' }}
                                </td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-3.5 text-sm">
                                    @if ($account->is_system)
                                        <x-badge color="violet">{{ __('System') }}</x-badge>
                                    @elseif ($account->is_active)
                                        <x-badge color="emerald">{{ __('Active') }}</x-badge>
                                    @else
                                        <x-badge color="slate">{{ __('Inactive') }}</x-badge>
                                    @endif
                                </td>
                                {{-- System accounts (Opening Balances, Suspense) hold the balancing half
                                     of an entry, so they're read-only: correct them from the other side. --}}
                                <td class="whitespace-nowrap px-3 lg:px-4 py-3.5 text-right text-sm font-medium">
                                    <div class="flex items-center justify-end gap-2.5">
                                        @if ($account->is_system)
                                            <span class="text-xs text-slate-300">{{ __('Managed') }}</span>
                                        @elseif ($canUpdate)
                                            <button wire:click="openReconcile({{ $account->id }})" class="text-slate-400 transition hover:text-emerald-600" title="{{ __('Reconcile balance') }}">
                                                <x-icon name="scale" class="h-4 w-4" />
                                            </button>
                                            <button wire:click="openAdjust({{ $account->id }})" class="text-slate-400 transition hover:text-amber-600" title="{{ __('Adjust balance') }}">
                                                <x-icon name="banknotes" class="h-4 w-4" />
                                            </button>
                                            <button wire:click="edit({{ $account->id }})" class="text-slate-400 transition hover:text-indigo-600" title="{{ __('Edit') }}">
                                                <x-icon name="pencil-square" class="h-4 w-4" />
                                            </button>
                                        @endif
                                        @if ($canDelete && ! $account->is_system)
                                            <button
                                                wire:click="delete({{ $account->id }})"
                                                wire:confirm="{{ __('Delete this account? Only accounts with no movements can be deleted.') }}"
                                                class="text-slate-400 transition hover:text-rose-600"
                                                title="{{ __('Delete') }}"
                                            >
                                                <x-icon name="trash" class="h-4 w-4" />
                                            </button>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" class="px-3 lg:px-4 py-12">
                                    <x-empty-state
                                        icon="banknotes"
                                        :title="__('No fund accounts yet')"
                                        :message="__('Create an account for each place money is held, your bank, the office cash box, a director\'s float, and set its opening balance.')"
                                        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 Account') }}
                                            </x-button>
                                        @endif
                                    </x-empty-state>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <!-- Cards (mobile) -->
            <div class="divide-y divide-slate-100 sm:hidden">
                @forelse ($accounts as $account)
                    <div wire:key="account-mobile-{{ $account->id }}" class="flex items-start justify-between gap-4 p-4 {{ $account->is_active ? '' : 'opacity-60' }}">
                        <div class="flex min-w-0 items-center gap-3">
                            <span class="flex shrink-0 items-center justify-center rounded-xl text-white" style="height: 2rem; width: 2rem; background: {{ $types[$account->type]['accent'] ?? '#94a3b8' }}">
                                <x-icon :name="$types[$account->type]['icon'] ?? 'banknotes'" class="h-4 w-4" />
                            </span>
                            <div class="min-w-0">
                                <p class="truncate font-semibold text-slate-900">{{ $account->name }}</p>
                                <p class="text-sm font-bold {{ $account->balance < 0 ? 'text-rose-600' : 'text-slate-900' }}">{{ $account->currency_code }} {{ number_format($account->balance, 2) }}</p>
                                <p class="text-xs text-slate-400">{{ $account->type_label }}</p>
                            </div>
                        </div>
                        <div class="flex shrink-0 items-center gap-3 text-slate-400">
                            @if ($canUpdate && ! $account->is_system)
                                <button wire:click="openReconcile({{ $account->id }})" title="{{ __('Reconcile') }}"><x-icon name="scale" class="h-5 w-5" /></button>
                                <button wire:click="edit({{ $account->id }})" title="{{ __('Edit') }}"><x-icon name="pencil-square" class="h-5 w-5" /></button>
                            @endif
                        </div>
                    </div>
                @empty
                    <div class="p-6">
                        <x-empty-state
                            icon="banknotes"
                            :title="__('No fund accounts yet')"
                            :message="__('Create an account for each place money is held and set its opening balance.')"
                            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 Account') }}
                                </x-button>
                            @endif
                        </x-empty-state>
                    </div>
                @endforelse
            </div>
            </x-card>

            <!-- Movement Ledger, presented as a bank statement -->
            <x-card x-show="ttab === 'ledger'" x-cloak class="overflow-hidden">
            <div class="flex flex-col gap-3 border-b border-slate-100 p-4 lg:flex-row lg:items-center lg:justify-start sm:p-5">
                <div class="flex flex-col gap-2 sm:flex-row sm:flex-wrap sm:items-center">
                    <div class="relative w-full sm:w-56">
                        <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="ledgerSearch"
                            placeholder="{{ __('Search ledger...') }}"
                            class="block w-full rounded-xl border-slate-300 pl-9 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
                        />
                    </div>
                    <select wire:model.live="accountFilter" class="block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:w-48">
                        <option value="">{{ __('All accounts') }}</option>
                        @foreach ($accountOptions as $opt)
                            <option value="{{ $opt->id }}">{{ $opt->name }}</option>
                        @endforeach
                    </select>
                    <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 sm:w-40">
                        <option value="">{{ __('All types') }}</option>
                        @foreach ($movementTypes as $key => $meta)
                            <option value="{{ $key }}">{{ __($meta['label']) }}</option>
                        @endforeach
                    </select>
                    <x-date-range-filter preset="ledgerPreset" from="ledgerFrom" to="ledgerTo" :current="$ledgerPreset" :options="$datePresets" />
                </div>
            </div>

            {{-- Four-eyes control: staff without approval rights can only ask for a
                 movement to be reversed. Nothing moves until an approver signs off. --}}
            @if ($canUpdate && ($pendingReversals > 0 || $pendingOnly))
                <div class="flex flex-col gap-2 border-b border-amber-100 bg-brand-yellow-50/70 px-4 py-3 text-sm sm:flex-row sm:items-center sm:justify-between sm:px-5">
                    <div class="flex items-start gap-2 text-brand-yellow-800">
                        <x-icon name="exclamation-triangle" class="mt-0.5 h-4 w-4 shrink-0" />
                        <span>
                            @if ($canApproveReversal)
                                {{ trans_choice('{1}:count reversal is waiting for your approval.|[2,*]:count reversals are waiting for your approval.', $pendingReversals, ['count' => $pendingReversals]) }}
                            @else
                                {{ trans_choice('{1}:count reversal you requested is waiting for an administrator.|[2,*]:count reversals are waiting for an administrator.', $pendingReversals, ['count' => $pendingReversals]) }}
                            @endif
                        </span>
                    </div>
                    <div class="shrink-0">
                        @if ($pendingOnly)
                            <button type="button" wire:click="clearPendingFilter" class="text-xs font-semibold text-brand-yellow-800 underline underline-offset-2">{{ __('Show all movements') }}</button>
                        @else
                            <button type="button" wire:click="showPendingReversals" class="text-xs font-semibold text-brand-yellow-800 underline underline-offset-2">{{ __('Show only these') }}</button>
                        @endif
                    </div>
                </div>
            @endif

            {{-- Statement header band, the professional "statement of account" summary
                 that shows Opening → In − Out → Closing for the chosen account/period.
                 Only meaningful for a single account, so it appears once one is picked. --}}
            @if ($statement)
                <div class="relative overflow-hidden bg-gradient-to-br from-slate-900 via-slate-900 to-slate-800 px-5 py-6 text-white sm:px-7">
                    <div class="pointer-events-none absolute -right-16 -top-16 h-56 w-56 rounded-full bg-indigo-500/20 blur-3xl"></div>
                    <div class="pointer-events-none absolute -bottom-20 left-1/3 h-56 w-56 rounded-full bg-emerald-500/10 blur-3xl"></div>

                    <div class="relative flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between">
                        <div class="min-w-0">
                            <p class="text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-400">{{ __('Statement of Account') }}</p>
                            <p class="mt-1 truncate text-xl font-bold tracking-tight">{{ $statement['account']->name }}</p>
                            <div class="mt-1.5 flex flex-wrap items-center gap-2 text-xs text-slate-400">
                                <span class="inline-flex items-center gap-1 rounded-full bg-white/10 px-2 py-0.5 font-semibold text-slate-200">{{ $statement['currency'] }}</span>
                                <span>{{ $statement['period'] }}</span>
                            </div>
                        </div>

                        {{-- The Opening → In − Out = Closing flow --}}
                        <div class="grid grid-cols-2 gap-x-6 gap-y-4 sm:grid-cols-4 lg:gap-x-8">
                            <div>
                                <p class="text-[10px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Opening') }}</p>
                                <p class="mt-1 text-lg font-bold tabular-nums text-slate-100">{{ number_format($statement['opening'], 2) }}</p>
                            </div>
                            <div>
                                <p class="text-[10px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Money In') }}</p>
                                <p class="mt-1 text-lg font-bold tabular-nums text-emerald-400">+{{ number_format($statement['in'], 2) }}</p>
                            </div>
                            <div>
                                <p class="text-[10px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Money Out') }}</p>
                                <p class="mt-1 text-lg font-bold tabular-nums text-rose-400">−{{ number_format($statement['out'], 2) }}</p>
                            </div>
                            <div class="rounded-xl bg-white/10 px-3 py-2 ring-1 ring-white/15">
                                <p class="text-[10px] font-semibold uppercase tracking-wider text-slate-300">{{ __('Closing') }}</p>
                                <p class="mt-1 text-xl font-extrabold tabular-nums {{ $statement['closing'] < 0 ? 'text-rose-300' : 'text-white' }}">{{ number_format($statement['closing'], 2) }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            @else
                <div class="flex items-center gap-2 border-b border-slate-100 bg-slate-50/70 px-5 py-2.5 text-xs text-slate-500">
                    <x-icon name="document-text" class="h-4 w-4 shrink-0 text-slate-400" />
                    {{ __('Pick a single account above to view its full statement with an opening & closing balance summary.') }}
                </div>
            @endif

            <!-- Statement table (desktop): Opening · Money Out · Money In · Closing -->
            <div class="hidden overflow-x-auto md: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">{{ __('Details') }}</th>
                            <th class="px-3 lg:px-4 py-3.5 text-right text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Opening') }}</th>
                            <th class="px-3 lg:px-4 py-3.5 text-right text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Money Out') }}</th>
                            <th class="px-3 lg:px-4 py-3.5 text-right text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Money In') }}</th>
                            <th class="px-3 lg:px-4 py-3.5 text-right text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Closing') }}</th>
                            @if ($canUpdate)
                                <th class="px-3 lg:px-4 py-3.5 text-right text-xs font-semibold uppercase tracking-wider text-slate-500"><span class="sr-only">{{ __('Actions') }}</span></th>
                            @endif
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100">
                        @forelse ($movements as $movement)
                            @php
                                $bal = $runningBalances[$movement->id] ?? ['opening' => 0, 'closing' => 0];
                                $cur = $movement->account?->currency_code ?? $movement->currency_code;
                                $struck = $movement->reversed_at ? 'line-through opacity-60' : '';
                            @endphp
                            <tr wire:key="movement-{{ $movement->id }}" class="transition-colors hover:bg-slate-50/70 {{ $movement->reversed_at ? 'bg-slate-50/40' : '' }}">
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 align-top text-sm">
                                    <span class="block font-medium text-slate-700">{{ $movement->occurred_at?->format('d M Y') ?: '—' }}</span>
                                    @if ($movement->occurred_at)
                                        <span class="block text-xs text-slate-400">{{ $movement->occurred_at->format('H:i') }}</span>
                                    @endif
                                </td>
                                <td class="px-3 lg:px-4 py-4 align-top text-sm text-slate-600">
                                    <div class="flex items-start gap-2">
                                        <span class="mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-lg" style="background: {{ ($movementTypes[$movement->type]['accent'] ?? '#94a3b8') }}1a;">
                                            <x-icon :name="$movementTypes[$movement->type]['icon'] ?? 'banknotes'" class="h-3.5 w-3.5" style="color: {{ $movementTypes[$movement->type]['accent'] ?? '#94a3b8' }}" />
                                        </span>
                                        <div class="min-w-0">
                                            <span class="inline-flex flex-wrap items-center gap-1.5">
                                                <span class="font-medium text-slate-800" title="{{ $movement->description }}">{{ $movement->description ? \Illuminate\Support\Str::limit($movement->description, 48) : $movement->type_label }}</span>
                                                @if ($movement->reversed_at)
                                                    <x-badge color="slate">{{ __('Reversed') }}</x-badge>
                                                @elseif ($movement->reversal_of_id)
                                                    <x-badge color="amber">{{ __('Reversal') }}</x-badge>
                                                @elseif ($movement->hasPendingReversal())
                                                    <x-badge color="orange">{{ __('Reversal pending approval') }}</x-badge>
                                                @elseif ($movement->reversalWasDeclined())
                                                    <x-badge color="rose">{{ __('Reversal declined') }}</x-badge>
                                                @endif
                                            </span>
                                            @if ($movement->hasPendingReversal() || $movement->reversalWasDeclined())
                                                <p class="mt-1 text-xs text-slate-500">
                                                    <span class="font-medium text-slate-600">{{ $movement->reversalRequester?->name ?? __('A staff member') }}</span>
                                                    {{ __('asked to reverse this:') }} {{ \Illuminate\Support\Str::limit((string) $movement->reversal_reason, 90) }}
                                                    @if ($movement->reversalWasDeclined())
                                                        <span class="block text-rose-500">
                                                            {{ __('Declined by :who.', ['who' => $movement->reversalDecliner?->name ?? __('an approver')]) }}
                                                            {{ \Illuminate\Support\Str::limit((string) $movement->reversal_decline_reason, 90) }}
                                                        </span>
                                                    @endif
                                                </p>
                                            @endif
                                            <div class="mt-0.5 flex flex-wrap items-center gap-x-2 text-xs text-slate-400">
                                                @if ($accountFilter === '')
                                                    <span class="font-medium text-slate-500">{{ $movement->account?->name ?? '—' }}</span>
                                                @endif
                                                @if ($movement->type === 'transfer' && $movement->counterparty)
                                                    <span>{{ $movement->direction === 'out' ? __('→ :acct', ['acct' => $movement->counterparty->name]) : __('← :acct', ['acct' => $movement->counterparty->name]) }}</span>
                                                @elseif ($movement->reference)
                                                    <span>{{ \Illuminate\Support\Str::limit($movement->reference, 30) }}</span>
                                                @endif
                                                @if ($movement->type === 'transfer')
                                                    <span class="inline-flex items-center gap-1 text-slate-500">
                                                        <x-icon name="user" class="h-3 w-3" />
                                                        {{ __('By :who', ['who' => $movement->recorder?->name ?? __('System')]) }}
                                                    </span>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 align-top text-right text-sm tabular-nums text-slate-400">
                                    {{ number_format($bal['opening'], 2) }}
                                </td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 align-top text-right text-sm font-semibold tabular-nums text-rose-600 {{ $struck }}">
                                    {{ $movement->direction === 'out' ? number_format((float) $movement->amount, 2) : '' }}
                                </td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 align-top text-right text-sm font-semibold tabular-nums text-emerald-600 {{ $struck }}">
                                    {{ $movement->direction === 'in' ? number_format((float) $movement->amount, 2) : '' }}
                                </td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 align-top text-right text-sm font-bold tabular-nums {{ $bal['closing'] < 0 ? 'text-rose-600' : 'text-slate-900' }}">
                                    <span class="text-[11px] font-medium text-slate-400">{{ $cur }}</span> {{ number_format($bal['closing'], 2) }}
                                </td>
                                @if ($canUpdate)
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 align-top text-right text-sm">
                                        @if (! $movement->isReversible())
                                            <span class="text-slate-300">—</span>
                                        @elseif ($movement->hasPendingReversal() && $canApproveReversal)
                                            <div class="inline-flex items-center justify-end gap-2">
                                                <button
                                                    type="button"
                                                    wire:click="reverseMovement({{ $movement->id }})"
                                                    wire:confirm="{{ $movement->type === 'transfer' ? __('Approve this reversal? Both legs of the transfer will be undone with an opposite entry.') : __('Approve this reversal? An opposite entry will be posted to undo it.') }}"
                                                    class="inline-flex items-center gap-1 rounded-lg bg-emerald-50 px-2 py-1 text-xs font-semibold text-emerald-700 transition hover:bg-emerald-100"
                                                    title="{{ __('Approve the reversal') }}"
                                                >
                                                    <x-icon name="check" class="h-3.5 w-3.5" />
                                                    {{ __('Approve') }}
                                                </button>
                                                <button
                                                    type="button"
                                                    wire:click="openReversalDecline({{ $movement->id }})"
                                                    class="inline-flex items-center text-slate-400 transition hover:text-rose-600"
                                                    title="{{ __('Decline the request') }}"
                                                >
                                                    <x-icon name="x-mark" class="h-4 w-4" />
                                                </button>
                                            </div>
                                        @elseif ($movement->hasPendingReversal())
                                            <span class="text-xs font-medium text-amber-600">{{ __('Awaiting approval') }}</span>
                                        @elseif ($canApproveReversal)
                                            <button
                                                type="button"
                                                wire:click="reverseMovement({{ $movement->id }})"
                                                wire:confirm="{{ $movement->type === 'transfer' ? __('Reverse this transfer? Both legs will be undone with an opposite entry.') : __('Reverse this movement? An opposite entry will be posted to undo it.') }}"
                                                class="inline-flex items-center text-slate-400 transition hover:text-rose-600"
                                                title="{{ __('Reverse this movement') }}"
                                            >
                                                <x-icon name="arrow-uturn-left" class="h-4 w-4" />
                                            </button>
                                        @else
                                            <button
                                                type="button"
                                                wire:click="openReversalRequest({{ $movement->id }})"
                                                class="inline-flex items-center text-slate-400 transition hover:text-indigo-600"
                                                title="{{ __('Request a reversal, an administrator has to approve it') }}"
                                            >
                                                <x-icon name="arrow-uturn-left" class="h-4 w-4" />
                                            </button>
                                        @endif
                                    </td>
                                @endif
                            </tr>
                        @empty
                            <tr>
                                <td colspan="{{ $canUpdate ? 7 : 6 }}" class="px-3 lg:px-4 py-12">
                                    <x-empty-state icon="arrow-path" :title="__('No movements yet')"
                                        :message="__('No movements recorded yet. Payments, expenses, transfers and adjustments will appear here.')" class="border-0" />
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <!-- Statement entries (mobile): each line as a compact card -->
            <div class="divide-y divide-slate-100 md:hidden">
                @forelse ($movements as $movement)
                    @php
                        $bal = $runningBalances[$movement->id] ?? ['opening' => 0, 'closing' => 0];
                        $cur = $movement->account?->currency_code ?? $movement->currency_code;
                    @endphp
                    <div wire:key="movement-mobile-{{ $movement->id }}" class="p-4 {{ $movement->reversed_at ? 'bg-slate-50/40' : '' }}">
                        <div class="flex items-start justify-between gap-3">
                            <div class="flex min-w-0 items-start gap-2">
                                <span class="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-lg" style="background: {{ ($movementTypes[$movement->type]['accent'] ?? '#94a3b8') }}1a;">
                                    <x-icon :name="$movementTypes[$movement->type]['icon'] ?? 'banknotes'" class="h-4 w-4" style="color: {{ $movementTypes[$movement->type]['accent'] ?? '#94a3b8' }}" />
                                </span>
                                <div class="min-w-0">
                                    <p class="truncate text-sm font-semibold text-slate-800">{{ $movement->description ? \Illuminate\Support\Str::limit($movement->description, 40) : $movement->type_label }}</p>
                                    <p class="text-xs text-slate-400">{{ $movement->occurred_at?->format('d M Y H:i') }}{{ $accountFilter === '' && $movement->account ? ' · ' . $movement->account->name : '' }}</p>
                                    @if ($movement->type === 'transfer')
                                        <p class="text-xs text-slate-500">
                                            {{ $movement->counterparty ? ($movement->direction === 'out' ? __('→ :acct', ['acct' => $movement->counterparty->name]) : __('← :acct', ['acct' => $movement->counterparty->name])) . ' · ' : '' }}{{ __('By :who', ['who' => $movement->recorder?->name ?? __('System')]) }}
                                        </p>
                                    @endif
                                    @if ($movement->reversed_at)
                                        <x-badge color="slate" class="mt-1">{{ __('Reversed') }}</x-badge>
                                    @elseif ($movement->reversal_of_id)
                                        <x-badge color="amber" class="mt-1">{{ __('Reversal') }}</x-badge>
                                    @elseif ($movement->hasPendingReversal())
                                        <x-badge color="orange" class="mt-1">{{ __('Reversal pending approval') }}</x-badge>
                                    @elseif ($movement->reversalWasDeclined())
                                        <x-badge color="rose" class="mt-1">{{ __('Reversal declined') }}</x-badge>
                                    @endif
                                    @if ($movement->hasPendingReversal() || $movement->reversalWasDeclined())
                                        <p class="mt-1 text-xs text-slate-500">{{ \Illuminate\Support\Str::limit((string) $movement->reversal_reason, 70) }}</p>
                                    @endif
                                </div>
                            </div>
                            <div class="shrink-0 text-right">
                                <p class="text-sm font-bold tabular-nums {{ $movement->direction === 'in' ? 'text-emerald-600' : 'text-rose-600' }} {{ $movement->reversed_at ? 'line-through opacity-60' : '' }}">
                                    {{ $movement->direction === 'in' ? '+' : '−' }}{{ number_format((float) $movement->amount, 2) }}
                                </p>
                                @if ($canUpdate && $movement->isReversible())
                                    @if ($movement->hasPendingReversal() && $canApproveReversal)
                                        <div class="mt-1 flex items-center justify-end gap-2">
                                            <button
                                                type="button"
                                                wire:click="reverseMovement({{ $movement->id }})"
                                                wire:confirm="{{ $movement->type === 'transfer' ? __('Approve this reversal? Both legs of the transfer will be undone with an opposite entry.') : __('Approve this reversal? An opposite entry will be posted to undo it.') }}"
                                                class="inline-flex items-center gap-1 rounded-lg bg-emerald-50 px-2 py-1 text-xs font-semibold text-emerald-700"
                                            >
                                                <x-icon name="check" class="h-3.5 w-3.5" />
                                                {{ __('Approve') }}
                                            </button>
                                            <button type="button" wire:click="openReversalDecline({{ $movement->id }})" class="inline-flex items-center text-xs font-medium text-slate-400">
                                                {{ __('Decline') }}
                                            </button>
                                        </div>
                                    @elseif ($movement->hasPendingReversal())
                                        <span class="mt-1 block text-xs font-medium text-amber-600">{{ __('Awaiting approval') }}</span>
                                    @elseif ($canApproveReversal)
                                        <button
                                            type="button"
                                            wire:click="reverseMovement({{ $movement->id }})"
                                            wire:confirm="{{ $movement->type === 'transfer' ? __('Reverse this transfer? Both legs will be undone with an opposite entry.') : __('Reverse this movement? An opposite entry will be posted to undo it.') }}"
                                            class="mt-1 inline-flex items-center gap-1 text-xs font-medium text-slate-400 transition hover:text-rose-600"
                                        >
                                            <x-icon name="arrow-uturn-left" class="h-3.5 w-3.5" />
                                            {{ __('Reverse') }}
                                        </button>
                                    @else
                                        <button
                                            type="button"
                                            wire:click="openReversalRequest({{ $movement->id }})"
                                            class="mt-1 inline-flex items-center gap-1 text-xs font-medium text-slate-400 transition hover:text-indigo-600"
                                        >
                                            <x-icon name="arrow-uturn-left" class="h-3.5 w-3.5" />
                                            {{ __('Request reversal') }}
                                        </button>
                                    @endif
                                @endif
                            </div>
                        </div>
                        <div class="mt-2.5 flex items-center justify-between rounded-lg bg-slate-50 px-3 py-2 text-xs">
                            <span class="text-slate-400">{{ __('Opening') }} <span class="font-semibold text-slate-500 tabular-nums">{{ number_format($bal['opening'], 2) }}</span></span>
                            <x-icon name="arrow-right" class="h-3.5 w-3.5 text-slate-300" />
                            <span class="text-slate-400">{{ __('Closing') }} <span class="font-bold tabular-nums {{ $bal['closing'] < 0 ? 'text-rose-600' : 'text-slate-800' }}">{{ $cur }} {{ number_format($bal['closing'], 2) }}</span></span>
                        </div>
                    </div>
                @empty
                    <div class="p-6">
                        <x-empty-state icon="arrow-path" :title="__('No movements yet')"
                            :message="__('No movements recorded yet. Payments, expenses, transfers and adjustments will appear here.')" class="border-0" />
                    </div>
                @endforelse
            </div>

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

    <!-- Create / Edit Account Modal -->
    <x-dialog-modal wire:model.live="showModal" maxWidth="2xl">
        <x-slot name="title">
            {{ $editingId ? __('Edit Account') : __('New Fund Account') }}
        </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="name" value="{{ __('Account Name') }}" />
                        <x-input id="name" type="text" class="mt-1 block w-full" wire:model="name" placeholder="{{ __('e.g. CBZ Bank (USD), Office Cash') }}" />
                        <x-input-error for="name" class="mt-2" />
                    </div>
                    <div>
                        <x-label for="reference" value="{{ __('Account No. / Code') }}" />
                        <x-input id="reference" type="text" class="mt-1 block w-full" wire:model="reference" placeholder="{{ __('e.g. **** 5678, COF-001') }}" />
                        <x-input-error for="reference" class="mt-2" />
                    </div>
                </div>

                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <div>
                        <x-label for="type" value="{{ __('Type') }}" />
                        <select id="type" wire:model.live="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 ($types as $key => $meta)
                                <option value="{{ $key }}">{{ __($meta['label']) }}</option>
                            @endforeach
                        </select>
                        <x-input-error for="type" 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>

                @if (in_array($type, \App\Models\FundAccount::HELD_TYPES, true))
                    <div>
                        <x-label for="holder_user_id" value="{{ __('Held by') }}" />
                        <select id="holder_user_id" wire:model="holder_user_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="">{{ __('Nobody, so nobody is asked to count it') }}</option>
                            @foreach ($members as $member)
                                <option value="{{ $member->id }}">{{ $member->name }}</option>
                            @endforeach
                        </select>
                        <x-input-error for="holder_user_id" class="mt-2" />
                    </div>
                @endif

                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <div>
                        <x-label for="opening_balance" value="{{ __('Opening Balance') }}" />
                        <x-input id="opening_balance" type="number" step="0.01" class="mt-1 block w-full" wire:model="opening_balance" :disabled="(bool) $editingId" />
                        <p class="mt-1 text-xs text-slate-400">
                            {{ $editingId ? __('Opening balance is locked once set, to keep the ledger consistent. Use an adjustment to correct.') : __('Today\'s real-world balance for this account.') }}
                        </p>
                        <x-input-error for="opening_balance" class="mt-2" />
                    </div>
                    <div class="flex items-end">
                        <label class="flex items-center gap-2 pb-2">
                            <x-checkbox wire:model="is_active" />
                            <span class="text-sm font-medium text-slate-700">{{ __('Active') }}</span>
                        </label>
                    </div>
                </div>

                <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>

    <!-- Transfer Modal -->
    <x-dialog-modal wire:model.live="showTransferModal" maxWidth="2xl">
        <x-slot name="title">{{ __('Record Transfer') }}</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="from_account_id" value="{{ __('From') }}" />
                        <select id="from_account_id" wire:model.live="from_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 account...') }}</option>
                            @foreach ($accountOptions->where('is_active', true) as $opt)
                                <option value="{{ $opt->id }}">{{ $opt->name }} ({{ $opt->currency_code }})</option>
                            @endforeach
                        </select>
                        <x-input-error for="from_account_id" class="mt-2" />
                    </div>
                    <div>
                        <x-label for="to_account_id" value="{{ __('To') }}" />
                        <select id="to_account_id" wire:model.live="to_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 account...') }}</option>
                            @foreach ($accountOptions->where('is_active', true) as $opt)
                                <option value="{{ $opt->id }}">{{ $opt->name }} ({{ $opt->currency_code }})</option>
                            @endforeach
                        </select>
                        <x-input-error for="to_account_id" class="mt-2" />
                    </div>
                </div>

                @php
                    $fromAcct = $from_account_id ? $accountOptions->firstWhere('id', (int) $from_account_id) : null;
                    $toAcct = $to_account_id ? $accountOptions->firstWhere('id', (int) $to_account_id) : null;
                    $crossCurrency = $fromAcct && $toAcct && $fromAcct->currency_code !== $toAcct->currency_code;
                @endphp

                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <div>
                        <x-label for="transfer_amount_out" value="{{ $crossCurrency ? __('Amount Out (:cur)', ['cur' => $fromAcct->currency_code]) : __('Amount') }}" />
                        <x-input id="transfer_amount_out" type="number" step="0.01" min="0" class="mt-1 block w-full" wire:model="transfer_amount_out" />
                        <x-input-error for="transfer_amount_out" class="mt-2" />
                    </div>
                    @if ($crossCurrency)
                        <div>
                            <x-label for="transfer_amount_in" value="{{ __('Amount In (:cur)', ['cur' => $toAcct->currency_code]) }}" />
                            <x-input id="transfer_amount_in" type="number" step="0.01" min="0" class="mt-1 block w-full" wire:model="transfer_amount_in" />
                            <x-input-error for="transfer_amount_in" class="mt-2" />
                        </div>
                    @endif
                    <div @class(['sm:col-span-2' => ! $crossCurrency])>
                        <x-label for="transfer_date" value="{{ __('Date') }}" />
                        <x-input id="transfer_date" type="datetime-local" class="mt-1 block w-full" wire:model="transfer_date" />
                        <x-input-error for="transfer_date" class="mt-2" />
                    </div>
                </div>

                <div>
                    <x-label for="transfer_charge" value="{{ __('Transaction charge') }}" />
                    <x-input id="transfer_charge" type="number" step="0.01" min="0" placeholder="0.00" class="mt-1 block w-full" wire:model="transfer_charge" />
                    <p class="mt-1 text-xs text-slate-400">{{ __('Bank/EcoCash fee to move the money out. Charged to the source account and booked as a bank charge. Leave blank if none.') }}</p>
                    <x-input-error for="transfer_charge" class="mt-2" />
                </div>

                <div>
                    <x-label for="transfer_notes">{{ __('Reason') }} <span class="text-rose-500">*</span></x-label>
                    <textarea id="transfer_notes" rows="2" required wire:model="transfer_notes" placeholder="{{ __('e.g. Cash withdrawal, surrendered to director') }}" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"></textarea>
                    <p class="mt-1 text-xs text-slate-400">{{ __('Required. Shows on the statement of both accounts, with your name.') }}</p>
                    <x-input-error for="transfer_notes" class="mt-2" />
                </div>

                <div>
                    <x-label for="transfer_reference" value="{{ __('Reference') }}" />
                    <x-input id="transfer_reference" type="text" class="mt-1 block w-full" wire:model="transfer_reference" placeholder="{{ __('e.g. bank reference or slip number') }}" />
                    <x-input-error for="transfer_reference" class="mt-2" />
                </div>
            </div>
        </x-slot>

        <x-slot name="footer">
            <x-secondary-button wire:click="closeTransfer" wire:loading.attr="disabled">{{ __('Cancel') }}</x-secondary-button>
            <x-button class="ms-3" wire:click="saveTransfer" wire:loading.attr="disabled">{{ __('Record Transfer') }}</x-button>
        </x-slot>
    </x-dialog-modal>

    <!-- Adjustment Modal -->
    <x-dialog-modal wire:model.live="showAdjustModal" maxWidth="lg">
        <x-slot name="title">{{ __('Balance Adjustment') }}</x-slot>

        <x-slot name="content">
            <div class="grid grid-cols-1 gap-4">
                <div>
                    <x-label for="adjust_account_id" value="{{ __('Account') }}" />
                    <select id="adjust_account_id" wire:model="adjust_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 account...') }}</option>
                        @foreach ($accountOptions as $opt)
                            <option value="{{ $opt->id }}">{{ $opt->name }} ({{ $opt->currency_code }})</option>
                        @endforeach
                    </select>
                    <x-input-error for="adjust_account_id" class="mt-2" />
                </div>

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

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

                <div>
                    <x-label for="adjust_reason" value="{{ __('Reason') }}" />
                    <textarea id="adjust_reason" rows="2" wire:model="adjust_reason" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500" placeholder="{{ __('e.g. Reconciliation, counting error, bank charges') }}"></textarea>
                    <x-input-error for="adjust_reason" class="mt-2" />
                </div>
            </div>
        </x-slot>

        <x-slot name="footer">
            <x-secondary-button wire:click="closeAdjust" wire:loading.attr="disabled">{{ __('Cancel') }}</x-secondary-button>
            <x-button class="ms-3" wire:click="saveAdjustment" wire:loading.attr="disabled">{{ __('Record Adjustment') }}</x-button>
        </x-slot>
    </x-dialog-modal>

    <!-- Reconcile Modal -->
    @php
        $reconcileAcct = $reconcile_account_id ? $accountOptions->firstWhere('id', (int) $reconcile_account_id) : null;
        $reconcileExpected = $reconcileAcct ? (float) $reconcileAcct->balance : 0.0;
        $reconcileCur = $reconcileAcct?->currency_code ?? '';
    @endphp
    <x-dialog-modal wire:model.live="showReconcileModal" maxWidth="lg">
        <x-slot name="title">{{ __('Reconcile Balance') }}</x-slot>

        <x-slot name="content">
            <div
                x-data="{
                    expected: {{ json_encode(round($reconcileExpected, 2)) }},
                    actual: @entangle('reconcile_actual'),
                    allocation: @entangle('reconcile_allocation'),
                    get diff() { return Math.round((parseFloat(this.actual || 0) - this.expected) * 100) / 100; },
                    fmt(v) { return (v < 0 ? '−' : '') + '{{ $reconcileCur }} ' + Math.abs(v).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }); },
                }"
                class="grid grid-cols-1 gap-4"
            >
                <p class="text-sm text-slate-500">
                    {{ __('Count the money actually in :account and enter it below. If it differs from the system, tell us where the difference belongs so the books stay honest.', ['account' => $reconcileAcct?->name ?? __('this account')]) }}
                </p>

                <div class="grid grid-cols-2 gap-3">
                    <div class="rounded-xl border border-slate-200 bg-slate-50 p-3">
                        <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('System balance') }}</p>
                        <p class="mt-1 text-lg font-bold text-slate-900 tabular-nums">{{ $reconcileCur }} {{ number_format($reconcileExpected, 2) }}</p>
                    </div>
                    <div class="rounded-xl border p-3"
                        :class="Math.abs(diff) < 0.01 ? 'border-slate-200 bg-slate-50' : (diff > 0 ? 'border-emerald-200 bg-emerald-50' : 'border-rose-200 bg-rose-50')">
                        <p class="text-[11px] font-semibold uppercase tracking-wider"
                            :class="Math.abs(diff) < 0.01 ? 'text-slate-400' : (diff > 0 ? 'text-emerald-600' : 'text-rose-600')">
                            <span x-text="Math.abs(diff) < 0.01 ? '{{ __('Matches') }}' : (diff > 0 ? '{{ __('Surplus') }}' : '{{ __('Shortfall') }}')"></span>
                        </p>
                        <p class="mt-1 text-lg font-bold tabular-nums"
                            :class="Math.abs(diff) < 0.01 ? 'text-slate-900' : (diff > 0 ? 'text-emerald-700' : 'text-rose-700')"
                            x-text="fmt(diff)"></p>
                    </div>
                </div>

                <div>
                    <x-label for="reconcile_actual" value="{{ __('Actual counted balance') }} ({{ $reconcileCur }})" />
                    <x-input id="reconcile_actual" type="number" step="0.01" min="0" class="mt-1 block w-full" wire:model.live="reconcile_actual" x-model="actual" />
                    <x-input-error for="reconcile_actual" class="mt-2" />
                </div>

                {{-- Allocation only matters when there's a difference to explain. --}}
                <div x-show="Math.abs(diff) >= 0.01" x-cloak>
                    <x-label value="{{ __('Where do these funds belong?') }}" />
                    <div class="mt-1.5 space-y-2">
                        {{-- Surplus options --}}
                        <template x-if="diff > 0">
                            <div class="space-y-2">
                                <label class="flex cursor-pointer items-start gap-2.5 rounded-xl border border-slate-200 p-3 transition hover:border-emerald-300" :class="allocation === 'income' && 'border-emerald-400 ring-1 ring-emerald-400'">
                                    <input type="radio" value="income" x-model="allocation" class="mt-0.5 text-emerald-600 focus:ring-emerald-500" />
                                    <span><span class="block text-sm font-medium text-slate-800">{{ __('Money we earned but hadn\'t logged') }}</span><span class="block text-xs text-slate-400">{{ __('Records it as income') }}</span></span>
                                </label>
                            </div>
                        </template>
                        {{-- Shortfall options --}}
                        <template x-if="diff < 0">
                            <div class="space-y-2">
                                <label class="flex cursor-pointer items-start gap-2.5 rounded-xl border border-slate-200 p-3 transition hover:border-rose-300" :class="allocation === 'expense' && 'border-rose-400 ring-1 ring-rose-400'">
                                    <input type="radio" value="expense" x-model="allocation" class="mt-0.5 text-rose-600 focus:ring-rose-500" />
                                    <span><span class="block text-sm font-medium text-slate-800">{{ __('Money spent but not recorded') }}</span><span class="block text-xs text-slate-400">{{ __('Records it as an expense') }}</span></span>
                                </label>
                            </div>
                        </template>
                        <label class="flex cursor-pointer items-start gap-2.5 rounded-xl border border-slate-200 p-3 transition hover:border-slate-300" :class="allocation === 'correction' && 'border-slate-400 ring-1 ring-slate-400'">
                            <input type="radio" value="correction" x-model="allocation" class="mt-0.5 text-slate-600 focus:ring-slate-500" />
                            <span><span class="block text-sm font-medium text-slate-800">{{ __('Fix a recording error') }}</span><span class="block text-xs text-slate-400">{{ __('Corrects the balance with no income or expense') }}</span></span>
                        </label>
                        <label class="flex cursor-pointer items-start gap-2.5 rounded-xl border border-slate-200 p-3 transition hover:border-amber-300" :class="allocation === 'suspense' && 'border-amber-400 ring-1 ring-amber-400'">
                            <input type="radio" value="suspense" x-model="allocation" class="mt-0.5 text-amber-600 focus:ring-amber-500" />
                            <span><span class="block text-sm font-medium text-slate-800">{{ __('Not sure yet') }}</span><span class="block text-xs text-slate-400">{{ __('Holds the difference in a Suspense account to sort out later') }}</span></span>
                        </label>
                        @if ($canCutOver)
                            <label class="flex cursor-pointer items-start gap-2.5 rounded-xl border border-slate-200 p-3 transition hover:border-violet-300" :class="allocation === 'opening' && 'border-violet-400 ring-1 ring-violet-400'">
                                <input type="radio" value="opening" x-model="allocation" class="mt-0.5 text-violet-600 focus:ring-violet-500" />
                                <span><span class="block text-sm font-medium text-slate-800">{{ __('From before the system') }}</span><span class="block text-xs text-slate-400">{{ __('Charges it to Opening Balances, no income or expense, nothing hits this month') }}</span></span>
                            </label>
                        @endif
                    </div>
                    <x-input-error for="reconcile_allocation" class="mt-2" />

                    {{-- Category picker for income / expense allocations --}}
                    <div x-show="allocation === 'income'" x-cloak class="mt-3">
                        <x-label for="reconcile_income_cat" value="{{ __('Income category (optional)') }}" />
                        <select id="reconcile_income_cat" wire:model="reconcile_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 ($incomeCategories as $cat)
                                <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div x-show="allocation === 'expense'" x-cloak class="mt-3">
                        <x-label for="reconcile_expense_cat" value="{{ __('Expense category (optional)') }}" />
                        <select id="reconcile_expense_cat" wire:model="reconcile_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 ($expenseCategories as $cat)
                                <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

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

                <div>
                    <x-label for="reconcile_reason" value="{{ __('Reason / note') }}" />
                    <textarea id="reconcile_reason" rows="2" wire:model="reconcile_reason" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500" placeholder="{{ __('e.g. Counted cash box at close; found extra float / short on petty cash') }}"></textarea>
                    <x-input-error for="reconcile_reason" class="mt-2" />
                </div>
            </div>
        </x-slot>

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

    <!-- Request Reversal Modal, for staff who can't approve one themselves -->
    <x-dialog-modal wire:model.live="showReversalRequestModal" maxWidth="lg">
        <x-slot name="title">{{ __('Request a Reversal') }}</x-slot>

        <x-slot name="content">
            <div class="grid grid-cols-1 gap-4">
                <div class="flex items-start gap-2 rounded-xl bg-brand-yellow-50 px-3 py-2.5 text-xs text-brand-yellow-800">
                    <x-icon name="shield-check" class="mt-0.5 h-4 w-4 shrink-0" />
                    <span>{{ __('Reversing money on the ledger needs an administrator\'s approval. Nothing moves until they sign this off.') }}</span>
                </div>

                <div>
                    <x-label for="reversal_reason" value="{{ __('Why should this be reversed?') }}" />
                    <textarea id="reversal_reason" rows="3" wire:model="reversal_reason" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500" placeholder="{{ __('e.g. Transfer captured twice, the second entry is a duplicate') }}"></textarea>
                    <x-input-error for="reversal_reason" class="mt-2" />
                </div>
            </div>
        </x-slot>

        <x-slot name="footer">
            <x-secondary-button wire:click="closeReversalRequest" wire:loading.attr="disabled">{{ __('Cancel') }}</x-secondary-button>
            <x-button class="ms-3" wire:click="submitReversalRequest" wire:loading.attr="disabled">{{ __('Send for Approval') }}</x-button>
        </x-slot>
    </x-dialog-modal>

    <!-- Decline Reversal Modal, approver side -->
    <x-dialog-modal wire:model.live="showReversalDeclineModal" maxWidth="lg">
        <x-slot name="title">{{ __('Decline the Reversal') }}</x-slot>

        <x-slot name="content">
            <div class="grid grid-cols-1 gap-4">
                <p class="text-sm text-slate-500">{{ __('The movement stays exactly as it is. Your note goes back to whoever asked.') }}</p>

                <div>
                    <x-label for="reversal_decline_note" value="{{ __('Note (optional)') }}" />
                    <textarea id="reversal_decline_note" rows="3" wire:model="reversal_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" placeholder="{{ __('e.g. Not a duplicate, the second leg is the bank charge') }}"></textarea>
                    <x-input-error for="reversal_decline_note" class="mt-2" />
                </div>
            </div>
        </x-slot>

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