@php
    use App\Support\EmployeePaymentChannel;
    use App\Support\Validation\KenyanFieldRules;

    $employee = $employee ?? null;
    $paymentChannelLabels = $paymentChannelLabels ?? EmployeePaymentChannel::labels();
    $allowanceComponents = $allowanceComponents ?? collect();
    $deductionComponents = $deductionComponents ?? collect();
    $selectedAllowanceIds = $selectedAllowanceIds ?? [];
    $selectedDeductionIds = $selectedDeductionIds ?? [];
    $payComponentPreviewAmounts = $payComponentPreviewAmounts ?? [];
    $payComponentsConfigured = $payComponentsConfigured ?? false;
    $includeInPayroll = (bool) old('include_in_payroll', $includeInPayroll ?? $employee?->include_in_payroll ?? false);
    $selectedChannel = old('payment_channel', $employee?->payment_channel);
    $defaultRecipientName = trim(trim((string) old('first_name', $employee?->first_name ?? '')).' '.trim((string) old('last_name', $employee?->last_name ?? '')));
    $bankHolder = old('bank_account_holder', $employee?->bank_account_holder ?: $defaultRecipientName);
    $mpesaName = old('mpesa_registered_name', $employee?->mpesa_registered_name ?: $defaultRecipientName);
    $showChannelDetails = filled($selectedChannel);
    $payrollBasicSalary = old('basic_salary', $payrollBasicSalary ?? $employee?->currentSalaryAssignment?->basic_salary);
@endphp

<div
    class="mt-4 rounded-xl border border-slate-200 bg-white p-4 sm:p-5"
    data-employee-payment-panel
    x-data="{ included: {{ $includeInPayroll ? 'true' : 'false' }} }"
>
    <div class="space-y-5">
        <div>
            <p class="text-sm font-semibold text-slate-800">Payroll</p>
            <p class="mt-1 text-xs text-slate-500">Active staff marked here are included when a payroll period is opened. Amounts for additions and deductions come from payroll settings.</p>
        </div>

        <label class="flex items-start gap-3 rounded-lg border border-slate-200 bg-slate-50 px-4 py-3">
            <input
                type="checkbox"
                name="include_in_payroll"
                value="1"
                class="mt-0.5 rounded border-slate-300 text-teal-700 focus:ring-teal-600"
                x-model="included"
                @checked($includeInPayroll)
            >
            <span>
                <span class="block text-sm font-semibold text-slate-800">Include in HR payroll</span>
                <span class="mt-0.5 block text-xs text-slate-500">They must also be <strong>Active</strong> to appear on a payroll run.</span>
            </span>
        </label>
        <x-input-error class="mt-2" :messages="$errors->get('include_in_payroll')" />

        <div x-show="included" x-cloak class="space-y-5" data-salary-component-form>
            <div>
                <x-input-label for="basic_salary" value="Basic salary (KES)" />
                <input
                    type="number"
                    step="0.01"
                    min="0.01"
                    id="basic_salary"
                    name="basic_salary"
                    value="{{ $payrollBasicSalary }}"
                    data-basic-salary-input
                    class="mt-1 block w-full max-w-xs rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
                />
                <x-input-error class="mt-2" :messages="$errors->get('basic_salary')" />
            </div>

            @if ($payComponentsConfigured)
                @include('loan.accounting.books.payroll.partials.pay-component-checklist', [
                    'prefix' => 'allowance',
                    'components' => $allowanceComponents,
                    'selectedIds' => $selectedAllowanceIds,
                    'basicSalary' => (float) ($payrollBasicSalary ?: 0),
                    'readOnlyAmounts' => true,
                    'previewAmounts' => $payComponentPreviewAmounts,
                    'defaultExpanded' => true,
                ])
                @include('loan.accounting.books.payroll.partials.pay-component-checklist', [
                    'prefix' => 'deduction',
                    'components' => $deductionComponents,
                    'selectedIds' => $selectedDeductionIds,
                    'basicSalary' => (float) ($payrollBasicSalary ?: 0),
                    'readOnlyAmounts' => true,
                    'previewAmounts' => $payComponentPreviewAmounts,
                    'defaultExpanded' => true,
                ])
            @else
                <p class="text-sm text-slate-500">Payroll additions and deductions are not configured yet. Add them under Accounting → Payroll settings.</p>
            @endif

            <div>
                <x-input-label for="payment_channel" value="Payment channel" />
                <select id="payment_channel" name="payment_channel" data-payment-channel-select class="mt-1 block w-full max-w-md rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                    <option value="">Select channel</option>
                    @foreach ($paymentChannelLabels as $value => $label)
                        <option value="{{ $value }}" @selected((string) $selectedChannel === (string) $value)>{{ $label }}</option>
                    @endforeach
                </select>
                <x-input-error class="mt-2" :messages="$errors->get('payment_channel')" />
            </div>

            <div data-payment-channel-details @class(['space-y-4', 'hidden' => ! $showChannelDetails])>
                <div data-payment-fields="{{ EmployeePaymentChannel::BANK }}" @class(['grid grid-cols-1 sm:grid-cols-2 gap-5 rounded-lg border border-slate-200 bg-slate-50/80 p-4', 'hidden' => $selectedChannel !== EmployeePaymentChannel::BANK])>
                    <div>
                        <x-input-label for="bank_name" value="Bank name" />
                        <input type="text" id="bank_name" name="bank_name" value="{{ old('bank_name', $employee?->bank_name) }}" data-loan-field-kind="institution_name" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" {!! KenyanFieldRules::htmlAttributeStringForKind(KenyanFieldRules::KIND_INSTITUTION_NAME) !!} />
                        <x-input-error class="mt-2" :messages="$errors->get('bank_name')" />
                    </div>
                    <div>
                        <x-input-label for="bank_account_holder" value="Account holder" />
                        <input type="text" id="bank_account_holder" name="bank_account_holder" data-bank-account-holder data-loan-field-kind="person_name" value="{{ $bankHolder }}" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" autocomplete="name" {!! KenyanFieldRules::htmlAttributeStringForKind(KenyanFieldRules::KIND_PERSON_NAME) !!} />
                        <x-input-error class="mt-2" :messages="$errors->get('bank_account_holder')" />
                    </div>
                    <div>
                        <x-input-label for="bank_account_number" value="Account number" />
                        <input type="text" id="bank_account_number" name="bank_account_number" value="{{ old('bank_account_number', $employee?->bank_account_number) }}" data-loan-field-kind="bank_account" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" {!! KenyanFieldRules::htmlAttributeStringForKind(KenyanFieldRules::KIND_BANK_ACCOUNT) !!} />
                        <x-input-error class="mt-2" :messages="$errors->get('bank_account_number')" />
                    </div>
                    <div>
                        <x-input-label for="bank_branch_code" value="Branch code (optional)" />
                        <input type="text" id="bank_branch_code" name="bank_branch_code" value="{{ old('bank_branch_code', $employee?->bank_branch_code) }}" data-loan-field-kind="branch_code" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" {!! KenyanFieldRules::htmlAttributeStringForKind(KenyanFieldRules::KIND_BRANCH_CODE) !!} />
                        <x-input-error class="mt-2" :messages="$errors->get('bank_branch_code')" />
                    </div>
                </div>

                <div data-payment-fields="{{ EmployeePaymentChannel::MPESA }}" @class(['grid grid-cols-1 sm:grid-cols-2 gap-5 rounded-lg border border-slate-200 bg-slate-50/80 p-4', 'hidden' => $selectedChannel !== EmployeePaymentChannel::MPESA])>
                    <div>
                        <x-input-label for="mpesa_registered_name" value="Registered name" />
                        <input type="text" id="mpesa_registered_name" name="mpesa_registered_name" data-mpesa-registered-name data-loan-field-kind="person_name" value="{{ $mpesaName }}" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" autocomplete="name" {!! KenyanFieldRules::htmlAttributeStringForKind(KenyanFieldRules::KIND_PERSON_NAME) !!} />
                        <x-input-error class="mt-2" :messages="$errors->get('mpesa_registered_name')" />
                    </div>
                    <div>
                        <x-input-label for="mpesa_phone" value="M-Pesa phone number" />
                        @php
                            $mpesaPhoneAttrs = 'data-loan-field-kind="phone_ke" '.KenyanFieldRules::htmlAttributeStringForKind(KenyanFieldRules::KIND_PHONE_KE);
                        @endphp
                        <x-phone-input
                            id="mpesa_phone"
                            name="mpesa_phone"
                            :value="old('mpesa_phone', $employee?->mpesa_phone ?? $employee?->phone)"
                            :loan-field-attrs="$mpesaPhoneAttrs"
                        />
                        <x-input-error class="mt-2" :messages="$errors->get('mpesa_phone')" />
                    </div>
                </div>

                <div data-payment-fields="{{ EmployeePaymentChannel::CASH }}" @class(['rounded-lg border border-dashed border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-600', 'hidden' => $selectedChannel !== EmployeePaymentChannel::CASH])>
                    Cash payments are recorded manually in the payroll payment register. No account details are required.
                </div>
            </div>
        </div>
    </div>
</div>