@php
    use App\Support\Navigation\WorkspaceEmbed;

    $statutory = $statutory ?? config('payroll_statutory', []);
    $canEdit = $canEditStatutory ?? false;
    $effectiveDate = old('effective_date', $statutory['effective_date'] ?? '');
    $payeBands = old('paye_bands', collect($statutory['paye']['bands'] ?? [])->map(fn ($band) => [
        'up_to' => $band['up_to'] ?? '',
        'rate' => isset($band['rate']) ? round((float) $band['rate'] * 100, 4) : '',
    ])->all());
    if ($payeBands === []) {
        $payeBands = [['up_to' => '', 'rate' => '']];
    }
    $personalRelief = old('personal_relief_monthly', (float) ($statutory['personal_relief']['monthly'] ?? 0));
    $nssf = $statutory['nssf'] ?? [];
    $shif = $statutory['shif'] ?? [];
    $housing = $statutory['housing_levy'] ?? [];
    $nssfRate = old('nssf_employee_rate', round(((float) ($nssf['employee_rate'] ?? 0)) * 100, 4));
    $nssfLower = old('nssf_lower_earnings_limit', (float) ($nssf['lower_earnings_limit'] ?? 0));
    $nssfUpper = old('nssf_upper_earnings_limit', (float) ($nssf['upper_earnings_limit'] ?? 0));
    $shifRate = old('shif_employee_rate', round(((float) ($shif['employee_rate'] ?? 0)) * 100, 4));
    $shifMinimum = old('shif_minimum_monthly_contribution', (float) ($shif['minimum_monthly_contribution'] ?? 0));
    $housingRate = old('housing_levy_employee_rate', round(((float) ($housing['employee_rate'] ?? 0)) * 100, 4));
    $embedded = WorkspaceEmbed::inWorkspaceContext();
@endphp

<x-loan-layout>
    <x-loan.page title="Statutory deductions" subtitle="Organisation-wide Kenya rates. Applied when payroll is generated, then copied to payslips.">
        <x-slot name="actions">
            <a href="{{ route('loan.accounting.payroll.hub') }}" class="inline-flex rounded-lg border border-slate-200 bg-white px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50">Payroll home</a>
            <a href="{{ route('loan.accounting.payroll.index') }}" class="inline-flex rounded-lg border border-slate-200 bg-white px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50">Payroll periods</a>
        </x-slot>
        @include('loan.accounting.partials.flash')

        @if ($canEdit)
            <div class="rounded-xl border border-teal-200 bg-teal-50 px-4 py-3 text-sm text-teal-900">
                <p class="font-semibold">Super administrator — statutory rates</p>
                <p class="mt-1 text-teal-800">
                    Changes apply to <strong>new payroll generation</strong> only. Existing lines, payslips, and posted journals keep the amounts stored at run time.
                </p>
                @if ($statutoryRecord?->updated_at)
                    <p class="mt-2 text-xs text-teal-700">
                        Last saved {{ $statutoryRecord->updated_at->format('M j, Y g:i A') }}
                        @if ($statutoryRecord->updatedBy)
                            by {{ $statutoryRecord->updatedBy->name }}
                        @endif
                    </p>
                @endif
            </div>

            <form
                method="post"
                action="{{ route('loan.accounting.payroll.settings.statutory.update') }}"
                class="mt-5 space-y-5"
                id="statutory-settings-form"
            >
                @csrf
                @method('put')
                @if ($embedded)
                    <input type="hidden" name="embedded" value="1">
                @endif

                <div class="grid gap-5 lg:grid-cols-3">
                    <div class="rounded-xl border border-slate-200 bg-white p-5 lg:col-span-2">
                        <h3 class="text-sm font-semibold text-slate-900">Effective date</h3>
                        <input
                            type="date"
                            name="effective_date"
                            value="{{ $effectiveDate }}"
                            required
                            class="mt-2 block w-full max-w-xs rounded-lg border border-slate-200 px-3 py-2 text-sm"
                        />
                        <x-input-error class="mt-1" :messages="$errors->get('effective_date')" />
                        <p class="mt-2 text-sm text-slate-600">Reference date for the current statutory schedule.</p>
                    </div>
                    <div class="rounded-xl border border-slate-200 bg-white p-5">
                        <h3 class="text-sm font-semibold text-slate-900">Personal relief</h3>
                        <div class="mt-2 flex items-center gap-2">
                            <span class="text-sm text-slate-500">KES</span>
                            <input
                                type="number"
                                name="personal_relief_monthly"
                                value="{{ $personalRelief }}"
                                step="0.01"
                                min="0"
                                required
                                class="block w-full rounded-lg border border-slate-200 px-3 py-2 text-sm tabular-nums"
                            />
                        </div>
                        <x-input-error class="mt-1" :messages="$errors->get('personal_relief_monthly')" />
                        <p class="mt-2 text-sm text-slate-600">Monthly credit applied against PAYE.</p>
                    </div>
                </div>

                <div class="rounded-xl border border-slate-200 bg-white overflow-hidden">
                    <div class="border-b border-slate-100 px-5 py-3 flex items-center justify-between gap-3">
                        <div>
                            <h3 class="text-sm font-semibold text-slate-900">PAYE monthly bands</h3>
                            <p class="mt-0.5 text-xs text-slate-500">Applied to taxable pay (gross after NSSF, SHIF, and Housing Levy). Leave the last band ceiling empty.</p>
                        </div>
                        <button type="button" id="add-paye-band" class="rounded-lg border border-slate-200 bg-white px-3 py-1.5 text-xs font-semibold text-slate-700 hover:bg-slate-50">Add band</button>
                    </div>
                    <x-input-error class="px-5 pt-2" :messages="$errors->get('paye_bands')" />
                    <table class="min-w-full text-sm" id="paye-bands-table">
                        <thead class="bg-slate-50 text-xs font-semibold uppercase text-slate-500">
                            <tr>
                                <th class="px-4 py-2 text-left">Band ceiling (KES)</th>
                                <th class="px-4 py-2 text-left">Rate (%)</th>
                                <th class="px-4 py-2 text-right">Remove</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 text-slate-700" id="paye-bands-body">
                            @foreach ($payeBands as $index => $band)
                                <tr class="paye-band-row">
                                    <td class="px-4 py-2">
                                        <input
                                            type="number"
                                            name="paye_bands[{{ $index }}][up_to]"
                                            value="{{ $band['up_to'] ?? '' }}"
                                            step="0.01"
                                            min="0"
                                            placeholder="Leave empty for top band"
                                            class="w-full rounded-lg border border-slate-200 px-3 py-1.5 text-sm tabular-nums"
                                        />
                                        <x-input-error class="mt-1" :messages="$errors->get('paye_bands.'.$index.'.up_to')" />
                                    </td>
                                    <td class="px-4 py-2">
                                        <input
                                            type="number"
                                            name="paye_bands[{{ $index }}][rate]"
                                            value="{{ $band['rate'] ?? '' }}"
                                            step="0.01"
                                            min="0"
                                            max="100"
                                            required
                                            class="w-full max-w-[8rem] rounded-lg border border-slate-200 px-3 py-1.5 text-sm tabular-nums"
                                        />
                                        <x-input-error class="mt-1" :messages="$errors->get('paye_bands.'.$index.'.rate')" />
                                    </td>
                                    <td class="px-4 py-2 text-right">
                                        <button
                                            type="button"
                                            class="remove-paye-band text-xs font-semibold text-red-600 hover:text-red-800 disabled:cursor-not-allowed disabled:opacity-40"
                                            data-swal-click-confirm="Remove this PAYE band from the tax schedule?"
                                            data-swal-title="Remove PAYE band?"
                                            data-swal-confirm-text="Yes, remove"
                                            data-swal-click-handler="removeStatutoryPayeBand"
                                        >Remove</button>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <div class="grid gap-5 lg:grid-cols-3">
                    <div class="rounded-xl border border-slate-200 bg-white p-5 space-y-3">
                        <h3 class="text-sm font-semibold text-slate-900">NSSF (employee)</h3>
                        <p class="text-xs leading-relaxed text-slate-500">Base: pensionable gross, capped at the upper limit. Not a flat KES amount.</p>
                        <div>
                            <label class="text-xs font-semibold text-slate-500 uppercase">Rate (%)</label>
                            <input type="number" name="nssf_employee_rate" value="{{ $nssfRate }}" step="0.01" min="0" max="100" required class="mt-1 block w-full rounded-lg border border-slate-200 px-3 py-2 text-sm tabular-nums" />
                            <x-input-error class="mt-1" :messages="$errors->get('nssf_employee_rate')" />
                        </div>
                        <div>
                            <label class="text-xs font-semibold text-slate-500 uppercase">Lower limit (Tier I)</label>
                            <input type="number" name="nssf_lower_earnings_limit" value="{{ $nssfLower }}" step="0.01" min="0.01" required class="mt-1 block w-full rounded-lg border border-slate-200 px-3 py-2 text-sm tabular-nums" />
                            <x-input-error class="mt-1" :messages="$errors->get('nssf_lower_earnings_limit')" />
                        </div>
                        <div>
                            <label class="text-xs font-semibold text-slate-500 uppercase">Upper limit (Tier II cap)</label>
                            <input type="number" name="nssf_upper_earnings_limit" value="{{ $nssfUpper }}" step="0.01" min="0.01" required class="mt-1 block w-full rounded-lg border border-slate-200 px-3 py-2 text-sm tabular-nums" />
                            <x-input-error class="mt-1" :messages="$errors->get('nssf_upper_earnings_limit')" />
                        </div>
                    </div>

                    <div class="rounded-xl border border-slate-200 bg-white p-5 space-y-3">
                        <h3 class="text-sm font-semibold text-slate-900">SHIF (employee)</h3>
                        <p class="text-xs leading-relaxed text-slate-500">Base: gross pay. Then the monthly minimum is applied if the % is lower.</p>
                        <div>
                            <label class="text-xs font-semibold text-slate-500 uppercase">Rate (%)</label>
                            <input type="number" name="shif_employee_rate" value="{{ $shifRate }}" step="0.01" min="0" max="100" required class="mt-1 block w-full rounded-lg border border-slate-200 px-3 py-2 text-sm tabular-nums" />
                            <x-input-error class="mt-1" :messages="$errors->get('shif_employee_rate')" />
                        </div>
                        <div>
                            <label class="text-xs font-semibold text-slate-500 uppercase">Minimum monthly (KES)</label>
                            <input type="number" name="shif_minimum_monthly_contribution" value="{{ $shifMinimum }}" step="0.01" min="0" required class="mt-1 block w-full rounded-lg border border-slate-200 px-3 py-2 text-sm tabular-nums" />
                            <x-input-error class="mt-1" :messages="$errors->get('shif_minimum_monthly_contribution')" />
                        </div>
                    </div>

                    <div class="rounded-xl border border-slate-200 bg-white p-5 space-y-3">
                        <h3 class="text-sm font-semibold text-slate-900">Housing Levy (employee)</h3>
                        <div>
                            <label class="text-xs font-semibold text-slate-500 uppercase">Rate (%)</label>
                            <input type="number" name="housing_levy_employee_rate" value="{{ $housingRate }}" step="0.01" min="0" max="100" required class="mt-1 block w-full rounded-lg border border-slate-200 px-3 py-2 text-sm tabular-nums" />
                            <x-input-error class="mt-1" :messages="$errors->get('housing_levy_employee_rate')" />
                        </div>
                        <p class="text-xs leading-relaxed text-slate-500">Base: gross pay. Taken off before PAYE. No separate floor — the % is the charge.</p>
                    </div>
                </div>

                <div class="flex flex-wrap items-center gap-3">
                    <button
                        type="submit"
                        class="rounded-lg bg-teal-700 px-5 py-2.5 text-sm font-semibold text-white hover:bg-teal-800"
                        data-swal-confirm="Save these statutory deduction rates? They will apply to all new payroll runs."
                        data-swal-confirm-text="Yes, save"
                    >Save statutory settings</button>
                    <button
                        type="submit"
                        name="reset_defaults"
                        value="1"
                        formaction="{{ route('loan.accounting.payroll.settings.statutory.update') }}"
                        class="rounded-lg border border-slate-200 bg-white px-5 py-2.5 text-sm font-semibold text-slate-700 hover:bg-slate-50"
                        data-swal-confirm="Reset all statutory rates to the built-in system defaults? This cannot be undone without re-entering values."
                        data-swal-confirm-text="Reset defaults"
                    >Reset to defaults</button>
                </div>
            </form>
        @else
            <div class="rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-700">
                <p>You can view current statutory rates here. Only a <strong>super administrator</strong> can edit PAYE bands, NSSF, SHIF, and Housing Levy settings.</p>
                @if ($statutoryRecord?->updated_at)
                    <p class="mt-2 text-xs text-slate-500">
                        Last updated {{ $statutoryRecord->updated_at->format('M j, Y g:i A') }}
                        @if ($statutoryRecord->updatedBy)
                            by {{ $statutoryRecord->updatedBy->name }}
                        @endif
                    </p>
                @endif
            </div>

            <div class="mt-5 grid gap-5 lg:grid-cols-3">
                <div class="rounded-xl border border-slate-200 bg-white p-5 lg:col-span-2">
                    <h3 class="text-sm font-semibold text-slate-900">Effective date</h3>
                    <p class="mt-2 text-2xl font-bold tabular-nums text-slate-800">{{ $effectiveDate ?: '—' }}</p>
                </div>
                <div class="rounded-xl border border-slate-200 bg-white p-5">
                    <h3 class="text-sm font-semibold text-slate-900">Personal relief</h3>
                    <p class="mt-2 text-2xl font-bold tabular-nums text-emerald-700">KES {{ number_format($personalRelief, 2) }}</p>
                </div>
            </div>

            <div class="mt-5 rounded-xl border border-slate-200 bg-white overflow-hidden">
                <div class="border-b border-slate-100 px-5 py-3">
                    <h3 class="text-sm font-semibold text-slate-900">PAYE monthly bands</h3>
                </div>
                <table class="min-w-full text-sm">
                    <thead class="bg-slate-50 text-xs font-semibold uppercase text-slate-500">
                        <tr>
                            <th class="px-4 py-2 text-left">Band ceiling (KES)</th>
                            <th class="px-4 py-2 text-left">Rate</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 text-slate-700">
                        @php $prev = 0; @endphp
                        @foreach ($statutory['paye']['bands'] ?? [] as $band)
                            @php
                                $ceiling = $band['up_to'] ?? null;
                                $rate = ((float) ($band['rate'] ?? 0)) * 100;
                            @endphp
                            <tr>
                                <td class="px-4 py-2 tabular-nums">
                                    @if ($ceiling === null)
                                        Above {{ number_format($prev, 2) }}
                                    @else
                                        {{ number_format($prev + 0.01, 2) }} – {{ number_format((float) $ceiling, 2) }}
                                    @endif
                                </td>
                                <td class="px-4 py-2 font-medium tabular-nums">{{ number_format($rate, 2) }}%</td>
                            </tr>
                            @php $prev = $ceiling !== null ? (float) $ceiling : $prev; @endphp
                        @endforeach
                    </tbody>
                </table>
            </div>

            <div class="mt-5 grid gap-5 lg:grid-cols-3">
                <div class="rounded-xl border border-slate-200 bg-white p-5">
                    <h3 class="text-sm font-semibold text-slate-900">NSSF (employee)</h3>
                    <p class="mt-1 text-xs text-slate-500">Base: pensionable gross (capped).</p>
                    <dl class="mt-3 space-y-2 text-sm text-slate-700">
                        <div class="flex justify-between gap-2"><dt>Rate</dt><dd class="font-medium tabular-nums">{{ number_format($nssfRate, 2) }}%</dd></div>
                        <div class="flex justify-between gap-2"><dt>Lower limit</dt><dd class="font-medium tabular-nums">KES {{ number_format($nssfLower, 2) }}</dd></div>
                        <div class="flex justify-between gap-2"><dt>Upper limit</dt><dd class="font-medium tabular-nums">KES {{ number_format($nssfUpper, 2) }}</dd></div>
                    </dl>
                </div>
                <div class="rounded-xl border border-slate-200 bg-white p-5">
                    <h3 class="text-sm font-semibold text-slate-900">SHIF (employee)</h3>
                    <p class="mt-1 text-xs text-slate-500">Base: gross, then monthly minimum.</p>
                    <dl class="mt-3 space-y-2 text-sm text-slate-700">
                        <div class="flex justify-between gap-2"><dt>Rate</dt><dd class="font-medium tabular-nums">{{ number_format($shifRate, 2) }}%</dd></div>
                        <div class="flex justify-between gap-2"><dt>Minimum monthly</dt><dd class="font-medium tabular-nums">KES {{ number_format($shifMinimum, 2) }}</dd></div>
                    </dl>
                </div>
                <div class="rounded-xl border border-slate-200 bg-white p-5">
                    <h3 class="text-sm font-semibold text-slate-900">Housing Levy (employee)</h3>
                    <p class="mt-1 text-xs text-slate-500">Base: gross pay.</p>
                    <dl class="mt-3 space-y-2 text-sm text-slate-700">
                        <div class="flex justify-between gap-2"><dt>Rate</dt><dd class="font-medium tabular-nums">{{ number_format($housingRate, 2) }}%</dd></div>
                    </dl>
                </div>
            </div>
        @endif

        @include('loan.accounting.books.payroll.partials.statutory-settings-explain')
    </x-loan.page>

    @if ($canEdit)
        <script>
            (function () {
                const body = document.getElementById('paye-bands-body');
                const addBtn = document.getElementById('add-paye-band');
                if (!body || !addBtn) return;

                const removeBandConfirm = 'Remove this PAYE band from the tax schedule?';

                const reindex = () => {
                    body.querySelectorAll('.paye-band-row').forEach((row, index) => {
                        row.querySelectorAll('input').forEach((input) => {
                            input.name = input.name.replace(/paye_bands\[\d+]/, `paye_bands[${index}]`);
                        });
                    });
                };

                const syncRemoveButtons = () => {
                    const disable = body.querySelectorAll('.paye-band-row').length <= 1;
                    body.querySelectorAll('.remove-paye-band').forEach((btn) => {
                        btn.disabled = disable;
                        if (disable) {
                            btn.removeAttribute('data-swal-click-confirm');
                        } else {
                            btn.setAttribute('data-swal-click-confirm', removeBandConfirm);
                        }
                    });
                };

                window.removeStatutoryPayeBand = function (trigger) {
                    const rows = body.querySelectorAll('.paye-band-row');
                    if (rows.length <= 1) {
                        return;
                    }
                    trigger.closest('tr')?.remove();
                    reindex();
                    syncRemoveButtons();
                };

                addBtn.addEventListener('click', () => {
                    const index = body.querySelectorAll('.paye-band-row').length;
                    const row = document.createElement('tr');
                    row.className = 'paye-band-row';
                    row.innerHTML = `
                        <td class="px-4 py-2">
                            <input type="number" name="paye_bands[${index}][up_to]" step="0.01" min="0" placeholder="Leave empty for top band" class="w-full rounded-lg border border-slate-200 px-3 py-1.5 text-sm tabular-nums" />
                        </td>
                        <td class="px-4 py-2">
                            <input type="number" name="paye_bands[${index}][rate]" step="0.01" min="0" max="100" required class="w-full max-w-[8rem] rounded-lg border border-slate-200 px-3 py-1.5 text-sm tabular-nums" />
                        </td>
                        <td class="px-4 py-2 text-right">
                            <button
                                type="button"
                                class="remove-paye-band text-xs font-semibold text-red-600 hover:text-red-800 disabled:cursor-not-allowed disabled:opacity-40"
                                data-swal-click-confirm="${removeBandConfirm}"
                                data-swal-title="Remove PAYE band?"
                                data-swal-confirm-text="Yes, remove"
                                data-swal-click-handler="removeStatutoryPayeBand"
                            >Remove</button>
                        </td>
                    `;
                    body.appendChild(row);
                    syncRemoveButtons();
                });

                syncRemoveButtons();
            })();
        </script>
    @endif
</x-loan-layout>