@php
    $statusBadge = [
        'DRAFT' => 'slate', 'SENT' => 'sky', 'PARTIAL' => 'amber',
        'PAID' => 'emerald', 'OVERDUE' => 'rose', 'VOID' => 'slate',
    ];
    $freqBadge = ['weekly' => 'sky', 'monthly' => 'violet', 'quarterly' => 'amber', 'yearly' => 'emerald'];
    $kindLabel = ['space' => __('Space rent'), 'wifi' => __('WiFi'), 'service' => __('Service'), 'other' => __('Other')];
    $kindBadge = ['space' => 'violet', 'wifi' => 'cyan', 'service' => 'amber', 'other' => 'slate'];

    // Nav tabs across the different sorts of income.
    $tabMeta = [
        'all'      => ['label' => __('All Income'),        'icon' => 'queue-list'],
        'sales'    => ['label' => __('Sales Receipts'),    'icon' => 'currency-dollar'],
        'invoices' => ['label' => __('Income Invoices'),   'icon' => 'document-currency-dollar'],
        'other'    => ['label' => __('Other Income'),      'icon' => 'gift'],
        'clients'  => ['label' => __('Clients & Rentals'), 'icon' => 'building-office'],
    ];

    // Stream badge (used in the unified All-Income ledger).
    $typeMeta = [
        'sales'  => ['label' => __('Sales'),          'color' => 'indigo'],
        'income' => ['label' => __('Income invoice'), 'color' => 'cyan'],
        'other'  => ['label' => __('Other'),          'color' => 'violet'],
        'refund' => ['label' => __('Refund'),         'color' => 'rose'],
    ];
@endphp

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

        {{-- Cashflow segmented control: Income (in) / Expenses (out). These two
             share one "Cashflow" sidebar entry; the toggle is how you move
             between them. --}}
        <x-cashflow-tabs />

        <x-page-header :title="__('Income')" :subtitle="__('Every stream of money coming in, sales receipts, rent, WiFi, services and other income, in one place, each linked back to its source.')">
            @if ($canManageCategories)
                <x-secondary-button wire:click="openCategories" type="button">
                    <x-icon name="cog-6-tooth" class="-ms-1 me-1.5 h-4 w-4" />
                    {{ __('Categories') }}
                </x-secondary-button>
            @endif
            @if ($canManage)
                <x-secondary-button wire:click="createTenant" type="button">
                    <x-icon name="building-office" class="-ms-1 me-1.5 h-4 w-4" />
                    {{ __('Add Client') }}
                </x-secondary-button>
                <x-button wire:click="createInvoice" type="button">
                    <x-icon name="plus" class="-ms-1 me-1.5 h-4 w-4" />
                    {{ __('Income Invoice') }}
                </x-button>
            @endif
        </x-page-header>

        {{-- Comprehensive reporting-period filter, drives every card and table
             below. Segmented buttons on wide screens, dropdown on small ones. --}}
        <x-card class="p-4 sm:p-5">
            <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
                <div class="flex items-center gap-3">
                    <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-indigo-50 text-indigo-600">
                        <x-icon name="calendar" class="h-5 w-5" />
                    </span>
                    @php [$pStart, $pEnd, $pLabel] = $this->periodRange(); @endphp
                    <div>
                        <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Reporting period') }}</p>
                        <p class="text-base font-semibold text-slate-900">{{ $pLabel }}</p>
                    </div>
                </div>

                <div class="flex flex-col gap-3 sm:flex-row sm:items-center">
                    {{-- Segmented buttons (md and up) --}}
                    <div class="no-scrollbar hidden items-center gap-1 overflow-x-auto rounded-xl border border-slate-200 bg-slate-50 p-1 md:inline-flex">
                        @foreach ($periods as $key => $label)
                            <button
                                type="button"
                                wire:click="$set('period', '{{ $key }}')"
                                class="whitespace-nowrap rounded-lg px-3 py-1.5 text-xs font-semibold transition {{ $period === $key ? 'bg-white text-indigo-600 shadow-sm ring-1 ring-slate-200' : 'text-slate-500 hover:text-slate-700' }}"
                            >{{ __($label) }}</button>
                        @endforeach
                    </div>

                    {{-- Dropdown (small screens) --}}
                    <select wire:model.live="period" class="block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500 md:hidden">
                        @foreach ($periods as $key => $label)
                            <option value="{{ $key }}">{{ __($label) }}</option>
                        @endforeach
                    </select>

                    @if ($period === 'custom')
                        <div class="flex items-center gap-2">
                            <input type="date" wire:model.live="startDate" class="block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
                            <span class="text-slate-400">–</span>
                            <input type="date" wire:model.live="endDate" class="block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
                        </div>
                    @endif
                </div>
            </div>
        </x-card>

        <!-- KPI cards: one per nav tab (money value locked at 19px per spec). -->
        <section class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-5">
            @foreach ($metrics as $m)
                @php
                    $tone = $m['delta'] === null ? 'muted' : ($m['delta'] >= 0 ? 'up' : 'down');
                    $pill = ['up' => 'bg-emerald-50 text-emerald-700', 'down' => 'bg-rose-50 text-rose-700', 'muted' => 'bg-slate-100 text-slate-500'][$tone];
                @endphp
                <x-card class="group relative flex 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 px-2 py-1 text-[11px] font-semibold {{ $pill }}">
                        @if ($m['delta'] !== null)
                            <x-icon :name="$m['delta'] >= 0 ? 'arrow-trending-up' : 'arrow-trending-down'" class="h-3 w-3 shrink-0" />
                            {{ number_format(abs($m['delta']), 0) }}% {{ $m['deltaLabel'] }}
                        @else
                            {{ $m['sub'] }}
                        @endif
                    </span>
                </x-card>
            @endforeach
        </section>

        <!-- Tabs -->
        <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'] }}
                </button>
            @endforeach
        </div>

        @if ($tab === 'all')
            <!-- All Income, unified ledger across every stream -->
            <x-card>
                <div class="flex flex-col gap-3 border-b border-slate-100 p-4 lg:flex-row lg:flex-wrap lg:items-center sm:p-5">
                    <div class="w-full sm:w-44">
                        <select wire:model.live="typeFilter" class="block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            <option value="">{{ __('All streams') }}</option>
                            <option value="sales">{{ __('Sales') }}</option>
                            <option value="income">{{ __('Income invoices') }}</option>
                            <option value="other">{{ __('Other income') }}</option>
                            <option value="refund">{{ __('Refunds') }}</option>
                        </select>
                    </div>
                    <div class="w-full sm:w-48">
                        <select wire:model.live="categoryFilter" class="block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            <option value="">{{ __('All categories') }}</option>
                            @foreach ($categories as $category)
                                <option value="{{ $category->id }}">{{ $category->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="w-full sm:w-48">
                        <select wire:model.live="fundFilter" class="block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            <option value="">{{ __('All accounts') }}</option>
                            @foreach ($fundAccounts as $account)
                                <option value="{{ $account->id }}">{{ $account->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="relative w-full flex-1 sm:min-w-[12rem]">
                        <span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-slate-400">
                            <x-icon name="magnifying-glass" class="h-4 w-4" />
                        </span>
                        <input type="search" wire:model.live.debounce.400ms="search" placeholder="{{ __('Search party or reference...') }}"
                            class="block w-full rounded-xl border-slate-300 pl-9 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
                    </div>
                    <x-secondary-button wire:click="export" type="button" class="w-full justify-center sm:w-auto">
                        <x-icon name="arrow-down-tray" class="-ms-1 me-1.5 h-4 w-4" />
                        {{ __('Export') }}
                    </x-secondary-button>
                </div>

                <div class="hidden overflow-x-auto sm:block">
                    <table class="min-w-full divide-y divide-slate-100">
                        <thead>
                            <tr class="bg-slate-50/80">
                                <th class="px-3 lg:px-4 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Date') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Stream') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Party') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Source') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Category') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-right text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Amount') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-right text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('In :base', ['base' => $baseCode]) }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100">
                            @forelse ($allIncome as $row)
                                <tr wire:key="{{ $row['key'] }}" class="transition-colors hover:bg-slate-50/70">
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm text-slate-600">{{ optional($row['date'])->format('Y-m-d') ?: '—' }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm">
                                        <x-badge :color="$typeMeta[$row['type']]['color'] ?? 'slate'">{{ $typeMeta[$row['type']]['label'] ?? ucfirst($row['type']) }}</x-badge>
                                    </td>
                                    <td class="px-3 lg:px-4 py-4 text-sm font-medium text-slate-900">{{ $row['party'] }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm">
                                        @if ($row['link_url'])
                                            <a href="{{ $row['link_url'] }}" wire:navigate class="inline-flex items-center gap-1 font-medium text-indigo-600 hover:underline">
                                                <x-icon name="link" class="h-3.5 w-3.5" />{{ $row['link_label'] }}
                                            </a>
                                            @if ($row['sub_url'])
                                                <a href="{{ $row['sub_url'] }}" wire:navigate class="ml-2 text-xs text-slate-400 hover:text-slate-600">{{ $row['sub_label'] }}</a>
                                            @endif
                                        @else
                                            <span class="text-slate-400">{{ $row['description'] }}</span>
                                        @endif
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm text-slate-500">{{ $row['category'] ?: '—' }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm font-semibold {{ $row['sign'] < 0 ? 'text-rose-600' : 'text-slate-900' }}">
                                        {{ $row['sign'] < 0 ? '−' : '' }}{{ $row['currency'] }} {{ number_format($row['amount'], 2) }}
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm font-semibold {{ $row['base'] < 0 ? 'text-rose-600' : 'text-slate-700' }}">
                                        {{ $baseCode }} {{ number_format($row['base'], 2) }}
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="7" class="px-3 lg:px-4 py-12">
                                        <x-empty-state icon="banknotes" :title="__('No income in this period')"
                                            :message="__('Sales receipts, income invoices and other income all appear here.')" class="border-0" />
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                <!-- Mobile cards -->
                <div class="divide-y divide-slate-100 sm:hidden">
                    @forelse ($allIncome as $row)
                        <div wire:key="m-{{ $row['key'] }}" class="p-4">
                            <div class="flex items-start justify-between gap-4">
                                <div class="min-w-0">
                                    <div class="flex items-center gap-2">
                                        <x-badge :color="$typeMeta[$row['type']]['color'] ?? 'slate'">{{ $typeMeta[$row['type']]['label'] ?? ucfirst($row['type']) }}</x-badge>
                                        <span class="text-xs text-slate-400">{{ optional($row['date'])->format('Y-m-d') }}</span>
                                    </div>
                                    <p class="mt-1 text-sm font-medium text-slate-900">{{ $row['party'] }}</p>
                                    @if ($row['link_url'])
                                        <a href="{{ $row['link_url'] }}" wire:navigate class="text-xs font-medium text-indigo-600 hover:underline">{{ $row['link_label'] }}</a>
                                    @else
                                        <p class="text-xs text-slate-400">{{ $row['description'] }}</p>
                                    @endif
                                </div>
                                <div class="shrink-0 text-right">
                                    <p class="text-sm font-semibold {{ $row['sign'] < 0 ? 'text-rose-600' : 'text-slate-900' }}">{{ $row['sign'] < 0 ? '−' : '' }}{{ $row['currency'] }} {{ number_format($row['amount'], 2) }}</p>
                                    <p class="text-xs text-slate-400">{{ $baseCode }} {{ number_format($row['base'], 2) }}</p>
                                </div>
                            </div>
                        </div>
                    @empty
                        <div class="p-6">
                            <x-empty-state icon="banknotes" :title="__('No income in this period')" :message="__('Nothing to show yet.')" class="border-0" />
                        </div>
                    @endforelse
                </div>

                <div class="flex flex-col gap-3 border-t border-slate-100 px-4 py-3 sm:flex-row sm:items-center sm:justify-between sm:px-6">
                    <div class="flex items-center gap-2 text-sm text-slate-500">
                        <span>{{ __('Rows per page') }}</span>
                        <select wire:model.live="perPage" class="rounded-lg border-slate-300 py-1 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            <option value="10">10</option>
                            <option value="25">25</option>
                            <option value="50">50</option>
                        </select>
                    </div>
                    <div>{{ $allIncome->links() }}</div>
                </div>
            </x-card>

        @elseif ($tab === 'sales')
            <!-- Sales receipts, payments against sales invoices -->
            <x-card>
                <div class="flex flex-col gap-3 border-b border-slate-100 p-4 lg:flex-row lg:flex-wrap lg:items-center sm:p-5">
                    <div class="w-full sm:w-44">
                        <select wire:model.live="channelFilter" class="block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            <option value="">{{ __('All channels') }}</option>
                            @foreach ($channels as $channel)
                                <option value="{{ $channel }}">{{ $channel }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="w-full sm:w-48">
                        <select wire:model.live="fundFilter" class="block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            <option value="">{{ __('All accounts') }}</option>
                            @foreach ($fundAccounts as $account)
                                <option value="{{ $account->id }}">{{ $account->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="relative w-full flex-1 sm:min-w-[12rem]">
                        <span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-slate-400">
                            <x-icon name="magnifying-glass" class="h-4 w-4" />
                        </span>
                        <input type="search" wire:model.live.debounce.400ms="search" placeholder="{{ __('Search customer, invoice or reference...') }}"
                            class="block w-full rounded-xl border-slate-300 pl-9 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
                    </div>
                    <x-secondary-button wire:click="export" type="button" class="w-full justify-center sm:w-auto">
                        <x-icon name="arrow-down-tray" class="-ms-1 me-1.5 h-4 w-4" />
                        {{ __('Export') }}
                    </x-secondary-button>
                </div>

                <div class="hidden overflow-x-auto sm:block">
                    <table class="min-w-full divide-y divide-slate-100">
                        <thead>
                            <tr class="bg-slate-50/80">
                                <th class="px-3 lg:px-4 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Date') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Customer') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Invoice') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Job') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Channel') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Account') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-right text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Amount') }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100">
                            @forelse ($salesReceipts as $p)
                                @php $inv = $p->invoice; $jobs = $inv?->jobs ?? collect(); @endphp
                                <tr wire:key="sr-{{ $p->id }}" class="transition-colors hover:bg-slate-50/70">
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm text-slate-600">{{ $p->paid_at?->format('Y-m-d') ?: '—' }}</td>
                                    <td class="px-3 lg:px-4 py-4 text-sm font-medium text-slate-900">{{ $inv?->payerName() ?: '—' }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm">
                                        @if ($inv)
                                            <a href="{{ route('invoices.preview', $inv) }}" wire:navigate class="font-semibold text-indigo-600 hover:underline">{{ $inv->invoice_number }}</a>
                                        @else
                                            —
                                        @endif
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm">
                                        @if ($jobs->count() === 1)
                                            <a href="{{ route('jobs.show', $jobs->first()) }}" wire:navigate class="text-indigo-600 hover:underline">{{ $jobs->first()->job_number }}</a>
                                        @elseif ($jobs->count() > 1)
                                            <span class="text-slate-500">{{ trans_choice(':count jobs', $jobs->count(), ['count' => $jobs->count()]) }}</span>
                                        @else
                                            <span class="text-slate-400">—</span>
                                        @endif
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm text-slate-600">{{ $p->channel }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm text-slate-500">{{ $p->fundAccount?->name ?: '—' }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm font-semibold text-slate-900">{{ $inv?->currency_code }} {{ number_format((float) $p->amount, 2) }}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="7" class="px-3 lg:px-4 py-12">
                                        <x-empty-state icon="currency-dollar" :title="__('No sales receipts in this period')"
                                            :message="__('Payments recorded against sales invoices appear here, linked to their invoice and job.')" class="border-0" />
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                <!-- Mobile cards -->
                <div class="divide-y divide-slate-100 sm:hidden">
                    @forelse ($salesReceipts as $p)
                        @php $inv = $p->invoice; @endphp
                        <div wire:key="sr-m-{{ $p->id }}" class="p-4">
                            <div class="flex items-start justify-between gap-4">
                                <div class="min-w-0">
                                    <p class="text-sm font-medium text-slate-900">{{ $inv?->payerName() ?: '—' }}</p>
                                    @if ($inv)
                                        <a href="{{ route('invoices.preview', $inv) }}" wire:navigate class="text-xs font-semibold text-indigo-600 hover:underline">{{ $inv->invoice_number }}</a>
                                    @endif
                                    <p class="text-xs text-slate-400">{{ $p->paid_at?->format('Y-m-d') }} · {{ $p->channel }}</p>
                                </div>
                                <p class="shrink-0 text-sm font-semibold text-slate-900">{{ $inv?->currency_code }} {{ number_format((float) $p->amount, 2) }}</p>
                            </div>
                        </div>
                    @empty
                        <div class="p-6">
                            <x-empty-state icon="currency-dollar" :title="__('No sales receipts in this period')" :message="__('Nothing to show yet.')" class="border-0" />
                        </div>
                    @endforelse
                </div>

                <div class="flex flex-col gap-3 border-t border-slate-100 px-4 py-3 sm:flex-row sm:items-center sm:justify-between sm:px-6">
                    <div class="flex items-center gap-2 text-sm text-slate-500">
                        <span>{{ __('Rows per page') }}</span>
                        <select wire:model.live="perPage" class="rounded-lg border-slate-300 py-1 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            <option value="10">10</option>
                            <option value="25">25</option>
                            <option value="50">50</option>
                        </select>
                    </div>
                    <div>{{ $salesReceipts->links() }}</div>
                </div>
            </x-card>

        @elseif ($tab === 'invoices')
            <!-- Income invoices -->
            <x-card>
                <div class="flex items-start gap-2 border-b border-slate-100 p-4 sm:p-5">
                    <x-icon name="document-currency-dollar" class="mt-0.5 h-5 w-5 shrink-0 text-cyan-500" />
                    <p class="text-sm text-slate-500"><span class="font-semibold text-slate-700">{{ __('Billed income.') }}</span> {{ __('Rent, WiFi, services and one-offs raised as a real invoice to a client, with a due date, reminders and a Pay action, just like a sales bill.') }}</p>
                </div>
                <div class="flex flex-col gap-3 border-b border-slate-100 p-4 lg:flex-row lg:flex-wrap lg:items-center sm:p-5">
                    <div class="w-full sm:w-44">
                        <select wire:model.live="statusFilter" class="block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            <option value="">{{ __('All statuses') }}</option>
                            <option value="outstanding">{{ __('Outstanding') }}</option>
                            <option value="paid">{{ __('Paid') }}</option>
                        </select>
                    </div>
                    <div class="w-full sm:w-48">
                        <select wire:model.live="categoryFilter" class="block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            <option value="">{{ __('All categories') }}</option>
                            @foreach ($categories as $category)
                                <option value="{{ $category->id }}">{{ $category->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="relative w-full flex-1 sm:min-w-[12rem]">
                        <span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-slate-400">
                            <x-icon name="magnifying-glass" class="h-4 w-4" />
                        </span>
                        <input type="search" wire:model.live.debounce.400ms="search" placeholder="{{ __('Search invoices...') }}"
                            class="block w-full rounded-xl border-slate-300 pl-9 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
                    </div>
                    @if ($canManage)
                        <x-secondary-button wire:click="raiseDue" type="button" class="w-full justify-center sm:w-auto">
                            <x-icon name="arrow-path" class="-ms-1 me-1.5 h-4 w-4" />
                            {{ __('Raise due now') }}
                        </x-secondary-button>
                    @endif
                    <x-secondary-button wire:click="export" type="button" class="w-full justify-center sm:w-auto">
                        <x-icon name="arrow-down-tray" class="-ms-1 me-1.5 h-4 w-4" />
                        {{ __('Export') }}
                    </x-secondary-button>
                </div>

                <!-- Desktop table -->
                <div class="hidden overflow-x-auto sm:block">
                    <table class="min-w-full divide-y divide-slate-100">
                        <thead>
                            <tr class="bg-slate-50/80">
                                <th class="px-3 lg:px-4 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Invoice') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Client') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Due') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Status') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-right text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Amount') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-right text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Balance') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-right text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Actions') }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100">
                            @forelse ($invoices as $invoice)
                                <tr wire:key="inv-{{ $invoice->id }}" class="transition-colors hover:bg-slate-50/70">
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm">
                                        <a href="{{ route('invoices.preview', $invoice) }}" wire:navigate class="font-semibold text-indigo-600 hover:underline">{{ $invoice->invoice_number }}</a>
                                    </td>
                                    <td class="px-3 lg:px-4 py-4 text-sm">
                                        <span class="font-medium text-slate-900">{{ $invoice->payerName() ?: '—' }}</span>
                                        @if ($invoice->incomeCategory)
                                            <span class="ml-1"><x-badge color="sky">{{ $invoice->incomeCategory->name }}</x-badge></span>
                                        @endif
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm text-slate-600">{{ $invoice->due_date?->format('Y-m-d') ?: '—' }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm">
                                        <x-invoice-status :invoice="$invoice" />
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm font-semibold text-slate-900">{{ $invoice->currency_code }} {{ number_format((float) $invoice->total, 2) }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm font-semibold {{ (float) $invoice->balance_due > 0.01 ? 'text-rose-600' : 'text-slate-400' }}">{{ $invoice->currency_code }} {{ number_format((float) $invoice->balance_due, 2) }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm font-medium">
                                        <div class="flex items-center justify-end gap-3">
                                            <x-notes-button variant="link" :for="$invoice" />
                                            @if ($canRecordPayment && $invoice->status !== 'VOID' && (float) $invoice->balance_due > 0.01)
                                                <button wire:click="recordPayment({{ $invoice->id }})" class="text-emerald-600 transition hover:text-emerald-700">{{ __('Pay') }}</button>
                                            @endif
                                            @if ($canManage)
                                                <button wire:click="sendInvoice({{ $invoice->id }})" class="text-indigo-600 transition hover:text-indigo-700">{{ __('Send') }}</button>
                                            @endif
                                            @if ($canDelete && ! $invoice->isDeletionLocked())
                                                <button wire:click="deleteInvoice({{ $invoice->id }})" wire:confirm="{{ __('Delete this income invoice?') }}" class="text-rose-600 transition hover:text-rose-700">
                                                    <x-icon name="trash" class="h-4 w-4" />
                                                </button>
                                            @endif
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="7" class="px-3 lg:px-4 py-12">
                                        <x-empty-state icon="document-currency-dollar" :title="__('No income invoices in this period')"
                                            :message="__('Raise an income invoice, or add a client with recurring billing.')" class="border-0">
                                            @if ($canManage)
                                                <x-button wire:click="createInvoice" type="button">
                                                    <x-icon name="plus" class="-ms-1 me-1.5 h-4 w-4" />
                                                    {{ __('Income Invoice') }}
                                                </x-button>
                                            @endif
                                        </x-empty-state>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                <!-- Mobile cards -->
                <div class="divide-y divide-slate-100 sm:hidden">
                    @forelse ($invoices as $invoice)
                        <div wire:key="inv-mobile-{{ $invoice->id }}" class="p-4">
                            <div class="flex items-start justify-between gap-4">
                                <div class="min-w-0">
                                    <a href="{{ route('invoices.preview', $invoice) }}" wire:navigate class="text-sm font-semibold text-indigo-600 hover:underline">{{ $invoice->invoice_number }}</a>
                                    <p class="text-sm text-slate-700">{{ $invoice->payerName() ?: '—' }}</p>
                                    <p class="mt-1 text-sm font-semibold text-slate-900">{{ $invoice->currency_code }} {{ number_format((float) $invoice->total, 2) }}</p>
                                    <p class="text-xs text-slate-500">{{ __('Due') }} {{ $invoice->due_date?->format('Y-m-d') ?: '—' }} · {{ __('Bal') }} {{ number_format((float) $invoice->balance_due, 2) }}</p>
                                    <p class="mt-1.5"><x-invoice-status :invoice="$invoice" /></p>
                                </div>
                                <div class="flex shrink-0 flex-col items-end gap-2 text-sm font-medium">
                                    @if ($canRecordPayment && $invoice->status !== 'VOID' && (float) $invoice->balance_due > 0.01)
                                        <button wire:click="recordPayment({{ $invoice->id }})" class="text-emerald-600">{{ __('Pay') }}</button>
                                    @endif
                                    @if ($canManage)
                                        <button wire:click="sendInvoice({{ $invoice->id }})" class="text-indigo-600">{{ __('Send') }}</button>
                                    @endif
                                    @if ($canDelete && ! $invoice->isDeletionLocked())
                                        <button wire:click="deleteInvoice({{ $invoice->id }})" wire:confirm="{{ __('Delete this income invoice?') }}" class="text-rose-600">{{ __('Delete') }}</button>
                                    @endif
                                </div>
                            </div>
                        </div>
                    @empty
                        <div class="p-6">
                            <x-empty-state icon="document-currency-dollar" :title="__('No income invoices in this period')"
                                :message="__('Raise an income invoice, or add a client with recurring billing.')" class="border-0" />
                        </div>
                    @endforelse
                </div>

                <div class="flex flex-col gap-3 border-t border-slate-100 px-4 py-3 sm:flex-row sm:items-center sm:justify-between sm:px-6">
                    <div class="flex items-center gap-2 text-sm text-slate-500">
                        <span>{{ __('Rows per page') }}</span>
                        <select wire:model.live="perPage" class="rounded-lg border-slate-300 py-1 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            <option value="10">10</option>
                            <option value="25">25</option>
                            <option value="50">50</option>
                        </select>
                    </div>
                    <div>{{ $invoices->links() }}</div>
                </div>
            </x-card>

        @elseif ($tab === 'other')
            <!-- Other income, asset sales, cash-up surplus, legacy charges -->
            <x-card>
                <div class="flex items-start gap-2 border-b border-slate-100 p-4 sm:p-5">
                    <x-icon name="gift" class="mt-0.5 h-5 w-5 shrink-0 text-violet-500" />
                    <p class="text-sm text-slate-500"><span class="font-semibold text-slate-700">{{ __('Unbilled income.') }}</span> {{ __('Money that came in without an invoice, asset-sale proceeds, cash-up surplus and legacy charges. Recorded directly, often system-generated, with no invoice document.') }}</p>
                </div>
                <div class="flex flex-col gap-3 border-b border-slate-100 p-4 lg:flex-row lg:flex-wrap lg:items-center sm:p-5">
                    <div class="w-full sm:w-44">
                        <select wire:model.live="statusFilter" class="block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            <option value="">{{ __('All statuses') }}</option>
                            <option value="paid">{{ __('Received') }}</option>
                            <option value="outstanding">{{ __('Outstanding') }}</option>
                        </select>
                    </div>
                    <div class="w-full sm:w-44">
                        <select wire:model.live="sourceFilter" class="block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            <option value="">{{ __('All sources') }}</option>
                            <option value="asset">{{ __('Asset sale') }}</option>
                            <option value="rent">{{ __('Rent charge') }}</option>
                            <option value="other">{{ __('Other / cash-up') }}</option>
                        </select>
                    </div>
                    <div class="w-full sm:w-48">
                        <select wire:model.live="categoryFilter" class="block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            <option value="">{{ __('All categories') }}</option>
                            @foreach ($categories as $category)
                                <option value="{{ $category->id }}">{{ $category->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="relative w-full flex-1 sm:min-w-[12rem]">
                        <span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-slate-400">
                            <x-icon name="magnifying-glass" class="h-4 w-4" />
                        </span>
                        <input type="search" wire:model.live.debounce.400ms="search" placeholder="{{ __('Search source or description...') }}"
                            class="block w-full rounded-xl border-slate-300 pl-9 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
                    </div>
                    <x-secondary-button wire:click="export" type="button" class="w-full justify-center sm:w-auto">
                        <x-icon name="arrow-down-tray" class="-ms-1 me-1.5 h-4 w-4" />
                        {{ __('Export') }}
                    </x-secondary-button>
                </div>

                <div class="hidden overflow-x-auto sm:block">
                    <table class="min-w-full divide-y divide-slate-100">
                        <thead>
                            <tr class="bg-slate-50/80">
                                <th class="px-3 lg:px-4 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Date') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Source') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Description') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Category') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Status') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-right text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Amount') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-right text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Notes') }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100">
                            @forelse ($otherIncome as $o)
                                @php [$srcUrl, $srcLabel] = $this->otherIncomeSourceLink($o); @endphp
                                <tr wire:key="oi-{{ $o->id }}" class="transition-colors hover:bg-slate-50/70">
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm text-slate-600">{{ optional($o->received_on ?? $o->due_on)->format('Y-m-d') ?: '—' }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm">
                                        @if ($srcUrl)
                                            <a href="{{ $srcUrl }}" wire:navigate class="inline-flex items-center gap-1 font-medium text-indigo-600 hover:underline">
                                                <x-icon name="link" class="h-3.5 w-3.5" />{{ $srcLabel }}
                                            </a>
                                        @else
                                            <span class="font-medium text-slate-700">{{ $o->source_label ?: '—' }}</span>
                                        @endif
                                    </td>
                                    <td class="px-3 lg:px-4 py-4 text-sm text-slate-600">{{ $o->description ?: '—' }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm text-slate-500">{{ $o->category?->name ?: '—' }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm">
                                        @if ($o->isReceived())
                                            <x-badge color="emerald">{{ __('Received') }}</x-badge>
                                        @else
                                            <x-badge color="amber">{{ __('Outstanding') }}</x-badge>
                                        @endif
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm font-semibold text-slate-900">{{ $o->currency_code }} {{ number_format((float) $o->amount, 2) }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right">
                                        <x-notes-button :for="$o" />
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="7" class="px-3 lg:px-4 py-12">
                                        <x-empty-state icon="gift" :title="__('No other income in this period')"
                                            :message="__('Asset-sale proceeds, cash-up surplus and other non-invoice income land here.')" class="border-0" />
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                <!-- Mobile cards -->
                <div class="divide-y divide-slate-100 sm:hidden">
                    @forelse ($otherIncome as $o)
                        @php [$srcUrl, $srcLabel] = $this->otherIncomeSourceLink($o); @endphp
                        <div wire:key="oi-m-{{ $o->id }}" class="p-4">
                            <div class="flex items-start justify-between gap-4">
                                <div class="min-w-0">
                                    @if ($srcUrl)
                                        <a href="{{ $srcUrl }}" wire:navigate class="text-sm font-semibold text-indigo-600 hover:underline">{{ $srcLabel }}</a>
                                    @else
                                        <p class="text-sm font-semibold text-slate-900">{{ $o->source_label ?: __('Other income') }}</p>
                                    @endif
                                    <p class="text-xs text-slate-500">{{ $o->description }}</p>
                                    <p class="text-xs text-slate-400">{{ optional($o->received_on ?? $o->due_on)->format('Y-m-d') }}</p>
                                    <p class="mt-1">
                                        @if ($o->isReceived())<x-badge color="emerald">{{ __('Received') }}</x-badge>@else<x-badge color="amber">{{ __('Outstanding') }}</x-badge>@endif
                                    </p>
                                </div>
                                <p class="shrink-0 text-sm font-semibold text-slate-900">{{ $o->currency_code }} {{ number_format((float) $o->amount, 2) }}</p>
                            </div>
                        </div>
                    @empty
                        <div class="p-6">
                            <x-empty-state icon="gift" :title="__('No other income in this period')" :message="__('Nothing to show yet.')" class="border-0" />
                        </div>
                    @endforelse
                </div>

                <div class="flex flex-col gap-3 border-t border-slate-100 px-4 py-3 sm:flex-row sm:items-center sm:justify-between sm:px-6">
                    <div class="flex items-center gap-2 text-sm text-slate-500">
                        <span>{{ __('Rows per page') }}</span>
                        <select wire:model.live="perPage" class="rounded-lg border-slate-300 py-1 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            <option value="10">10</option>
                            <option value="25">25</option>
                            <option value="50">50</option>
                        </select>
                    </div>
                    <div>{{ $otherIncome->links() }}</div>
                </div>
            </x-card>

        @else
            <!-- Clients / rentals -->
            <x-card>
                <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">{{ __('Clients & Rentals') }}</h2>
                        <p class="text-sm text-slate-500">{{ __('Recurring clients auto-raise and email their invoice ahead of each due date.') }}</p>
                    </div>
                    @if ($canManage)
                        <div class="flex items-center gap-2">
                            <x-secondary-button wire:click="raiseDue" type="button">
                                <x-icon name="arrow-path" class="-ms-1 me-1.5 h-4 w-4" />
                                {{ __('Raise due now') }}
                            </x-secondary-button>
                            <x-button wire:click="createTenant" type="button">
                                <x-icon name="plus" class="-ms-1 me-1.5 h-4 w-4" />
                                {{ __('Add Client') }}
                            </x-button>
                        </div>
                    @endif
                </div>

                <div class="hidden overflow-x-auto sm:block">
                    <table class="min-w-full divide-y divide-slate-100">
                        <thead>
                            <tr class="bg-slate-50/80">
                                <th class="px-3 lg:px-4 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Client') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Type') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-right text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Amount') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Next invoice') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-right text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Arrears') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Status') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-right text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Actions') }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100">
                            @forelse ($tenants as $tenant)
                                <tr wire:key="client-{{ $tenant->id }}" class="transition-colors hover:bg-slate-50/70">
                                    <td class="px-3 lg:px-4 py-4 text-sm">
                                        <span class="font-medium text-slate-900">{{ $tenant->name }}</span>
                                        @if ($tenant->space || $tenant->contact_name || $tenant->phone)
                                            <span class="block text-xs text-slate-400">{{ collect([$tenant->space, $tenant->contact_name, $tenant->phone])->filter()->implode(' · ') }}</span>
                                        @endif
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm">
                                        <x-badge :color="$kindBadge[$tenant->kind] ?? 'slate'">{{ $kindLabel[$tenant->kind] ?? ucfirst($tenant->kind) }}</x-badge>
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm">
                                        <span class="font-semibold text-slate-900">{{ $tenant->currency_code }} {{ number_format((float) $tenant->rent_amount, 2) }}</span>
                                        <span class="ml-1"><x-badge :color="$freqBadge[$tenant->frequency] ?? 'slate'">{{ ucfirst($tenant->frequency) }}</x-badge></span>
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm text-slate-600">
                                        {{ $tenant->next_charge_date?->format('Y-m-d') ?: '—' }}
                                        @if ($tenant->auto_invoice && $tenant->status === 'active')
                                            <span class="block text-xs text-emerald-600">{{ __('auto · :d days ahead', ['d' => $tenant->invoice_lead_days]) }}</span>
                                        @else
                                            <span class="block text-xs text-slate-400">{{ __('manual') }}</span>
                                        @endif
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm font-semibold {{ $tenant->arrears_base > 0 ? 'text-rose-600' : 'text-slate-400' }}">
                                        {{ $tenant->base_code }} {{ number_format($tenant->arrears_base, 2) }}
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm">
                                        @if ($tenant->status === 'active')
                                            <x-badge color="emerald">{{ __('Active') }}</x-badge>
                                        @else
                                            <x-badge color="slate">{{ __('Ended') }}</x-badge>
                                        @endif
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm font-medium">
                                        <div class="flex items-center justify-end gap-3">
                                            <x-notes-button variant="link" :for="$tenant" />
                                            @if ($canManage)
                                                <button wire:click="editTenant({{ $tenant->id }})" class="text-indigo-600 transition hover:text-indigo-700">{{ __('Edit') }}</button>
                                                @if ($tenant->status === 'active')
                                                    <button wire:click="endLease({{ $tenant->id }})" wire:confirm="{{ __('End this client? No further invoices will be raised.') }}" class="text-amber-600 transition hover:text-amber-700">{{ __('End') }}</button>
                                                @endif
                                            @endif
                                            @if ($canDelete)
                                                <button wire:click="deleteTenant({{ $tenant->id }})" wire:confirm="{{ __('Delete this client? Their invoices are kept.') }}" class="text-rose-600 transition hover:text-rose-700">
                                                    <x-icon name="trash" class="h-4 w-4" />
                                                </button>
                                            @endif
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="7" class="px-3 lg:px-4 py-12">
                                        <x-empty-state icon="building-office" :title="__('No clients yet')"
                                            :message="__('Add a client (space, WiFi, service or other) to start billing recurring income.')" class="border-0">
                                            @if ($canManage)
                                                <x-button wire:click="createTenant" type="button">
                                                    <x-icon name="plus" class="-ms-1 me-1.5 h-4 w-4" />
                                                    {{ __('Add Client') }}
                                                </x-button>
                                            @endif
                                        </x-empty-state>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                <!-- Mobile cards -->
                <div class="divide-y divide-slate-100 sm:hidden">
                    @forelse ($tenants as $tenant)
                        <div wire:key="client-mobile-{{ $tenant->id }}" class="p-4">
                            <div class="flex items-start justify-between gap-4">
                                <div class="min-w-0">
                                    <p class="text-sm font-semibold text-slate-900">{{ $tenant->name }}</p>
                                    <p class="mt-0.5"><x-badge :color="$kindBadge[$tenant->kind] ?? 'slate'">{{ $kindLabel[$tenant->kind] ?? ucfirst($tenant->kind) }}</x-badge></p>
                                    <p class="mt-1 text-sm font-semibold text-slate-900">{{ $tenant->currency_code }} {{ number_format((float) $tenant->rent_amount, 2) }} <span class="text-xs font-medium text-slate-400">/ {{ $tenant->frequency }}</span></p>
                                    @if ($tenant->arrears_base > 0)
                                        <p class="text-xs font-semibold text-rose-600">{{ __('Arrears') }}: {{ $tenant->base_code }} {{ number_format($tenant->arrears_base, 2) }}</p>
                                    @endif
                                    <p class="mt-1.5">
                                        @if ($tenant->status === 'active')<x-badge color="emerald">{{ __('Active') }}</x-badge>@else<x-badge color="slate">{{ __('Ended') }}</x-badge>@endif
                                    </p>
                                </div>
                                <div class="flex shrink-0 flex-col items-end gap-2 text-sm font-medium">
                                    @if ($canManage)
                                        <button wire:click="editTenant({{ $tenant->id }})" class="text-indigo-600">{{ __('Edit') }}</button>
                                        @if ($tenant->status === 'active')
                                            <button wire:click="endLease({{ $tenant->id }})" wire:confirm="{{ __('End this client?') }}" class="text-amber-600">{{ __('End') }}</button>
                                        @endif
                                    @endif
                                    @if ($canDelete)
                                        <button wire:click="deleteTenant({{ $tenant->id }})" wire:confirm="{{ __('Delete this client?') }}" class="text-rose-600">{{ __('Delete') }}</button>
                                    @endif
                                </div>
                            </div>
                        </div>
                    @empty
                        <div class="p-6">
                            <x-empty-state icon="building-office" :title="__('No clients yet')"
                                :message="__('Add a client to start billing recurring income.')" class="border-0" />
                        </div>
                    @endforelse
                </div>
            </x-card>
        @endif
    </div>

    <!-- Create Income Invoice Modal -->
    <x-dialog-modal wire:model.live="showInvoiceModal" maxWidth="2xl">
        <x-slot name="title">{{ __('Create Income Invoice') }}</x-slot>

        <x-slot name="content">
            <div class="grid grid-cols-1 gap-4">
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <div>
                        <x-label for="inv_tenant_id" value="{{ __('Client') }}" />
                        <select id="inv_tenant_id" wire:model.live="inv_tenant_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="">{{ __('No saved client (one-off)') }}</option>
                            @foreach ($tenantOptions as $t)
                                <option value="{{ $t->id }}">{{ $t->name }}{{ $t->space ? ', ' . $t->space : '' }}</option>
                            @endforeach
                        </select>
                        <x-input-error for="inv_tenant_id" class="mt-2" />
                    </div>
                    <div>
                        <x-label for="inv_income_category_id" value="{{ __('Category') }}" />
                        <select id="inv_income_category_id" wire:model="inv_income_category_id" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            <option value="">{{ __('Uncategorised') }}</option>
                            @foreach ($categories as $category)
                                <option value="{{ $category->id }}">{{ $category->name }}</option>
                            @endforeach
                        </select>
                        <x-input-error for="inv_income_category_id" class="mt-2" />
                    </div>
                </div>

                <div>
                    <x-label for="inv_name" value="{{ __('For / description') }}" />
                    <x-input id="inv_name" type="text" class="mt-1 block w-full" wire:model="inv_name" placeholder="{{ __('e.g. WiFi rental, June, Office 2 rent') }}" />
                    <x-input-error for="inv_name" class="mt-2" />
                </div>

                <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
                    <div>
                        <x-label for="inv_amount" value="{{ __('Amount') }}" />
                        <x-input id="inv_amount" type="number" step="0.01" min="0" class="mt-1 block w-full" wire:model="inv_amount" />
                        <x-input-error for="inv_amount" class="mt-2" />
                    </div>
                    <div>
                        <x-label for="inv_currency_code" value="{{ __('Currency') }}" />
                        <select id="inv_currency_code" wire:model="inv_currency_code" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            <option value="">{{ __('Select...') }}</option>
                            @foreach ($currencies as $currency)
                                <option value="{{ $currency->code }}">{{ $currency->code }}</option>
                            @endforeach
                        </select>
                        <x-input-error for="inv_currency_code" class="mt-2" />
                    </div>
                    <div>
                        <x-label for="inv_due_date" value="{{ __('Due date') }}" />
                        <x-input id="inv_due_date" type="date" class="mt-1 block w-full" wire:model="inv_due_date" />
                        <x-input-error for="inv_due_date" class="mt-2" />
                    </div>
                </div>

                <div>
                    <x-label for="inv_description" value="{{ __('Notes (optional)') }}" />
                    <textarea id="inv_description" rows="2" wire:model="inv_description" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"></textarea>
                    <x-input-error for="inv_description" class="mt-2" />
                </div>

                <label class="flex items-center gap-2 rounded-xl border border-slate-200 bg-slate-50/50 p-3">
                    <x-checkbox wire:model="inv_send" />
                    <span class="text-sm font-medium text-slate-700">{{ __('Email this invoice to the client now') }}</span>
                </label>
            </div>
        </x-slot>

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

    <!-- Record Payment Modal -->
    <x-dialog-modal wire:model.live="showPaymentModal" maxWidth="lg">
        <x-slot name="title">
            {{ __('Record Payment') }}
            @if ($payInvoice)<span class="text-sm font-normal text-slate-500">— {{ $payInvoice->invoice_number }}</span>@endif
        </x-slot>

        <x-slot name="content">
            @if ($payInvoice)
                <div class="mb-4 rounded-xl bg-slate-50 p-3 text-sm">
                    <div class="flex justify-between"><span class="text-slate-500">{{ __('Client') }}</span><span class="font-medium text-slate-900">{{ $payInvoice->payerName() ?: '—' }}</span></div>
                    <div class="mt-1 flex justify-between"><span class="text-slate-500">{{ __('Balance') }}</span><span class="font-semibold text-slate-900">{{ $payInvoice->currency_code }} {{ number_format((float) $payInvoice->balance_due, 2) }}</span></div>
                </div>
            @endif

            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                <div>
                    <x-label for="pay_amount" value="{{ __('Amount') }}" />
                    <x-input id="pay_amount" type="number" step="0.01" min="0" class="mt-1 block w-full" wire:model.live="pay_amount" />
                    <x-input-error for="pay_amount" class="mt-2" />
                </div>
                <div>
                    <x-label for="pay_channel" value="{{ __('Channel') }}" />
                    <select id="pay_channel" wire:model.live="pay_channel" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        @foreach ($channels as $channel)
                            <option value="{{ $channel }}">{{ $channel }}</option>
                        @endforeach
                    </select>
                    <x-input-error for="pay_channel" class="mt-2" />
                </div>
                <div class="sm:col-span-2">
                    <x-label for="pay_fund_account_id" value="{{ __('Deposited to') }}" />
                    <select id="pay_fund_account_id" wire:model="pay_fund_account_id" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        <option value="">{{ __('Select an account...') }}</option>
                        @foreach ($payAccounts as $account)
                            <option value="{{ $account->id }}">{{ $account->name }} ({{ $account->currency_code }})</option>
                        @endforeach
                    </select>
                    @if ($payInvoice && $payAccounts->isEmpty())
                        <p class="mt-1 text-xs text-rose-500">{{ __('No active account in :c, create one under Treasury.', ['c' => $payInvoice->currency_code]) }}</p>
                    @endif
                    <x-input-error for="pay_fund_account_id" class="mt-2" />
                </div>
                <div class="sm:col-span-2">
                    <x-label for="pay_charge" value="{{ __('Transaction charge (optional)') }}" />
                    <x-input id="pay_charge" type="number" step="0.01" min="0" placeholder="0.00" class="mt-1 block w-full" wire:model="pay_charge" />
                    <p class="mt-1 text-xs text-slate-400">{{ __('Bank/EcoCash fee this account skims off the deposit. Booked as a bank charge. Leave blank if none.') }}</p>
                    <x-input-error for="pay_charge" class="mt-2" />
                </div>
                <div>
                    <x-label for="pay_paid_at" value="{{ __('Payment date') }}" />
                    <x-input id="pay_paid_at" type="datetime-local" class="mt-1 block w-full" wire:model="pay_paid_at" />
                    <x-input-error for="pay_paid_at" class="mt-2" />
                </div>
                <div>
                    <x-label for="pay_reference" value="{{ __('Reference (optional)') }}" />
                    <x-input id="pay_reference" type="text" class="mt-1 block w-full" wire:model="pay_reference" />
                    <x-input-error for="pay_reference" class="mt-2" />
                </div>
                @if ($paySurcharge > 0)
                    <div class="sm:col-span-2 rounded-xl bg-amber-50 p-3 text-xs text-amber-700">
                        {{ __('A surcharge of :amount will be added in treasury (invoice balance unaffected).', ['amount' => number_format($paySurcharge, 2)]) }}
                    </div>
                @endif
                <div class="sm:col-span-2">
                    <x-label for="pay_notes" value="{{ __('Notes (optional)') }}" />
                    <textarea id="pay_notes" rows="2" wire:model="pay_notes" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"></textarea>
                    <x-input-error for="pay_notes" class="mt-2" />
                </div>
            </div>
        </x-slot>

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

    <!-- Add / Edit Client Modal -->
    <x-dialog-modal wire:model.live="showTenantModal" maxWidth="2xl">
        <x-slot name="title">
            {{ $tenantEditingId ? __('Edit Client') : __('Add Client') }}
        </x-slot>

        <x-slot name="content">
            <div class="grid grid-cols-1 gap-4">
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <div>
                        <x-label for="t_name" value="{{ __('Client Name') }}" />
                        <x-input id="t_name" type="text" class="mt-1 block w-full" wire:model="t_name" />
                        <x-input-error for="t_name" class="mt-2" />
                    </div>
                    <div>
                        <x-label for="t_kind" value="{{ __('Type') }}" />
                        <select id="t_kind" wire:model="t_kind" 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="space">{{ __('Space rent') }}</option>
                            <option value="wifi">{{ __('WiFi') }}</option>
                            <option value="service">{{ __('Service') }}</option>
                            <option value="other">{{ __('Other') }}</option>
                        </select>
                        <x-input-error for="t_kind" class="mt-2" />
                    </div>
                </div>

                <div class="grid grid-cols-1 gap-4 sm:grid-cols-4">
                    <div>
                        <x-label for="t_space" value="{{ __('Space / detail') }}" />
                        <x-input id="t_space" type="text" class="mt-1 block w-full" wire:model="t_space" placeholder="{{ __('e.g. Office 2') }}" />
                        <x-input-error for="t_space" class="mt-2" />
                    </div>
                    <div>
                        <x-label for="t_contact_name" value="{{ __('Contact') }}" />
                        <x-input id="t_contact_name" type="text" class="mt-1 block w-full" wire:model="t_contact_name" />
                        <x-input-error for="t_contact_name" class="mt-2" />
                    </div>
                    <div>
                        <x-label for="t_email" value="{{ __('Email') }}" />
                        <x-input id="t_email" type="email" class="mt-1 block w-full" wire:model="t_email" />
                        <x-input-error for="t_email" class="mt-2" />
                    </div>
                    <div>
                        <x-label for="t_phone" value="{{ __('Phone') }}" />
                        <x-input id="t_phone" type="text" class="mt-1 block w-full" wire:model="t_phone" />
                        <x-input-error for="t_phone" class="mt-2" />
                    </div>
                </div>

                <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
                    <div>
                        <x-label for="t_rent_amount" value="{{ __('Amount') }}" />
                        <x-input id="t_rent_amount" type="number" step="0.01" min="0" class="mt-1 block w-full" wire:model="t_rent_amount" />
                        <x-input-error for="t_rent_amount" class="mt-2" />
                    </div>
                    <div>
                        <x-label for="t_currency_code" value="{{ __('Currency') }}" />
                        <select id="t_currency_code" wire:model="t_currency_code" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            <option value="">{{ __('Select...') }}</option>
                            @foreach ($currencies as $currency)
                                <option value="{{ $currency->code }}">{{ $currency->code }}</option>
                            @endforeach
                        </select>
                        <x-input-error for="t_currency_code" class="mt-2" />
                    </div>
                    <div>
                        <x-label for="t_frequency" value="{{ __('Frequency') }}" />
                        <select id="t_frequency" wire:model="t_frequency" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            @foreach ($frequencies as $frequency)
                                <option value="{{ $frequency }}">{{ ucfirst($frequency) }}</option>
                            @endforeach
                        </select>
                        <x-input-error for="t_frequency" class="mt-2" />
                    </div>
                </div>

                <div class="rounded-xl border border-slate-200 bg-slate-50/50 p-3">
                    <label class="flex items-center gap-2">
                        <x-checkbox wire:model.live="t_auto_invoice" />
                        <span class="text-sm font-medium text-slate-700">{{ __('Automatically raise & email a recurring invoice') }}</span>
                    </label>
                    @if ($t_auto_invoice)
                        <div class="mt-3 sm:w-48">
                            <x-label for="t_invoice_lead_days" value="{{ __('Send how many days before due') }}" />
                            <x-input id="t_invoice_lead_days" type="number" min="0" max="60" class="mt-1 block w-full" wire:model="t_invoice_lead_days" />
                            <x-input-error for="t_invoice_lead_days" class="mt-2" />
                        </div>
                        <p class="mt-2 text-xs text-slate-400">{{ __('Then a reminder 2 days before the due date and again on the due date if unpaid.') }}</p>
                    @endif
                </div>

                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <div>
                        <x-label for="t_lease_start" value="{{ __('Start date') }}" />
                        <x-input id="t_lease_start" type="date" class="mt-1 block w-full" wire:model="t_lease_start" />
                        <p class="mt-1 text-xs text-slate-400">{{ __('First invoice is due on this date, then every period.') }}</p>
                        <x-input-error for="t_lease_start" class="mt-2" />
                    </div>
                    <div>
                        <x-label for="t_lease_end" value="{{ __('End date (optional)') }}" />
                        <x-input id="t_lease_end" type="date" class="mt-1 block w-full" wire:model="t_lease_end" />
                        <x-input-error for="t_lease_end" class="mt-2" />
                    </div>
                </div>

                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <div>
                        <x-label for="t_income_category_id" value="{{ __('Income Category') }}" />
                        <select id="t_income_category_id" wire:model="t_income_category_id" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            <option value="">{{ __('Uncategorised') }}</option>
                            @foreach ($categories as $category)
                                <option value="{{ $category->id }}">{{ $category->name }}</option>
                            @endforeach
                        </select>
                        <x-input-error for="t_income_category_id" class="mt-2" />
                    </div>
                    <div>
                        <x-label for="t_default_fund_account_id" value="{{ __('Usual Deposit Account') }}" />
                        <select id="t_default_fund_account_id" wire:model="t_default_fund_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="">{{ __('None') }}</option>
                            @foreach ($fundAccounts as $account)
                                <option value="{{ $account->id }}">{{ $account->name }} ({{ $account->currency_code }})</option>
                            @endforeach
                        </select>
                        <x-input-error for="t_default_fund_account_id" class="mt-2" />
                    </div>
                </div>

                @if ($tenantEditingId)
                    <div>
                        <x-label for="t_status" value="{{ __('Status') }}" />
                        <select id="t_status" wire:model="t_status" 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="active">{{ __('Active') }}</option>
                            <option value="ended">{{ __('Ended') }}</option>
                        </select>
                        <x-input-error for="t_status" class="mt-2" />
                    </div>
                @endif

                <div>
                    <x-label for="t_notes" value="{{ __('Notes') }}" />
                    <textarea id="t_notes" rows="2" wire:model="t_notes" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"></textarea>
                    <x-input-error for="t_notes" class="mt-2" />
                </div>
            </div>
        </x-slot>

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

    <!-- Manage Categories Modal -->
    <x-dialog-modal wire:model.live="showCategoryModal" maxWidth="2xl">
        <x-slot name="title">{{ __('Income Categories') }}</x-slot>

        <x-slot name="content">
            <div class="rounded-xl border border-slate-200 bg-slate-50/50 p-4">
                <p class="mb-3 text-sm font-semibold text-slate-700">{{ $editingCategoryId ? __('Edit Category') : __('Add Category') }}</p>
                <div class="grid grid-cols-1 gap-3 sm:grid-cols-12">
                    <div class="sm:col-span-8">
                        <x-label for="category_name" value="{{ __('Name') }}" />
                        <x-input id="category_name" type="text" class="mt-1 block w-full text-sm" wire:model="category_name" />
                        <x-input-error for="category_name" class="mt-1" />
                    </div>
                    <div class="flex items-end sm:col-span-4">
                        <label class="flex items-center gap-2 pb-2">
                            <x-checkbox wire:model="category_is_active" />
                            <span class="text-sm font-medium text-slate-700">{{ __('Active') }}</span>
                        </label>
                    </div>
                </div>
                <div class="mt-3 flex items-center gap-3">
                    <x-button wire:click="saveCategory" wire:loading.attr="disabled" type="button">{{ $editingCategoryId ? __('Update') : __('Add') }}</x-button>
                    @if ($editingCategoryId)
                        <button type="button" wire:click="$call('resetCategoryForm')" class="text-sm font-medium text-slate-500 transition hover:text-slate-700">{{ __('Cancel edit') }}</button>
                    @endif
                </div>
            </div>

            <div class="mt-4">
                @if ($categories->isNotEmpty())
                    <div class="divide-y divide-slate-100 rounded-xl border border-slate-200">
                        @foreach ($categories as $category)
                            <div wire:key="income-category-{{ $category->id }}" class="flex items-center justify-between px-4 py-3">
                                <div class="flex items-center gap-2">
                                    <span class="text-sm font-medium text-slate-900">{{ $category->name }}</span>
                                    @unless ($category->is_active)<x-badge color="slate">{{ __('Inactive') }}</x-badge>@endunless
                                </div>
                                <div class="flex items-center gap-3 text-sm font-medium">
                                    <button type="button" wire:click="editCategory({{ $category->id }})" class="text-indigo-600 transition hover:text-indigo-700">{{ __('Edit') }}</button>
                                    <button type="button" wire:click="deleteCategory({{ $category->id }})" wire:confirm="{{ __('Delete this category? Existing invoices keep their amounts but become uncategorised.') }}" class="text-rose-600 transition hover:text-rose-700">{{ __('Delete') }}</button>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @else
                    <p class="rounded-xl border border-dashed border-slate-200 px-4 py-6 text-center text-sm text-slate-500">{{ __('No categories yet. Add one above.') }}</p>
                @endif
            </div>
        </x-slot>

        <x-slot name="footer">
            <x-secondary-button wire:click="closeCategoryModal" wire:loading.attr="disabled">{{ __('Done') }}</x-secondary-button>
        </x-slot>
    </x-dialog-modal>
</div>