@php
    $oldRows = collect(old('payslips', []));

    $initialRows = $staff->values()->map(function ($employee, $index) use ($oldRows) {
        $old = $oldRows->first(fn ($row) => (string) ($row['user_id'] ?? '') === (string) $employee->id) ?? [];

        return [
            'key' => $index,
            'user_id' => $employee->id,
            'name' => $employee->name,
            'employee_no' => $employee->employee_no,
            'designation' => $employee->designation,
            'department' => $employee->department?->name,
            'basic_salary' => (string) ($old['basic_salary'] ?? ''),
            'allowances' => (string) ($old['allowances'] ?? ''),
            'overtime_amount' => (string) ($old['overtime_amount'] ?? ''),
            'loan_deduction' => (string) ($old['loan_deduction'] ?? ''),
            'other_deductions' => (string) ($old['other_deductions'] ?? ''),
        ];
    })->values();

    $months = collect(range(1, 12))->mapWithKeys(fn ($m) => [$m => date('F', mktime(0, 0, 0, $m, 1))]);
    $yearOptions = collect(range(now()->year, now()->year - 3))->mapWithKeys(fn ($y) => [$y => (string) $y]);
@endphp

<x-app-layout title="Process Payroll">
    <x-page-header
        title="Process payroll"
        subtitle="Enter the month's pay elements — PAYE, SHIF, NSSF and the Housing Levy are computed automatically when the run is processed."
        icon="users"
        :back="route('erp.payroll.index')" />

    @if ($errors->any())
        <div class="mb-6 rounded-lg border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700">
            <p class="font-semibold">Please fix the following before processing:</p>
            <ul class="mt-1 list-inside list-disc">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form method="POST" action="{{ route('erp.payroll.store') }}" x-data="payrollForm(@js($initialRows))">
        @csrf

        <x-card class="mb-6">
            <div class="mb-5 flex items-center gap-3 border-b border-slate-200 pb-4">
                <span class="flex h-9 w-9 items-center justify-center rounded-lg bg-brand-50 text-brand-600">
                    <x-icon name="calendar-days" size="sm" />
                </span>
                <div>
                    <h2 class="text-sm font-semibold text-slate-900">Payroll period</h2>
                    <p class="text-xs text-slate-500">One run per calendar month — opening an existing month replaces this form.</p>
                </div>
            </div>

            <div class="grid gap-5 sm:grid-cols-2">
                <div class="sm:col-span-2">
                    <x-form.input name="name" label="Run name" required maxlength="160" :value="$defaultName"
                        placeholder="e.g. Monthly payroll — October 2026" />
                </div>

                <x-form.select name="period_month" label="Month" required
                    :options="$months->all()" :value="$defaultMonth" />

                <x-form.select name="period_year" label="Year" required
                    :options="$yearOptions->all()" :value="$defaultYear" />

                <x-form.input name="payment_date" label="Payment date" type="date"
                    :value="old('payment_date')"
                    hint="Optional — defaults to today when the net salaries are paid out." />

                <div class="sm:col-span-2">
                    <x-form.textarea name="notes" label="Notes" rows="2" maxlength="2000"
                        :value="old('notes')"
                        placeholder="Optional notes for the payroll file…" />
                </div>
            </div>
        </x-card>

        <x-card flush>
            <div class="flex flex-wrap items-center justify-between gap-3 border-b border-slate-200 px-5 py-4">
                <div class="flex items-center gap-3">
                    <span class="flex h-9 w-9 items-center justify-center rounded-lg bg-brand-50 text-brand-600">
                        <x-icon name="users" size="sm" />
                    </span>
                    <div>
                        <h2 class="text-sm font-semibold text-slate-900">Payslips</h2>
                        <p class="text-xs text-slate-500">Only staff with a basic salary or allowance are included in the run.</p>
                    </div>
                </div>

                <div class="flex flex-wrap items-center gap-4">
                    <label class="flex cursor-pointer items-center gap-2 text-xs text-slate-600">
                        <input type="checkbox" x-model="hideEmpty" class="h-3.5 w-3.5 rounded border-slate-300 text-brand-600 focus:ring-brand-500">
                        Hide staff with no amounts
                    </label>

                    <div class="w-56">
                        <x-form.input name="_staff_search" placeholder="Filter staff by name…" x-model="term" />
                    </div>
                </div>
            </div>

            @if ($staff->isEmpty())
                <x-empty-state icon="users" title="No active staff found"
                               message="Add staff members under Administration → Staff before processing payroll." />
            @else
                <div class="overflow-x-auto">
                    <table class="hms-table">
                        <thead>
                            <tr>
                                <th>Staff member</th>
                                <th class="text-right">Basic salary</th>
                                <th class="text-right">Allowances</th>
                                <th class="text-right">Overtime</th>
                                <th class="text-right">Loan deduction</th>
                                <th class="text-right">Other deductions</th>
                                <th class="text-right">Gross (computed)</th>
                            </tr>
                        </thead>
                        <tbody>
                            <template x-for="row in rows" :key="row.key">
                                <tr x-show="matches(row)">
                                    <td class="min-w-[14rem]">
                                        <input type="hidden" :name="`payslips[${row.key}][user_id]`" :value="row.user_id">
                                        <div class="text-sm font-medium text-slate-900" x-text="row.name"></div>
                                        <div class="text-xs text-slate-500">
                                            <span x-text="row.employee_no ? row.employee_no + ' · ' : ''"></span><span x-text="row.designation ?? ''"></span>
                                        </div>
                                        <div class="text-xs text-slate-400" x-text="row.department ?? ''"></div>
                                    </td>
                                    <td>
                                        <input type="number" step="0.01" min="0" inputmode="decimal"
                                               :name="`payslips[${row.key}][basic_salary]`"
                                               x-model.number="row.basic_salary"
                                               class="hms-input w-28 text-right text-sm tabular-nums" placeholder="0.00">
                                    </td>
                                    <td>
                                        <input type="number" step="0.01" min="0" inputmode="decimal"
                                               :name="`payslips[${row.key}][allowances]`"
                                               x-model.number="row.allowances"
                                               class="hms-input w-28 text-right text-sm tabular-nums" placeholder="0.00">
                                    </td>
                                    <td>
                                        <input type="number" step="0.01" min="0" inputmode="decimal"
                                               :name="`payslips[${row.key}][overtime_amount]`"
                                               x-model.number="row.overtime_amount"
                                               class="hms-input w-28 text-right text-sm tabular-nums" placeholder="0.00">
                                    </td>
                                    <td>
                                        <input type="number" step="0.01" min="0" inputmode="decimal"
                                               :name="`payslips[${row.key}][loan_deduction]`"
                                               x-model.number="row.loan_deduction"
                                               class="hms-input w-28 text-right text-sm tabular-nums" placeholder="0.00">
                                    </td>
                                    <td>
                                        <input type="number" step="0.01" min="0" inputmode="decimal"
                                               :name="`payslips[${row.key}][other_deductions]`"
                                               x-model.number="row.other_deductions"
                                               class="hms-input w-28 text-right text-sm tabular-nums" placeholder="0.00">
                                    </td>
                                    <td class="text-right text-sm font-medium tabular-nums text-slate-900" x-text="fmt(rowGross(row))"></td>
                                </tr>
                            </template>
                        </tbody>
                        <tfoot class="border-t border-slate-200 bg-slate-50 font-semibold text-slate-900">
                            <tr>
                                <td class="px-5 py-3 text-sm">
                                    Totals — <span x-text="payrollCount"></span> staff member(s) with pay
                                </td>
                                <td colspan="5"></td>
                                <td class="px-5 py-3 text-right text-sm tabular-nums">
                                    <span class="mr-2 text-xs font-medium uppercase tracking-wide text-slate-500">Gross</span>
                                    <span x-text="fmt(totalGross)"></span>
                                </td>
                            </tr>
                        </tfoot>
                    </table>
                </div>

                <div class="border-t border-slate-200 bg-slate-50 px-5 py-4">
                    <p class="flex items-start gap-2 text-xs text-slate-600">
                        <x-icon name="info" size="xs" class="mt-0.5 shrink-0 text-brand-500" />
                        <span>
                            PAYE, SHIF, NSSF and the Housing Levy are calculated on the gross pay of each staff member when the run is processed.
                            Approval posts the salary accrual journal; paying out posts the bank payout journal and settles the payslips.
                        </span>
                    </p>
                </div>
            @endif
        </x-card>

        <div class="mt-6 flex items-center justify-end gap-3">
            <a href="{{ route('erp.payroll.index') }}" class="hms-btn-secondary">Cancel</a>
            <button type="submit" class="hms-btn-primary">
                <x-icon name="calculator" size="sm" />
                Process payroll
            </button>
        </div>
    </form>

    <script>
        function payrollForm(initialRows) {
            return {
                rows: initialRows,
                term: '',
                hideEmpty: false,

                num(value) {
                    const parsed = parseFloat(value);
                    return isNaN(parsed) ? 0 : parsed;
                },

                rowGross(row) {
                    return this.num(row.basic_salary) + this.num(row.allowances) + this.num(row.overtime_amount);
                },

                get totalGross() {
                    return this.rows.reduce((sum, row) => sum + this.rowGross(row), 0);
                },

                get payrollCount() {
                    return this.rows.filter((row) => this.rowGross(row) > 0).length;
                },

                matches(row) {
                    if (this.hideEmpty && this.rowGross(row) <= 0) {
                        return false;
                    }

                    if (this.term.trim() !== '') {
                        const haystack = (row.name + ' ' + (row.employee_no ?? '') + ' ' + (row.department ?? '')).toLowerCase();

                        if (! haystack.includes(this.term.trim().toLowerCase())) {
                            return false;
                        }
                    }

                    return true;
                },

                fmt(value) {
                    return Number(value).toLocaleString('en-KE', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
                },
            };
        }
    </script>
</x-app-layout>