@php
    /**
     * The disagreement table. Three money columns and one of them matters: the
     * difference between what was counted and what the books can account for.
     */
    $typeBadge = [
        'bank' => 'indigo', 'cash' => 'emerald', 'mobile_money' => 'sky',
        'director' => 'amber', 'other' => 'slate',
    ];

    $tz = config('app.display_timezone');

    $tabMeta = [
        'disputed' => ['label' => __('Disagreeing'), 'icon' => 'exclamation-triangle'],
        'all' => ['label' => __('All declared floats'), 'icon' => 'queue-list'],
    ];

    $metrics = [
        [
            'label' => __('Floats declared'),
            'value' => number_format($total),
            'icon' => 'wallet',
            'accent' => '#124a61',
            'sub' => __('Counted by their holder'),
        ],
        [
            'label' => __('In agreement'),
            'value' => number_format($agreed) . ' / ' . number_format($total),
            'icon' => 'check-circle',
            'accent' => $blocked ? '#0ea5e9' : '#10b981',
            'sub' => $blocked ? __('Books match the count') : __('Every account agrees'),
        ],
        [
            'label' => __('Disagreeing'),
            'value' => number_format($disputedCount),
            'icon' => 'exclamation-triangle',
            'accent' => $disputedCount > 0 ? '#f43f5e' : '#94a3b8',
            'sub' => $disputedCount > 0 ? __('Money is on hold') : __('Nothing outstanding'),
        ],
        [
            'label' => __('Unexplained gap'),
            'value' => $baseCode . ' ' . number_format($totalGap, 2),
            'icon' => 'scale-balance',
            'accent' => '#8b5cf6',
            'sub' => $totalGap >= 0 ? __('Counted more than the books hold') : __('Books hold more than was counted'),
        ],
        [
            'label' => __('Records replayed'),
            'value' => number_format($replayed),
            'icon' => 'arrows-right-left',
            'accent' => '#f59e0b',
            'sub' => __('Carried from the old workspace'),
        ],
    ];
@endphp

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

        <x-page-header :title="__('Reconciliation')"
            :subtitle="__('What the people holding the money counted, against what the books say after the old workspace\'s month was carried across.')">
            <a href="{{ route('treasury.punch_in') }}" wire:navigate>
                <x-secondary-button type="button">
                    <x-icon name="wallet" class="mr-1 h-4 w-4" />
                    {{ __('Float punch-in') }}
                </x-secondary-button>
            </a>
            <a href="{{ route('treasury.index') }}" wire:navigate>
                <x-secondary-button type="button">
                    <x-icon name="banknotes" class="mr-1 h-4 w-4" />
                    {{ __('Treasury') }}
                </x-secondary-button>
            </a>
        </x-page-header>

        {{-- What is being held, and why, before anybody wonders where the buttons went. --}}
        @if ($blocked)
            <x-card class="border-l-4 border-l-rose-400 p-5">
                <div class="flex items-start gap-3">
                    <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-rose-50 text-rose-600">
                        <x-icon name="exclamation-triangle" class="h-5 w-5" />
                    </span>
                    <div class="space-y-2 text-sm text-slate-600">
                        <p class="font-semibold text-slate-900">{{ __('Money is on hold') }}</p>
                        <p>{{ $explanation }}</p>
                        <p>
                            {{ __('Until every float agrees with the books, no payment, expense or transfer can be recorded. Quoting, invoicing and creating jobs are untouched: the work carries on, only the cash stands still.') }}
                        </p>
                        <p class="text-xs text-slate-400">
                            {{ __('Two ways out. If the count is right, accept it here and the difference goes to Opening Balances. If the count was wrong, the holder recounts on the punch-in page.') }}
                        </p>
                    </div>
                </div>
            </x-card>
        @endif

        <section class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-5">
            @foreach ($metrics as $m)
                <x-card class="group relative flex flex-col overflow-hidden p-5 ring-slate-200/70 transition hover:-translate-y-0.5 hover:shadow-lg hover:shadow-slate-300/40">
                    <div class="flex items-start justify-between gap-2">
                        <p class="truncate text-[11px] font-semibold uppercase tracking-wider text-slate-400" title="{{ $m['label'] }}">{{ $m['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, {{ $m['accent'] }}, {{ $m['accent'] }}bb)">
                            <x-icon :name="$m['icon']" class="h-4 w-4" />
                        </span>
                    </div>
                    <p class="mt-3 font-bold leading-none tracking-tight text-slate-900 tabular-nums" style="font-size: 19px;">{{ $m['value'] }}</p>
                    <span class="mt-2.5 inline-flex w-fit items-center gap-1 rounded-full bg-slate-100 px-2 py-1 text-[11px] font-semibold text-slate-500">
                        {{ $m['sub'] }}
                    </span>
                </x-card>
            @endforeach
        </section>

        <div class="flex flex-wrap items-center gap-1 rounded-xl border border-slate-200 bg-slate-50 p-1 text-sm font-medium">
            @foreach ($tabMeta as $key => $meta)
                <button type="button" wire:click="switchTab('{{ $key }}')"
                    class="flex items-center gap-1.5 rounded-lg px-3.5 py-1.5 transition {{ $tab === $key ? 'bg-white text-indigo-600 shadow-sm ring-1 ring-slate-200' : 'text-slate-500 hover:text-slate-700' }}">
                    <x-icon :name="$meta['icon']" class="h-4 w-4" />
                    {{ $meta['label'] }}
                    @if ($key === 'disputed' && $disputedCount > 0)
                        <span class="ml-0.5 rounded-full bg-rose-100 px-1.5 text-[10px] font-bold text-rose-700">{{ $disputedCount }}</span>
                    @endif
                </button>
            @endforeach
        </div>

        <x-card class="overflow-hidden">
            <div class="flex flex-col gap-3 border-b border-slate-100 p-4 sm:flex-row sm:items-center sm:justify-between sm:p-5">
                <div>
                    <h2 class="text-base font-semibold text-slate-900">{{ __('Declared against the books') }}</h2>
                    <p class="text-xs text-slate-400">
                        {{ __('The books are read as they stood at the cut-over, not as they stand today, so trading since then is not counted against the declaration. A positive difference means more was counted than the books can account for.') }}
                    </p>
                </div>
            </div>

            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-slate-100">
                    <thead>
                        <tr class="bg-slate-50/80 text-left text-[11px] font-semibold uppercase tracking-wider text-slate-500">
                            <th class="px-3 py-3.5 lg:px-4">{{ __('Account') }}</th>
                            <th class="px-3 py-3.5 lg:px-4">{{ __('Holder') }}</th>
                            <th class="px-3 py-3.5 text-right lg:px-4">{{ __('Declared') }}</th>
                            <th class="px-3 py-3.5 text-right lg:px-4">{{ __('Books say at cut-over') }}</th>
                            <th class="px-3 py-3.5 text-right lg:px-4">{{ __('Difference') }}</th>
                            <th class="px-3 py-3.5 lg:px-4">{{ __('Declared on') }}</th>
                            <th class="px-3 py-3.5 text-right lg:px-4">{{ __('Actions') }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 bg-white">
                        @forelse ($rows as $row)
                            @php
                                $account = $row['account'];
                                $gap = $row['difference'];
                            @endphp
                            <tr wire:key="recon-{{ $account->id }}" class="transition hover:bg-slate-50/70">
                                <td class="px-3 py-4 text-sm lg:px-4">
                                    <p class="font-medium text-slate-900">{{ $account->name }}</p>
                                    <span class="mt-1 inline-block">
                                        <x-badge :color="$typeBadge[$account->type] ?? 'slate'">
                                            {{ $types[$account->type]['label'] ?? $account->type }}
                                        </x-badge>
                                    </span>
                                </td>
                                <td class="px-3 py-4 text-sm text-slate-500 lg:px-4">{{ $account->holder?->name ?? __('Unassigned') }}</td>
                                <td class="whitespace-nowrap px-3 py-4 text-right text-sm font-semibold tabular-nums text-slate-900 lg:px-4">
                                    {{ $account->currency_code }} {{ number_format($row['declared'], 2) }}
                                </td>
                                <td class="whitespace-nowrap px-3 py-4 text-right text-sm tabular-nums text-slate-500 lg:px-4">
                                    {{ $account->currency_code }} {{ number_format($row['system'], 2) }}
                                </td>
                                <td class="whitespace-nowrap px-3 py-4 text-right text-sm font-semibold tabular-nums lg:px-4 {{ $row['agrees'] ? 'text-slate-400' : ($gap > 0 ? 'text-amber-600' : 'text-rose-600') }}">
                                    {{ $row['agrees'] ? '—' : ($gap > 0 ? '+' : '−') . number_format(abs($gap), 2) }}
                                </td>
                                <td class="whitespace-nowrap px-3 py-4 text-sm text-slate-500 lg:px-4">
                                    {{ $row['confirmation']->confirmed_at?->timezone($tz)->format('j M Y H:i') ?? '—' }}
                                </td>
                                <td class="whitespace-nowrap px-3 py-4 text-right text-sm font-medium lg:px-4">
                                    @if ($row['agrees'])
                                        <x-badge color="emerald">{{ __('Agrees') }}</x-badge>
                                    @elseif ($canSettle)
                                        <div class="flex items-center justify-end gap-3">
                                            <button type="button"
                                                wire:click="acceptCount({{ $account->id }})"
                                                wire:confirm="{{ __('Move the books to the counted figure and charge the difference to Opening Balances?') }}"
                                                class="text-indigo-600 transition hover:text-indigo-800">
                                                {{ __('Accept the count') }}
                                            </button>
                                        </div>
                                    @else
                                        <x-badge color="amber">{{ __('Needs a director') }}</x-badge>
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" class="px-6 py-12">
                                    <x-empty-state icon="check-circle"
                                        :title="$total === 0 ? __('Nothing has been declared yet') : __('Everything agrees')"
                                        :message="$total === 0
                                            ? __('Once the people holding a float have counted it on the punch-in page, their figures show up here beside what the books say.')
                                            : __('Every declared float matches the books. Payments, expenses and transfers are open.')"
                                        class="border-0 bg-transparent py-0" />
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </x-card>

    </div>
</div>