@php
    $cellTone = [
        'paid' => 'bg-emerald-500 text-white hover:bg-emerald-600',
        'part' => 'bg-amber-400 text-white hover:bg-amber-500',
        'unpaid' => 'bg-rose-500 text-white hover:bg-rose-600',
        'waived' => 'bg-slate-200 text-slate-500 hover:bg-slate-300',
        'upcoming' => 'bg-white text-slate-400 ring-1 ring-inset ring-slate-300 hover:bg-slate-50',
    ];
    $statusLabel = [
        'paid' => __('Paid'), 'part' => __('Part paid'), 'unpaid' => __('Unpaid'),
        'waived' => __('Written off'), 'upcoming' => __('Not yet due'),
    ];
    $statusBadge = ['paid' => 'emerald', 'part' => 'amber', 'unpaid' => 'rose', 'waived' => 'slate', 'upcoming' => 'slate'];
    $freqLabel = ['weekly' => __('Weekly'), 'monthly' => __('Monthly'), 'quarterly' => __('Quarterly'), 'yearly' => __('Yearly')];
    $money = fn ($v) => $base.' '.number_format((float) $v, 2);
@endphp

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

        <x-cashflow-tabs />

        <x-page-header :title="__('Recurring bills')" :subtitle="__('Rent, utilities and subscriptions, month by month. A month that is owed and not paid shows as a gap until it is paid or written off.')">
            @if ($canManage)
                <x-button wire:click="openBill" type="button">
                    <x-icon name="plus" class="-ms-1 me-1.5 h-4 w-4" />{{ __('Add a bill') }}
                </x-button>
            @endif
        </x-page-header>

        {{-- KPI cards --}}
        <section class="grid grid-cols-2 gap-4 lg:grid-cols-4">
            @foreach ($kpis 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>

        {{-- Grid --}}
        <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">{{ __('Month by month') }}</h2>
                    <p class="text-xs text-slate-400">{{ __('Click a square to pay it, see what paid it, or write it off. Click a bill for every payment ever made.') }}</p>
                </div>
                <div class="flex items-center gap-1 rounded-xl border border-slate-200 bg-slate-50 p-1 text-xs font-medium">
                    @foreach ([6, 12, 24] as $m)
                        <button type="button" wire:click="setMonths({{ $m }})"
                            class="rounded-lg px-3 py-1.5 transition {{ $months === $m ? 'bg-white text-indigo-600 shadow-sm ring-1 ring-slate-200' : 'text-slate-500 hover:text-slate-700' }}">
                            {{ __(':n months', ['n' => $m]) }}
                        </button>
                    @endforeach
                </div>
            </div>

            @if ($rows->isEmpty())
                <div class="px-6 py-12">
                    <x-empty-state icon="calendar" :title="__('No recurring bills yet')"
                        :message="__('Add rent, electricity, internet, Google Workspace and anything else you pay on a schedule.')"
                        class="border-0 bg-transparent py-0" />
                </div>
            @else
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-slate-100">
                        <thead>
                            <tr class="bg-slate-50/80 text-left text-[11px] font-semibold uppercase tracking-wider text-slate-500">
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Bill') }}</th>
                                @foreach ($columns as $col)
                                    <th class="whitespace-nowrap px-1 py-3.5 text-center">{{ $col->format('M') }}<span class="block text-[9px] font-normal text-slate-400">{{ $col->format('y') }}</span></th>
                                @endforeach
                                <th class="whitespace-nowrap px-3 lg:px-4 py-3.5 text-right">{{ __('Owed') }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 bg-white">
                            @foreach ($rows as $row)
                                <tr wire:key="bill-{{ $row['id'] }}" class="transition hover:bg-slate-50/70">
                                    <td class="px-3 lg:px-4 py-3 text-sm">
                                        <button type="button" wire:click="openHistory({{ $row['id'] }})" class="text-left font-medium text-slate-900 hover:text-indigo-600">{{ $row['label'] }}</button>
                                        <span class="block text-xs text-slate-400">
                                            {{ $freqLabel[$row['frequency']] ?? $row['frequency'] }} · {{ $row['currency'] }} {{ number_format($row['standing'], 2) }}
                                            @if ($row['category']) · {{ $row['category'] }} @endif
                                        </span>
                                    </td>
                                    @if (! $row['tracked'])
                                        <td colspan="{{ count($columns) }}" class="px-3 py-3 text-xs text-slate-400">
                                            {{ __('Not tracked yet: a standing estimate with no payments.') }}
                                            @if ($canManage)
                                                <button type="button" wire:click="openEditBill({{ $row['id'] }})" class="font-semibold text-indigo-600 hover:text-indigo-800">{{ __('Set the first period owed') }}</button>
                                            @endif
                                        </td>
                                    @else
                                    @foreach ($row['cells'] as $cell)
                                        <td class="px-1 py-3 text-center">
                                            <div class="flex items-center justify-center gap-0.5">
                                                @forelse ($cell as $p)
                                                    <button type="button"
                                                        wire:click="openPeriod({{ $row['id'] }}, '{{ $p['due_on']->toDateString() }}')"
                                                        title="{{ $p['due_on']->format('j M Y') }}: {{ $statusLabel[$p['status']] }}{{ $p['owing'] > 0 ? ', '.$money($p['owing']).' '.__('owed') : '' }}"
                                                        class="flex h-6 min-w-[1.5rem] items-center justify-center rounded-md px-1 text-[10px] font-bold transition {{ $cellTone[$p['status']] }}">
                                                        @if ($p['status'] === 'paid') <x-icon name="check" class="h-3 w-3" />
                                                        @elseif ($p['status'] === 'unpaid') !
                                                        @elseif ($p['status'] === 'part') ½
                                                        @elseif ($p['status'] === 'waived') –
                                                        @endif
                                                    </button>
                                                @empty
                                                    <span class="text-slate-200">·</span>
                                                @endforelse
                                            </div>
                                        </td>
                                    @endforeach
                                    @endif
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-3 text-right text-sm font-semibold tabular-nums {{ $row['outstanding'] > 0 ? 'text-rose-600' : 'text-slate-400' }}">
                                        {{ $row['outstanding'] > 0 ? $money($row['outstanding']) : '—' }}
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                <div class="flex flex-wrap items-center gap-4 border-t border-slate-100 px-4 py-3 text-[11px] text-slate-500 sm:px-5">
                    @foreach (['paid', 'part', 'unpaid', 'waived', 'upcoming'] as $s)
                        <span class="inline-flex items-center gap-1.5"><span class="h-3 w-3 rounded {{ $cellTone[$s] }}"></span>{{ $statusLabel[$s] }}</span>
                    @endforeach
                </div>
            @endif
        </x-card>

        {{-- History of one bill --}}
        @isset($history)
            <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">{{ $history['label'] }}</h2>
                        <p class="text-xs text-slate-400">
                            {{ __('Every payment ever made on this bill.') }}
                            {{ __('Paid in total :paid', ['paid' => $money($history['paid_total'])]) }}@if ($history['outstanding'] > 0), <span class="font-semibold text-rose-600">{{ __(':owed still owed', ['owed' => $money($history['outstanding'])]) }}</span>@endif.
                        </p>
                    </div>
                    <div class="flex items-center gap-2">
                        @if ($canManage)
                            <x-secondary-button wire:click="openEditBill({{ $history['id'] }})" type="button"><x-icon name="pencil-square" class="me-1 h-4 w-4" />{{ __('Edit bill') }}</x-secondary-button>
                        @endif
                        <x-secondary-button wire:click="closeHistory" type="button"><x-icon name="x-mark" class="me-1 h-4 w-4" />{{ __('Close') }}</x-secondary-button>
                    </div>
                </div>

                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-slate-100">
                        <thead>
                            <tr class="bg-slate-50/80 text-left text-[11px] font-semibold uppercase tracking-wider text-slate-500">
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Paid on') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('For') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('From') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Note') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Amount') }}</th>
                                @if ($canManage)<th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Actions') }}</th>@endif
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 bg-white">
                            @forelse ($history['payments'] as $pay)
                                <tr wire:key="pay-{{ $pay->id }}" class="transition hover:bg-slate-50/70">
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-3.5 text-sm text-slate-500">{{ $pay->incurred_on?->format('j M Y') }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-3.5 text-sm text-slate-700">{{ ($pay->is_recurring ? $pay->incurred_on : ($pay->bill_period_on ?? $pay->incurred_on))?->format('M Y') }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-3.5 text-sm text-slate-500">{{ $pay->fundAccount?->name ?? '—' }}</td>
                                    <td class="px-3 lg:px-4 py-3.5 text-sm text-slate-500">{{ $pay->description }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-3.5 text-right text-sm font-semibold tabular-nums text-slate-900">{{ $pay->currency_code }} {{ number_format((float) $pay->amount, 2) }}</td>
                                    @if ($canManage)
                                        <td class="whitespace-nowrap px-3 lg:px-4 py-3.5 text-right text-sm font-medium">
                                            @unless ($pay->is_recurring || str_starts_with((string) $pay->source_ref, 'recurring_expense:'))
                                                <button wire:click="unlinkPayment({{ $pay->id }})" wire:confirm="{{ __('Take this payment off the bill? It stays in Expenses.') }}" class="text-rose-600 transition hover:text-rose-800">{{ __('Unlink') }}</button>
                                            @endunless
                                        </td>
                                    @endif
                                </tr>
                            @empty
                                <tr><td colspan="6" class="px-6 py-10"><x-empty-state icon="banknotes" :title="__('Nothing paid yet')" :message="__('Pay a period from the grid, or file a payment already in Expenses below.')" class="border-0 bg-transparent py-0" /></td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                @if ($canManage)
                    <div class="space-y-3 border-t border-slate-100 p-4 sm:p-5">
                        <div>
                            <h3 class="text-sm font-bold text-slate-900">{{ __('File a payment already in Expenses') }}</h3>
                            <p class="text-xs text-slate-400">{{ __('For rent or a utility keyed as an ordinary expense before this bill existed. Nothing moves in treasury, it only says which month it paid.') }}</p>
                        </div>
                        <div class="grid grid-cols-1 gap-3 sm:grid-cols-12">
                            <div class="sm:col-span-7">
                                <select wire:model="link_expense_id" class="block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                    <option value="">{{ __('Choose a payment…') }}</option>
                                    @foreach ($candidates as $c)
                                        <option value="{{ $c->id }}">{{ $c->incurred_on?->format('j M Y') }} · {{ $c->currency_code }} {{ number_format((float) $c->amount, 2) }} · {{ \Illuminate\Support\Str::limit($c->description ?: $c->vendor, 40) }}</option>
                                    @endforeach
                                </select>
                                <x-input-error for="link_expense_id" class="mt-2" />
                            </div>
                            <div class="sm:col-span-3">
                                <select wire:model="link_period_on" class="block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                    <option value="">{{ __('For which period…') }}</option>
                                    @foreach (array_reverse($history['periods']) as $p)
                                        <option value="{{ $p['due_on']->toDateString() }}">{{ $p['due_on']->format('j M Y') }} ({{ $statusLabel[$p['status']] }})</option>
                                    @endforeach
                                </select>
                                <x-input-error for="link_period_on" class="mt-2" />
                            </div>
                            <div class="sm:col-span-2">
                                <x-button wire:click="linkPayment" type="button" class="w-full justify-center"><x-icon name="link" class="me-1 h-4 w-4" />{{ __('File it') }}</x-button>
                            </div>
                        </div>
                        @if ($candidates->isEmpty())
                            <p class="text-xs text-slate-400">{{ __('No unfiled expenses with this bill\'s category or supplier.') }}</p>
                        @endif
                    </div>
                @endif
            </x-card>
        @endisset

        {{-- ============================================== PERIOD MODAL --}}
        <x-dialog-modal wire:model.live="showPeriodModal" maxWidth="lg">
            <x-slot name="title">
                @isset($period)
                    {{ $periodBill['label'] }} · {{ $period['due_on']->format('j M Y') }}
                @endisset
            </x-slot>
            <x-slot name="content">
                @isset($period)
                    <div class="space-y-4">
                        <div class="flex flex-wrap items-center gap-2 text-sm">
                            <x-badge :color="$statusBadge[$period['status']]">{{ $statusLabel[$period['status']] }}</x-badge>
                            <span class="text-slate-500">{{ __('Usually :amt', ['amt' => $money($period['expected'])]) }}</span>
                            <span class="text-slate-500">· {{ __('paid :amt', ['amt' => $money($period['paid'])]) }}</span>
                            @if ($period['owing'] > 0)
                                <span class="font-semibold text-rose-600">· {{ __(':amt owed', ['amt' => $money($period['owing'])]) }}</span>
                            @endif
                        </div>

                        @if ($period['payments'])
                            <ul class="divide-y divide-slate-100 rounded-xl border border-slate-100 text-sm">
                                @foreach ($period['payments'] as $pay)
                                    <li class="flex items-center justify-between px-3 py-2">
                                        <span class="text-slate-600">{{ $pay->incurred_on?->format('j M Y') }} · {{ $pay->fundAccount?->name ?? __('no account') }}</span>
                                        <span class="font-semibold tabular-nums text-slate-900">{{ $pay->currency_code }} {{ number_format((float) $pay->amount, 2) }}</span>
                                    </li>
                                @endforeach
                            </ul>
                        @endif

                        @if ($period['adjustment'])
                            <p class="rounded-xl bg-slate-50 px-3 py-2 text-xs text-slate-600">
                                {{ ($period['adjustment']['kind'] ?? '') === 'waived' ? __('Written off') : __('Settled') }}:
                                {{ $period['adjustment']['reason'] ?? '' }}
                            </p>
                        @endif

                        @if ($canManage && in_array($period['status'], ['unpaid', 'part', 'upcoming'], true))
                            <div class="rounded-xl border border-slate-200 p-4">
                                <h3 class="text-sm font-bold text-slate-900">{{ __('Record a payment') }}</h3>
                                <div class="mt-3 grid grid-cols-1 gap-3 sm:grid-cols-2">
                                    <div>
                                        <x-label for="pay_amount" :value="__('Amount (:c)', ['c' => $periodBill['currency']])" />
                                        <x-input id="pay_amount" type="number" step="0.01" min="0" class="mt-1 block w-full" wire:model="pay_amount" />
                                        <x-input-error for="pay_amount" class="mt-2" />
                                    </div>
                                    <div>
                                        <x-label for="pay_on" :value="__('Date paid')" />
                                        <x-input id="pay_on" type="date" class="mt-1 block w-full" wire:model="pay_on" />
                                        <x-input-error for="pay_on" class="mt-2" />
                                    </div>
                                    <div class="sm:col-span-2">
                                        <x-label for="pay_account_id" :value="__('Paid from')" />
                                        <select id="pay_account_id" wire:model="pay_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="">{{ __('Choose an account…') }}</option>
                                            @foreach ($payAccounts as $acc)
                                                <option value="{{ $acc->id }}">{{ $acc->name }}</option>
                                            @endforeach
                                        </select>
                                        <x-input-error for="pay_account_id" class="mt-2" />
                                    </div>
                                    <label class="sm:col-span-2 flex items-start gap-2 text-xs text-slate-600">
                                        <input type="checkbox" wire:model="pay_settles" class="mt-0.5 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500" />
                                        {{ __('This settles the period in full, even if it is less than usual (a smaller electricity bill).') }}
                                    </label>
                                </div>
                                <div class="mt-3 flex justify-end">
                                    <x-button wire:click="payPeriod" wire:loading.attr="disabled" wire:target="payPeriod">
                                        <span wire:loading.remove wire:target="payPeriod">{{ __('Record payment') }}</span>
                                        <span wire:loading wire:target="payPeriod">{{ __('Saving…') }}</span>
                                    </x-button>
                                </div>
                            </div>

                            <div class="rounded-xl border border-slate-200 p-4">
                                <h3 class="text-sm font-bold text-slate-900">{{ __('Nothing was owed for this period') }}</h3>
                                <p class="text-xs text-slate-400">{{ __('Rent waived, service paused. The period stops counting as owed, and the reason is kept.') }}</p>
                                <div class="mt-3 flex flex-col gap-2 sm:flex-row">
                                    <x-input type="text" class="block w-full" wire:model="waive_reason" placeholder="{{ __('Landlord waived October rent') }}" />
                                    <x-secondary-button wire:click="waivePeriod" type="button" class="justify-center whitespace-nowrap">{{ __('Write off') }}</x-secondary-button>
                                </div>
                                <x-input-error for="waive_reason" class="mt-2" />
                            </div>
                        @endif

                        @if ($canManage && $period['adjustment'])
                            <x-secondary-button wire:click="reopenPeriod" type="button"><x-icon name="arrow-path" class="me-1 h-4 w-4" />{{ __('Reopen this period') }}</x-secondary-button>
                        @endif
                    </div>
                @endisset
            </x-slot>
            <x-slot name="footer">
                <x-secondary-button wire:click="$set('showPeriodModal', false)">{{ __('Close') }}</x-secondary-button>
            </x-slot>
        </x-dialog-modal>

        {{-- ================================================ NEW BILL --}}
        <x-dialog-modal wire:model.live="showBillModal" maxWidth="2xl">
            <x-slot name="title">{{ $editingBillId ? __('Edit bill') : __('Add a recurring bill') }}</x-slot>
            <x-slot name="content">
                @if ($showBillModal)
                    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                        <div class="sm:col-span-2">
                            <x-label for="b_description" :value="__('Name')" />
                            <x-input id="b_description" type="text" class="mt-1 block w-full" wire:model="b_description" placeholder="{{ __('Electricity (ZESA)') }}" />
                            <x-input-error for="b_description" class="mt-2" />
                        </div>
                        <div>
                            <x-label for="b_vendor" :value="__('Paid to')" />
                            <x-input id="b_vendor" type="text" class="mt-1 block w-full" wire:model="b_vendor" placeholder="{{ __('ZESA, Google, the landlord') }}" />
                            <x-input-error for="b_vendor" class="mt-2" />
                        </div>
                        <div>
                            <x-label for="b_category_id" :value="__('Expense category')" />
                            <select id="b_category_id" wire:model="b_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="">{{ __('None') }}</option>
                                @foreach ($categories as $cat)
                                    <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                                @endforeach
                            </select>
                            <x-input-error for="b_category_id" class="mt-2" />
                        </div>
                        <div>
                            <x-label for="b_amount" :value="__('Usual amount')" />
                            <div class="mt-1 flex gap-2">
                                <select wire:model="b_currency" @disabled($editingBillId) class="block w-24 rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500 disabled:bg-slate-50">
                                    @foreach ($currencies as $code)
                                        <option value="{{ $code }}">{{ $code }}</option>
                                    @endforeach
                                </select>
                                <x-input id="b_amount" type="number" step="0.01" min="0" class="block w-full disabled:bg-slate-50" wire:model="b_amount" :disabled="$editingSelfPaid" />
                            </div>
                            @if ($editingSelfPaid)
                                <p class="mt-1 text-[11px] text-slate-400">{{ __('This bill was set up on Expenses with a payment, so change its amount there.') }}</p>
                            @endif
                            <x-input-error for="b_amount" class="mt-2" />
                        </div>
                        <div>
                            <x-label for="b_frequency" :value="__('How often')" />
                            <select id="b_frequency" wire:model="b_frequency" @disabled($editingBillId) class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500 disabled:bg-slate-50">
                                @foreach ($freqLabel as $key => $label)
                                    <option value="{{ $key }}">{{ $label }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="sm:col-span-2">
                            <x-label for="b_first_due" :value="__('First period owed')" />
                            <x-input id="b_first_due" type="date" class="mt-1 block w-full" wire:model="b_first_due" />
                            <p class="mt-1 text-[11px] text-slate-400">{{ __('Every period from this date counts as owed until it is paid. Set it back to when you started paying to bring in the history, then file the old payments against it.') }}</p>
                            <x-input-error for="b_first_due" class="mt-2" />
                        </div>
                    </div>
                @endif
            </x-slot>
            <x-slot name="footer">
                <x-secondary-button wire:click="$set('showBillModal', false)">{{ __('Cancel') }}</x-secondary-button>
                <x-button class="ms-3" wire:click="saveBill">{{ $editingBillId ? __('Save') : __('Add bill') }}</x-button>
            </x-slot>
        </x-dialog-modal>
    </div>
</div>