@php
    $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]);

    $ready = $staff->filter(fn ($employee) => isset($previews[$employee->id]));

    $totals = [
        'gross' => round(array_sum(array_column($previews, 'gross_salary')), 2),
        'deductions' => round(array_sum(array_column($previews, 'total_deductions')), 2),
        'net' => round(array_sum(array_column($previews, 'net_pay')), 2),
    ];
@endphp

<x-app-layout title="Generate payroll">
    <x-page-header
        title="Generate payroll from HR"
        subtitle="Builds each payslip from the employee file — pay grade or contract basic, unpaid leave, allowances, overtime, commissions, loans, HELB, union dues and approved claims."
        icon="calculator"
        :back="route('erp.payroll.index')">
        <x-slot:actions>
            <a href="{{ route('erp.payroll.create') }}" class="hms-btn-secondary">
                <x-icon name="edit" size="sm" />
                Manual entry instead
            </a>
        </x-slot:actions>
    </x-page-header>

    @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 generating:</p>
            <ul class="mt-1 list-inside list-disc">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    @if ($existing)
        <div class="mb-6 rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-800">
            A run already exists for {{ $existing->period_label }}.
            <a href="{{ route('erp.payroll.show', $existing) }}" class="font-semibold underline">Open it</a>
            instead — a month can only have one run.
        </div>
    @endif

    <form method="POST" action="{{ route('erp.payroll.generate.store') }}"
          x-data="{
              selected: {{ Illuminate\Support\Js::from($ready->pluck('id')->values()) }},
              toggleAll(checked) {
                  this.selected = checked ? {{ Illuminate\Support\Js::from($ready->pluck('id')->values()) }} : [];
              },
              isChecked(id) { return this.selected.includes(id); },
              switch(id) {
                  this.selected = this.isChecked(id)
                      ? this.selected.filter(x => x !== id)
                      : [...this.selected, id];
              }
          }">
        @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">The preview uses the selected month, so unpaid leave, overtime and commissions must already be recorded for it.</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" />
                </div>

                <x-form.select name="period_month" label="Month" required :options="$months->all()" :value="$month" />
                <x-form.select name="period_year" label="Year" required :options="$yearOptions->all()" :value="$year" />
                <x-form.input name="payment_date" label="Payment date" type="date" :value="old('payment_date')" hint="Printable on bank and M-Pesa schedules." />
                <x-form.input name="notes" label="Notes" maxlength="2000" :value="old('notes')" />
            </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>
                    <h2 class="text-sm font-semibold text-slate-900">Employees included</h2>
                    <p class="text-xs text-slate-500">
                        {{ $ready->count() }} of {{ $staff->count() }} active staff have a pay basis.
                        Select the people to include in this run.
                    </p>
                </div>
                <label class="flex items-center gap-2 text-sm text-slate-600">
                    <input type="checkbox" @checked($ready->count() > 0)
                           @change="toggleAll($event.target.checked)"
                           class="rounded border-slate-300 text-brand-600 focus:ring-brand-500">
                    Select all payable
                </label>
            </div>

            @if ($staff->isEmpty())
                <x-empty-state icon="users" title="No active staff"
                               message="Create staff records and contracts before running payroll." />
            @else
                <div class="overflow-x-auto">
                    <table class="hms-table">
                        <thead>
                            <tr>
                                <th class="w-10"></th>
                                <th>Employee</th>
                                <th>Cost centre</th>
                                <th class="text-right">Basic</th>
                                <th class="text-right">Allowances</th>
                                <th class="text-right">Commissions</th>
                                <th class="text-right">Deductions</th>
                                <th class="text-right">Net pay</th>
                                <th>Extras</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($staff as $employee)
                                @php($preview = $previews[$employee->id] ?? null)
                                <tr class="{{ $preview ? '' : 'opacity-60' }}">
                                    <td>
                                        @if ($preview)
                                            <input type="checkbox" name="user_ids[]" value="{{ $employee->id }}"
                                                   x-model.number="selected"
                                                   class="rounded border-slate-300 text-brand-600 focus:ring-brand-500">
                                        @endif
                                    </td>
                                    <td>
                                        <div class="text-sm font-medium text-slate-900">{{ $employee->name }}</div>
                                        <div class="text-xs text-slate-500">
                                            {{ $employee->employee_no ?? '—' }}{{ $employee->designation ? ' · '.$employee->designation : '' }}
                                        </div>
                                    </td>
                                    <td class="text-sm text-slate-600">{{ $preview['cost_center'] ?? $employee->department?->name ?? '—' }}</td>
                                    @if ($preview)
                                        <td class="text-right tabular-nums">
                                            {{ money($preview['basic_salary'], false) }}
                                            @if ((float) $preview['unpaid_leave_deduction'] > 0)
                                                <div class="text-xs text-amber-600">−{{ money($preview['unpaid_leave_deduction'], false) }} unpaid ({{ $preview['unpaid_leave_days'] }}d)</div>
                                            @endif
                                        </td>
                                        <td class="text-right tabular-nums">{{ money($preview['allowances'], false) }}</td>
                                        <td class="text-right tabular-nums">{{ money($preview['commission'], false) }}</td>
                                        <td class="text-right tabular-nums">{{ money($preview['total_deductions'], false) }}</td>
                                        <td class="text-right font-semibold tabular-nums">{{ money($preview['net_pay'], false) }}</td>
                                        <td>
                                            <div class="flex flex-wrap gap-1">
                                                @if ((float) $preview['loan_deduction'] > 0)
                                                    <x-status-badge color="amber" label="Loan" size="sm" />
                                                @endif
                                                @if ((float) $preview['claims_reimbursement'] > 0)
                                                    <x-status-badge color="green" label="Claim refund" size="sm" />
                                                @endif
                                                @if ((float) $preview['helb'] > 0)
                                                    <x-status-badge color="indigo" label="HELB" size="sm" />
                                                @endif
                                                @if ((float) $preview['union_dues'] > 0)
                                                    <x-status-badge color="blue" label="Union" size="sm" />
                                                @endif
                                                @if ((float) $preview['fringe_benefit_tax'] > 0)
                                                    <x-status-badge color="red" label="Fringe tax" size="sm" />
                                                @endif
                                                @if ((float) $preview['insurance_relief'] > 0)
                                                    <x-status-badge color="indigo" label="Ins. relief" size="sm" />
                                                @endif
                                            </div>
                                        </td>
                                    @else
                                        <td colspan="6" class="text-sm text-slate-500">
                                            No pay basis — add an active contract or assign a pay grade step on the staff file.
                                        </td>
                                    @endif
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif
        </x-card>

        <div class="mt-6 flex flex-wrap items-center justify-between gap-4">
            <div class="flex flex-wrap gap-6 text-sm text-slate-600">
                <span>Selected gross <strong class="tabular-nums text-slate-900">{{ money($totals['gross']) }}</strong></span>
                <span>Deductions <strong class="tabular-nums text-slate-900">{{ money($totals['deductions']) }}</strong></span>
                <span>Net <strong class="tabular-nums text-emerald-600">{{ money($totals['net']) }}</strong></span>
            </div>

            @can('payroll.process')
                <button type="submit" class="hms-btn-primary" @disabled($ready->isEmpty() || $existing)>
                    <x-icon name="calculator" size="sm" />
                    Generate payslips
                </button>
            @endcan
        </div>
    </form>
</x-app-layout>