@php
    // Difference tone for the KPI card + summary ring. Both counts have a say:
    // the day's takings being out is a difference even when the drawer totals.
    $diff = (float) ($summary['difference'] ?? 0);
    $takingsDiff = (float) ($summary['takingsDifference'] ?? 0);
    if (! ($summary['anyDeclared'] ?? false)) {
        $diffColor = '#cbd5e1'; $diffText = 'text-slate-400';
    } elseif (abs($diff) < 0.01) {
        $diffColor = '#10b981'; $diffText = 'text-emerald-600';
    } else {
        $diffColor = '#f59e0b'; $diffText = 'text-amber-600';
    }
    $takingsText = ! ($summary['anyDeclared'] ?? false)
        ? 'text-slate-400'
        : (abs($takingsDiff) < 0.01 ? 'text-emerald-600' : 'text-amber-600');
@endphp
<div class="px-4 py-8 sm:px-6 lg:px-8" x-data="{ clockGate: false, clockedIn: @js($isClockedIn) }">
    <div class="mx-auto max-w-7xl space-y-6">

        {{-- Header --}}
        <x-page-header :title="__('End-of-day Cash-up')"
            :subtitle="__('Count the cash box and EcoCash, and let the system check it against what should be on hand.')">
            <div class="flex items-end gap-2">
                <div>
                    <label class="block text-[11px] font-medium uppercase tracking-wider text-slate-400">{{ __('Business date') }}</label>
                    <input type="date" wire:model.live="business_date" max="{{ now()->toDateString() }}"
                        class="mt-1 rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
                    @error('business_date') <p class="mt-1 text-xs text-rose-600">{{ $message }}</p> @enderror
                </div>
                <a href="#recent-cashups"
                   class="inline-flex items-center gap-1.5 rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm font-medium text-slate-600 shadow-sm transition hover:bg-slate-50">
                    <x-icon name="clock" class="h-4 w-4" /> {{ __('History') }}
                </a>
            </div>
        </x-page-header>

        {{-- Needs your attention: differences sent back to me, and (for a
             director) other days' differences still waiting on a decision.
             One slim strip, the detail lives in a dialog so the count itself
             stays at the top of the page. --}}
        @php
            $hasReviews = $canReview && $pendingApprovals->isNotEmpty();
            $awaitingMe = $hasReviews ? $pendingApprovals->where('reason_status', 'pending')->count() : 0;
            $sentBack = $hasReviews ? $pendingApprovals->where('reason_status', 'queried')->count() : 0;
        @endphp
        @if ($myQueries->isNotEmpty() || $hasReviews)
            <div class="flex flex-col gap-2 sm:flex-row sm:flex-wrap">
                @if ($myQueries->isNotEmpty())
                    <button type="button" wire:click="openAttention('queries')"
                        class="group flex flex-1 items-center gap-3 rounded-2xl border border-sky-200/80 bg-sky-50/60 px-4 py-3 text-left shadow-sm transition hover:border-sky-300 hover:bg-sky-50">
                        <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl text-white shadow-sm" style="background: linear-gradient(135deg, #0ea5e9, #0ea5e9bb)">
                            <x-icon name="chat-bubble-left-right" class="h-5 w-5" />
                        </span>
                        <span class="min-w-0 flex-1">
                            <span class="block text-sm font-semibold text-slate-900">{{ __('Sent back to you') }}</span>
                            <span class="block truncate text-xs text-slate-500">{{ __('Nothing has been charged to you. Fix what is wrong, then send it back.') }}</span>
                        </span>
                        <x-badge color="sky">{{ $myQueries->count() }} {{ __('to answer') }}</x-badge>
                        <x-icon name="chevron-right" class="h-4 w-4 shrink-0 text-slate-400 transition group-hover:translate-x-0.5 group-hover:text-slate-600" />
                    </button>
                @endif

                @if ($hasReviews)
                    <button type="button" wire:click="openAttention('reviews')"
                        class="group flex flex-1 items-center gap-3 rounded-2xl border border-amber-200/80 bg-amber-50/60 px-4 py-3 text-left shadow-sm transition hover:border-amber-300 hover:bg-amber-50">
                        <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl text-white shadow-sm" style="background: linear-gradient(135deg, #f59e0b, #f59e0bbb)">
                            <x-icon name="exclamation-triangle" class="h-5 w-5" />
                        </span>
                        <span class="min-w-0 flex-1">
                            <span class="block text-sm font-semibold text-slate-900">{{ __('Differences from other days') }}</span>
                            <span class="block truncate text-xs text-slate-500">{{ __('Still waiting on you. The day on screen is decided on the record itself.') }}</span>
                        </span>
                        <span class="flex shrink-0 items-center gap-1.5">
                            @if ($awaitingMe)
                                <x-badge color="amber">{{ $awaitingMe }} {{ __('pending') }}</x-badge>
                            @endif
                            @if ($sentBack)
                                <x-badge color="sky">{{ $sentBack }} {{ __('sent back') }}</x-badge>
                            @endif
                        </span>
                        <x-icon name="chevron-right" class="h-4 w-4 shrink-0 text-slate-400 transition group-hover:translate-x-0.5 group-hover:text-slate-600" />
                    </button>
                @endif
            </div>
        @endif

        @if ($existing)
            @include('livewire.treasury.partials.cash-up-summary', ['existing' => $existing, 'baseCode' => $baseCode])
        @elseif (! $cashAccount && ! $mobileAccount)
            <x-card class="p-6">
                <x-empty-state icon="banknotes"
                    :title="__('No cash or mobile-money accounts to count')"
                    :message="__('Add a cash box or EcoCash account in Treasury first, then come back to cash up.')"
                    class="border-0" />
            </x-card>
        @else
            {{-- KPI cards, Treasury card layout: a trio per account (opening /
                 received / value on hand today), each with a "vs yesterday" delta. --}}
            <section class="no-scrollbar -mx-1 flex snap-x gap-5 overflow-x-auto px-1 py-1">
                @foreach ($kpiCards 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
                    @php
                        // A card only earns a hover when there is something to
                        // itemise: the opening cards carry a single carried-over
                        // figure and have nothing to break down.
                        $cur = $kpi['currency'];
                        $hasPop = ! empty($kpi['items']);
                        $popTotal = $kpi['metric'] === 'expected'
                            ? round((float) $kpi['opening'] + (float) $kpi['inflow'] - (float) $kpi['outflow'], 2)
                            : (float) $kpi['inflow'];
                    @endphp
                    <x-card class="group relative flex shrink-0 basis-0 grow snap-start flex-col p-5 ring-slate-200/70 transition hover:-translate-y-0.5 hover:shadow-lg hover:shadow-slate-300/40" style="min-width: 200px;"
                        tabindex="{{ $hasPop ? '0' : '-1' }}"
                        x-data="{
                            open: false,
                            style: '',
                            hasPop: {{ $hasPop ? 'true' : 'false' }},
                            place() {
                                const r = $el.getBoundingClientRect();
                                const w = Math.min(320, window.innerWidth - 24);
                                let left = r.left + r.width / 2 - w / 2;
                                left = Math.max(12, Math.min(left, window.innerWidth - w - 12));
                                // Flip above the card when there is not enough room
                                // beneath it, so the panel is never cut off at the
                                // bottom of a phone screen.
                                const below = window.innerHeight - r.bottom;
                                const top = below > 260 ? r.bottom + 8 : Math.max(12, r.top - 268);
                                this.style = `left:${left}px; top:${top}px; width:${w}px;`;
                            },
                            show() { if (! this.hasPop) return; this.place(); this.open = true; },
                        }"
                        x-on:mouseenter="show()" x-on:mouseleave="open = false"
                        x-on:focus="show()" x-on:blur="open = false"
                        x-on:click="open ? open = false : show()"
                        x-on:keydown.escape="open = false">
                        <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 tabular-nums {{ (float) $kpi['value'] < 0 ? 'text-rose-600' : 'text-slate-900' }}" style="font-size: 19px;">
                            {{ $baseCode }} {{ number_format((float) $kpi['value'], 2) }}
                        </p>
                        <div class="mt-2.5 flex items-center gap-1.5">
                            <span class="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 yesterday') }}
                                @else
                                    {{ __('No prior day') }}
                                @endif
                            </span>
                            @if ($hasPop)
                                <x-icon name="information-circle" class="h-3.5 w-3.5 shrink-0 text-slate-300 transition group-hover:text-slate-400" />
                            @endif
                        </div>

                        @if ($hasPop)
                            {{-- Teleported: the card strip scrolls horizontally, so a
                                 panel positioned inside it would be clipped by that
                                 overflow. Fixed to the viewport off the body instead. --}}
                            <template x-teleport="body">
                                <div x-show="open" x-cloak x-transition.opacity.duration.100ms
                                     class="fixed z-50 rounded-xl bg-slate-900 p-3 text-xs text-white shadow-xl ring-1 ring-black/10"
                                     :style="style"
                                     x-on:mouseenter="open = true" x-on:mouseleave="open = false">
                                    <p class="mb-2 text-[10px] font-semibold uppercase tracking-wider text-slate-400">
                                        {{ $kpi['metric'] === 'expected' ? __('How this total is made up') : __('What came in today') }}
                                    </p>
                                    <div class="space-y-1.5">
                                        @if ($kpi['metric'] === 'expected')
                                            <div class="flex items-baseline justify-between gap-3">
                                                <span class="text-slate-400">{{ __('Opening (carried over)') }}</span>
                                                <span class="shrink-0 tabular-nums text-slate-300">{{ $cur }} {{ number_format((float) $kpi['opening'], 2) }}</span>
                                            </div>
                                        @endif
                                        @foreach ($kpi['items'] as $item)
                                            <div class="flex items-baseline justify-between gap-3">
                                                <span class="text-slate-300">{{ $item['label'] }}</span>
                                                <span class="shrink-0 tabular-nums font-medium {{ $item['direction'] === 'in' ? 'text-emerald-400' : 'text-rose-400' }}">
                                                    {{ $item['direction'] === 'in' ? '+' : '−' }} {{ $cur }} {{ number_format((float) $item['amount'], 2) }}
                                                </span>
                                            </div>
                                        @endforeach
                                    </div>
                                    <div class="mt-2 flex items-baseline justify-between gap-3 border-t border-white/10 pt-2 font-semibold">
                                        <span>{{ $kpi['metric'] === 'expected' ? __('In the account now, in total') : __('Total in') }}</span>
                                        <span class="shrink-0 tabular-nums {{ $popTotal < 0 ? 'text-rose-400' : '' }}">{{ $cur }} {{ number_format($popTotal, 2) }}</span>
                                    </div>
                                    @if ($kpi['metric'] === 'expected' && $popTotal < 0)
                                        <p class="mt-2 rounded-lg bg-rose-500/15 px-2 py-1.5 text-[11px] text-rose-200">
                                            {{ __('More went out than the account held. Check the amounts, or whether something was booked to the wrong account.') }}
                                        </p>
                                    @endif
                                </div>
                            </template>
                        @endif
                    </x-card>
                @endforeach
            </section>

            {{-- Reconciliation form. When the user isn't clocked in a transparent
                 overlay lets them read the figures but intercepts any interaction,
                 popping the "clock in first" dialog instead. --}}
            <div class="relative">
                @unless ($isClockedIn)
                    <div class="absolute inset-0 z-20 rounded-2xl" style="cursor: not-allowed;"
                         @click="clockGate = true" title="{{ __('Clock in to cash up') }}"></div>
                @endunless

                @php
                    $countedPct = ($summary['accountCount'] ?? 0) > 0
                        ? (int) round(($summary['declaredCount'] / $summary['accountCount']) * 100) : 0;
                @endphp
                <form wire:submit="submit" class="grid gap-5 lg:grid-cols-3" @unless ($isClockedIn) aria-hidden="true" @endunless>
                    {{-- Left: buckets, then notes --}}
                    <div class="space-y-5 lg:col-span-2">
                        {{-- Both figures are asked for, not one or the other: today's
                             takings say what this shift produced, the drawer total says
                             what is actually there. The drawer settles the books; the
                             takings figure says how much of any gap happened today. --}}
                        <div class="rounded-2xl border border-slate-200 bg-white px-5 py-4 shadow-sm">
                            <p class="text-sm font-semibold text-slate-900">{{ __('Count twice, once for the shift and once for the box') }}</p>
                            <p class="mt-0.5 text-xs text-slate-500">
                                {{ __('Enter what came in today and what is in each account in total. The total is what has to agree with the books; the takings figure shows whether a difference happened today or was already there.') }}
                            </p>
                        </div>

                        <div class="grid gap-5 sm:grid-cols-2">
                            @if ($cashAccount)
                                @include('livewire.treasury.partials.cash-up-bucket', [
                                    'bucket' => 'cash', 'title' => __('Cash box'), 'icon' => 'banknotes', 'accent' => 'emerald',
                                    'account' => $cashAccount, 'accounts' => $cashAccounts, 'data' => $cash,
                                    'accountModel' => 'cashAccountId', 'declaredModel' => 'declaredCash', 'reasonModel' => 'reasonCash',
                                    'takingsModel' => 'takingsCash',
                                    'sweepToModel' => 'sweepCashTo', 'sweepAmountModel' => 'sweepCashAmount', 'sweepTargets' => $sweepTargets,
                                    'openingOkModel' => 'openingOkCash', 'openingActualModel' => 'openingActualCash',
                                ])
                            @endif

                            @if ($mobileAccount)
                                @include('livewire.treasury.partials.cash-up-bucket', [
                                    'bucket' => 'mobile', 'title' => __('EcoCash'), 'icon' => 'credit-card', 'accent' => 'sky',
                                    'account' => $mobileAccount, 'accounts' => $mobileAccounts, 'data' => $mobile,
                                    'accountModel' => 'mobileAccountId', 'declaredModel' => 'declaredMobile', 'reasonModel' => 'reasonMobile',
                                    'takingsModel' => 'takingsMobile',
                                    'sweepToModel' => 'sweepMobileTo', 'sweepAmountModel' => 'sweepMobileAmount', 'sweepTargets' => $sweepTargets,
                                    'openingOkModel' => 'openingOkMobile', 'openingActualModel' => 'openingActualMobile',
                                ])
                            @endif
                        </div>

                        {{-- Notes --}}
                        <x-card class="p-5">
                            <label class="block text-xs font-medium text-slate-500">{{ __('Notes (optional)') }}</label>
                            <textarea wire:model="notes" rows="3"
                                class="mt-1 w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
                                placeholder="{{ __('Add any notes or explanations for today\'s cash-up…') }}"></textarea>
                        </x-card>
                    </div>

                    {{-- Right: summary, then submit --}}
                    <div class="space-y-5">
                        <x-card class="p-5">
                            <p class="text-sm font-semibold text-slate-900">{{ __('Cash-up Summary') }}</p>

                            <dl class="mt-4 space-y-3 text-sm">
                                <div class="flex items-center justify-between">
                                    <dt class="text-slate-500">{{ __('Expected total') }}</dt>
                                    <dd class="tabular-nums font-medium text-slate-900">{{ $baseCode }} {{ number_format((float) $summary['expected'], 2) }}</dd>
                                </div>
                                <div class="flex items-center justify-between">
                                    <dt class="text-slate-500">{{ __('Counted total') }}</dt>
                                    <dd class="tabular-nums font-medium text-slate-900">{{ $baseCode }} {{ number_format((float) $summary['declared'], 2) }}</dd>
                                </div>
                                <div class="flex items-center justify-between border-t border-slate-100 pt-3">
                                    <dt class="font-semibold text-slate-700">{{ __('Difference in total') }}</dt>
                                    <dd class="text-base font-bold tabular-nums {{ $diffText }}">{{ $baseCode }} {{ number_format($diff, 2) }}</dd>
                                </div>
                                <div class="flex items-center justify-between">
                                    <dt class="font-semibold text-slate-700">{{ __('Difference on the day') }}</dt>
                                    <dd class="text-base font-bold tabular-nums {{ $takingsText }}">{{ $baseCode }} {{ number_format($takingsDiff, 2) }}</dd>
                                </div>
                            </dl>

                            {{-- Status box --}}
                            <div class="mt-4">
                                @if (! $summary['anyDeclared'])
                                    <div class="flex items-center gap-2.5 rounded-xl bg-amber-50 px-4 py-3 text-sm">
                                        <x-icon name="clock" class="h-5 w-5 shrink-0 text-amber-500" />
                                        <div>
                                            <p class="font-semibold text-amber-800">{{ __('Awaiting count') }}</p>
                                            <p class="text-xs text-amber-700">{{ __('Enter the actual amounts for both accounts.') }}</p>
                                        </div>
                                    </div>
                                @elseif ($summary['balanced'])
                                    <div class="flex items-center gap-2.5 rounded-xl bg-emerald-50 px-4 py-3 text-sm">
                                        <x-icon name="check-circle" class="h-5 w-5 shrink-0 text-emerald-600" />
                                        <div>
                                            <p class="font-semibold text-emerald-700">{{ __('Ready to submit') }}</p>
                                            <p class="text-xs text-emerald-600">{{ __('Everything is balanced.') }}</p>
                                        </div>
                                    </div>
                                @else
                                    <div class="flex items-center gap-2.5 rounded-xl bg-amber-50 px-4 py-3 text-sm">
                                        <x-icon name="exclamation-triangle" class="h-5 w-5 shrink-0 text-amber-600" />
                                        <div>
                                            <p class="font-semibold text-amber-700">{{ __('Needs attention') }}</p>
                                            <p class="text-xs text-amber-600">
                                                @if (abs($diff) >= 0.01 && abs($takingsDiff) >= 0.01)
                                                    {{ __('Neither the day nor the total balances. Give a reason for each, or record what is missing.') }}
                                                @elseif (abs($diff) >= 0.01)
                                                    {{ __('The total does not balance. Give a reason or record a transaction.') }}
                                                @elseif (abs($takingsDiff) >= 0.01)
                                                    {{ __('The total balances but the day does not, so the opening balance is out by the same amount.') }}
                                                @else
                                                    {{ __('Both figures are needed for every account before this can be submitted.') }}
                                                @endif
                                            </p>
                                        </div>
                                    </div>
                                @endif
                            </div>

                            {{-- Progress --}}
                            <div class="mt-4">
                                <div class="flex items-center justify-between text-xs">
                                    <span class="text-slate-500">{{ __(':done of :total accounts counted', ['done' => $summary['declaredCount'], 'total' => $summary['accountCount']]) }}</span>
                                    <span class="font-semibold text-slate-500">{{ $countedPct }}%</span>
                                </div>
                                <div class="mt-1.5 h-1.5 w-full overflow-hidden rounded-full bg-slate-100">
                                    <div class="h-full rounded-full bg-indigo-500 transition-all" style="width: {{ $countedPct }}%;"></div>
                                </div>
                            </div>

                            {{-- Helpful links --}}
                            <div class="mt-5 border-t border-slate-100 pt-4" x-data="{ guide: false }">
                                <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Helpful links') }}</p>
                                <a href="{{ route('treasury.index') }}"
                                   class="mt-2 flex items-center justify-between gap-2 rounded-lg px-1 py-1.5 text-sm text-slate-600 hover:text-indigo-600">
                                    <span class="flex items-center gap-2"><x-icon name="queue-list" class="h-4 w-4 text-slate-400" /> {{ __('View today\'s transactions') }}</span>
                                    <x-icon name="arrow-up-right" class="h-4 w-4 text-slate-300" />
                                </a>
                                <button type="button" @click="guide = ! guide"
                                   class="flex w-full items-center justify-between gap-2 rounded-lg px-1 py-1.5 text-left text-sm text-slate-600 hover:text-indigo-600">
                                    <span class="flex items-center gap-2"><x-icon name="sparkles" class="h-4 w-4 text-slate-400" /> {{ __('Cash-up guidelines') }}</span>
                                    <x-icon name="chevron-down" class="h-4 w-4 text-slate-300" ::class="guide && 'rotate-180'" />
                                </button>
                                <div x-show="guide" x-cloak class="mt-1 rounded-xl bg-slate-50 px-3 py-3 text-xs leading-relaxed text-slate-500">
                                    <ol class="list-decimal space-y-1 pl-4">
                                        <li>{{ __('Count the physical cash and check your EcoCash balance.') }}</li>
                                        <li>{{ __('Enter each total under “Actual amount (counted)”.') }}</li>
                                        <li>{{ __('If short, record the expense it was spent on. If over, record the missed payment or other cash-in.') }}</li>
                                        <li>{{ __('Anything left unexplained needs a reason, a director signs it off at the weekly review.') }}</li>
                                        <li>{{ __('Optionally move the cash to another account, then submit.') }}</li>
                                    </ol>
                                </div>
                            </div>
                        </x-card>

                        {{-- Submit --}}
                        <div>
                            <button type="submit"
                                class="flex w-full items-center justify-center gap-2 rounded-2xl bg-slate-900 px-5 py-4 text-sm font-semibold text-white shadow-sm transition hover:bg-slate-800 disabled:opacity-60"
                                wire:loading.attr="disabled" wire:target="submit">
                                <x-icon name="shield-check" class="h-5 w-5" />
                                <span wire:loading.remove wire:target="submit">{{ __('Review & Submit Cash-up') }}</span>
                                <span wire:loading wire:target="submit">{{ __('Saving…') }}</span>
                            </button>
                            <p class="mt-2 text-center text-xs text-slate-400">
                                @if (! $summary['allDeclared'])
                                    {{ __('Enter counts for both accounts to continue.') }}
                                @elseif ($summary['balanced'])
                                    {{ __('Everything balances, ready to submit.') }}
                                @else
                                    {{ __('Explain any differences, then submit.') }}
                                @endif
                            </p>
                        </div>
                    </div>
                </form>
            </div>
        @endif

        {{-- History --}}
        <div id="recent-cashups" class="space-y-4">
            <h2 class="text-sm font-semibold text-slate-700">{{ __('Recent cash-ups') }}</h2>

            <x-card>
                {{-- Filter toolbar --}}
                <div class="flex flex-col gap-3 border-b border-slate-100 p-4 sm:p-5">
                    <div class="flex flex-col gap-2 sm:flex-row sm:flex-wrap sm:items-center">
                        <x-date-range-filter preset="historyPreset" from="historyFrom" to="historyTo"
                            :current="$historyPreset" :options="$datePresets" />

                        <select wire:model.live="fltStatus" 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">{{ __('All statuses') }}</option>
                            <option value="balanced">{{ __('Balanced') }}</option>
                            <option value="variance">{{ __('Variance') }}</option>
                        </select>

                        <select wire:model.live="fltApproval" 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">{{ __('All approvals') }}</option>
                            <option value="pending">{{ __('Pending') }}</option>
                            <option value="queried">{{ __('Sent back') }}</option>
                            <option value="approved">{{ __('Approved') }}</option>
                            <option value="rejected">{{ __('Rejected') }}</option>
                        </select>

                        @if ($performers->count() > 1)
                            <select wire:model.live="fltPerformer" 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="">{{ __('Anyone') }}</option>
                                @foreach ($performers as $p)
                                    <option value="{{ $p->id }}">{{ $p->name }}</option>
                                @endforeach
                            </select>
                        @endif

                        <button type="button" wire:click="resetFilters"
                            class="inline-flex items-center gap-1.5 rounded-xl border border-slate-200 px-3 py-2 text-sm font-medium text-slate-500 transition hover:bg-slate-50 sm:ml-auto">
                            <x-icon name="arrow-path" class="h-4 w-4" /> {{ __('Reset') }}
                        </button>
                    </div>
                </div>

                @if ($history->isEmpty())
                    <div class="p-6">
                        <x-empty-state icon="document-text" :title="__('No cash-ups match these filters')"
                            :message="__('Try widening the date range or clearing the filters.')" class="border-0" />
                    </div>
                @else
                    <div class="overflow-x-auto">
                        <table class="w-full text-sm">
                            {{-- Two-tier header: each account gets a "day" and a "total" column,
                                 mirroring the two counts the cashier enters. A difference shows
                                 as a small figure under the count in the cell it belongs to. --}}
                            <thead class="text-xs uppercase tracking-wider text-slate-500">
                                <tr class="bg-slate-50/80">
                                    <th rowspan="2" class="px-3 lg:px-4 py-3 text-left align-bottom font-semibold">{{ __('Date') }}</th>
                                    <th colspan="2" class="border-l border-slate-200/80 px-3 lg:px-4 pt-3 pb-1 text-center font-semibold text-slate-700">
                                        <span class="inline-flex items-center gap-1.5"><x-icon name="banknotes" class="h-3.5 w-3.5 text-emerald-500" /> {{ __('Cash') }}</span>
                                    </th>
                                    <th colspan="2" class="border-l border-slate-200/80 px-3 lg:px-4 pt-3 pb-1 text-center font-semibold text-slate-700">
                                        <span class="inline-flex items-center gap-1.5"><x-icon name="credit-card" class="h-3.5 w-3.5 text-sky-500" /> {{ __('EcoCash') }}</span>
                                    </th>
                                    <th rowspan="2" class="border-l border-slate-200/80 px-3 lg:px-4 py-3 text-center align-bottom font-semibold">{{ __('Status') }}</th>
                                    <th rowspan="2" class="px-3 lg:px-4 py-3 text-center align-bottom font-semibold">{{ __('Approval') }}</th>
                                    <th rowspan="2" class="px-3 lg:px-4 py-3 text-left align-bottom font-semibold">{{ __('By') }}</th>
                                    <th rowspan="2" class="px-3 lg:px-4 py-3 text-right align-bottom font-semibold">{{ __('Actions') }}</th>
                                </tr>
                                {{-- Same words as the count itself, so a row reads
                                     as the two figures the cashier actually entered. --}}
                                <tr class="bg-slate-50/80 text-[10px] font-medium tracking-wide text-slate-400">
                                    <th class="whitespace-nowrap border-l border-slate-200/80 px-3 lg:px-4 pb-2.5 text-right">{{ __('Came in') }}</th>
                                    <th class="whitespace-nowrap px-3 lg:px-4 pb-2.5 text-right">{{ __('In total') }}</th>
                                    <th class="whitespace-nowrap border-l border-slate-200/80 px-3 lg:px-4 pb-2.5 text-right">{{ __('Came in') }}</th>
                                    <th class="whitespace-nowrap px-3 lg:px-4 pb-2.5 text-right">{{ __('In total') }}</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-slate-100">
                                @foreach ($history as $row)
                                    @php
                                        $cashLine = $row->lines->first(fn ($l) => $l->account?->type === 'cash');
                                        $mobileLine = $row->lines->first(fn ($l) => $l->account?->type === 'mobile_money');
                                        $approvalState = null;
                                        if ($row->has_variance) {
                                            $statuses = $row->lines->pluck('reason_status')->filter();
                                            // Most-open state wins: still with the cashier, then still
                                            // with the director, then whatever was actually decided.
                                            $approvalState = $statuses->contains('queried') ? 'queried'
                                                : ($statuses->contains('pending') ? 'pending'
                                                    : ($statuses->contains('rejected') ? 'rejected'
                                                        : ($statuses->isNotEmpty() ? 'approved' : null)));
                                        }
                                    @endphp
                                    <tr class="transition-colors hover:bg-slate-50/70">
                                        <td class="px-3 lg:px-4 py-3.5 align-top font-medium text-slate-800">{{ $row->business_date->format('d M Y') }}</td>
                                        <td class="border-l border-slate-100 px-3 lg:px-4 py-3.5 text-right align-top">
                                            <x-cash-up-figure :amount="$cashLine?->counted_takings" :variance="$cashLine?->takings_variance"
                                                :legacy="(bool) $cashLine?->takings_is_legacy_basis" />
                                        </td>
                                        <td class="px-3 lg:px-4 py-3.5 text-right align-top">
                                            <x-cash-up-figure :amount="$cashLine?->counted_amount" :variance="$cashLine?->variance" />
                                        </td>
                                        <td class="border-l border-slate-100 px-3 lg:px-4 py-3.5 text-right align-top">
                                            <x-cash-up-figure :amount="$mobileLine?->counted_takings" :variance="$mobileLine?->takings_variance"
                                                :legacy="(bool) $mobileLine?->takings_is_legacy_basis" />
                                        </td>
                                        <td class="px-3 lg:px-4 py-3.5 text-right align-top">
                                            <x-cash-up-figure :amount="$mobileLine?->counted_amount" :variance="$mobileLine?->variance" />
                                        </td>
                                        <td class="border-l border-slate-100 px-3 lg:px-4 py-3.5 text-center">
                                            @if ($row->has_variance)
                                                <x-badge color="amber">{{ __('Variance') }} ({{ $row->variance_lines_count }})</x-badge>
                                            @else
                                                <x-badge color="emerald">{{ __('Balanced') }}</x-badge>
                                            @endif
                                        </td>
                                        <td class="px-3 lg:px-4 py-3.5 text-center">
                                            @switch($approvalState)
                                                @case('pending') <x-badge color="amber">{{ __('Pending') }}</x-badge> @break
                                                @case('queried') <x-badge color="sky">{{ __('Sent back') }}</x-badge> @break
                                                @case('approved') <x-badge color="emerald">{{ __('Approved') }}</x-badge> @break
                                                @case('rejected') <x-badge color="rose">{{ __('Rejected') }}</x-badge> @break
                                                @default <span class="text-slate-300">—</span>
                                            @endswitch
                                        </td>
                                        <td class="px-3 lg:px-4 py-3.5 text-slate-600">{{ $row->performer?->name ?? '—' }}</td>
                                        <td class="px-3 lg:px-4 py-3.5 text-right">
                                            <button type="button" wire:click="$set('business_date', '{{ $row->business_date->format('Y-m-d') }}')"
                                                class="inline-flex items-center gap-1 text-xs font-semibold text-indigo-600 hover:text-indigo-700">
                                                <x-icon name="eye" class="h-3.5 w-3.5" /> {{ __('View') }}
                                            </button>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    @php
                        // Only explain the mark when a row on this page carries it,
                        // so the note retires itself once the old rows scroll out.
                        $hasLegacy = $history->contains(fn ($r) => $r->lines->contains->takings_is_legacy_basis);
                    @endphp
                    <div class="space-y-3 border-t border-slate-100 px-4 py-3 sm:px-6">
                        @if ($hasLegacy)
                            <p class="text-xs text-slate-400">
                                <span class="font-semibold">†</span>
                                {{ __('Counted before the day figure meant money in. On those rows it is the day\'s net, after what was paid out or moved on, and the difference beside it was decided on that basis.') }}
                            </p>
                        @endif
                        {{ $history->links() }}
                    </div>
                @endif
            </x-card>
        </div>
    </div>

    {{-- Attention dialog: the list behind whichever strip was clicked. Closes
         itself once the list is empty (last query answered, last difference
         decided). Deliberately not x-trap'd: the quick-fix overlay it opens
         lives outside it and must stay clickable. --}}
    @php
        $attentionOpen = ($attention === 'queries' && $myQueries->isNotEmpty())
            || ($attention === 'reviews' && $hasReviews);
    @endphp
    @if ($attentionOpen)
        <div class="fixed inset-0 z-50 overflow-y-auto px-4 py-6 sm:px-6" x-data
             x-on:keydown.escape.window="$wire.closeAttention()">
            <div class="fixed inset-0 bg-slate-900/50 backdrop-blur-sm" wire:click="closeAttention"></div>

            <div @class([
                'relative mx-auto my-4 w-full overflow-hidden rounded-2xl bg-white shadow-2xl ring-1 ring-slate-200 sm:my-10',
                'max-w-3xl' => $attention === 'queries',
                'max-w-5xl' => $attention === 'reviews',
            ])>
                <div @class([
                    'flex items-center justify-between gap-3 border-b px-5 py-4',
                    'border-sky-100 bg-sky-50/60' => $attention === 'queries',
                    'border-amber-100 bg-amber-50/60' => $attention === 'reviews',
                ])>
                    <div class="flex items-center gap-2.5">
                        @if ($attention === 'queries')
                            <span class="flex h-9 w-9 items-center justify-center rounded-xl text-white shadow-sm" style="background: linear-gradient(135deg, #0ea5e9, #0ea5e9bb)">
                                <x-icon name="chat-bubble-left-right" class="h-5 w-5" />
                            </span>
                            <div>
                                <p class="text-sm font-semibold text-slate-900">{{ __('Sent back to you') }}</p>
                                <p class="text-xs text-slate-500">{{ __('Nothing has been charged to you. Fix what is wrong, then send it back.') }}</p>
                            </div>
                        @else
                            <span class="flex h-9 w-9 items-center justify-center rounded-xl text-white shadow-sm" style="background: linear-gradient(135deg, #f59e0b, #f59e0bbb)">
                                <x-icon name="exclamation-triangle" class="h-5 w-5" />
                            </span>
                            <div>
                                <p class="text-sm font-semibold text-slate-900">{{ __('Differences from other days') }}</p>
                                <p class="text-xs text-slate-500">{{ __('Still waiting on you. The day on screen is decided on the record itself.') }}</p>
                            </div>
                        @endif
                    </div>
                    <div class="flex items-center gap-2">
                        @if ($attention === 'queries')
                            <x-badge color="sky">{{ $myQueries->count() }} {{ __('to answer') }}</x-badge>
                        @else
                            @if ($awaitingMe)
                                <x-badge color="amber">{{ $awaitingMe }} {{ __('pending') }}</x-badge>
                            @endif
                            @if ($sentBack)
                                <x-badge color="sky">{{ $sentBack }} {{ __('sent back') }}</x-badge>
                            @endif
                        @endif
                        <button type="button" wire:click="closeAttention"
                            class="ml-1 rounded-lg p-1 text-slate-400 transition hover:bg-white/70 hover:text-slate-600">
                            <x-icon name="x-mark" class="h-5 w-5" />
                        </button>
                    </div>
                </div>

                <div class="max-h-[75vh] overflow-y-auto">
                    @if ($attention === 'queries')
                        @include('livewire.treasury.partials.cash-up-queries', [
                            'myQueries' => $myQueries, 'answering' => $answering, 'sweepTargets' => $sweepTargets,
                        ])
                    @else
                        @include('livewire.treasury.partials.cash-up-reviews')
                    @endif
                </div>
            </div>
        </div>
    @endif

    {{-- Quick-fix overlay, rendered for every state of the page: it is reached
         from a fresh count AND from a queried day re-opened inside the dialog
         above, so it cannot live in the fresh-count branch only. --}}
    @include('livewire.treasury.partials.cash-up-fix-modal', [
        'expenseCategories' => $expenseCategories,
        'incomeCategories' => $incomeCategories,
        'openInvoices' => $openInvoices,
    ])

    {{-- Clock-in gate dialog (pure Alpine, shown when a clocked-out user tries to act) --}}
    <div x-cloak x-show="clockGate" class="fixed inset-0 z-50 flex items-center justify-center p-4">
        <div class="fixed inset-0 bg-slate-900/50 backdrop-blur-sm" @click="clockGate = false"
             x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"></div>
        <div class="relative w-full max-w-sm rounded-2xl bg-white p-6 text-center shadow-2xl"
             x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100">
            <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-amber-100 text-amber-600">
                <x-icon name="clock" class="h-6 w-6" />
            </div>
            <h3 class="mt-4 text-base font-semibold text-slate-900">{{ __('Clock in first') }}</h3>
            <p class="mt-1.5 text-sm text-slate-500">
                {{ __('You need to be on the clock before cashing up. Use the clock button in the top bar to start your shift, then come back here.') }}
            </p>
            <button type="button" @click="clockGate = false"
                class="mt-5 inline-flex w-full items-center justify-center rounded-lg bg-slate-900 px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-slate-800">
                {{ __('Got it') }}
            </button>
        </div>
    </div>
</div>