@php
    $cur = $data['currency'];
    // Two questions, two answers: what the shift produced, and what is in the
    // box now. The drawer is what the books get settled against.
    // What came in is gross, before a cent of it goes back out: the cashier is
    // being asked what she took, and she cannot take a negative. The drawer is
    // the netted figure, opening plus everything that moved either way.
    $expectedTakings = round((float) ($data['inflow'] ?? 0), 2);
    $expectedDrawer = round((float) $data['opening'] + (float) $data['expected'], 2);
    // Literal class strings (Tailwind can't see interpolated names).
    $iconWrap = $accent === 'sky' ? 'bg-sky-50 text-sky-600' : 'bg-emerald-50 text-emerald-600';
@endphp
{{-- One reconciliation bucket (Cash or EcoCash). Alpine computes both live
     differences: the takings one says what happened today, the drawer one is
     the money that has to be accounted for. Their gap is what was already
     missing (or already extra) when the day started. --}}
<div
    wire:key="cashup-bucket-{{ $bucket }}{{ $keySuffix ?? '' }}"
    x-data="{
        expectedTakings: {{ $expectedTakings }},
        expectedDrawer: {{ $expectedDrawer }},
        takings: @entangle($takingsModel).live,
        declared: @entangle($declaredModel).live,
        details: false,
        num(v) {
            if (v === '' || v === null || isNaN(parseFloat(v))) return null;
            return parseFloat(v);
        },
        get takingsDiff() {
            const v = this.num(this.takings);
            return v === null ? null : Math.round((v - this.expectedTakings) * 100) / 100;
        },
        get diff() {
            const v = this.num(this.declared);
            return v === null ? null : Math.round((v - this.expectedDrawer) * 100) / 100;
        },
        get carriedDiff() {
            if (this.diff === null || this.takingsDiff === null) return null;
            return Math.round((this.diff - this.takingsDiff) * 100) / 100;
        },
        get state() {
            if (this.diff === null) return 'idle';
            if (Math.abs(this.diff) < 0.01) return 'balanced';
            return this.diff < 0 ? 'short' : 'over';
        },
        get takingsState() {
            if (this.takingsDiff === null) return 'idle';
            if (Math.abs(this.takingsDiff) < 0.01) return 'balanced';
            return this.takingsDiff < 0 ? 'short' : 'over';
        },
        {{-- Both counts have to agree. A drawer that totals correctly while the
             day is out is two errors cancelling, and it is never 'balanced'. --}}
        get settled() {
            return this.state === 'balanced' && this.takingsState === 'balanced';
        },
        get unanswered() {
            return (this.state !== 'idle' && this.state !== 'balanced')
                || (this.takingsState !== 'idle' && this.takingsState !== 'balanced');
        },
    }"
    class="flex flex-col overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm"
>
{{-- Header --}}
    <div class="flex items-center gap-3 px-5 pt-5">
        <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl {{ $iconWrap }}">
            <x-icon :name="$icon" class="h-5 w-5" />
        </span>
        <div class="min-w-0 flex-1">
            <p class="truncate text-sm font-semibold text-slate-900">{{ $title }}</p>
            @if ($accounts->count() > 1)
                <select wire:model.live="{{ $accountModel }}" class="mt-1 w-full rounded-lg border-slate-200 py-1 pl-2 pr-7 text-xs font-medium text-slate-500 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                    @foreach ($accounts as $opt)
                        <option value="{{ $opt->id }}">{{ $opt->name }} · {{ $opt->currency_code }}</option>
                    @endforeach
                </select>
            @else
                <p class="truncate text-xs text-slate-400">{{ $account->name }} · {{ $cur }}</p>
            @endif
        </div>
    </div>

    {{-- The two counts. Takings first, it is the one she does from the shift's
         own money; the drawer total second, because that is the figure the
         books are settled against. --}}
    <div class="space-y-4 px-5 pt-5">
        <div>
            <div class="flex items-baseline justify-between gap-2">
                <label class="min-w-0 text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Came in today') }}</label>
                <button type="button" @click="details = ! details" class="flex shrink-0 items-baseline gap-1 whitespace-nowrap text-[11px] text-slate-400 transition hover:text-slate-600">
                    {{ __('expected') }} <span class="tabular-nums font-semibold text-slate-600">{{ $cur }} {{ number_format($expectedTakings, 2) }}</span>
                    <x-icon name="chevron-down" class="h-3 w-3 shrink-0 self-center text-slate-300 transition" ::class="details && 'rotate-180'" />
                </button>
            </div>
            <div class="mt-1.5 flex items-stretch overflow-hidden rounded-xl border border-slate-300 transition focus-within:border-indigo-500 focus-within:ring-1 focus-within:ring-indigo-500">
                <span class="flex items-center border-r border-slate-200 bg-slate-50 px-3 text-sm font-semibold text-slate-500">{{ $cur }}</span>
                <input type="number" step="0.01" inputmode="decimal" x-model="takings"
                    class="w-full border-0 py-2.5 text-right text-base font-semibold tabular-nums text-slate-900 focus:ring-0" placeholder="0.00" />
            </div>
            <p x-show="takingsDiff !== null && Math.abs(takingsDiff) >= 0.01" x-cloak class="mt-1 text-xs"
               ::class="takingsDiff < 0 ? 'text-rose-600' : 'text-amber-600'"
               x-text="(takingsDiff < 0 ? '{{ __('Short by') }} ' : '{{ __('Over by') }} ') + '{{ $cur }} ' + Math.abs(takingsDiff).toFixed(2) + ' {{ __('on the day') }}'"></p>
            @error($takingsModel) <p class="mt-1 text-xs text-rose-600">{{ $message }}</p> @enderror
        </div>

        <div>
            <div class="flex items-baseline justify-between gap-2">
                <label class="min-w-0 text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('In the account now, in total') }}</label>
                <button type="button" @click="details = ! details" class="flex shrink-0 items-baseline gap-1 whitespace-nowrap text-[11px] text-slate-400 transition hover:text-slate-600">
                    {{ __('expected') }} <span class="tabular-nums font-semibold {{ $expectedDrawer < 0 ? 'text-rose-600' : 'text-slate-600' }}">{{ $cur }} {{ number_format($expectedDrawer, 2) }}</span>
                    <x-icon name="chevron-down" class="h-3 w-3 shrink-0 self-center text-slate-300 transition" ::class="details && 'rotate-180'" />
                </button>
            </div>
            <div class="mt-1.5 flex items-stretch overflow-hidden rounded-xl border border-slate-300 transition focus-within:border-indigo-500 focus-within:ring-1 focus-within:ring-indigo-500"
                 ::class="{ 'border-emerald-300 ring-1 ring-emerald-200': settled }">
                <span class="flex items-center border-r border-slate-200 bg-slate-50 px-3 text-sm font-semibold text-slate-500">{{ $cur }}</span>
                <input type="number" step="0.01" inputmode="decimal" x-model="declared"
                    class="w-full border-0 py-2.5 text-right text-base font-semibold tabular-nums text-slate-900 focus:ring-0" placeholder="0.00" />
            </div>
            @error($declaredModel) <p class="mt-1 text-xs text-rose-600">{{ $message }}</p> @enderror

        {{-- Breakdown: how the expected figure is built, plus the opening check. --}}
        <div x-show="details" x-cloak class="mt-3 space-y-2 rounded-xl bg-slate-50/80 px-3.5 py-3 text-xs"
             x-data="{ ok: @entangle($openingOkModel).live }">
            <div class="flex justify-between text-slate-500">
                <span>{{ __('Opening (carried over)') }}</span>
                <span class="tabular-nums text-slate-700">{{ $cur }} {{ number_format((float) $data['opening'], 2) }}</span>
            </div>
            @php
                // Named lines rather than one lump per category: "transfers
                // −110.00" tells a cashier nothing, "Transfer to Ashly's Wallet
                // −110.00" tells her exactly where the money went.
                $inItems = array_values(array_filter($data['items'] ?? [], fn ($i) => $i['direction'] === 'in'));
                $outItems = array_values(array_filter($data['items'] ?? [], fn ($i) => $i['direction'] === 'out'));
            @endphp

            <div class="flex justify-between font-medium text-slate-600">
                <span>{{ __('Came in today') }}</span>
                <span class="tabular-nums text-emerald-600">+ {{ $cur }} {{ number_format((float) ($data['inflow'] ?? 0), 2) }}</span>
            </div>
            @foreach ($inItems as $item)
                <div class="flex justify-between gap-3 pl-3 text-slate-400">
                    <span class="min-w-0 break-words">{{ $item['label'] }}</span>
                    <span class="shrink-0 tabular-nums">{{ $cur }} {{ number_format((float) $item['amount'], 2) }}</span>
                </div>
            @endforeach

            <div class="flex justify-between pt-1 font-medium text-slate-600">
                <span>{{ __('Went out today') }}</span>
                <span class="tabular-nums text-rose-500">− {{ $cur }} {{ number_format((float) ($data['outflow'] ?? 0), 2) }}</span>
            </div>
            @foreach ($outItems as $item)
                <div class="flex justify-between gap-3 pl-3 text-slate-400">
                    <span class="min-w-0 break-words">{{ $item['label'] }}</span>
                    <span class="shrink-0 tabular-nums">{{ $cur }} {{ number_format((float) $item['amount'], 2) }}</span>
                </div>
            @endforeach

            <div class="flex justify-between border-t border-slate-200/70 pt-2 font-semibold {{ $expectedDrawer < 0 ? 'text-rose-600' : 'text-slate-800' }}">
                <span>{{ __('In the account now, in total') }}</span>
                <span class="tabular-nums">{{ $cur }} {{ number_format($expectedDrawer, 2) }}</span>
            </div>
            @if ($expectedDrawer < 0)
                <p class="rounded-lg bg-rose-50 px-2 py-1.5 text-[11px] text-rose-700">
                    {{ __('More went out than the account held. Check the amounts, or whether something was booked to the wrong account.') }}
                </p>
            @endif

            {{-- Opening-balance confirmation / correction (tucked in the breakdown). --}}
            <div class="border-t border-slate-200/70 pt-2.5"
                 x-data="{ oa: @entangle($openingActualModel).live, opening: {{ (float) $data['opening'] }} }">
                <label class="inline-flex cursor-pointer items-center gap-2">
                    <input type="checkbox" x-model="ok" class="rounded border-slate-300 text-emerald-600 focus:ring-emerald-500" />
                    <span class="text-slate-500" x-text="ok ? '{{ __('Opening balance confirmed correct') }}' : '{{ __('Opening balance looks wrong') }}'"></span>
                    <x-icon name="check-circle" x-show="ok" x-cloak class="h-4 w-4 text-emerald-500" />
                </label>
                <div x-show="! ok" x-cloak class="mt-2.5 space-y-2 rounded-lg bg-white p-2.5 ring-1 ring-slate-200">
                    <label class="block font-medium text-slate-500">{{ __('Enter the correct opening balance') }}</label>
                    <div class="flex items-stretch overflow-hidden rounded-lg border border-slate-300 focus-within:border-indigo-500 focus-within:ring-1 focus-within:ring-indigo-500">
                        <span class="flex items-center border-r border-slate-200 bg-slate-50 px-2.5 font-medium text-slate-500">{{ $cur }}</span>
                        <input type="number" step="0.01" x-model="oa" class="w-full border-0 py-1.5 text-right focus:ring-0" placeholder="0.00" />
                    </div>
                    <template x-if="oa !== '' && oa !== null && ! isNaN(parseFloat(oa)) && Math.abs(parseFloat(oa) - opening) >= 0.01">
                        <div class="flex flex-wrap items-center gap-2">
                            <p class="text-slate-500" x-text="(parseFloat(oa) > opening ? '{{ __('Over by') }} ' : '{{ __('Short by') }} ') + '{{ $cur }} ' + Math.abs(parseFloat(oa) - opening).toFixed(2)"></p>
                            <button type="button" x-show="parseFloat(oa) > opening" wire:click="openFix('{{ $bucket }}', 'income', true)"
                                class="inline-flex items-center gap-1 rounded-lg border border-emerald-200 bg-white px-2 py-1 font-semibold text-emerald-700 hover:bg-emerald-50">
                                <x-icon name="plus" class="h-3.5 w-3.5" /> {{ __('Record income') }}
                            </button>
                            <button type="button" x-show="parseFloat(oa) < opening" wire:click="openFix('{{ $bucket }}', 'expense', true)"
                                class="inline-flex items-center gap-1 rounded-lg border border-rose-200 bg-white px-2 py-1 font-semibold text-rose-700 hover:bg-rose-50">
                                <x-icon name="receipt-percent" class="h-3.5 w-3.5" /> {{ __('Record expense') }}
                            </button>
                        </div>
                    </template>
                </div>
            </div>
        </div>
        </div>
    </div>

    {{-- Difference. Both counts get their own verdict: either one being out is
         a difference somebody has to answer for. --}}
    <div class="mt-auto space-y-3 px-5 pb-5 pt-4">
        <div class="space-y-2">
            <div class="flex items-center justify-between gap-2">
                <span class="text-xs font-semibold uppercase tracking-wider text-slate-400">{{ __('Today') }}</span>
                <span x-show="takingsState === 'idle'" class="inline-flex items-center rounded-lg bg-slate-100 px-3 py-1.5 text-xs font-semibold text-slate-400">{{ __('Awaiting count') }}</span>
                <span x-show="takingsState === 'balanced'" x-cloak class="inline-flex items-center gap-1.5 rounded-lg bg-emerald-50 px-3 py-1.5 text-xs font-semibold text-emerald-700">
                    <x-icon name="check-circle" class="h-4 w-4" /> {{ __('Balanced') }}
                </span>
                <span x-show="takingsState === 'short'" x-cloak class="inline-flex items-center gap-1.5 rounded-lg bg-rose-50 px-3 py-1.5 text-xs font-semibold text-rose-700">
                    {{ __('Short') }} <span class="tabular-nums" x-text="'{{ $cur }} ' + Math.abs(takingsDiff).toFixed(2)"></span>
                </span>
                <span x-show="takingsState === 'over'" x-cloak class="inline-flex items-center gap-1.5 rounded-lg bg-amber-50 px-3 py-1.5 text-xs font-semibold text-amber-700">
                    {{ __('Over') }} <span class="tabular-nums" x-text="'{{ $cur }} ' + Math.abs(takingsDiff).toFixed(2)"></span>
                </span>
            </div>

            <div class="flex items-center justify-between gap-2">
                <span class="text-xs font-semibold uppercase tracking-wider text-slate-400">{{ __('In total') }}</span>
                <span x-show="state === 'idle'" class="inline-flex items-center rounded-lg bg-slate-100 px-3 py-1.5 text-xs font-semibold text-slate-400">{{ __('Awaiting count') }}</span>
                <span x-show="state === 'balanced'" x-cloak class="inline-flex items-center gap-1.5 rounded-lg bg-emerald-50 px-3 py-1.5 text-xs font-semibold text-emerald-700">
                    <x-icon name="check-circle" class="h-4 w-4" /> {{ __('Balanced') }}
                </span>
                <span x-show="state === 'short'" x-cloak class="inline-flex items-center gap-1.5 rounded-lg bg-rose-50 px-3 py-1.5 text-xs font-semibold text-rose-700">
                    {{ __('Short') }} <span class="tabular-nums" x-text="'{{ $cur }} ' + Math.abs(diff).toFixed(2)"></span>
                </span>
                <span x-show="state === 'over'" x-cloak class="inline-flex items-center gap-1.5 rounded-lg bg-amber-50 px-3 py-1.5 text-xs font-semibold text-amber-700">
                    {{ __('Over') }} <span class="tabular-nums" x-text="'{{ $cur }} ' + Math.abs(diff).toFixed(2)"></span>
                </span>
            </div>
        </div>

        {{-- Where the difference came from. The two counts answer that between
             them, and it decides the fix: today's gap is usually an unrecorded
             expense or sale, an older one means the opening balance is wrong. --}}
        <template x-if="unanswered && carriedDiff !== null">
            <p class="-mt-1 text-right text-[11px] leading-relaxed text-slate-400">
                <span x-show="Math.abs(takingsDiff) >= 0.01"
                      x-text="'{{ __('From today') }} {{ $cur }} ' + Math.abs(takingsDiff).toFixed(2)"></span>
                <span x-show="Math.abs(takingsDiff) >= 0.01 && Math.abs(carriedDiff) >= 0.01"> · </span>
                <span x-show="Math.abs(carriedDiff) >= 0.01" class="text-slate-500"
                      x-text="'{{ __('Carried in from before today') }} {{ $cur }} ' + Math.abs(carriedDiff).toFixed(2)"></span>
            </p>
        </template>

        {{-- The day is out but the box totals correctly. Nothing is missing from
             the account, so there is nothing to record against today: the money
             that is wrong is the balance carried in. --}}
        <div x-show="state === 'balanced' && (takingsState === 'short' || takingsState === 'over')" x-cloak
             class="space-y-2.5 rounded-xl bg-amber-50/50 p-3">
            <p class="text-xs text-slate-500">
                {{ __('The box totals correctly but the day does not, so the balance carried in was wrong by the same amount. Correct the opening balance above, or give a reason.') }}
            </p>
            <input type="text" wire:model.blur="{{ $reasonModel }}"
                class="w-full rounded-lg border-amber-300 bg-white text-sm shadow-sm focus:border-amber-400 focus:ring-amber-400"
                placeholder="{{ __('Reason for the difference on the day') }}" />
            @error($reasonModel) <p class="text-xs text-rose-600">{{ $message }}</p> @enderror
        </div>

        {{-- Shortage resolution --}}
        <div x-show="state === 'short'" x-cloak class="space-y-2.5 rounded-xl bg-rose-50/50 p-3">
            <p class="text-xs text-slate-500">{{ __('Money is missing, record what it was spent on, or give a reason.') }}</p>
            <p x-show="Math.abs(carriedDiff ?? 0) >= 0.01" x-cloak class="text-xs text-slate-500">
                {{ __('Some of this was already there before today, open the expected figure above and correct the opening balance.') }}
            </p>
            <button type="button" wire:click="openFix('{{ $bucket }}', 'expense')"
                class="inline-flex items-center gap-1.5 rounded-lg border border-rose-200 bg-white px-2.5 py-1.5 text-xs font-semibold text-rose-700 hover:bg-rose-100">
                <x-icon name="receipt-percent" class="h-3.5 w-3.5" /> {{ __('Record expense') }}
            </button>
            <input type="text" wire:model.blur="{{ $reasonModel }}"
                class="w-full rounded-lg border-amber-300 bg-white text-sm shadow-sm focus:border-amber-400 focus:ring-amber-400"
                placeholder="{{ __('…or reason for the shortage') }}" />
            @error($reasonModel) <p class="text-xs text-rose-600">{{ $message }}</p> @enderror
        </div>

        {{-- Surplus resolution --}}
        <div x-show="state === 'over'" x-cloak class="space-y-2.5 rounded-xl bg-amber-50/50 p-3">
            <p class="text-xs text-slate-500">{{ __('Extra cash on hand, record where it came from, or give a reason.') }}</p>
            <div class="flex flex-wrap gap-2">
                <button type="button" wire:click="openFix('{{ $bucket }}', 'payment')"
                    class="inline-flex items-center gap-1.5 rounded-lg border border-emerald-200 bg-white px-2.5 py-1.5 text-xs font-semibold text-emerald-700 hover:bg-emerald-100">
                    <x-icon name="document-currency-dollar" class="h-3.5 w-3.5" /> {{ __('Invoice payment') }}
                </button>
                <button type="button" wire:click="openFix('{{ $bucket }}', 'income')"
                    class="inline-flex items-center gap-1.5 rounded-lg border border-emerald-200 bg-white px-2.5 py-1.5 text-xs font-semibold text-emerald-700 hover:bg-emerald-100">
                    <x-icon name="plus" class="h-3.5 w-3.5" /> {{ __('Other cash-in') }}
                </button>
            </div>
            <input type="text" wire:model.blur="{{ $reasonModel }}"
                class="w-full rounded-lg border-amber-300 bg-white text-sm shadow-sm focus:border-amber-400 focus:ring-amber-400"
                placeholder="{{ __('…or reason for the surplus') }}" />
            @error($reasonModel) <p class="text-xs text-rose-600">{{ $message }}</p> @enderror
        </div>

        {{-- Sweep: move the counted cash, or leave it. Shown once a figure is
             entered, and never while correcting a day already recorded, the money
             was swept (or not) when it was first counted. --}}
        <div @if ($correcting ?? false) x-show="false" @else x-show="state !== 'idle'" @endif x-cloak class="border-t border-slate-100 pt-3"
             x-data="{ move: false }">
            <label class="flex items-center gap-2 text-xs font-medium text-slate-600">
                <input type="checkbox" x-model="move" class="rounded border-slate-300 text-accent-600 focus:ring-accent-400" />
                {{ __('Move this money to another account') }}
            </label>
            <div x-show="move" x-cloak class="mt-2 grid grid-cols-2 gap-2">
                <select wire:model="{{ $sweepToModel }}" class="rounded-lg border-slate-300 text-sm shadow-sm focus:border-accent-400 focus:ring-accent-400">
                    <option value="">{{ __('Choose account…') }}</option>
                    @foreach ($sweepTargets as $t)
                        @if ($t->id !== $account->id)
                            <option value="{{ $t->id }}">{{ $t->name }} · {{ $t->currency_code }}</option>
                        @endif
                    @endforeach
                </select>
                <input type="number" step="0.01" wire:model="{{ $sweepAmountModel }}"
                    class="rounded-lg border-slate-300 text-right text-sm shadow-sm focus:border-accent-400 focus:ring-accent-400"
                    placeholder="{{ __('Amount') }}" />
            </div>
            <p x-show="! move" x-cloak class="mt-1 text-xs text-slate-400">{{ __('Otherwise it stays in this account.') }}</p>
            @error($sweepToModel) <p class="mt-1 text-xs text-rose-600">{{ $message }}</p> @enderror
            @error($sweepAmountModel) <p class="mt-1 text-xs text-rose-600">{{ $message }}</p> @enderror
        </div>
    </div>
</div>