@php
    $meta = (array) ($row->form_meta ?? []);
    $seedItems = old('items');
    if (! is_array($seedItems) || $seedItems === []) {
        $seedItems = $detail['line_items'] ?? [['description' => '', 'category' => '', 'qty' => 1, 'unit_cost' => 0]];
    }
    $isReadOnly = isset($row) && in_array($row->status, [
        \App\Models\AccountingRequisition::STATUS_PAID,
        \App\Models\AccountingRequisition::STATUS_REJECTED,
        \App\Models\AccountingRequisition::STATUS_SENT_TO_TREASURY,
    ], true);
    $inModal = request()->header('Turbo-Frame') === 'loan-form-modal';
@endphp

<div class="req-form" data-loan-form-root data-loan-form-title="{{ $formTitle ?? 'Requisition' }}">
    @include('loan.accounting.requisitions.partials.validation-summary')

    <form
        method="post"
        action="{{ $formAction }}"
        enctype="multipart/form-data"
        class="space-y-4"
        x-data="requisitionForm"
        data-requisition-lines='@json($seedItems)'
        data-requisition-payees='@json($filterOptions['payees'] ?? [])'
        @if ($inModal) data-loan-modal-return="{{ route('loan.accounting.requisitions.index') }}" @endif
    >
        @csrf
        @if (! empty($formMethod) && $formMethod !== 'post')
            @method($formMethod)
        @endif

        <section class="req-form-section">
            <h3 class="req-form-section__title">Request Information</h3>
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                <div class="sm:col-span-2">
                    <label for="title" class="block text-xs font-semibold text-slate-600 mb-1">Request Title</label>
                    <input id="title" name="title" value="{{ old('title', $row->title ?? '') }}" @disabled($isReadOnly) @class(['w-full rounded-lg border text-sm', 'border-slate-200' => ! $errors->has('title'), 'border-rose-500' => $errors->has('title')]) />
                    @error('title')<p class="text-xs text-red-600 mt-1" data-loan-field-error="title">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label for="request_type" class="block text-xs font-semibold text-slate-600 mb-1">Request Type</label>
                    <select id="request_type" name="request_type" @disabled($isReadOnly) @class(['w-full rounded-lg border text-sm', 'border-slate-200' => ! $errors->has('request_type'), 'border-rose-500' => $errors->has('request_type')])>
                        <option value="">Select…</option>
                        @foreach (($filterOptions['request_types'] ?? []) as $type)
                            <option value="{{ $type }}" @selected(old('request_type', $meta['request_type'] ?? '') === $type)>{{ $type }}</option>
                        @endforeach
                    </select>
                    @error('request_type')<p class="text-xs text-red-600 mt-1" data-loan-field-error="request_type">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label for="priority" class="block text-xs font-semibold text-slate-600 mb-1">Priority</label>
                    <select id="priority" name="priority" @disabled($isReadOnly) class="w-full rounded-lg border border-slate-200 text-sm">
                        <option value="">Normal</option>
                        @foreach (($filterOptions['priorities'] ?? []) as $priority)
                            <option value="{{ $priority }}" @selected(old('priority', $meta['priority'] ?? '') === $priority)>{{ $priority }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label for="branch" class="block text-xs font-semibold text-slate-600 mb-1">Branch</label>
                    <select id="branch" name="branch" @disabled($isReadOnly) @class(['w-full rounded-lg border text-sm', 'border-slate-200' => ! $errors->has('branch'), 'border-rose-500' => $errors->has('branch')])>
                        <option value="">Select…</option>
                        @foreach (($filterOptions['branches'] ?? []) as $branchName)
                            <option value="{{ $branchName }}" @selected(old('branch', $meta['branch'] ?? '') === $branchName)>{{ $branchName }}</option>
                        @endforeach
                    </select>
                    @error('branch')<p class="text-xs text-red-600 mt-1" data-loan-field-error="branch">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label for="department" class="block text-xs font-semibold text-slate-600 mb-1">Department <span class="font-normal text-slate-400">(optional)</span></label>
                    <select id="department" name="department" @disabled($isReadOnly) @class(['w-full rounded-lg border text-sm', 'border-slate-200' => ! $errors->has('department'), 'border-rose-500' => $errors->has('department')])>
                        <option value="">Select…</option>
                        @foreach (($filterOptions['departments'] ?? []) as $dept)
                            <option value="{{ $dept }}" @selected(old('department', $meta['department'] ?? '') === $dept)>{{ $dept }}</option>
                        @endforeach
                    </select>
                    @error('department')<p class="text-xs text-red-600 mt-1" data-loan-field-error="department">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label for="needed_by" class="block text-xs font-semibold text-slate-600 mb-1">Needed By</label>
                    <input id="needed_by" name="needed_by" type="date" value="{{ old('needed_by', $meta['needed_by'] ?? '') }}" @disabled($isReadOnly) class="w-full rounded-lg border border-slate-200 text-sm" />
                </div>
                <div>
                    <label class="block text-xs font-semibold text-slate-600 mb-1">Requested By</label>
                    <input type="text" readonly value="{{ $row->requestedByUser?->name ?? ($currentUser->name ?? '—') }}" class="w-full rounded-lg border border-slate-200 bg-white text-sm text-slate-600" />
                </div>
                <div>
                    <label class="block text-xs font-semibold text-slate-600 mb-1">Request Date</label>
                    <input type="text" readonly value="{{ isset($row->id) ? optional($row->created_at)->format('d-m-Y') : now()->format('d-m-Y') }}" class="w-full rounded-lg border border-slate-200 bg-white text-sm text-slate-600" />
                </div>
                <div>
                    <label class="block text-xs font-semibold text-slate-600 mb-1">Currency</label>
                    <input name="currency" readonly value="{{ old('currency', $row->currency ?? 'KES') }}" class="w-full rounded-lg border border-slate-200 bg-white text-sm text-slate-600 uppercase" />
                </div>
            </div>
        </section>

        <section class="req-form-section">
            <h3 class="req-form-section__title">Budget &amp; Accounting</h3>
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                <div>
                    <label for="expense_account" class="block text-xs font-semibold text-slate-600 mb-1">Expense Account</label>
                    <select id="expense_account" name="expense_account" @disabled($isReadOnly) @class(['w-full rounded-lg border text-sm', 'border-slate-200' => ! $errors->has('expense_account'), 'border-rose-500' => $errors->has('expense_account')])>
                        <option value="">Select…</option>
                        @foreach (($filterOptions['expense_accounts'] ?? []) as $acct)
                            <option value="{{ $acct }}" @selected(old('expense_account', $meta['expense_account'] ?? '') === $acct)>{{ $acct }}</option>
                        @endforeach
                    </select>
                    @error('expense_account')<p class="text-xs text-red-600 mt-1" data-loan-field-error="expense_account">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label for="cost_center" class="block text-xs font-semibold text-slate-600 mb-1">Expense For</label>
                    <input id="cost_center" name="cost_center" value="{{ old('cost_center', $meta['cost_center'] ?? ($detail['cost_center'] ?? '')) }}" @disabled($isReadOnly) @class(['w-full rounded-lg border text-sm', 'border-slate-200' => ! $errors->has('cost_center'), 'border-rose-500' => $errors->has('cost_center')]) />
                    @error('cost_center')<p class="text-xs text-red-600 mt-1" data-loan-field-error="cost_center">{{ $message }}</p>@enderror
                </div>
            </div>
        </section>

        <section class="req-form-section">
            <h3 class="req-form-section__title">Payee / Disbursement</h3>
            @php
                $requesterEmployee = $currentUser?->employee ?? null;
                $payees = $filterOptions['payees'] ?? [];
                $selectedPayeeId = old('payee_employee_id', $meta['payee_employee_id'] ?? $requesterEmployee?->id);
                $defaultPayeeName = old('beneficiary_name', $meta['beneficiary_name'] ?? $requesterEmployee?->full_name ?? '');
                $defaultPayeePhone = old('beneficiary_phone', $meta['beneficiary_phone'] ?? ($requesterEmployee?->mpesa_phone ?: $requesterEmployee?->phone) ?? '');
                $defaultPayMethod = old('payment_method', $meta['payment_method'] ?? 'mpesa');
                $selectedPayee = collect($payees)->first(fn ($payee) => (int) ($payee['id'] ?? 0) === (int) $selectedPayeeId);
                if (is_array($selectedPayee)) {
                    if (trim((string) $defaultPayeeName) === '') {
                        $defaultPayeeName = (string) ($selectedPayee['name'] ?? '');
                    }
                    if (trim((string) $defaultPayeePhone) === '') {
                        $defaultPayeePhone = (string) ($selectedPayee['phone'] ?? '');
                    }
                }
            @endphp
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                <div class="sm:col-span-2">
                    <label for="payee_employee_id" class="block text-xs font-semibold text-slate-600 mb-1">Payee</label>
                    <select
                        id="payee_employee_id"
                        name="payee_employee_id"
                        @disabled($isReadOnly)
                        onchange="window.mfiFillRequisitionPayee && window.mfiFillRequisitionPayee(this)"
                        @class(['w-full rounded-lg border text-sm', 'border-slate-200' => ! $errors->has('payee_employee_id'), 'border-rose-500' => $errors->has('payee_employee_id')])
                    >
                        <option value="" data-name="" data-phone="">Other — type name and number below</option>
                        @foreach ($payees as $payee)
                            <option
                                value="{{ $payee['id'] }}"
                                data-name="{{ $payee['name'] }}"
                                data-phone="{{ $payee['phone'] }}"
                                @selected((int) $selectedPayeeId === (int) $payee['id'])
                            >{{ $payee['name'] }}{{ ! empty($payee['phone']) ? ' · '.$payee['phone'] : '' }}</option>
                        @endforeach
                    </select>
                    <p class="mt-1 text-xs text-slate-500">Pick a staff profile to fill their M-Pesa number, or enter a number yourself.</p>
                </div>
                <div>
                    <label for="beneficiary_name" class="block text-xs font-semibold text-slate-600 mb-1">Payee name</label>
                    <input id="beneficiary_name" name="beneficiary_name" value="{{ $defaultPayeeName }}" @disabled($isReadOnly) @class(['w-full rounded-lg border text-sm', 'border-slate-200' => ! $errors->has('beneficiary_name'), 'border-rose-500' => $errors->has('beneficiary_name')]) />
                    @error('beneficiary_name')<p class="text-xs text-red-600 mt-1" data-loan-field-error="beneficiary_name">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label for="beneficiary_phone" class="block text-xs font-semibold text-slate-600 mb-1">M-Pesa number</label>
                    <x-phone-input name="beneficiary_phone" :value="$defaultPayeePhone" :disabled="$isReadOnly" wrapper-class="" input-class="flex-1 min-w-0 w-full border-0 bg-transparent py-2 pl-2 pr-3 text-sm" />
                    @error('beneficiary_phone')<p class="text-xs text-red-600 mt-1" data-loan-field-error="beneficiary_phone">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label for="payment_method" class="block text-xs font-semibold text-slate-600 mb-1">Pay by</label>
                    <select id="payment_method" name="payment_method" @disabled($isReadOnly) class="w-full rounded-lg border border-slate-200 text-sm">
                        <option value="mpesa" @selected($defaultPayMethod === 'mpesa')>M-Pesa (system disbursement)</option>
                        <option value="manual_settlement" @selected($defaultPayMethod === 'manual_settlement')>Manual settlement</option>
                    </select>
                </div>
            </div>
        </section>

        <section class="req-form-section">
            <div class="flex items-center justify-between gap-2 mb-2">
                <h3 class="req-form-section__title !mb-0">Requisition Items</h3>
                @if (! $isReadOnly)
                    <button type="button" @click="addLine()" class="inline-flex min-h-[2rem] items-center rounded-lg border border-blue-200 bg-blue-50 px-3 text-xs font-semibold text-blue-800 hover:bg-blue-100">+ Add Item</button>
                @endif
            </div>
            @error('items')<p class="text-xs text-red-600 mb-2" data-loan-field-error="items">{{ $message }}</p>@enderror
            <div class="req-items-table-wrap">
                <table class="min-w-[640px] w-full text-sm">
                    <thead class="bg-slate-50 text-[11px] font-semibold uppercase text-slate-500">
                        <tr>
                            <th class="px-3 py-2 text-left">Description</th>
                            <th class="px-3 py-2 text-left w-28">Category</th>
                            <th class="px-3 py-2 text-right w-20">Qty</th>
                            <th class="px-3 py-2 text-right w-28">Unit Cost</th>
                            <th class="px-3 py-2 text-right w-28">Total</th>
                            @if (! $isReadOnly)<th class="px-3 py-2 w-10"></th>@endif
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 bg-white">
                        <template x-for="(line, i) in lines" :key="line.uid">
                            <tr>
                                <td class="px-3 py-2">
                                    <input type="text" :name="'items['+i+'][description]'" x-model="line.description" @disabled($isReadOnly) class="w-full min-w-[8rem] rounded border border-slate-200 text-sm" />
                                </td>
                                <td class="px-3 py-2">
                                    <input type="text" :name="'items['+i+'][category]'" x-model="line.category" @disabled($isReadOnly) class="w-full rounded border border-slate-200 text-sm" />
                                </td>
                                <td class="px-3 py-2">
                                    <input type="number" step="0.01" min="0" :name="'items['+i+'][qty]'" x-model.number="line.qty" @disabled($isReadOnly) class="w-full rounded border border-slate-200 text-sm text-right tabular-nums" />
                                </td>
                                <td class="px-3 py-2">
                                    <input type="number" step="0.01" min="0" :name="'items['+i+'][unit_cost]'" x-model.number="line.unit_cost" @disabled($isReadOnly) class="w-full rounded border border-slate-200 text-sm text-right tabular-nums" />
                                </td>
                                <td class="px-3 py-2 text-right tabular-nums font-medium text-slate-800" x-text="formatMoney(lineTotal(line))"></td>
                                @if (! $isReadOnly)
                                    <td class="px-3 py-2 text-center">
                                        <button type="button" @click="removeLine(i)" class="inline-flex min-h-[2rem] min-w-[2rem] items-center justify-center rounded text-slate-400 hover:bg-red-50 hover:text-red-600" title="Remove row" :disabled="lines.length <= 1">&times;</button>
                                    </td>
                                @endif
                            </tr>
                        </template>
                    </tbody>
                    <tfoot class="bg-slate-50">
                        <tr>
                            <td colspan="{{ $isReadOnly ? 4 : 5 }}" class="px-3 py-2 text-right text-xs font-semibold uppercase text-slate-500">Grand Total (KES)</td>
                            <td class="px-3 py-2 text-right font-semibold tabular-nums text-blue-900" x-text="formatMoney(grandTotal())"></td>
                            @if (! $isReadOnly)<td></td>@endif
                        </tr>
                    </tfoot>
                </table>
            </div>
        </section>

        <section class="req-form-section">
            <h3 class="req-form-section__title">Justification</h3>
            <div>
                <label for="purpose" class="block text-xs font-semibold text-slate-600 mb-1">Purpose / Justification</label>
                <textarea id="purpose" name="purpose" rows="3" @disabled($isReadOnly) @class(['w-full rounded-lg border text-sm', 'border-slate-200' => ! $errors->has('purpose'), 'border-rose-500' => $errors->has('purpose')])>{{ old('purpose', $row->purpose ?? '') }}</textarea>
                @error('purpose')<p class="text-xs text-red-600 mt-1" data-loan-field-error="purpose">{{ $message }}</p>@enderror
            </div>
        </section>

        <section class="req-form-section">
            <h3 class="req-form-section__title">Supporting Information</h3>
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                <div>
                    <label for="supplier" class="block text-xs font-semibold text-slate-600 mb-1">Supplier <span class="font-normal text-slate-400">(optional)</span></label>
                    <input id="supplier" name="supplier" value="{{ old('supplier', $meta['supplier'] ?? '') }}" @disabled($isReadOnly) class="w-full rounded-lg border border-slate-200 text-sm" />
                </div>
                <div>
                    <label for="notes" class="block text-xs font-semibold text-slate-600 mb-1">Notes <span class="font-normal text-slate-400">(optional)</span></label>
                    <input id="notes" name="notes" value="{{ old('notes', $row->notes ?? '') }}" @disabled($isReadOnly) class="w-full rounded-lg border border-slate-200 text-sm" />
                </div>
                @if (! empty($accountingRequisitionCustomFields))
                    @foreach ($accountingRequisitionCustomFields as $field)
                        @php
                            $fieldKey = (string) ($field['key'] ?? '');
                            $fieldType = (string) ($field['data_type'] ?? 'alphanumeric');
                            $fieldLabel = (string) ($field['label'] ?? $fieldKey);
                        @endphp
                        @if ($fieldType === 'image')
                            <div class="sm:col-span-2">
                                <label for="form_files_{{ $fieldKey }}" class="block text-xs font-semibold text-slate-600 mb-1">{{ $fieldLabel }} <span class="font-normal text-slate-400">(optional)</span></label>
                                @if (! $isReadOnly)
                                    <input id="form_files_{{ $fieldKey }}" name="form_files[{{ $fieldKey }}]" type="file" accept="image/*,.pdf" class="w-full rounded-lg border border-slate-200 text-sm file:mr-3 file:rounded file:border-0 file:bg-blue-50 file:px-3 file:py-1.5 file:text-xs file:font-semibold file:text-blue-800" />
                                @endif
                                @if (! empty(data_get($meta, $fieldKey)))
                                    <p class="mt-1 text-[11px] text-emerald-700">Attachment on file.</p>
                                @endif
                                @error("form_files.$fieldKey")<p class="text-xs text-red-600 mt-1" data-loan-field-error="form_files.{{ $fieldKey }}">{{ $message }}</p>@enderror
                            </div>
                        @endif
                    @endforeach
                @endif
            </div>
        </section>

        @if (! $isReadOnly)
            <div class="loan-form-modal__actions req-form-footer">
                @if ($inModal)
                    <button type="button" class="req-btn-secondary inline-flex min-h-[2.5rem] items-center justify-center rounded-lg border border-slate-300 bg-white px-4 py-2.5 text-sm font-semibold text-slate-700 shadow-sm hover:bg-slate-50" data-loan-form-modal-close data-platform-modal-close>Cancel</button>
                @else
                    <a href="{{ route('loan.accounting.requisitions.index') }}" class="req-btn-secondary inline-flex min-h-[2.5rem] items-center justify-center rounded-lg border border-slate-300 bg-white px-4 py-2.5 text-sm font-semibold text-slate-700 shadow-sm hover:bg-slate-50">Cancel</a>
                @endif
                <button type="submit" name="submit_action" value="draft" formnovalidate class="req-btn-secondary inline-flex min-h-[2.5rem] items-center justify-center rounded-lg border border-slate-300 bg-white px-4 py-2.5 text-sm font-semibold text-slate-700 shadow-sm hover:bg-slate-50">Save Draft</button>
                <button type="submit" name="submit_action" value="submit" class="req-btn-primary req-btn-submit inline-flex min-h-[2.5rem] items-center justify-center rounded-lg bg-blue-700 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-800">Submit Requisition</button>
            </div>
        @endif
    </form>
    @if (! $isReadOnly)
        <script>
            window.mfiFillRequisitionPayee = function (select) {
                if (! select || ! select.form) {
                    return;
                }
                const option = select.options[select.selectedIndex];
                const form = select.form;
                const nameInput = form.querySelector('[name="beneficiary_name"]');
                const phoneInput = form.querySelector('[name="beneficiary_phone"]');
                const name = option ? (option.getAttribute('data-name') || '') : '';
                let phone = option ? (option.getAttribute('data-phone') || '') : '';
                phone = String(phone).replace(/\D+/g, '');
                if (phone.startsWith('254') && phone.length > 9) {
                    phone = phone.slice(3);
                } else if (phone.startsWith('0') && phone.length === 10) {
                    phone = phone.slice(1);
                }
                if (nameInput) {
                    nameInput.value = name;
                }
                if (phoneInput) {
                    phoneInput.value = phone;
                    phoneInput.dispatchEvent(new Event('input', { bubbles: true }));
                    phoneInput.dispatchEvent(new Event('change', { bubbles: true }));
                }
            };
        </script>
    @endif
</div>