@php
    // Every tab this page has. Which of them get drawn is the component's call
    // ($visibleTabs), so the bar can never offer a tab that 403s on click.
    // An employee is looking at their OWN pay here, so the labels say so.
    $tabMeta = [
        'overview'     => ['label' => __('Overview'),     'icon' => 'squares-2x2'],
        'commissions'  => ['label' => $isPayrollAdmin ? __('Commissions') : __('My Commissions'), 'icon' => 'sparkles'],
        'profit_share' => ['label' => __('Profit Share'), 'icon' => 'scale'],
        'staff'        => ['label' => __('Staff'),        'icon' => 'identification'],
        'components'   => ['label' => __('Benefits'),     'icon' => 'gift'],
        'statutory'    => ['label' => __('Statutory'),    'icon' => 'scale-balance'],
        'liabilities'  => ['label' => $isPayrollAdmin ? __('Losses') : __('Loss Recovery'), 'icon' => 'exclamation-triangle'],
        'runs'         => ['label' => $isPayrollAdmin ? __('Pay Runs') : __('My Payslips'), 'icon' => 'credit-card'],
        'plans'        => ['label' => __('Plans'),        'icon' => 'adjustments-horizontal'],
    ];
    $tabs = array_intersect_key($tabMeta, array_flip($visibleTabs));

    $componentKindBadge = [
        'allowance' => 'emerald', 'benefit' => 'sky', 'deduction' => 'rose', 'employer_cost' => 'violet',
    ];

    $accrualBadge = [
        'pending' => 'amber', 'approved' => 'sky', 'paid' => 'emerald',
        'forfeited' => 'slate', 'cancelled' => 'rose',
    ];
    $liabilityBadge = ['active' => 'amber', 'settled' => 'emerald', 'waived' => 'slate', 'cancelled' => 'rose'];
    $runBadge = ['draft' => 'amber', 'finalized' => 'emerald', 'cancelled' => 'slate'];
    $gpRunBadge = ['not_eligible' => 'slate', 'pending' => 'amber', 'approved' => 'sky', 'paid' => 'emerald'];
    $planBadge = ['sales' => 'indigo', 'production' => 'sky', 'gp_hurdle' => 'emerald'];
    $planLabel = ['sales' => __('Sales'), 'production' => __('Production'), 'gp_hurdle' => __('GP-Hurdle')];
@endphp

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

        <x-people-tabs />

        {{-- The same page serves two very different people: the payroll admin
             running the month, and the employee checking their own slip. Say
             which one this is, rather than promising a payroll they cannot run. --}}
        <x-page-header
            :title="$isPayrollAdmin ? __('Payroll & Commissions') : __('My Pay')"
            :subtitle="$isPayrollAdmin
                ? __('Reward sales and production fairly, recover losses from pay, and run monthly payroll, all netted against job profit.')
                : __('Your commissions, payslips and any deductions being recovered from your pay.')">
            @if ($tab === 'plans' && ($canManage ?? false))
                <x-button wire:click="createPlan" type="button">
                    <x-icon name="plus" class="-ms-1 me-1.5 h-4 w-4" /> {{ __('New Plan') }}
                </x-button>
            @elseif ($tab === 'liabilities' && ($canManage ?? false))
                <x-button wire:click="createLiability" type="button">
                    <x-icon name="plus" class="-ms-1 me-1.5 h-4 w-4" /> {{ __('Record Loss') }}
                </x-button>
            @elseif ($tab === 'statutory' && ($canManagePay ?? false))
                <x-button wire:click="createTaxTable" type="button">
                    <x-icon name="plus" class="-ms-1 me-1.5 h-4 w-4" /> {{ __('New Tax Table') }}
                </x-button>
            @elseif ($tab === 'components' && ($canManagePay ?? false))
                <x-button wire:click="createComponent" type="button">
                    <x-icon name="plus" class="-ms-1 me-1.5 h-4 w-4" /> {{ __('New Benefit') }}
                </x-button>
            @elseif ($tab === 'runs' && $canProcessPayroll)
                <x-button wire:click="openRunModal" type="button">
                    <x-icon name="plus" class="-ms-1 me-1.5 h-4 w-4" /> {{ __('Build Pay Run') }}
                </x-button>
            @elseif ($tab === 'commissions' && $isManager)
                <x-secondary-button wire:click="recalcAccruals" type="button">
                    <x-icon name="arrow-path" class="-ms-1 me-1.5 h-4 w-4" /> {{ __('Recalculate') }}
                </x-secondary-button>
            @elseif ($tab === 'profit_share' && ($canManageCommissions ?? false))
                <x-button wire:click="buildGpRun" type="button">
                    <x-icon name="plus" class="-ms-1 me-1.5 h-4 w-4" /> {{ __('Build Pool') }}
                </x-button>
            @endif
        </x-page-header>

        @if ($commissionPauses->isNotEmpty())
            <div class="rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900">
                <p class="font-semibold">{{ __('Commission paused') }}</p>
                <ul class="mt-1 space-y-0.5">
                    @foreach ($commissionPauses as $pause)
                        <li>
                            {{ $pause->user?->name ?? __('Former team member') }}:
                            {{ $pause->ends_on
                                ? __('from :from to :to', ['from' => $pause->starts_on->format('j M Y'), 'to' => $pause->ends_on->format('j M Y')])
                                : __('from :from until a director ends it', ['from' => $pause->starts_on->format('j M Y')]) }}.
                            <span class="text-amber-700">{{ $pause->reason }}</span>
                        </li>
                    @endforeach
                </ul>
                <p class="mt-1 text-xs text-amber-700">{{ __('No commission is earned while paused, and the paused period is not paid later.') }}</p>
            </div>
        @endif

        <!-- Tab bar -->
        <div @class([
            'flex flex-wrap items-center gap-1 overflow-x-auto rounded-xl border border-slate-200 bg-slate-50 p-1 text-sm font-medium',
            'hidden' => count($tabs) < 2,
        ])>
            @foreach ($tabs as $key => $meta)
                <button
                    type="button"
                    wire:click="setTab('{{ $key }}')"
                    class="flex shrink-0 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" />
                    <span>{{ $meta['label'] }}</span>
                </button>
            @endforeach
        </div>

        <!-- KPI cards -->
        <section class="grid grid-cols-1 gap-5 sm:grid-cols-2 xl:grid-cols-4">
            @foreach ($kpis as $kpi)
                @php $pill = ['up' => 'bg-emerald-50 text-emerald-700', 'down' => 'bg-rose-50 text-rose-700', 'muted' => 'bg-slate-100 text-slate-500'][$kpi['sub']['tone']] ?? 'bg-slate-100 text-slate-500'; @endphp
                <x-card class="flex flex-col p-5 ring-slate-200/70">
                    <div class="flex items-start justify-between">
                        <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ $kpi['label'] }}</p>
                        <span class="flex items-center justify-center rounded-xl text-white shadow-sm ring-1 ring-white/40" style="height: 2rem; width: 2rem; background: linear-gradient(135deg, {{ $kpi['accent'] }}, {{ $kpi['accent'] }}bb)">
                            <x-icon :name="$kpi['icon']" class="h-4 w-4" />
                        </span>
                    </div>
                    <p class="mt-3 font-bold leading-none tracking-tight text-slate-900 tabular-nums" style="font-size: 19px;">{{ $kpi['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 }}">{{ $kpi['sub']['text'] }}</span>
                </x-card>
            @endforeach
        </section>

        {{-- ============================================================ --}}
        {{--  OVERVIEW                                                    --}}
        {{-- ============================================================ --}}
        @if ($tab === 'overview')
            <section class="grid grid-cols-1 gap-6 lg:grid-cols-12">
                <x-card class="p-5 sm:p-6 lg:col-span-4">
                    <h2 class="text-base font-semibold text-slate-900">{{ __('Commission Split') }}</h2>
                    <p class="text-xs text-slate-500">{{ __('Sales vs production this month, in :base.', ['base' => $baseCode]) }}</p>
                    @if ($split['total'] > 0)
                        <div wire:ignore class="mt-2" x-data="expenseDonut(@js([
                            'labels' => collect($split['segments'])->pluck('label')->all(),
                            'values' => collect($split['segments'])->pluck('value')->all(),
                            'colors' => collect($split['segments'])->pluck('color')->all(),
                            'base' => $baseCode,
                            'centerLabel' => $baseCode . ' ' . __('Total'),
                        ]))">
                            <div x-ref="donut"></div>
                        </div>
                        <div class="mt-4 space-y-2 border-t border-slate-100 pt-4">
                            @foreach ($split['segments'] as $seg)
                                <div class="flex items-center justify-between text-sm">
                                    <span class="flex items-center gap-2 text-slate-600"><span class="h-2.5 w-2.5 rounded-full" style="background: {{ $seg['color'] }}"></span>{{ $seg['label'] }}</span>
                                    <span class="font-semibold text-slate-900">{{ $baseCode }} {{ number_format($seg['value'], 2) }}</span>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <p class="py-16 text-center text-sm text-slate-400">{{ __('No commission earned this month yet.') }}</p>
                    @endif
                </x-card>

                <x-card class="p-5 sm:p-6 lg:col-span-5">
                    <h2 class="text-base font-semibold text-slate-900">{{ __('Commission Trend') }}</h2>
                    <p class="text-xs text-slate-500">{{ __('Earned over the last 6 months, in :base.', ['base' => $baseCode]) }}</p>
                    <div wire:ignore class="mt-2" x-data="dashRevenueChart(@js($trend))">
                        <div x-ref="chart"></div>
                    </div>
                </x-card>

                <x-card class="p-5 sm:p-6 lg:col-span-3">
                    {{-- Scoped to the viewer for a non-admin, so a one-row
                         "league table" would just be them. Name it honestly. --}}
                    <h2 class="text-base font-semibold text-slate-900">{{ $isPayrollAdmin ? __('Top Earners') : __('Earned by me') }}</h2>
                    <p class="text-xs text-slate-500">{{ __('This month') }}</p>
                    @if (! empty($topEarners))
                        <div class="mt-4 space-y-3">
                            @foreach ($topEarners as $earner)
                                <div>
                                    <div class="flex items-center justify-between text-sm">
                                        <span class="truncate font-medium text-slate-700">{{ $earner['name'] }}</span>
                                        <span class="shrink-0 font-semibold text-slate-900">{{ $earner['total'] }}</span>
                                    </div>
                                    <div class="mt-1.5 h-1.5 w-full rounded-full bg-slate-100">
                                        <div class="h-1.5 rounded-full bg-brand-gradient" style="width: {{ max(4, $earner['pct']) }}%"></div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <p class="py-16 text-center text-sm text-slate-400">{{ __('No earners yet.') }}</p>
                    @endif
                </x-card>
            </section>

            <x-card class="p-5 sm:p-6">
                <h2 class="text-base font-semibold text-slate-900">{{ __('How commissions work here') }}</h2>
                <div class="mt-3 grid grid-cols-1 gap-4 text-sm text-slate-600 sm:grid-cols-2 lg:grid-cols-3">
                    <div class="rounded-xl bg-slate-50 p-4"><p class="font-semibold text-slate-800">{{ __('Sales, tiered by target') }}</p><p class="mt-1 text-xs">{{ __('A % of each job\'s gross profit, with the rate rising as the salesperson approaches and beats their monthly revenue target. Only payable once the target is met and the invoice is paid.') }}</p></div>
                    <div class="rounded-xl bg-slate-50 p-4"><p class="font-semibold text-slate-800">{{ __('Production, profit-share pool') }}</p><p class="mt-1 text-xs">{{ __('A % of gross profit pooled and split among the crew by hours logged, paid only on clean runs: on time, within budget, no reprints.') }}</p></div>
                    <div class="rounded-xl bg-slate-50 p-4"><p class="font-semibold text-slate-800">{{ __('Losses, recovered from pay') }}</p><p class="mt-1 text-xs">{{ __('Mistakes that cost money are charged to the responsible person and recovered over 3 months, capped so a paycheck is never zeroed.') }}</p></div>
                </div>
            </x-card>
        @endif

        {{-- ============================================================ --}}
        {{--  COMMISSIONS                                                 --}}
        {{-- ============================================================ --}}
        @if ($tab === 'commissions')
            <x-card>
                <div class="flex flex-col gap-3 border-b border-slate-100 p-4 lg:flex-row lg:items-center lg:justify-between sm:p-5">
                    <h2 class="text-base font-semibold text-slate-900">{{ __('Commission Ledger') }}</h2>
                    <div class="flex flex-col gap-2 sm:flex-row">
                        <select wire:model.live="typeFilter" class="rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            <option value="">{{ __('All types') }}</option>
                            <option value="sales">{{ __('Sales') }}</option>
                            <option value="production">{{ __('Production') }}</option>
                        </select>
                        <select wire:model.live="statusFilter" class="rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            <option value="">{{ __('All statuses') }}</option>
                            @foreach (['pending' => __('Pending'), 'approved' => __('Approved'), 'paid' => __('Paid'), 'forfeited' => __('Forfeited'), 'cancelled' => __('Cancelled')] as $k => $v)
                                <option value="{{ $k }}">{{ $v }}</option>
                            @endforeach
                        </select>
                        <input type="month" wire:model.live="periodFilter" class="rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
                    </div>
                </div>

                <div class="overflow-x-auto">
                    <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">{{ __('Beneficiary') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Job / Invoice') }}</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-left text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Period') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-right text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Base · Rate') }}</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">{{ __('Status') }}</th>
                                @if ($isManager)<th class="px-3 lg:px-4 py-3.5 text-right text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Actions') }}</th>@endif
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100">
                            @forelse ($accruals as $a)
                                <tr wire:key="accrual-{{ $a->id }}" class="transition-colors hover:bg-slate-50/70">
                                    <td class="px-3 lg:px-4 py-4 text-sm font-medium text-slate-900">{{ $a->user?->name ?? '—' }}</td>
                                    <td class="px-3 lg:px-4 py-4 text-sm text-slate-600">
                                        <span class="font-medium text-slate-700">{{ $a->job?->job_number ?? '—' }}</span>
                                        @if ($a->invoice)<span class="block text-xs text-slate-400">{{ $a->invoice->invoice_number }}</span>@endif
                                    </td>
                                    <td class="px-3 lg:px-4 py-4 text-sm"><x-badge :color="$a->type === 'sales' ? 'indigo' : 'sky'">{{ ucfirst($a->type) }}</x-badge></td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm text-slate-600">{{ $a->period?->format('M Y') }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm text-slate-500">
                                        {{ $baseCode }} {{ number_format((float) $a->base_amount, 0) }}
                                        <span class="block text-xs text-slate-400">{{ rtrim(rtrim(number_format((float) $a->rate, 2), '0'), '.') }}%{{ $a->hours ? ' · ' . rtrim(rtrim(number_format((float)$a->hours,2),'0'),'.') . 'h' : '' }}</span>
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm font-bold text-slate-900">{{ $baseCode }} {{ number_format((float) $a->amount, 2) }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm">
                                        <x-badge :color="$accrualBadge[$a->status] ?? 'slate'">{{ ucfirst($a->status) }}</x-badge>
                                        @if ($a->status === 'pending' && $a->blocked_reason)
                                            <span class="block text-xs text-slate-400">{{ $reasonLabels[$a->blocked_reason] ?? $a->blocked_reason }}</span>
                                        @endif
                                    </td>
                                    @if ($isManager)
                                        <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm font-medium">
                                            @if (! in_array($a->status, ['paid', 'cancelled'], true))
                                                <div class="flex items-center justify-end gap-3">
                                                    @if ($a->status !== 'approved')
                                                        <button wire:click="approveAccrual({{ $a->id }})" class="text-emerald-600 transition hover:text-emerald-700" title="{{ __('Approve for payout') }}"><x-icon name="check-circle" class="h-4 w-4" /></button>
                                                    @endif
                                                    <button wire:click="cancelAccrual({{ $a->id }})" wire:confirm="{{ __('Cancel this commission?') }}" class="text-rose-600 transition hover:text-rose-700" title="{{ __('Cancel') }}"><x-icon name="x-mark" class="h-4 w-4" /></button>
                                                </div>
                                            @else
                                                <span class="text-xs text-slate-400">—</span>
                                            @endif
                                        </td>
                                    @endif
                                </tr>
                            @empty
                                <tr><td colspan="{{ $isManager ? 8 : 7 }}" class="px-3 lg:px-4 py-12 text-center text-sm text-slate-400">{{ __('No commission lines yet. They appear automatically when a job is completed and invoiced.') }}</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                <div class="border-t border-slate-100 px-4 py-3 sm:px-6">{{ $accruals->links() }}</div>
            </x-card>
        @endif

        {{-- ============================================================ --}}
        {{--  PROFIT SHARE, GP-Hurdle Profit Share pool (spec §9 / §20)  --}}
        {{-- ============================================================ --}}
        @if ($tab === 'profit_share')
            @unless ($gpModelActive)
                <x-card class="border-amber-200 bg-amber-50/60 p-4 sm:p-5">
                    <div class="flex items-start gap-3">
                        <x-icon name="exclamation-triangle" class="mt-0.5 h-5 w-5 shrink-0 text-amber-500" />
                        <p class="text-sm text-amber-800">{{ __('GP-Hurdle Profit Share is not the workspace\'s active commission model. You can still build pools to preview, but they won\'t drive the Profitability eligibility column until you switch the active model in Settings → Profit & Commission.') }}</p>
                    </div>
                </x-card>
            @endunless

            @unless ($gpPlan)
                <x-card class="border-sky-200 bg-sky-50/60 p-4 sm:p-5">
                    <div class="flex items-start gap-3">
                        <x-icon name="information-circle" class="mt-0.5 h-5 w-5 shrink-0 text-sky-500" />
                        <p class="text-sm text-sky-800">{{ __('No active GP-Hurdle plan, pools use the workspace defaults (hurdle multiplier, pool rate, splits). Create a GP-Hurdle plan in the Plans tab to override them.') }}</p>
                    </div>
                </x-card>
            @endunless

            <div class="grid grid-cols-1 gap-6 lg:grid-cols-12">
                <x-card class="lg:col-span-5">
                    <div class="flex items-center justify-between gap-3 border-b border-slate-100 p-4 sm:p-5">
                        <h2 class="text-base font-semibold text-slate-900">{{ __('Profit-Share Pools') }}</h2>
                        @if ($canManageCommissions)
                            <div class="flex items-center gap-2">
                                <input type="month" wire:model="gp_run_period" class="rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
                                <x-button wire:click="buildGpRun" type="button"><x-icon name="plus" class="-ms-1 me-1 h-4 w-4" />{{ __('Build') }}</x-button>
                            </div>
                        @endif
                    </div>
                    <x-input-error for="gp_run_period" class="px-4 pt-3 sm:px-5" />
                    <div class="divide-y divide-slate-100">
                        @forelse ($gpRuns as $run)
                            <button type="button" wire:click="viewGpRun({{ $run->id }})" wire:key="gprun-{{ $run->id }}" @class(['flex w-full items-center justify-between gap-4 p-4 text-left transition hover:bg-slate-50/70', 'bg-indigo-50/60' => $viewGpRun && $viewGpRun->id === $run->id])>
                                <div>
                                    <p class="font-semibold text-slate-900">{{ $run->period->format('F Y') }}</p>
                                    <p class="text-xs text-slate-400">{{ trans_choice('{0}No shares|{1}:count beneficiary|[2,*]:count beneficiaries', $run->accruals_count, ['count' => $run->accruals_count]) }}</p>
                                </div>
                                <div class="text-right">
                                    <p class="text-sm font-bold text-slate-900">{{ $baseCode }} {{ number_format((float) $run->commission_pool, 2) }}</p>
                                    <x-badge :color="$gpRunBadge[$run->status] ?? 'slate'">{{ ucfirst(str_replace('_', ' ', $run->status)) }}</x-badge>
                                </div>
                            </button>
                        @empty
                            <div class="p-6"><x-empty-state icon="scale" :title="__('No profit-share pools yet')" :message="__('Build a pool for a month: the company-wide GP-Hurdle excess is shared between the Sales/Admin and Production groups, then split among each group by contribution.')" class="border-0">
                                @if ($canManageCommissions)<x-button wire:click="buildGpRun" type="button"><x-icon name="plus" class="-ms-1 me-1.5 h-4 w-4" />{{ __('Build Pool') }}</x-button>@endif
                            </x-empty-state></div>
                        @endforelse
                    </div>
                    <div class="border-t border-slate-100 px-4 py-3 sm:px-6">{{ $gpRuns->links() }}</div>
                </x-card>

                <x-card class="lg:col-span-7">
                    @if ($viewGpRun)
                        @php
                            $stat = fn ($label, $val, $accent = 'text-slate-900') => ['label' => $label, 'val' => $val, 'accent' => $accent];
                            $entry = [
                                $stat(__('Actual GP'), $viewGpRun->actual_gp),
                                $stat(__('Overheads'), $viewGpRun->overheads),
                                $stat(__('Break-even GP'), $viewGpRun->break_even_gp),
                                $stat(__('GP Hurdle'), $viewGpRun->gp_hurdle, 'text-sky-700'),
                                $stat(__('Excess GP'), $viewGpRun->excess_gp, (float) $viewGpRun->excess_gp > 0 ? 'text-emerald-700' : 'text-slate-400'),
                                $stat(__('Commission Pool'), $viewGpRun->commission_pool, 'text-indigo-700'),
                            ];
                        @endphp
                        <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">{{ $viewGpRun->period->format('F Y') }} · {{ __('Profit Share') }}</h2>
                                <p class="mt-0.5 text-xs text-slate-400">
                                    <x-badge :color="$gpRunBadge[$viewGpRun->status] ?? 'slate'">{{ ucfirst(str_replace('_', ' ', $viewGpRun->status)) }}</x-badge>
                                    <span class="ms-1">{{ __('hurdle = overheads × :m', ['m' => rtrim(rtrim(number_format((float) $viewGpRun->multiplier, 2), '0'), '.')]) }} · {{ __('pool @ :r%', ['r' => rtrim(rtrim(number_format((float) $viewGpRun->pool_rate * 100, 2), '0'), '.')]) }}</span>
                                </p>
                            </div>
                            @if ($viewGpRun->status === 'pending' && $canManageCommissions)
                                <x-button wire:click="approveGpRun({{ $viewGpRun->id }})" wire:confirm="{{ __('Approve this pool? Every share is released to payroll.') }}" type="button"><x-icon name="check-circle" class="-ms-1 me-1.5 h-4 w-4" />{{ __('Approve Pool') }}</x-button>
                            @endif
                        </div>

                        @if (! $viewGpRun->isEligible())
                            <div class="m-4 rounded-xl bg-slate-50 p-4 text-sm text-slate-500 sm:m-5">
                                {{ $viewGpRun->blocked_reason === 'below_hurdle'
                                    ? __('Gross profit (:gp) did not clear the GP hurdle (:h) for this period, no commission accrues.', ['gp' => $baseCode.' '.number_format((float) $viewGpRun->actual_gp, 2), 'h' => $baseCode.' '.number_format((float) $viewGpRun->gp_hurdle, 2)])
                                    : __('No eligible staff to share the pool, set a commission group on staff profiles.') }}
                            </div>
                        @endif

                        {{-- §20 commission entry: the frozen figures the pool was built from --}}
                        <div class="grid grid-cols-2 gap-px bg-slate-100 sm:grid-cols-3">
                            @foreach ($entry as $cell)
                                <div class="bg-white p-4">
                                    <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ $cell['label'] }}</p>
                                    <p class="mt-1 text-lg font-bold {{ $cell['accent'] }}">{{ $baseCode }} {{ number_format((float) $cell['val'], 2) }}</p>
                                </div>
                            @endforeach
                        </div>

                        @if ($viewGpRun->isEligible())
                            <div class="grid grid-cols-2 gap-px border-y border-slate-100 bg-slate-100">
                                <div class="bg-indigo-50/40 p-4">
                                    <p class="text-[11px] font-semibold uppercase tracking-wider text-indigo-400">{{ __('Sales / Admin Pool') }} · {{ rtrim(rtrim(number_format((float) $viewGpRun->sales_split * 100, 2), '0'), '.') }}%</p>
                                    <p class="mt-1 text-lg font-bold text-indigo-700">{{ $baseCode }} {{ number_format((float) $viewGpRun->sales_pool, 2) }}</p>
                                </div>
                                <div class="bg-sky-50/40 p-4">
                                    <p class="text-[11px] font-semibold uppercase tracking-wider text-sky-400">{{ __('Production Pool') }} · {{ rtrim(rtrim(number_format((float) $viewGpRun->production_split * 100, 2), '0'), '.') }}%</p>
                                    <p class="mt-1 text-lg font-bold text-sky-700">{{ $baseCode }} {{ number_format((float) $viewGpRun->production_pool, 2) }}</p>
                                </div>
                            </div>

                            <div class="overflow-x-auto">
                                <table class="min-w-full divide-y divide-slate-100">
                                    <thead>
                                        <tr class="bg-slate-50/80">
                                            <th class="px-3 lg:px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Employee') }}</th>
                                            <th class="px-3 lg:px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Group') }}</th>
                                            <th class="px-3 lg:px-4 py-3 text-right text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Share') }}</th>
                                            <th class="px-3 lg:px-4 py-3 text-center text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Status') }}</th>
                                            <th class="px-3 lg:px-4 py-3 text-right text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Amount') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody class="divide-y divide-slate-100">
                                        @foreach ($viewGpRun->accruals as $share)
                                            <tr wire:key="gpshare-{{ $share->id }}">
                                                <td class="px-3 lg:px-4 py-3 text-sm font-medium text-slate-900">{{ $share->user?->name ?? '—' }}</td>
                                                <td class="px-3 lg:px-4 py-3"><x-badge :color="$planBadge[$share->pool_group] ?? 'slate'">{{ $planLabel[$share->pool_group] ?? ucfirst((string) $share->pool_group) }}</x-badge></td>
                                                <td class="whitespace-nowrap px-3 lg:px-4 py-3 text-right text-sm text-slate-500">{{ rtrim(rtrim(number_format((float) $share->rate, 2), '0'), '.') }}%@if ($share->pool_group === 'production' && $share->hours !== null)<span class="text-slate-400"> · {{ rtrim(rtrim(number_format((float) $share->hours, 2), '0'), '.') }}h</span>@endif</td>
                                                <td class="px-3 lg:px-4 py-3 text-center"><x-badge :color="$accrualBadge[$share->status] ?? 'slate'">{{ ucfirst($share->status) }}</x-badge></td>
                                                <td class="whitespace-nowrap px-3 lg:px-4 py-3 text-right text-sm font-bold text-slate-900">{{ $baseCode }} {{ number_format((float) $share->amount, 2) }}</td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                    <tfoot>
                                        <tr class="bg-slate-50/80 font-semibold text-slate-900">
                                            <td class="px-3 lg:px-4 py-3 text-sm" colspan="4">{{ __('Total shared') }}</td>
                                            <td class="px-3 lg:px-4 py-3 text-right text-sm">{{ $baseCode }} {{ number_format((float) $viewGpRun->accruals->sum('amount'), 2) }}</td>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        @endif
                    @else
                        <div class="flex h-full items-center justify-center p-10"><p class="text-center text-sm text-slate-400">{{ __('Select a pool to see the §20 entry and employee shares, or build one for a month.') }}</p></div>
                    @endif
                </x-card>
            </div>
        @endif

        {{-- ============================================================ --}}
        {{--  STAFF                                                       --}}
        {{-- ============================================================ --}}
        @if ($tab === 'staff')
            <x-card>
                <div class="overflow-x-auto">
                    <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">{{ __('Staff') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-right text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Salary / mo') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-right text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Daily') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-right text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Hourly') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-right text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Revenue Target') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Plans') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-right text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Loss Cap') }}</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>
                                @if ($canManage)<th class="px-3 lg:px-4 py-3.5 text-right text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Actions') }}</th>@endif
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100">
                            @forelse ($profiles as $p)
                                <tr wire:key="staff-{{ $p->id }}" class="transition-colors hover:bg-slate-50/70 {{ $p->is_active ? '' : 'opacity-60' }}">
                                    <td class="px-3 lg:px-4 py-4 text-sm">
                                        <p class="font-semibold text-slate-900">{{ $p->user?->name ?? '—' }}</p>
                                        <p class="text-xs text-slate-400">{{ $p->user?->email }}</p>
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm font-semibold text-slate-900">{{ $p->salary_currency_code ?: $baseCode }} {{ number_format((float) $p->monthly_salary, 2) }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm text-slate-600">{{ $baseCode }} {{ number_format((float) ($staffRates[$p->id]['daily'] ?? 0), 2) }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm text-slate-600">{{ $baseCode }} {{ number_format((float) ($staffRates[$p->id]['hourly'] ?? 0), 2) }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm text-slate-600">{{ $p->monthly_revenue_target !== null ? $baseCode . ' ' . number_format((float) $p->monthly_revenue_target, 2) : '—' }}</td>
                                    <td class="px-3 lg:px-4 py-4 text-sm text-slate-600">
                                        @if ($p->salesPlan)<x-badge color="indigo">{{ $p->salesPlan->name }}</x-badge>@endif
                                        @if ($p->productionPlan)<x-badge color="sky">{{ $p->productionPlan->name }}</x-badge>@endif
                                        @if (! $p->salesPlan && ! $p->productionPlan)<span class="text-xs text-slate-400">{{ __('Team default') }}</span>@endif
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm text-slate-600">{{ rtrim(rtrim(number_format((float) $p->loss_recovery_cap_pct, 2), '0'), '.') }}%</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm">
                                        <x-badge :color="$p->is_active ? 'emerald' : 'slate'">{{ $p->is_active ? __('Active') : __('Inactive') }}</x-badge>
                                        {{-- Why somebody's slip shows no PAYE or NSSA, visible without
                                             opening the record, because a silent exemption is how a
                                             deduction goes missing for a month before anyone notices. --}}
                                        @if ($p->is_consultant)
                                            <x-badge color="amber">{{ __('Consultant') }}</x-badge>
                                        @elseif ($p->paye_exempt || $p->nssa_exempt)
                                            <x-badge color="amber">{{ $p->paye_exempt && $p->nssa_exempt ? __('No PAYE / NSSA') : ($p->paye_exempt ? __('No PAYE') : __('No NSSA')) }}</x-badge>
                                        @endif
                                    </td>
                                    @if ($canManage)
                                        <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">
                                                <button wire:click="editStaff({{ $p->id }})" class="text-indigo-600 transition hover:text-indigo-700">{{ __('Edit') }}</button>
                                                <button wire:click="deleteStaff({{ $p->id }})" wire:confirm="{{ __('Remove this staff profile?') }}" class="text-rose-600 transition hover:text-rose-700"><x-icon name="trash" class="h-4 w-4" /></button>
                                            </div>
                                        </td>
                                    @endif
                                </tr>
                            @empty
                                <tr><td colspan="{{ $canManage ? 9 : 8 }}" class="px-3 lg:px-4 py-12">
                                    <x-empty-state icon="identification" :title="__('No team members yet')" :message="__('Everyone you add to the workspace becomes an employee here automatically. Invite team members to get started.')" class="border-0" />
                                </td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </x-card>
        @endif

        {{-- ============================================================ --}}
        {{--  BENEFITS, ALLOWANCES & DEDUCTIONS                           --}}
        {{-- ============================================================ --}}
        @if ($tab === 'statutory' && ($canManagePay ?? false))
            @if (! $activeTaxTable)
                <x-card class="border-amber-200 bg-amber-50/60 p-4 sm:p-5">
                    <div class="flex gap-3">
                        <x-icon name="exclamation-triangle" class="mt-0.5 h-5 w-5 shrink-0 text-amber-500" />
                        <div class="text-sm text-amber-900">
                            <p class="font-semibold">{{ __('No tax table is in force this month') }}</p>
                            <p class="mt-0.5 text-amber-800">
                                {{ __('Payroll will pay everyone their full gross with no NSSA or PAYE deducted. Add a table covering this month before you finalize a run.') }}
                            </p>
                        </div>
                    </div>
                </x-card>
            @endif

            <div class="grid grid-cols-1 gap-6 lg:grid-cols-12">
                <x-card class="overflow-hidden lg:col-span-7">
                    <div class="border-b border-slate-100 p-4 sm:p-5">
                        <h2 class="text-base font-semibold text-slate-900">{{ __('PAYE & NSSA tables') }}</h2>
                        <p class="text-xs text-slate-400">
                            {{ __('What the law takes off pay. Tables are dated rather than edited: when ZIMRA re-issues them, add a new one from that month and old payslips keep being computed under the rules they were earned under.') }}
                        </p>
                    </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">{{ __('Table') }}</th>
                                    <th class="px-3 lg:px-4 py-3.5">{{ __('In force') }}</th>
                                    <th class="px-3 lg:px-4 py-3.5">{{ __('NSSA') }}</th>
                                    <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Actions') }}</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-slate-100 bg-white">
                                @forelse ($taxTables as $taxTable)
                                    <tr wire:key="tax-{{ $taxTable->id }}" class="transition hover:bg-slate-50/70 {{ $taxTable->is_active ? '' : 'opacity-60' }}">
                                        <td class="px-3 lg:px-4 py-4 text-sm">
                                            <span class="font-semibold text-slate-900">{{ $taxTable->name }}</span>
                                            @if ($activeTaxTable && $activeTaxTable->id === $taxTable->id)
                                                <x-badge color="emerald" class="ms-1.5">{{ __('In force') }}</x-badge>
                                            @endif
                                            <span class="mt-0.5 block text-xs text-slate-400">
                                                {{ trans_choice('{1}:count band|[2,*]:count bands', count($taxTable->normalisedBands()), ['count' => count($taxTable->normalisedBands())]) }}
                                                · {{ __(':pct% AIDS levy', ['pct' => rtrim(rtrim(number_format((float) $taxTable->aids_levy_pct, 2), '0'), '.')]) }}
                                                · {{ $taxTable->currency_code ?: $baseCode }}
                                            </span>
                                        </td>
                                        <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm text-slate-600">
                                            {{ $taxTable->windowLabel() }}
                                        </td>
                                        <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm text-slate-600">
                                            {{ rtrim(rtrim(number_format((float) $taxTable->nssa_employee_pct, 2), '0'), '.') }}%
                                            + {{ rtrim(rtrim(number_format((float) $taxTable->nssa_employer_pct, 2), '0'), '.') }}%
                                            <span class="mt-0.5 block text-xs text-slate-400">
                                                @if ($taxTable->nssa_insurable_ceiling !== null)
                                                    {{ __('capped at :v insurable', ['v' => number_format((float) $taxTable->nssa_insurable_ceiling, 2)]) }}
                                                @else
                                                    {{ __('no ceiling') }}
                                                @endif
                                            </span>
                                        </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">
                                                <button wire:click="editTaxTable({{ $taxTable->id }})" class="text-indigo-600 transition hover:text-indigo-800">{{ __('Edit') }}</button>
                                                <button wire:click="deleteTaxTable({{ $taxTable->id }})"
                                                    wire:confirm="{{ __('Remove this table? Payslips already finalized under it keep their figures.') }}"
                                                    class="text-rose-600 transition hover:text-rose-800">{{ __('Delete') }}</button>
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="4" class="px-6 py-12">
                                            <x-empty-state icon="scale-balance" :title="__('No tax tables yet')"
                                                :message="__('Add the PAYE bands and NSSA rates that apply to your staff. The published ZIMRA USD monthly table is pre-filled for you, so most of the work is checking it.')" class="border-0">
                                                <x-button wire:click="createTaxTable" type="button">
                                                    <x-icon name="plus" class="-ms-1 me-1.5 h-4 w-4" />{{ __('New Tax Table') }}
                                                </x-button>
                                            </x-empty-state>
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </x-card>

                {{-- Check the system against a slip you already trust. --}}
                <x-card class="lg:col-span-5">
                    <div class="border-b border-slate-100 p-4 sm:p-5">
                        <h2 class="text-base font-semibold text-slate-900">{{ __('Try a figure') }}</h2>
                        <p class="text-xs text-slate-400">
                            {{ __('Work a salary through the table in force this month, and see exactly how the deductions were arrived at.') }}
                        </p>
                    </div>

                    <div class="space-y-4 p-4 sm:p-5">
                        <div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
                            <div>
                                <x-label for="tax_preview_basis" :value="__('The figure I have is')" />
                                <select id="tax_preview_basis" wire:model="tax_preview_basis" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                    @foreach ($salaryBases as $key => $label)
                                        <option value="{{ $key }}">{{ __($label) }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div>
                                <x-label for="tax_preview_gross" :value="__('Amount').' ('.$baseCode.')'" />
                                <x-input id="tax_preview_gross" wire:model="tax_preview_gross" type="number" step="0.01" min="0" class="mt-1 block w-full" placeholder="302.52" />
                            </div>
                        </div>

                        <x-button wire:click="previewStatutory" type="button" class="w-full justify-center">
                            <x-icon name="calculator" class="-ms-1 me-1.5 h-4 w-4" />{{ __('Work it out') }}
                        </x-button>

                        @if ($taxPreview)
                            <dl class="divide-y divide-slate-100 rounded-lg border border-slate-200 text-sm">
                                @if (isset($taxPreview['grossed_up_from']))
                                    <div class="flex items-center justify-between bg-indigo-50/60 px-3 py-2">
                                        <dt class="text-indigo-700">{{ __('Take-home promised') }}</dt>
                                        <dd class="font-semibold tabular-nums text-indigo-900">{{ number_format((float) $taxPreview['grossed_up_from'], 2) }}</dd>
                                    </div>
                                @endif
                                <div class="flex items-center justify-between px-3 py-2">
                                    <dt class="text-slate-500">{{ __('Gross pay') }}</dt>
                                    <dd class="font-semibold tabular-nums text-slate-900">{{ number_format((float) $taxPreview['gross'], 2) }}</dd>
                                </div>
                                <div class="flex items-center justify-between px-3 py-2">
                                    <dt class="text-slate-500">{{ __('Insurable earnings') }}</dt>
                                    <dd class="tabular-nums text-slate-700">{{ number_format((float) $taxPreview['insurable_earnings'], 2) }}</dd>
                                </div>
                                <div class="flex items-center justify-between px-3 py-2">
                                    <dt class="text-slate-500">{{ __('Employee NSSA') }}</dt>
                                    <dd class="tabular-nums text-rose-600">−{{ number_format((float) $taxPreview['nssa_employee'], 2) }}</dd>
                                </div>
                                <div class="flex items-center justify-between px-3 py-2">
                                    <dt class="text-slate-500">{{ __('Taxable pay') }}</dt>
                                    <dd class="tabular-nums text-slate-700">{{ number_format((float) $taxPreview['taxable_pay'], 2) }}</dd>
                                </div>
                                <div class="flex items-center justify-between px-3 py-2">
                                    <dt class="text-slate-500">
                                        {{ __('PAYE incl. AIDS levy') }}
                                        <span class="block text-xs text-slate-400">
                                            {{ __('tax :tax + levy :levy', [
                                                'tax' => number_format((float) $taxPreview['income_tax'], 2),
                                                'levy' => number_format((float) $taxPreview['aids_levy'], 2),
                                            ]) }}
                                        </span>
                                    </dt>
                                    <dd class="tabular-nums text-rose-600">−{{ number_format((float) $taxPreview['paye_total'], 2) }}</dd>
                                </div>
                                <div class="flex items-center justify-between bg-slate-50 px-3 py-2.5">
                                    <dt class="font-semibold text-slate-900">{{ __('Net pay') }}</dt>
                                    <dd class="text-base font-bold tabular-nums text-slate-900">{{ number_format((float) $taxPreview['net_of_statutory'], 2) }}</dd>
                                </div>
                                <div class="flex items-center justify-between px-3 py-2">
                                    <dt class="text-slate-500">{{ __('Employer NSSA') }}</dt>
                                    <dd class="tabular-nums text-slate-700">{{ number_format((float) $taxPreview['nssa_employer'], 2) }}</dd>
                                </div>
                                <div class="flex items-center justify-between px-3 py-2">
                                    <dt class="text-slate-500">{{ __('Total employer cost') }}</dt>
                                    <dd class="font-semibold tabular-nums text-slate-900">
                                        {{ number_format((float) $taxPreview['gross'] + (float) $taxPreview['nssa_employer'], 2) }}
                                    </dd>
                                </div>
                            </dl>
                        @endif
                    </div>
                </x-card>
            </div>
        @endif

        @if ($tab === 'components' && ($canManagePay ?? false))
            <x-card class="overflow-hidden">
                <div class="border-b border-slate-100 p-4 sm:p-5">
                    <h2 class="text-base font-semibold text-slate-900">{{ __('Benefits, allowances & deductions') }}</h2>
                    <p class="text-xs text-slate-400">
                        {{ __('Payroll works these out for every payslip automatically. Change a rule once and every future slip follows; finalized slips keep what they actually paid.') }}
                    </p>
                </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">{{ __('Name') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Kind') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('How it is worked out') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Who gets it') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Status') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Actions') }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 bg-white">
                            {{-- $benefit, not $component: Blade reserves $component inside <x-…> tags. --}}
                            @forelse ($components as $benefit)
                                <tr wire:key="comp-{{ $benefit->id }}" class="transition hover:bg-slate-50/70 {{ $benefit->is_active ? '' : 'opacity-60' }}">
                                    <td class="px-3 lg:px-4 py-4 text-sm">
                                        <span class="font-semibold text-slate-900">{{ $benefit->name }}</span>
                                        @if ($benefit->code)
                                            <span class="ms-1 font-mono text-[11px] text-slate-400">{{ $benefit->code }}</span>
                                        @endif
                                        @if ($benefit->description)
                                            <span class="mt-0.5 block text-xs text-slate-400">{{ $benefit->description }}</span>
                                        @endif
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm">
                                        <x-badge :color="$componentKindBadge[$benefit->kind] ?? 'slate'">{{ $benefit->kindLabel() }}</x-badge>
                                    </td>
                                    <td class="px-3 lg:px-4 py-4 text-sm text-slate-600">
                                        {{ $benefit->ruleLabel($baseCode) }}
                                        @if ($benefit->min_amount !== null || $benefit->max_amount !== null)
                                            <span class="mt-0.5 block text-xs text-slate-400">
                                                @if ($benefit->min_amount !== null){{ __('min :v', ['v' => number_format((float) $benefit->min_amount, 2)]) }}@endif
                                                @if ($benefit->min_amount !== null && $benefit->max_amount !== null) · @endif
                                                @if ($benefit->max_amount !== null){{ __('capped at :v', ['v' => number_format((float) $benefit->max_amount, 2)]) }}@endif
                                            </span>
                                        @endif
                                        @if ($benefit->kind === 'allowance' && ! $benefit->is_taxable)
                                            <span class="mt-0.5 block text-xs text-slate-400">{{ __('Not counted in gross for %-of-gross rules') }}</span>
                                        @endif
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm text-slate-600">
                                        @if ($benefit->applies_to === 'all')
                                            <span class="font-medium text-slate-800">{{ __('Everyone') }}</span>
                                        @else
                                            {{ trans_choice('{0}Nobody yet|{1}:count employee|[2,*]:count employees', $benefit->staff_profiles_count, ['count' => $benefit->staff_profiles_count]) }}
                                        @endif
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm">
                                        @if (($statutoryInForce ?? false) && $benefit->duplicatesStatutory())
                                            <x-badge color="amber">{{ __('Handled by tax tables') }}</x-badge>
                                            <span class="mt-1 block whitespace-normal text-xs text-slate-400">
                                                {{ __('Payroll deducts this itself under the statutory tables, so this row is not charged as well.') }}
                                            </span>
                                        @else
                                            <x-badge :color="$benefit->is_active ? 'emerald' : 'slate'">
                                                {{ $benefit->is_active ? __('Active') : __('Paused') }}
                                            </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">
                                            <button wire:click="editComponent({{ $benefit->id }})" class="text-indigo-600 transition hover:text-indigo-800">{{ __('Edit') }}</button>
                                            <button wire:click="toggleComponent({{ $benefit->id }})" class="text-slate-500 transition hover:text-slate-700">
                                                {{ $benefit->is_active ? __('Pause') : __('Resume') }}
                                            </button>
                                            <button wire:click="deleteComponent({{ $benefit->id }})"
                                                wire:confirm="{{ __('Remove this from the catalogue? Past payslips keep what they paid.') }}"
                                                class="text-rose-600 transition hover:text-rose-800">{{ __('Delete') }}</button>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="6" class="px-6 py-12">
                                        <x-empty-state icon="gift" :title="__('No benefits or deductions yet')"
                                            :message="__('Add the things that sit between basic salary and net pay, housing and transport allowances, medical cover, pension, staff purchases. Payroll then calculates each one for you.')"
                                            class="border-0 bg-transparent py-0" />
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </x-card>
        @endif

        {{-- ============================================================ --}}
        {{--  LIABILITIES                                                 --}}
        {{-- ============================================================ --}}
        @if ($tab === 'liabilities')
            <x-card>
                <div class="overflow-x-auto">
                    <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">{{ __('Staff') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Reason') }}</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-right text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Total') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-right text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Recovered') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Plan') }}</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>
                                @if ($canManage)<th class="px-3 lg:px-4 py-3.5 text-right text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Actions') }}</th>@endif
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100">
                            @forelse ($liabilities as $l)
                                <tr wire:key="liab-{{ $l->id }}" class="transition-colors hover:bg-slate-50/70">
                                    <td class="px-3 lg:px-4 py-4 text-sm font-medium text-slate-900">{{ $l->user?->name ?? '—' }}</td>
                                    <td class="px-3 lg:px-4 py-4 text-sm text-slate-600">{{ \Illuminate\Support\Str::limit($l->reason, 48) }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm text-slate-500">{{ $l->job?->job_number ?? '—' }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm font-semibold text-slate-900">{{ $baseCode }} {{ number_format((float) $l->total_amount, 2) }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm text-slate-600">
                                        {{ $baseCode }} {{ number_format((float) $l->recovered_amount, 2) }}
                                        <span class="block text-xs text-slate-400">{{ __('left :amt', ['amt' => $baseCode . ' ' . number_format($l->outstanding, 2)]) }}</span>
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm text-slate-600">{{ __(':n mo', ['n' => $l->recover_months]) }}{{ $l->monthly_cap_pct !== null ? ' · ' . rtrim(rtrim(number_format((float)$l->monthly_cap_pct,2),'0'),'.') . '%' : '' }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm"><x-badge :color="$liabilityBadge[$l->status] ?? 'slate'">{{ ucfirst($l->status) }}</x-badge></td>
                                    @if ($canManage)
                                        <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">
                                                @if ($l->signedUrl())
                                                    <a href="{{ $l->signedUrl() }}" target="_blank" rel="noopener" title="{{ __('Signed acknowledgement on file') }}" class="inline-flex items-center text-emerald-600 transition hover:text-emerald-700"><x-icon name="check-circle" class="h-4 w-4" /></a>
                                                @endif
                                                <a href="{{ route('payroll.liability.acknowledgement', ['staffLiability' => $l->id]) }}" title="{{ __('Download acknowledgement') }}" class="text-slate-500 transition hover:text-slate-700">{{ __('Ack') }}</a>
                                                @if ($l->status === 'active')
                                                    <button wire:click="editLiability({{ $l->id }})" class="text-indigo-600 transition hover:text-indigo-700">{{ __('Edit') }}</button>
                                                    <button wire:click="waiveLiability({{ $l->id }})" wire:confirm="{{ __('Waive the remaining balance? No further deductions will be taken.') }}" class="text-amber-600 transition hover:text-amber-700">{{ __('Waive') }}</button>
                                                @endif
                                            </div>
                                        </td>
                                    @endif
                                </tr>
                            @empty
                                <tr><td colspan="{{ $canManage ? 8 : 7 }}" class="px-3 lg:px-4 py-12">
                                    <x-empty-state icon="check-circle" :title="__('No losses recorded')" :message="__('When a mistake costs the shop money, record it here to recover it from the responsible person\'s pay over time.')" class="border-0">
                                        @if ($canManage)<x-button wire:click="createLiability" type="button"><x-icon name="plus" class="-ms-1 me-1.5 h-4 w-4" />{{ __('Record Loss') }}</x-button>@endif
                                    </x-empty-state>
                                </td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                <div class="border-t border-slate-100 px-4 py-3 sm:px-6">{{ $liabilities->links() }}</div>
            </x-card>
        @endif

        {{-- ============================================================ --}}
        {{--  PAY RUNS                                                    --}}
        {{-- ============================================================ --}}
        @if ($tab === 'runs')
            @if (! ($activeTaxTable ?? null) && ($canManagePay ?? false))
                <x-card class="border-amber-200 bg-amber-50/60 p-4 sm:p-5">
                    <div class="flex gap-3">
                        <x-icon name="exclamation-triangle" class="mt-0.5 h-5 w-5 shrink-0 text-amber-500" />
                        <div class="text-sm text-amber-900">
                            <p class="font-semibold">{{ __('No PAYE or NSSA will be deducted') }}</p>
                            <p class="mt-0.5 text-amber-800">
                                {{ __('There is no tax table in force for this period, so everyone is paid their full gross. Set one up before you finalize, or the deductions will have to be corrected later.') }}
                            </p>
                            <button type="button" wire:click="setTab('statutory')"
                                class="mt-2 text-sm font-semibold text-amber-900 underline transition hover:text-amber-950">
                                {{ __('Set up the tax tables') }}
                            </button>
                        </div>
                    </div>
                </x-card>
            @endif

            <div class="grid grid-cols-1 gap-6 lg:grid-cols-12">
                <x-card class="lg:col-span-5">
                    <div class="border-b border-slate-100 p-4 sm:p-5"><h2 class="text-base font-semibold text-slate-900">{{ __('Payroll Runs') }}</h2></div>
                    <div class="divide-y divide-slate-100">
                        @forelse ($runs as $run)
                            <button type="button" wire:click="viewRun({{ $run->id }})" wire:key="run-{{ $run->id }}" @class(['flex w-full items-center justify-between gap-4 p-4 text-left transition hover:bg-slate-50/70', 'bg-indigo-50/60' => $viewRun && $viewRun->id === $run->id])>
                                <div>
                                    <p class="font-semibold text-slate-900">{{ $run->period->format('F Y') }}</p>
                                    <p class="text-xs text-slate-400">{{ trans_choice('{0}No staff|{1}:count staff|[2,*]:count staff', $run->lines_count, ['count' => $run->lines_count]) }}</p>
                                </div>
                                <div class="text-right">
                                    <p class="text-sm font-bold text-slate-900">{{ $baseCode }} {{ number_format((float) ($run->lines_sum_net_pay ?? 0), 2) }}</p>
                                    <x-badge :color="$runBadge[$run->status] ?? 'slate'">{{ ucfirst($run->status) }}</x-badge>
                                </div>
                            </button>
                        @empty
                            <div class="p-6"><x-empty-state icon="credit-card" :title="__('No pay runs yet')" :message="__('Build a draft run for a month to net salaries, commissions and loss deductions into each person\'s pay.')" class="border-0">
                                @if ($canProcessPayroll)<x-button wire:click="openRunModal" type="button"><x-icon name="plus" class="-ms-1 me-1.5 h-4 w-4" />{{ __('Build Pay Run') }}</x-button>@endif
                            </x-empty-state></div>
                        @endforelse
                    </div>
                    <div class="border-t border-slate-100 px-4 py-3 sm:px-6">{{ $runs->links() }}</div>
                </x-card>

                <x-card class="lg:col-span-7">
                    @if ($viewRun)
                        <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">{{ $viewRun->period->format('F Y') }}</h2>
                                <p class="text-xs text-slate-400">
                                    <x-badge :color="$runBadge[$viewRun->status] ?? 'slate'">{{ ucfirst($viewRun->status) }}</x-badge>
                                    @if ($viewRun->isFinalized() && $viewRun->fundAccount)<span class="ms-1">{{ __('paid from :acct', ['acct' => $viewRun->fundAccount->name]) }}</span>@endif
                                </p>
                            </div>
            @if ($viewRun->isFinalized() && $canProcessPayroll)
                                <div class="flex gap-2">
                                {{-- Payroll goes out for everybody at once, so the slips do too.
                                     Each one lands at the address that person gave for it. --}}
                                <x-secondary-button
                                    wire:click="emailAllPayslips"
                                    wire:confirm="{{ __('Email every slip on this run to the staff it belongs to?') }}"
                                    wire:loading.attr="disabled" wire:target="emailAllPayslips"
                                    type="button">
                                    <x-icon name="envelope" class="-ms-1 me-1.5 h-4 w-4" />{{ __('Email slips') }}
                                </x-secondary-button>
                                {{-- Correcting a finalized month is deliberate work, so it asks
                                     plainly what it is about to reverse before doing any of it. --}}
                                <x-secondary-button
                                    wire:click="reopenRun({{ $viewRun->id }})"
                                    wire:confirm="{{ __('Reopen this pay run? The wage bill comes back out of treasury, loan instalments and loss recoveries are unwound, and commissions return to unpaid. The month is then a draft you can correct and finalize again.') }}"
                                    type="button">
                                    <x-icon name="lock-open" class="-ms-1 me-1.5 h-4 w-4" />{{ __('Reopen') }}
                                </x-secondary-button>
                                </div>
                            @endif
                            @if (! $viewRun->isFinalized() && $canProcessPayroll)
                                <div class="flex gap-2">
                                    <x-secondary-button wire:click="recomputeRun({{ $viewRun->id }})" type="button"><x-icon name="arrow-path" class="-ms-1 me-1.5 h-4 w-4" />{{ __('Recompute') }}</x-secondary-button>
                                    <x-button wire:click="openFinalize({{ $viewRun->id }})" type="button"><x-icon name="check-circle" class="-ms-1 me-1.5 h-4 w-4" />{{ __('Finalize') }}</x-button>
                                </div>
                            @endif
                        </div>
                        <div class="overflow-x-auto">
                            <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 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Staff') }}</th>
                                        <th class="px-3 lg:px-4 py-3 text-right text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Gross Pay') }}</th>
                                        <th class="px-3 lg:px-4 py-3 text-right text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Employee NSSA') }}</th>
                                        <th class="px-3 lg:px-4 py-3 text-right text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('PAYE incl. Levy') }}</th>
                                        <th class="px-3 lg:px-4 py-3 text-right text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Other Ded.') }}</th>
                                        <th class="px-3 lg:px-4 py-3 text-right text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Net Pay') }}</th>
                                        <th class="px-3 lg:px-4 py-3 text-right text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Employer NSSA') }}</th>
                                        <th class="px-3 lg:px-4 py-3 text-right text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Employer Cost') }}</th>
                                        <th class="px-3 lg:px-4 py-3 text-right text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Document') }}</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-slate-100">
                                    @forelse ($viewRun->lines as $line)
                                        <tr wire:key="line-{{ $line->id }}">
                                            <td class="px-3 lg:px-4 py-3 text-sm">
                                                <span class="font-medium text-slate-900">{{ $line->user?->name ?? '—' }}</span>
                                                @if ($line->isConsultantFee())
                                                    <span class="ms-1 align-middle"><x-badge color="amber">{{ __('Fee') }}</x-badge></span>
                                                @endif
                                                <span class="block text-xs text-slate-400">
                                                    {{ $line->payMethodLabel() }}@if ($line->fundAccount) · {{ $line->fundAccount->name }}@endif
                                                </span>
                                            </td>
                                            @php $otherDeductions = round((float) $line->deduction_total - (float) $line->statutory_total, 2); @endphp
                                            <td class="whitespace-nowrap px-3 lg:px-4 py-3 text-right text-sm text-slate-600">
                                                {{ number_format((float) $line->gross_pay, 2) }}
                                                @if ($line->isGrossedUp())
                                                    <span class="block text-[11px] text-indigo-500" title="{{ __('Solved back from an agreed take-home') }}">{{ __('grossed up') }}</span>
                                                @endif
                                            </td>
                                            <td class="whitespace-nowrap px-3 lg:px-4 py-3 text-right text-sm {{ $line->nssa_employee > 0 ? 'text-rose-600' : 'text-slate-300' }}">
                                                {{ $line->nssa_employee > 0 ? '−' . number_format((float) $line->nssa_employee, 2) : '—' }}
                                            </td>
                                            <td class="whitespace-nowrap px-3 lg:px-4 py-3 text-right text-sm {{ $line->paye_total > 0 ? 'text-rose-600' : 'text-slate-300' }}">
                                                {{ $line->paye_total > 0 ? '−' . number_format((float) $line->paye_total, 2) : '—' }}
                                            </td>
                                            <td class="whitespace-nowrap px-3 lg:px-4 py-3 text-right text-sm {{ $otherDeductions > 0 ? 'text-rose-600' : 'text-slate-300' }}">{{ $otherDeductions > 0 ? '−' . number_format($otherDeductions, 2) : '—' }}</td>
                                            <td class="whitespace-nowrap px-3 lg:px-4 py-3 text-right text-sm font-bold text-slate-900">
                                                {{ $baseCode }} {{ number_format((float) $line->net_pay, 2) }}
                                                @if ($line->partMonth())
                                                    <span class="block text-[11px] font-normal text-sky-600" title="{{ __('Part month') }}">{{ __('part month: :d of :of days', ['d' => rtrim(rtrim(number_format($line->partMonth()['days'], 2), '0'), '.'), 'of' => number_format($line->partMonth()['of'], 2)]) }}</span>
                                                @endif
                                                @if ($line->pay_deferred)
                                                    <span class="block text-[11px] font-semibold text-amber-600">{{ __('deferred to next month') }}</span>
                                                @elseif ($line->isPartlyPaid())
                                                    <span class="block text-[11px] font-semibold text-amber-600">{{ __('paid now :a · owed :b', ['a' => number_format($line->amountPaidNow(), 2), 'b' => number_format($line->amountOwed(), 2)]) }}</span>
                                                @endif
                                                @php $arrearsOnSlip = $viewRun->isFinalized() ? (float) $line->arrears_paid : $line->plannedArrears(); @endphp
                                                @if ($arrearsOnSlip > 0)
                                                    <span class="block text-[11px] font-semibold text-emerald-600">{{ __('+ arrears :a', ['a' => number_format($arrearsOnSlip, 2)]) }}</span>
                                                @endif
                                                @if (! $viewRun->isFinalized() && $canProcessPayroll)
                                                    <button type="button" wire:click="openPaidNow({{ $line->id }})" class="mt-0.5 block w-full text-right text-[11px] font-medium text-indigo-600 hover:text-indigo-800">{{ __('Paid now…') }}</button>
                                                @endif
                                            </td>
                                            <td class="whitespace-nowrap px-3 lg:px-4 py-3 text-right text-sm {{ $line->nssa_employer > 0 ? 'text-slate-600' : 'text-slate-300' }}">
                                                {{ $line->nssa_employer > 0 ? number_format((float) $line->nssa_employer, 2) : '—' }}
                                            </td>
                                            <td class="whitespace-nowrap px-3 lg:px-4 py-3 text-right text-sm text-slate-600">{{ number_format($line->totalEmployerCost(), 2) }}</td>
                                            <td class="whitespace-nowrap px-3 lg:px-4 py-3 text-right text-sm font-medium">
                                                @if ($viewRun->isFinalized())
                                                    <a href="{{ route('payroll.payslip', $line) }}?preview=1" target="_blank"
                                                        title="{{ $line->documentLabel() }}"
                                                        class="text-indigo-600 transition hover:text-indigo-800">{{ __('View') }}</a>
                                                    @if ($canProcessPayroll)
                                                        @php $slipEmail = $payslipEmails[$line->user_id] ?? $line->user?->email; @endphp
                                                        <span class="text-slate-300">·</span>
                                                        <button type="button" wire:click="emailPayslip({{ $line->id }})"
                                                            wire:loading.attr="disabled" wire:target="emailPayslip({{ $line->id }})"
                                                            title="{{ $slipEmail ?: __('No email address on file') }}"
                                                            class="text-indigo-600 transition hover:text-indigo-800 disabled:opacity-40">
                                                            {{ $line->payslip_emailed_at ? __('Resend') : __('Email') }}
                                                        </button>
                                                        @if ($line->payslip_emailed_at)
                                                            <span class="block text-[11px] text-emerald-600">
                                                                {{ __('sent :when', ['when' => $line->payslip_emailed_at->timezone(config('app.display_timezone'))->format('j M, H:i')]) }}
                                                            </span>
                                                        @endif
                                                    @endif
                                                @else
                                                    <span class="text-xs text-slate-300">{{ __('On finalize') }}</span>
                                                @endif
                                            </td>
                                        </tr>
                                    @empty
                                        <tr><td colspan="9" class="px-5 py-10 text-center text-sm text-slate-400">{{ __('No staff profiles to pay. Add staff first.') }}</td></tr>
                                    @endforelse
                                </tbody>
                                @if ($viewRun->lines->isNotEmpty())
                                    <tfoot>
                                        <tr class="bg-slate-50/80 font-semibold text-slate-900">
                                            <td class="px-3 lg:px-4 py-3 text-sm">{{ __('Total') }}</td>
                                            <td class="px-3 lg:px-4 py-3 text-right text-sm">{{ number_format((float) $viewRun->lines->sum('gross_pay'), 2) }}</td>
                                            <td class="px-3 lg:px-4 py-3 text-right text-sm text-rose-600">−{{ number_format((float) $viewRun->lines->sum('nssa_employee'), 2) }}</td>
                                            <td class="px-3 lg:px-4 py-3 text-right text-sm text-rose-600">−{{ number_format((float) $viewRun->lines->sum('paye_total'), 2) }}</td>
                                            <td class="px-3 lg:px-4 py-3 text-right text-sm text-rose-600">
                                                −{{ number_format((float) $viewRun->lines->sum('deduction_total') - (float) $viewRun->lines->sum('statutory_total'), 2) }}
                                            </td>
                                            <td class="px-3 lg:px-4 py-3 text-right text-sm">{{ $baseCode }} {{ number_format((float) $viewRun->lines->sum('net_pay'), 2) }}</td>
                                            <td class="px-3 lg:px-4 py-3 text-right text-sm">{{ number_format((float) $viewRun->lines->sum('nssa_employer'), 2) }}</td>
                                            <td class="px-3 lg:px-4 py-3 text-right text-sm">
                                                {{ number_format($viewRun->lines->sum(fn ($l) => $l->totalEmployerCost()), 2) }}
                                            </td>
                                            <td></td>
                                        </tr>
                                    </tfoot>
                                @endif
                            </table>
                        </div>
                    @else
                        <div class="flex h-full items-center justify-center p-10"><p class="text-center text-sm text-slate-400">{{ __('Select a run to see the slips, or build a new one.') }}</p></div>
                    @endif
                </x-card>
            </div>

            {{-- Salary owed: what finalized runs did not pay out yet. --}}
            @if ($owedSalaries->isNotEmpty())
                <x-card class="overflow-hidden">
                    <div class="flex flex-col gap-1 border-b border-slate-100 p-4 sm:p-5">
                        <h2 class="text-base font-semibold text-slate-900">{{ __('Salary owed') }}</h2>
                        <p class="text-xs text-slate-400">{{ __('Pay that was earned and taxed in its month but not yet paid. It is paid on the next run as an arrears row, or here, straight from an account.') }}</p>
                    </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">{{ __('Employee') }}</th>
                                    <th class="px-3 lg:px-4 py-3.5">{{ __('Earned in') }}</th>
                                    <th class="px-3 lg:px-4 py-3.5">{{ __('Reason') }}</th>
                                    <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Owed') }}</th>
                                    <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Paid so far') }}</th>
                                    <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Still owed') }}</th>
                                    <th class="px-3 lg:px-4 py-3.5 text-right"></th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-slate-100 bg-white">
                                @foreach ($owedSalaries as $owed)
                                    <tr wire:key="owed-{{ $owed->id }}" class="transition hover:bg-slate-50/70">
                                        <td class="px-3 lg:px-4 py-4 text-sm font-medium text-slate-900">{{ $owed->user?->name }}</td>
                                        <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm text-slate-500">
                                            {{ $owed->periodLabel() }}
                                            @if ($owed->deferred)<span class="ms-1"><x-badge color="amber">{{ __('Deferred') }}</x-badge></span>@endif
                                        </td>
                                        <td class="px-3 lg:px-4 py-4 text-sm text-slate-500">{{ $owed->reason ?: '-' }}</td>
                                        <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm tabular-nums text-slate-600">{{ number_format((float) $owed->amount, 2) }}</td>
                                        <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm tabular-nums text-slate-600">{{ number_format((float) $owed->settled_amount, 2) }}</td>
                                        <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm tabular-nums font-semibold text-slate-900">{{ $baseCode }} {{ number_format($owed->outstanding(), 2) }}</td>
                                        <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm font-medium">
                                            @if ($canManagePay)
                                                <button type="button" wire:click="openPayOwed({{ $owed->id }})" class="text-indigo-600 transition hover:text-indigo-800">{{ __('Pay owed salary') }}</button>
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </x-card>
            @endif
        @endif

        {{-- ============================================================ --}}
        {{--  PLANS                                                       --}}
        {{-- ============================================================ --}}
        @if ($tab === 'plans')
            <section class="grid grid-cols-1 gap-5 md:grid-cols-2 xl:grid-cols-3">
                @forelse ($plans as $plan)
                    <x-card wire:key="plan-{{ $plan->id }}" class="flex flex-col p-5 {{ $plan->is_active ? '' : 'opacity-60' }}">
                        <div class="flex items-start justify-between">
                            <div>
                                <x-badge :color="$planBadge[$plan->applies_to] ?? 'slate'">{{ $planLabel[$plan->applies_to] ?? ucfirst($plan->applies_to) }}</x-badge>
                                <h3 class="mt-2 text-base font-semibold text-slate-900">{{ $plan->name }}</h3>
                            </div>
                            @if ($canManage)
                                <div class="flex items-center gap-2">
                                    <button wire:click="editPlan({{ $plan->id }})" class="text-indigo-600 transition hover:text-indigo-700"><x-icon name="pencil-square" class="h-4 w-4" /></button>
                                    <button wire:click="deletePlan({{ $plan->id }})" wire:confirm="{{ __('Delete this plan?') }}" class="text-rose-600 transition hover:text-rose-700"><x-icon name="trash" class="h-4 w-4" /></button>
                                </div>
                            @endif
                        </div>

                        <div class="mt-4 flex-1 space-y-2 text-sm text-slate-600">
                            @if ($plan->applies_to === 'sales')
                                <p class="text-xs font-semibold uppercase tracking-wider text-slate-400">{{ __('Tiers (% of gross profit)') }}</p>
                                @foreach ($plan->tiers as $tier)
                                    <div class="flex items-center justify-between rounded-lg bg-slate-50 px-3 py-1.5">
                                        <span>≥ {{ rtrim(rtrim(number_format($tier['min_attainment'], 1), '0'), '.') }}% {{ __('of target') }}</span>
                                        <span class="font-semibold text-slate-900">{{ rtrim(rtrim(number_format($tier['rate'], 2), '0'), '.') }}%</span>
                                    </div>
                                @endforeach
                            @elseif ($plan->applies_to === 'gp_hurdle')
                                @php $cfg = $plan->config ?? []; @endphp
                                <p class="text-xs font-semibold uppercase tracking-wider text-slate-400">{{ __('Company-wide monthly pool') }}</p>
                                <div class="flex items-center justify-between rounded-lg bg-slate-50 px-3 py-1.5">
                                    <span>{{ __('Hurdle multiplier') }}</span>
                                    <span class="font-semibold text-slate-900">{{ isset($cfg['multiplier']) ? '× '.rtrim(rtrim(number_format((float) $cfg['multiplier'], 2), '0'), '.') : __('workspace default') }}</span>
                                </div>
                                <div class="flex items-center justify-between rounded-lg bg-slate-50 px-3 py-1.5">
                                    <span>{{ __('Pool rate') }}</span>
                                    <span class="font-semibold text-slate-900">{{ isset($cfg['pool_rate']) ? rtrim(rtrim(number_format((float) $cfg['pool_rate'] * 100, 2), '0'), '.').'%' : __('workspace default') }}</span>
                                </div>
                                <div class="flex items-center justify-between rounded-lg bg-slate-50 px-3 py-1.5">
                                    <span>{{ __('Share method') }}</span>
                                    <span class="font-semibold text-slate-900">{{ ($cfg['share_method'] ?? 'weighted') === 'equal' ? __('Equal split') : __('By contribution') }}</span>
                                </div>
                            @else
                                <div class="flex items-center justify-between rounded-lg bg-slate-50 px-3 py-1.5">
                                    <span>{{ __('Profit-share pool') }}</span>
                                    <span class="font-semibold text-slate-900">{{ rtrim(rtrim(number_format((float) $plan->pool_rate, 2), '0'), '.') }}%</span>
                                </div>
                            @endif
                        </div>

                        <div class="mt-4 flex flex-wrap gap-1.5 border-t border-slate-100 pt-3">
                            @if ($plan->margin_floor !== null)<span class="rounded-full bg-slate-100 px-2 py-0.5 text-[11px] font-medium text-slate-600">{{ __('Margin ≥ :n%', ['n' => rtrim(rtrim(number_format((float)$plan->margin_floor,2),'0'),'.')]) }}</span>@endif
                            @if ($plan->require_invoice_paid)<span class="rounded-full bg-emerald-50 px-2 py-0.5 text-[11px] font-medium text-emerald-700">{{ __('Paid invoice') }}</span>@endif
                            @if ($plan->require_target_met)<span class="rounded-full bg-indigo-50 px-2 py-0.5 text-[11px] font-medium text-indigo-700">{{ __('Target unlock') }}</span>@endif
                            @if ($plan->require_on_time)<span class="rounded-full bg-sky-50 px-2 py-0.5 text-[11px] font-medium text-sky-700">{{ __('On time') }}</span>@endif
                            @if ($plan->require_within_budget)<span class="rounded-full bg-sky-50 px-2 py-0.5 text-[11px] font-medium text-sky-700">{{ __('Within budget') }}</span>@endif
                            @if ($plan->require_no_reprint)<span class="rounded-full bg-sky-50 px-2 py-0.5 text-[11px] font-medium text-sky-700">{{ __('No reprint') }}</span>@endif
                        </div>
                    </x-card>
                @empty
                    <div class="md:col-span-2 xl:col-span-3">
                        <x-card class="p-6"><x-empty-state icon="adjustments-horizontal" :title="__('No commission plans yet')" :message="__('Create a sales plan (tiered by target) and a production plan (profit-share pool) to start rewarding the team. Staff with no plan fall back to the team default.')" class="border-0">
                            @if ($canManage)<x-button wire:click="createPlan" type="button"><x-icon name="plus" class="-ms-1 me-1.5 h-4 w-4" />{{ __('New Plan') }}</x-button>@endif
                        </x-empty-state></x-card>
                    </div>
                @endforelse
            </section>
        @endif
    </div>

    {{-- ================================================================ --}}
    {{--  MODALS                                                          --}}
    {{-- ================================================================ --}}

    <!-- Plan modal -->
    <x-dialog-modal wire:model.live="showPlanModal" maxWidth="2xl">
        <x-slot name="title">{{ $planId ? __('Edit Commission Plan') : __('New Commission Plan') }}</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="plan_name" value="{{ __('Plan Name') }}" />
                        <x-input id="plan_name" type="text" class="mt-1 block w-full" wire:model="plan_name" placeholder="{{ __('e.g. Sales 2026, Press Crew') }}" />
                        <x-input-error for="plan_name" class="mt-2" />
                    </div>
                    <div>
                        <x-label for="plan_applies_to" value="{{ __('Applies To') }}" />
                        <select id="plan_applies_to" wire:model.live="plan_applies_to" 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="sales">{{ __('Sales, tiered by target') }}</option>
                            <option value="production">{{ __('Production, profit-share pool') }}</option>
                            <option value="gp_hurdle">{{ __('GP-Hurdle, company-wide monthly pool') }}</option>
                        </select>
                    </div>
                </div>

                @if ($plan_applies_to === 'sales')
                    <div class="rounded-xl border border-slate-200 p-4">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm font-semibold text-slate-800">{{ __('Tiers') }}</p>
                                <p class="text-xs text-slate-500">{{ __('Rate rises with % of monthly revenue target reached.') }}</p>
                            </div>
                            <button type="button" wire:click="addTier" class="text-sm font-medium text-indigo-600 hover:text-indigo-700">+ {{ __('Add tier') }}</button>
                        </div>
                        <div class="mt-3 space-y-2">
                            @foreach ($plan_tiers as $i => $tier)
                                <div class="flex items-center gap-3" wire:key="tier-{{ $i }}">
                                    <div class="flex flex-1 items-center gap-1">
                                        <span class="text-xs text-slate-400">≥</span>
                                        <x-input type="number" step="1" min="0" class="block w-full" wire:model="plan_tiers.{{ $i }}.min_attainment" />
                                        <span class="text-xs text-slate-400">% {{ __('target') }}</span>
                                    </div>
                                    <span class="text-slate-300">→</span>
                                    <div class="flex flex-1 items-center gap-1">
                                        <x-input type="number" step="0.01" min="0" class="block w-full" wire:model="plan_tiers.{{ $i }}.rate" />
                                        <span class="text-xs text-slate-400">% {{ __('profit') }}</span>
                                    </div>
                                    <button type="button" wire:click="removeTier({{ $i }})" class="text-rose-500 hover:text-rose-600"><x-icon name="x-mark" class="h-4 w-4" /></button>
                                </div>
                            @endforeach
                        </div>
                    </div>

                    <label class="flex items-center gap-2"><x-checkbox wire:model="plan_require_target_met" /><span class="text-sm text-slate-700">{{ __('Only payable if the monthly revenue target is met') }}</span></label>
                    <label class="flex items-center gap-2"><x-checkbox wire:model="plan_forfeit_if_target_missed" /><span class="text-sm text-slate-700">{{ __('Forfeit the month\'s commission if the target is missed (else carry forward)') }}</span></label>
                @elseif ($plan_applies_to === 'gp_hurdle')
                    <div class="rounded-xl border border-slate-200 p-4">
                        <p class="text-sm font-semibold text-slate-800">{{ __('Pool overrides') }}</p>
                        <p class="mt-0.5 text-xs text-slate-500">{{ __('Leave blank to inherit the workspace defaults (Settings → Profit & Commission). The pool is computed from the finance engine\'s gross profit and overheads.') }}</p>
                        <div class="mt-3 grid grid-cols-1 gap-4 sm:grid-cols-3">
                            <div>
                                <x-label for="plan_gp_multiplier" value="{{ __('Hurdle multiplier') }}" />
                                <x-input id="plan_gp_multiplier" type="number" step="0.01" min="0" class="mt-1 block w-full" wire:model="plan_gp_multiplier" placeholder="{{ __('default') }}" />
                                <x-input-error for="plan_gp_multiplier" class="mt-2" />
                            </div>
                            <div>
                                <x-label for="plan_gp_pool_rate_pct" value="{{ __('Pool rate %') }}" />
                                <x-input id="plan_gp_pool_rate_pct" type="number" step="0.01" min="0" max="100" class="mt-1 block w-full" wire:model="plan_gp_pool_rate_pct" placeholder="{{ __('default') }}" />
                                <x-input-error for="plan_gp_pool_rate_pct" class="mt-2" />
                            </div>
                            <div>
                                <x-label for="plan_gp_sales_split_pct" value="{{ __('Sales/Admin split %') }}" />
                                <x-input id="plan_gp_sales_split_pct" type="number" step="0.01" min="0" max="100" class="mt-1 block w-full" wire:model="plan_gp_sales_split_pct" placeholder="{{ __('default') }}" />
                                <p class="mt-1 text-xs text-slate-400">{{ __('Production = remainder.') }}</p>
                                <x-input-error for="plan_gp_sales_split_pct" class="mt-2" />
                            </div>
                        </div>
                        <div class="mt-3">
                            <x-label for="plan_gp_share_method" value="{{ __('Split each sub-pool among its group by') }}" />
                            <select id="plan_gp_share_method" wire:model="plan_gp_share_method" 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="weighted">{{ __('Contribution (sales by revenue, production by hours)') }}</option>
                                <option value="equal">{{ __('Equal split') }}</option>
                            </select>
                        </div>
                    </div>
                @else
                    <div>
                        <x-label for="plan_pool_rate" value="{{ __('Profit-share pool (% of gross profit)') }}" />
                        <x-input id="plan_pool_rate" type="number" step="0.01" min="0" max="100" class="mt-1 block w-full" wire:model="plan_pool_rate" placeholder="5" />
                        <p class="mt-1 text-xs text-slate-400">{{ __('Pooled per job and split among the crew by hours logged.') }}</p>
                        <x-input-error for="plan_pool_rate" class="mt-2" />
                    </div>
                    <div class="grid grid-cols-1 gap-2 sm:grid-cols-3">
                        <label class="flex items-center gap-2 rounded-lg border border-slate-200 px-3 py-2"><x-checkbox wire:model="plan_require_on_time" /><span class="text-sm text-slate-700">{{ __('On time') }}</span></label>
                        <label class="flex items-center gap-2 rounded-lg border border-slate-200 px-3 py-2"><x-checkbox wire:model="plan_require_within_budget" /><span class="text-sm text-slate-700">{{ __('Within budget') }}</span></label>
                        <label class="flex items-center gap-2 rounded-lg border border-slate-200 px-3 py-2"><x-checkbox wire:model="plan_require_no_reprint" /><span class="text-sm text-slate-700">{{ __('No reprint') }}</span></label>
                    </div>
                @endif

                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    @if ($plan_applies_to !== 'gp_hurdle')
                        <div>
                            <x-label for="plan_margin_floor" value="{{ __('Margin floor % (optional)') }}" />
                            <x-input id="plan_margin_floor" type="number" step="0.01" min="0" max="100" class="mt-1 block w-full" wire:model="plan_margin_floor" placeholder="{{ __('e.g. 15') }}" />
                            <p class="mt-1 text-xs text-slate-400">{{ __('No commission on jobs below this margin.') }}</p>
                        </div>
                    @endif
                    <div class="flex flex-col justify-end gap-2 pb-1">
                        <label class="flex items-center gap-2"><x-checkbox wire:model="plan_require_invoice_paid" /><span class="text-sm text-slate-700">{{ __('Require the invoice to be paid') }}</span></label>
                        <label class="flex items-center gap-2"><x-checkbox wire:model="plan_is_active" /><span class="text-sm text-slate-700">{{ __('Active') }}</span></label>
                    </div>
                </div>
            </div>
        </x-slot>
        <x-slot name="footer">
            <x-secondary-button wire:click="closePlan" wire:loading.attr="disabled">{{ __('Cancel') }}</x-secondary-button>
            <x-button class="ms-3" wire:click="savePlan" wire:loading.attr="disabled">{{ __('Save Plan') }}</x-button>
        </x-slot>
    </x-dialog-modal>

    <!-- Staff modal -->
    <x-dialog-modal wire:model.live="showStaffModal" maxWidth="2xl">
        <x-slot name="title">{{ $staffId ? __('Edit Staff Profile') : __('Add Staff Profile') }}</x-slot>
        <x-slot name="content">
            <div class="grid grid-cols-1 gap-4">
                <div>
                    <x-label for="staff_user_id" value="{{ __('Staff Member') }}" />
                    <select id="staff_user_id" wire:model="staff_user_id" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500" {{ $staffId ? 'disabled' : '' }}>
                        <option value="">{{ __('Select a team member...') }}</option>
                        @foreach ($members as $member)<option value="{{ $member->id }}">{{ $member->name }}</option>@endforeach
                    </select>
                    <x-input-error for="staff_user_id" class="mt-2" />
                </div>
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <div>
                        <x-label for="staff_salary" value="{{ __('Monthly Salary') }}" />
                        <x-input id="staff_salary" type="number" step="0.01" min="0" class="mt-1 block w-full" wire:model="staff_salary" />
                        <x-input-error for="staff_salary" class="mt-2" />
                    </div>
                    <div>
                        <x-label for="staff_salary_basis" value="{{ __('That figure is') }}" />
                        <select id="staff_salary_basis" wire:model="staff_salary_basis" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            @foreach (\App\Models\StaffProfile::SALARY_BASES as $key => $label)
                                <option value="{{ $key }}">{{ __($label) }}</option>
                            @endforeach
                        </select>
                        <p class="mt-1 text-xs text-slate-400">{{ __('Choose take-home when you agreed a round figure "in hand": payroll works back to the gross that delivers it.') }}</p>
                        <x-input-error for="staff_salary_basis" class="mt-2" />
                    </div>
                    <div>
                        <x-label for="staff_currency" value="{{ __('Currency') }}" />
                        <select id="staff_currency" wire:model="staff_currency" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            @foreach ($currencies as $c)<option value="{{ $c->code }}">{{ $c->code }}</option>@endforeach
                        </select>
                        <x-input-error for="staff_currency" class="mt-2" />
                    </div>
                    <div>
                        <x-label for="staff_cap" value="{{ __('Loss cap (% of net)') }}" />
                        <x-input id="staff_cap" type="number" step="0.01" min="0" max="100" class="mt-1 block w-full" wire:model="staff_cap" />
                        <x-input-error for="staff_cap" class="mt-2" />
                    </div>
                </div>

                {{-- Statutory standing. Defaults keep everyone fully liable. --}}
                <div class="rounded-xl border border-slate-200 bg-slate-50/60 p-4">
                    <p class="text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Statutory') }}</p>
                    <p class="mt-0.5 text-xs text-slate-400">
                        {{ __('NSSA and PAYE are deducted for everyone by default. Only switch these off where you can point to the exemption.') }}
                    </p>
                    <label class="mt-3 flex items-start gap-2 rounded-lg border border-slate-200 bg-white p-3">
                        <x-checkbox wire:model.live="staff_is_consultant" class="mt-0.5" />
                        <span>
                            <span class="text-sm font-medium text-slate-800">{{ __('Engaged as a consultant') }}</span>
                            <span class="mt-0.5 block text-xs text-slate-400">{{ __('Not employed, so neither PAYE nor NSSA is deducted, and the staff-wide benefits and allowances do not apply either. They settle their own liability and are paid the full figure. Anything assigned to them by name on the Benefits tab still stands.') }}</span>
                        </span>
                    </label>
                    <div class="mt-3 grid grid-cols-1 gap-3 sm:grid-cols-2">
                        <label class="flex items-center gap-2 {{ $staff_is_consultant ? 'opacity-40' : '' }}">
                            <x-checkbox wire:model="staff_paye_exempt" :disabled="$staff_is_consultant" />
                            <span class="text-sm text-slate-700">{{ __('Exempt from PAYE') }}</span>
                        </label>
                        <label class="flex items-center gap-2 {{ $staff_is_consultant ? 'opacity-40' : '' }}">
                            <x-checkbox wire:model="staff_nssa_exempt" :disabled="$staff_is_consultant" />
                            <span class="text-sm text-slate-700">{{ __('Exempt from NSSA') }}</span>
                        </label>
                    </div>
                    @if ($staff_is_consultant)
                        <p class="mt-2 text-xs text-slate-400">{{ __('A consultant is already outside both, so these two are moot.') }}</p>
                    @endif
                    <div class="mt-3">
                        <x-label for="staff_tax_credits" value="{{ __('Monthly tax credits') }}" />
                        <x-input id="staff_tax_credits" type="number" step="0.01" min="0" class="mt-1 block w-full" wire:model="staff_tax_credits" />
                        <p class="mt-1 text-xs text-slate-400">{{ __('Elderly, blind or disabled credits. Taken off the tax itself, not off taxable income.') }}</p>
                        <x-input-error for="staff_tax_credits" class="mt-2" />
                    </div>
                </div>
                <div>
                    <x-label for="staff_target" value="{{ __('Monthly Revenue Target (unlocks sales commission)') }}" />
                    <x-input id="staff_target" type="number" step="0.01" min="0" class="mt-1 block w-full" wire:model="staff_target" placeholder="{{ __('Leave blank if not a salesperson') }}" />
                    <x-input-error for="staff_target" class="mt-2" />
                </div>
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <div>
                        <x-label for="staff_sales_plan_id" value="{{ __('Sales Plan') }}" />
                        <select id="staff_sales_plan_id" wire:model="staff_sales_plan_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="">{{ __('Team default') }}</option>
                            @foreach ($planOptions->where('applies_to', 'sales') as $pl)<option value="{{ $pl->id }}">{{ $pl->name }}</option>@endforeach
                        </select>
                    </div>
                    <div>
                        <x-label for="staff_production_plan_id" value="{{ __('Production Plan') }}" />
                        <select id="staff_production_plan_id" wire:model="staff_production_plan_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="">{{ __('Team default') }}</option>
                            @foreach ($planOptions->where('applies_to', 'production') as $pl)<option value="{{ $pl->id }}">{{ $pl->name }}</option>@endforeach
                        </select>
                    </div>
                </div>
                <div>
                    <x-label for="staff_commission_group" value="{{ __('GP-Hurdle pool group') }}" />
                    <select id="staff_commission_group" wire:model="staff_commission_group" 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="">{{ __('Auto (derive from plan links)') }}</option>
                        <option value="sales">{{ __('Sales / Admin') }}</option>
                        <option value="production">{{ __('Production') }}</option>
                    </select>
                    <p class="mt-1 text-xs text-slate-400">{{ __('Which side of the company-wide profit-share pool this person shares in.') }}</p>
                    <x-input-error for="staff_commission_group" class="mt-2" />
                </div>
                <label class="flex items-center gap-2"><x-checkbox wire:model="staff_is_active" /><span class="text-sm text-slate-700">{{ __('Active (included in payroll runs)') }}</span></label>
            </div>
        </x-slot>
        <x-slot name="footer">
            <x-secondary-button wire:click="closeStaff" wire:loading.attr="disabled">{{ __('Cancel') }}</x-secondary-button>
            <x-button class="ms-3" wire:click="saveStaff" wire:loading.attr="disabled">{{ __('Save') }}</x-button>
        </x-slot>
    </x-dialog-modal>

    <!-- Liability modal -->
    <x-dialog-modal wire:model.live="showLiabilityModal" maxWidth="2xl">
        <x-slot name="title">{{ $liabilityId ? __('Edit Loss') : __('Record a Loss') }}</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="liab_user_id" value="{{ __('Responsible Staff') }}" />
                        <select id="liab_user_id" wire:model="liab_user_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 a team member...') }}</option>
                            @foreach ($members as $member)<option value="{{ $member->id }}">{{ $member->name }}</option>@endforeach
                        </select>
                        <x-input-error for="liab_user_id" class="mt-2" />
                    </div>
                    <div>
                        <x-label for="liab_job_id" value="{{ __('Related Job (optional)') }}" />
                        <select id="liab_job_id" wire:model="liab_job_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 ($jobOptions as $job)<option value="{{ $job->id }}">{{ $job->job_number }}, {{ \Illuminate\Support\Str::limit($job->title, 30) }}</option>@endforeach
                        </select>
                    </div>
                </div>
                <div>
                    <x-label for="liab_reason" value="{{ __('What happened') }}" />
                    <textarea id="liab_reason" rows="2" wire:model="liab_reason" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500" placeholder="{{ __('e.g. Misprinted 500 flyers, wrong colour profile, full reprint') }}"></textarea>
                    <x-input-error for="liab_reason" class="mt-2" />
                </div>
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-4">
                    <div>
                        <x-label for="liab_total" value="{{ __('Loss amount') }} ({{ $baseCode }})" />
                        <x-input id="liab_total" type="number" step="0.01" min="0" class="mt-1 block w-full" wire:model="liab_total" />
                        <x-input-error for="liab_total" class="mt-2" />
                    </div>
                    <div>
                        <x-label for="liab_months" value="{{ __('Recover over (months)') }}" />
                        <x-input id="liab_months" type="number" step="1" min="1" max="36" class="mt-1 block w-full" wire:model="liab_months" />
                        <x-input-error for="liab_months" class="mt-2" />
                    </div>
                    <div>
                        <x-label for="liab_cap" value="{{ __('Cap % (optional)') }}" />
                        <x-input id="liab_cap" type="number" step="0.01" min="0" max="100" class="mt-1 block w-full" wire:model="liab_cap" placeholder="{{ __('staff default') }}" />
                    </div>
                    <div>
                        <x-label for="liab_start" value="{{ __('Start from') }}" />
                        <x-input id="liab_start" type="date" class="mt-1 block w-full" wire:model="liab_start" />
                        <x-input-error for="liab_start" class="mt-2" />
                    </div>
                </div>
                <p class="rounded-lg bg-amber-50 px-3 py-2 text-xs text-amber-700">{{ __('Each payroll run deducts at most the cap % of that month\'s net pay, so recovery can run longer than the months above, never zeroing a paycheck.') }}</p>

                <div>
                    <x-label for="liab_notes" value="{{ __('Internal notes (optional)') }}" />
                    <textarea id="liab_notes" rows="2" wire:model="liab_notes" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500" placeholder="{{ __('e.g. Verbally agreed with staff member on 20 Jul; director approved.') }}"></textarea>
                    <x-input-error for="liab_notes" class="mt-2" />
                </div>

                {{-- Signed acknowledgement: only available once the loss record exists. --}}
                <div class="rounded-xl border border-slate-200 bg-slate-50/70 p-4">
                    <div class="flex items-center justify-between gap-3">
                        <div>
                            <p class="text-sm font-semibold text-slate-800">{{ __('Signed acknowledgement') }}</p>
                            <p class="mt-0.5 text-xs text-slate-500">{{ __('Generate the consent form on the company letterhead, have the employee sign it, then upload the scan as proof.') }}</p>
                        </div>
                        @if ($liabilityId)
                            <div class="flex shrink-0 items-center gap-2">
                                <a href="{{ route('payroll.liability.acknowledgement', ['staffLiability' => $liabilityId, 'preview' => 1]) }}" target="_blank" rel="noopener" class="inline-flex items-center rounded-lg border border-slate-300 bg-white px-3 py-1.5 text-xs font-medium text-slate-700 transition hover:bg-slate-50">
                                    <x-icon name="eye" class="-ms-0.5 me-1.5 h-4 w-4" />{{ __('Preview') }}
                                </a>
                                <a href="{{ route('payroll.liability.acknowledgement', ['staffLiability' => $liabilityId]) }}" class="inline-flex items-center rounded-lg bg-indigo-600 px-3 py-1.5 text-xs font-medium text-white transition hover:bg-indigo-700">
                                    <x-icon name="arrow-down-tray" class="-ms-0.5 me-1.5 h-4 w-4" />{{ __('Download') }}
                                </a>
                            </div>
                        @endif
                    </div>

                    @if ($liabilityId)
                        <div class="mt-3">
                            @if ($existingAckUrl && ! $ackUpload)
                                <div class="mb-2 flex items-center gap-2 rounded-lg bg-emerald-50 px-3 py-2 text-xs text-emerald-700">
                                    <x-icon name="check-circle" class="h-4 w-4 shrink-0" />
                                    <span>{{ __('Signed copy on file') }}@if ($existingAckAt) · {{ $existingAckAt }}@endif</span>
                                    <a href="{{ $existingAckUrl }}" target="_blank" rel="noopener" class="ms-auto font-medium underline">{{ __('View') }}</a>
                                </div>
                            @endif
                            <x-label for="ackUpload" value="{{ $existingAckUrl ? __('Replace signed copy') : __('Upload signed copy') }}" class="text-xs" />
                            <input id="ackUpload" type="file" wire:model="ackUpload" accept=".pdf,.jpg,.jpeg,.png" class="mt-1 block w-full text-sm text-slate-600 file:mr-3 file:rounded-lg file:border-0 file:bg-slate-200 file:px-3 file:py-1.5 file:text-xs file:font-medium file:text-slate-700 hover:file:bg-slate-300" />
                            <x-upload-progress target="ackUpload" class="mt-2" />
                            <p class="mt-1 text-xs text-slate-400">{{ __('PDF or image, up to 10 MB.') }}</p>
                        </div>
                    @else
                        <p class="mt-3 rounded-lg bg-slate-100 px-3 py-2 text-xs text-slate-500">{{ __('Save this loss first, then re-open it to download the acknowledgement and upload the signed copy.') }}</p>
                    @endif
                </div>
            </div>
        </x-slot>
        <x-slot name="footer">
            <x-secondary-button wire:click="closeLiability" wire:loading.attr="disabled">{{ __('Cancel') }}</x-secondary-button>
            <x-button class="ms-3" wire:click="saveLiability" wire:loading.attr="disabled" wire:target="saveLiability,ackUpload">{{ __('Save') }}</x-button>
        </x-slot>
    </x-dialog-modal>

    <!-- Build run modal -->
    <x-dialog-modal wire:model.live="showRunModal" maxWidth="md">
        <x-slot name="title">{{ __('Build Payroll Run') }}</x-slot>
        <x-slot name="content">
            <x-label for="run_period" value="{{ __('Month') }}" />
            <x-input id="run_period" type="month" class="mt-1 block w-full" wire:model="run_period" />
            <x-input-error for="run_period" class="mt-2" />
            <p class="mt-3 text-xs text-slate-500">{{ __('Builds a draft netting each active staff member\'s salary, approved commissions and any loss installments. You can review and recompute before finalizing.') }}</p>
            <p class="mt-2 text-xs text-slate-500">{{ __('This is the month the pay belongs to, not the day you run it. The wage bill posts dated the last day of the month chosen here, so a run finalized in the following month still lands in the month it paid for.') }}</p>
        </x-slot>
        <x-slot name="footer">
            <x-secondary-button wire:click="$set('showRunModal', false)" wire:loading.attr="disabled">{{ __('Cancel') }}</x-secondary-button>
            <x-button class="ms-3" wire:click="buildRun" wire:loading.attr="disabled">{{ __('Build Draft') }}</x-button>
        </x-slot>
    </x-dialog-modal>

    <!-- Finalize modal -->
    <x-dialog-modal wire:model.live="showFinalizeModal" maxWidth="md">
        <x-slot name="title">{{ ($viewRun ?? null) ? __('Finalize :month Payroll', ['month' => $viewRun->period->format('F Y')]) : __('Finalize Payroll') }}</x-slot>
        <x-slot name="content">
            {{-- Payroll is usually finalized days into the next month, so say
                 out loud which month the money is being booked into. --}}
            @if ($viewRun ?? null)
                <p class="mb-3 rounded-lg bg-slate-50 px-3 py-2 text-xs text-slate-600">
                    {{ __('Paying for :month. The wage bill posts as an expense dated :date, so it falls in that month whatever today\'s date is.', [
                        'month' => $viewRun->period->format('F Y'),
                        'date' => $viewRun->period->copy()->endOfMonth()->format('j M Y'),
                    ]) }}
                </p>
            @endif
            <x-label for="finalize_fund_account_id" value="{{ __('Pay from account') }}" />
            <select id="finalize_fund_account_id" wire:model="finalize_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 account...') }}</option>
                @foreach (($fundAccounts ?? []) as $acct)<option value="{{ $acct->id }}">{{ $acct->name }} ({{ $acct->currency_code }})</option>@endforeach
            </select>
            <x-input-error for="finalize_fund_account_id" class="mt-2" />
            <p class="mt-2 text-xs text-slate-400">{{ __('Staff with their own pay-from account keep it; this covers everyone else.') }}</p>
            <p class="mt-3 rounded-lg bg-rose-50 px-3 py-2 text-xs text-rose-700">{{ __('Finalizing locks the run, issues every payslip, marks its commissions paid, advances loss recovery, and deducts the total wage bill from each paying account as a single "Salaries & Wages" expense. This cannot be undone.') }}</p>
        </x-slot>
        <x-slot name="footer">
            <x-secondary-button wire:click="closeFinalize" wire:loading.attr="disabled">{{ __('Cancel') }}</x-secondary-button>
            <x-button class="ms-3" wire:click="finalizeRun" wire:loading.attr="disabled">{{ __('Finalize & Pay') }}</x-button>
        </x-slot>
    </x-dialog-modal>

    {{-- Paid now: how much of one slip goes out with the run --}}
    <x-dialog-modal wire:model.live="showPaidNowModal" maxWidth="lg">
        <x-slot name="title">{{ __('Paid now') }}@if ($paidNowLine ?? null) · {{ $paidNowLine->user?->name }}@endif</x-slot>
        <x-slot name="content">
            @if ($paidNowLine ?? null)
                <div class="space-y-4">
                    <p class="text-sm text-slate-600">{{ __('Net pay this month: :amt', ['amt' => $baseCode.' '.number_format((float) $paidNowLine->net_pay, 2)]) }}</p>
                    <div class="grid grid-cols-1 gap-2 sm:grid-cols-3">
                        @foreach (['full' => __('Pay in full'), 'part' => __('Pay part now'), 'defer' => __('Defer to next month')] as $mode => $label)
                            <label class="flex cursor-pointer items-center gap-2 rounded-xl border border-slate-200 px-3 py-2.5 text-sm text-slate-700 has-[:checked]:border-indigo-400 has-[:checked]:bg-indigo-50 has-[:checked]:text-indigo-700">
                                <input type="radio" value="{{ $mode }}" wire:model.live="pn_mode" class="border-slate-300 text-indigo-600 focus:ring-indigo-500" />
                                {{ $label }}
                            </label>
                        @endforeach
                    </div>
                    @if ($pn_mode === 'part')
                        <div>
                            <x-label for="pn_amount" :value="__('Amount paid now')" />
                            <x-input id="pn_amount" type="number" step="0.01" min="0" class="mt-1 block w-full" wire:model="pn_amount" />
                            <x-input-error for="pn_amount" class="mt-2" />
                        </div>
                    @endif
                    @if ($pn_mode !== 'full')
                        <div>
                            <x-label for="pn_reason" :value="$pn_mode === 'defer' ? __('Employee\'s written consent') : __('Reason')" />
                            <textarea id="pn_reason" rows="2" wire:model="pn_reason"
                                placeholder="{{ $pn_mode === 'defer' ? __('e.g. Agreed in writing on 31 Oct to be paid with November') : __('e.g. Cash shortfall, balance to follow') }}"
                                class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm placeholder:text-xs focus:border-indigo-500 focus:ring-indigo-500"></textarea>
                            <x-input-error for="pn_reason" class="mt-2" />
                        </div>
                        <p class="rounded-lg bg-amber-50 px-3 py-2 text-xs text-amber-800">{{ __('The slip is still issued and taxed for this month. What is not paid now becomes salary owed: it counts as this month\'s wage cost and shows as a liability until it is paid.') }}</p>
                    @endif
                    <label class="flex items-center gap-2 text-sm text-slate-700">
                        <input type="checkbox" wire:model="pn_include_arrears" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500" />
                        {{ __('Also pay salary owed from earlier months on this slip') }}
                    </label>
                </div>
            @endif
        </x-slot>
        <x-slot name="footer">
            <x-secondary-button wire:click="$set('showPaidNowModal', false)">{{ __('Cancel') }}</x-secondary-button>
            <x-button class="ms-3" wire:click="savePaidNow" wire:loading.attr="disabled" wire:target="savePaidNow">{{ __('Save') }}</x-button>
        </x-slot>
    </x-dialog-modal>

    {{-- Pay owed salary outside a run --}}
    <x-dialog-modal wire:model.live="showPayOwedModal" maxWidth="md">
        <x-slot name="title">{{ __('Pay owed salary') }}</x-slot>
        <x-slot name="content">
            @if ($payOwedArrear ?? null)
                <div class="space-y-4">
                    <p class="text-sm text-slate-600">{{ __(':name, earned in :period. Still owed: :amt', ['name' => $payOwedArrear->user?->name, 'period' => $payOwedArrear->periodLabel(), 'amt' => number_format($payOwedArrear->outstanding(), 2)]) }}</p>
                    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                        <div>
                            <x-label for="owed_amount" :value="__('Amount')" />
                            <x-input id="owed_amount" type="number" step="0.01" min="0" class="mt-1 block w-full" wire:model="owed_amount" />
                            <x-input-error for="owed_amount" class="mt-2" />
                        </div>
                        <div>
                            <x-label for="owed_date" :value="__('Paid on')" />
                            <x-input id="owed_date" type="date" class="mt-1 block w-full" wire:model="owed_date" />
                            <x-input-error for="owed_date" class="mt-2" />
                        </div>
                        <div class="sm:col-span-2">
                            <x-label for="owed_fund_account_id" :value="__('Paid from account')" />
                            <select id="owed_fund_account_id" wire:model="owed_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 account…') }}</option>
                                @foreach ($fundAccounts as $acc)<option value="{{ $acc->id }}">{{ $acc->name }} ({{ $acc->currency_code }})</option>@endforeach
                            </select>
                            <x-input-error for="owed_fund_account_id" class="mt-2" />
                        </div>
                        <div class="sm:col-span-2">
                            <x-label for="owed_notes" :value="__('Notes (optional)')" />
                            <textarea id="owed_notes" rows="2" wire:model="owed_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>
                        </div>
                    </div>
                    <p class="text-xs text-slate-500">{{ __('Part payments are fine; the rest stays owed. This moves cash only: the cost was already booked in the month it was earned.') }}</p>
                </div>
            @endif
        </x-slot>
        <x-slot name="footer">
            <x-secondary-button wire:click="$set('showPayOwedModal', false)">{{ __('Cancel') }}</x-secondary-button>
            <x-button class="ms-3" wire:click="payOwed" wire:loading.attr="disabled" wire:target="payOwed">{{ __('Pay') }}</x-button>
        </x-slot>
    </x-dialog-modal>

    <!-- Benefit / allowance / deduction modal -->
    @if ($canManagePay ?? false)
        <x-dialog-modal wire:model.live="showComponentModal" maxWidth="2xl">
            <x-slot name="title">{{ $componentId ? __('Edit benefit or deduction') : __('New benefit or deduction') }}</x-slot>
            <x-slot name="content">
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <div>
                        <x-label for="comp_name" :value="__('Name')" />
                        <x-input id="comp_name" type="text" class="mt-1 block w-full" wire:model="comp_name" placeholder="{{ __('Housing allowance') }}" />
                        <x-input-error for="comp_name" class="mt-2" />
                    </div>
                    <div>
                        <x-label for="comp_code" :value="__('Short code (optional)')" />
                        <x-input id="comp_code" type="text" class="mt-1 block w-full" wire:model="comp_code" placeholder="housing" />
                        <x-input-error for="comp_code" class="mt-2" />
                    </div>

                    <div>
                        <x-label for="comp_kind" :value="__('Kind')" />
                        <select id="comp_kind" wire:model.live="comp_kind" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            @foreach ($componentKinds as $key => $label)
                                <option value="{{ $key }}">{{ $label }}</option>
                            @endforeach
                        </select>
                        <x-input-error for="comp_kind" class="mt-2" />
                    </div>
                    <div>
                        <x-label for="comp_calc" :value="__('How it is worked out')" />
                        <select id="comp_calc" wire:model.live="comp_calc" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            @foreach ($componentCalcs as $key => $label)
                                <option value="{{ $key }}">{{ $label }}</option>
                            @endforeach
                        </select>
                        <x-input-error for="comp_calc" class="mt-2" />
                    </div>

                    @php $isPercent = in_array($comp_calc, ['percent_basic', 'percent_gross']); @endphp

                    <div>
                        <x-label for="comp_value" :value="$isPercent ? __('Percentage') : __('Amount')" />
                        <div class="relative mt-1">
                            <x-input id="comp_value" type="number" step="0.0001" min="0" class="block w-full {{ $isPercent ? 'pr-8' : '' }}" wire:model="comp_value" />
                            @if ($isPercent)
                                <span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-sm text-slate-400">%</span>
                            @endif
                        </div>
                        <x-input-error for="comp_value" class="mt-2" />
                    </div>

                    <div>
                        <x-label for="comp_currency" :value="__('Currency')" />
                        <select id="comp_currency" wire:model="comp_currency" @disabled($isPercent)
                                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-100 disabled:text-slate-400">
                            @foreach ($currencies as $currency)
                                <option value="{{ $currency->code }}">{{ $currency->code }}</option>
                            @endforeach
                        </select>
                        @if ($isPercent)
                            <p class="mt-1 text-[11px] text-slate-400">{{ __('A percentage follows the salary it is worked out from.') }}</p>
                        @endif
                        <x-input-error for="comp_currency" class="mt-2" />
                    </div>

                    <div>
                        <x-label for="comp_min" :value="__('Minimum (optional)')" />
                        <x-input id="comp_min" type="number" step="0.01" min="0" class="mt-1 block w-full" wire:model="comp_min" />
                        <x-input-error for="comp_min" class="mt-2" />
                    </div>
                    <div>
                        <x-label for="comp_max" :value="__('Maximum / cap (optional)')" />
                        <x-input id="comp_max" type="number" step="0.01" min="0" class="mt-1 block w-full" wire:model="comp_max" />
                        <p class="mt-1 text-[11px] text-slate-400">{{ __('Useful for statutory items that cap out at a ceiling.') }}</p>
                        <x-input-error for="comp_max" class="mt-2" />
                    </div>

                    <div class="sm:col-span-2">
                        <x-label for="comp_applies_to" :value="__('Who gets it')" />
                        <select id="comp_applies_to" wire:model="comp_applies_to" 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="all">{{ __('Everyone, applied to every active employee automatically') }}</option>
                            <option value="assigned">{{ __('Only the people I assign it to') }}</option>
                        </select>
                        <x-input-error for="comp_applies_to" class="mt-2" />
                    </div>

                    @if ($comp_kind === 'allowance')
                        <div class="sm:col-span-2">
                            <label class="flex items-start gap-2 rounded-lg border border-slate-200 px-3 py-2 text-sm has-[:checked]:border-indigo-400 has-[:checked]:bg-indigo-50 has-[:checked]:text-indigo-700">
                                <x-checkbox wire:model="comp_is_taxable" class="mt-0.5" />
                                <span>
                                    {{ __('Counts towards gross pay') }}
                                    <span class="mt-0.5 block text-xs opacity-70">{{ __('Untick for a non-taxable allowance, so "% of gross" deductions ignore it.') }}</span>
                                </span>
                            </label>
                        </div>
                    @endif

                    <div class="sm:col-span-2">
                        <x-label for="comp_description" :value="__('Description (optional)')" />
                        <x-input id="comp_description" type="text" class="mt-1 block w-full" wire:model="comp_description" />
                        <x-input-error for="comp_description" class="mt-2" />
                    </div>

                    <div class="sm:col-span-2">
                        <label class="flex items-center gap-2 rounded-lg border border-slate-200 px-3 py-2 text-sm has-[:checked]:border-indigo-400 has-[:checked]:bg-indigo-50 has-[:checked]:text-indigo-700">
                            <x-checkbox wire:model="comp_is_active" />
                            {{ __('Active, include on future payslips') }}
                        </label>
                    </div>
                </div>
            </x-slot>
            <x-slot name="footer">
                <x-secondary-button wire:click="closeComponent">{{ __('Cancel') }}</x-secondary-button>
                <x-button class="ms-3" wire:click="saveComponent" wire:loading.attr="disabled" wire:target="saveComponent">
                    <span wire:loading.remove wire:target="saveComponent">{{ $componentId ? __('Save changes') : __('Add to catalogue') }}</span>
                    <span wire:loading wire:target="saveComponent">{{ __('Saving…') }}</span>
                </x-button>
            </x-slot>
        </x-dialog-modal>

        <!-- Statutory table modal -->
        <x-dialog-modal wire:model.live="showTaxModal" maxWidth="3xl">
            <x-slot name="title">{{ $taxId ? __('Edit Tax Table') : __('New Tax Table') }}</x-slot>
            <x-slot name="content">
                <div class="space-y-5">
                    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                        <div class="sm:col-span-2">
                            <x-label for="tax_name" value="{{ __('Name') }}" />
                            <x-input id="tax_name" class="mt-1 block w-full" wire:model="tax_name" placeholder="{{ __('ZIMRA USD monthly PAYE, 2026') }}" />
                            <x-input-error for="tax_name" class="mt-2" />
                        </div>
                        <div>
                            <x-label for="tax_effective_from" value="{{ __('Effective from') }}" />
                            <x-input id="tax_effective_from" type="date" class="mt-1 block w-full" wire:model="tax_effective_from" />
                            <x-input-error for="tax_effective_from" class="mt-2" />
                        </div>
                        <div>
                            <x-label for="tax_effective_to" value="{{ __('Effective to (optional)') }}" />
                            <x-input id="tax_effective_to" type="date" class="mt-1 block w-full" wire:model="tax_effective_to" />
                            <p class="mt-1 text-xs text-slate-400">{{ __('Leave blank while this is the current table.') }}</p>
                            <x-input-error for="tax_effective_to" class="mt-2" />
                        </div>
                        <div>
                            <x-label for="tax_currency" value="{{ __('Currency of the bands') }}" />
                            <select id="tax_currency" wire:model="tax_currency" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                @foreach ($currencies as $c)<option value="{{ $c->code }}">{{ $c->code }}</option>@endforeach
                            </select>
                            <x-input-error for="tax_currency" class="mt-2" />
                        </div>
                        <div>
                            <x-label for="tax_aids_levy" value="{{ __('AIDS levy (% of the tax)') }}" />
                            <x-input id="tax_aids_levy" type="number" step="0.01" min="0" max="100" class="mt-1 block w-full" wire:model="tax_aids_levy" />
                            <x-input-error for="tax_aids_levy" class="mt-2" />
                        </div>
                    </div>

                    {{-- NSSA -------------------------------------------------- --}}
                    <div class="rounded-xl border border-slate-200 bg-slate-50/60 p-4">
                        <p class="text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('NSSA') }}</p>
                        <div class="mt-3 grid grid-cols-1 gap-4 sm:grid-cols-3">
                            <div>
                                <x-label for="tax_nssa_employee" value="{{ __('Employee %') }}" />
                                <x-input id="tax_nssa_employee" type="number" step="0.01" min="0" max="100" class="mt-1 block w-full" wire:model="tax_nssa_employee" />
                                <x-input-error for="tax_nssa_employee" class="mt-2" />
                            </div>
                            <div>
                                <x-label for="tax_nssa_employer" value="{{ __('Employer %') }}" />
                                <x-input id="tax_nssa_employer" type="number" step="0.01" min="0" max="100" class="mt-1 block w-full" wire:model="tax_nssa_employer" />
                                <x-input-error for="tax_nssa_employer" class="mt-2" />
                            </div>
                            <div>
                                <x-label for="tax_nssa_ceiling" value="{{ __('Insurable ceiling') }}" />
                                <x-input id="tax_nssa_ceiling" type="number" step="0.01" min="0" class="mt-1 block w-full" wire:model="tax_nssa_ceiling" />
                                <x-input-error for="tax_nssa_ceiling" class="mt-2" />
                            </div>
                        </div>
                        <p class="mt-2 text-xs text-slate-400">
                            {{ __('Contributions stop counting above the ceiling. The employer share costs the company but never comes off take-home.') }}
                        </p>
                    </div>

                    {{-- PAYE bands -------------------------------------------- --}}
                    <div>
                        <div class="flex items-center justify-between">
                            <div>
                                <x-label :value="__('PAYE bands')" />
                                <p class="text-xs text-slate-400">
                                    {{ __('Written the way ZIMRA publishes them: tax = pay × rate − the subtract figure. Bands must run continuously with no gaps.') }}
                                </p>
                            </div>
                            <x-secondary-button wire:click="addTaxBand" type="button">
                                <x-icon name="plus" class="-ms-1 me-1 h-4 w-4" />{{ __('Add band') }}
                            </x-secondary-button>
                        </div>

                        <div class="mt-3 overflow-x-auto">
                            <table class="min-w-full text-sm">
                                <thead>
                                    <tr class="text-left text-[11px] font-semibold uppercase tracking-wider text-slate-500">
                                        <th class="py-2 pe-3">{{ __('Over') }}</th>
                                        <th class="py-2 pe-3">{{ __('Up to') }}</th>
                                        <th class="py-2 pe-3">{{ __('Rate %') }}</th>
                                        <th class="py-2 pe-3">{{ __('Subtract') }}</th>
                                        <th class="py-2"></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($tax_bands as $i => $band)
                                        <tr wire:key="band-{{ $i }}">
                                            <td class="py-1.5 pe-3"><x-input type="number" step="0.01" min="0" class="block w-full" wire:model="tax_bands.{{ $i }}.from" /></td>
                                            <td class="py-1.5 pe-3"><x-input type="number" step="0.01" min="0" class="block w-full" wire:model="tax_bands.{{ $i }}.to" placeholder="{{ __('no limit') }}" /></td>
                                            <td class="py-1.5 pe-3"><x-input type="number" step="0.01" min="0" max="100" class="block w-full" wire:model="tax_bands.{{ $i }}.rate" /></td>
                                            <td class="py-1.5 pe-3"><x-input type="number" step="0.01" min="0" class="block w-full" wire:model="tax_bands.{{ $i }}.deduct" /></td>
                                            <td class="py-1.5 text-right">
                                                <button type="button" wire:click="removeTaxBand({{ $i }})" class="text-rose-600 transition hover:text-rose-800" title="{{ __('Remove band') }}">
                                                    <x-icon name="x-mark" class="h-4 w-4" />
                                                </button>
                                            </td>
                                        </tr>
                                        <x-input-error for="tax_bands.{{ $i }}.to" class="mt-1" />
                                        <x-input-error for="tax_bands.{{ $i }}.rate" class="mt-1" />
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        <x-input-error for="tax_bands" class="mt-2" />
                    </div>

                    <div>
                        <x-label for="tax_notes" value="{{ __('Notes') }}" />
                        <textarea id="tax_notes" wire:model="tax_notes" rows="2"
                            class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
                            placeholder="{{ __('Where these came from, and when they were last checked.') }}"></textarea>
                    </div>

                    <label class="flex items-center gap-2">
                        <x-checkbox wire:model="tax_is_active" />
                        <span class="text-sm text-slate-700">{{ __('Active, use for payroll runs in its date window') }}</span>
                    </label>
                </div>
            </x-slot>
            <x-slot name="footer">
                <x-secondary-button wire:click="closeTaxTable">{{ __('Cancel') }}</x-secondary-button>
                <x-button class="ms-3" wire:click="saveTaxTable" wire:loading.attr="disabled" wire:target="saveTaxTable">
                    <span wire:loading.remove wire:target="saveTaxTable">{{ $taxId ? __('Save changes') : __('Save table') }}</span>
                    <span wire:loading wire:target="saveTaxTable">{{ __('Saving…') }}</span>
                </x-button>
            </x-slot>
        </x-dialog-modal>
    @endif
</div>