@php
    $isReadOnly = 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';
    $canApprove = $row->status === \App\Models\AccountingRequisition::STATUS_PENDING && ! ($detail['is_draft'] ?? false);
@endphp

<x-loan.form-page :title="$row->reference ?: 'Requisition'" maxWidth="5xl">
    @unless ($inModal)
        <x-slot name="actions">
            <a href="{{ route('loan.accounting.requisitions.index') }}" class="inline-flex min-h-[2.25rem] items-center justify-center rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-semibold text-slate-700 shadow-sm hover:bg-slate-50">Back to list</a>
        </x-slot>
    @endunless

    @include('loan.accounting.partials.flash')
    @error('status')<div class="mb-3 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800" role="alert">{{ $message }}</div>@enderror
    @error('requisition')<div class="mb-3 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800" role="alert">{{ $message }}</div>@enderror

    @if ($canApprove)
        <div class="mb-4 flex flex-col gap-3 rounded-xl border border-amber-200 bg-amber-50 px-4 py-3.5 sm:flex-row sm:items-center sm:justify-between">
            <p class="text-sm text-amber-900"><span class="font-semibold">Pending approval</span> — review and approve or reject this requisition.</p>
            <div class="flex flex-wrap gap-2">
                <form method="post" action="{{ route('loan.accounting.requisitions.approve', $row) }}">
                    @csrf
                    <button type="submit" class="inline-flex min-h-[2.5rem] items-center justify-center rounded-lg bg-emerald-700 px-5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-emerald-800">Approve</button>
                </form>
                <form method="post" action="{{ route('loan.accounting.requisitions.reject', $row) }}" data-swal-confirm="Reject this requisition?">
                    @csrf
                    <button type="submit" class="inline-flex min-h-[2.5rem] items-center justify-center rounded-lg border border-rose-300 bg-white px-5 py-2.5 text-sm font-semibold text-rose-700 shadow-sm hover:bg-rose-50">Reject</button>
                </form>
            </div>
        </div>
    @endif

    <div class="req-form space-y-4">
        <article class="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
            <div class="flex flex-wrap items-start justify-between gap-3 mb-4">
                <div>
                    @include('loan.accounting.requisitions.partials.status-badge', [
                        'label' => $detail['status_label'] ?? '—',
                        'tone' => $detail['status_tone'] ?? 'neutral',
                    ])
                    <p class="mt-2 text-xs text-slate-500">
                        {{ $detail['workflow_stage'] ?? 'Workflow not started' }}
                        @if (($detail['pending_with'] ?? '—') !== '—')
                            <span class="text-slate-400">·</span> Pending with {{ $detail['pending_with'] }}
                        @endif
                    </p>
                </div>
                <dl class="grid grid-cols-2 gap-x-4 gap-y-1 text-xs text-slate-600 sm:text-sm">
                    <div><dt class="inline text-slate-500">Payment:</dt> <dd class="inline font-medium text-slate-800">{{ $detail['payment_status'] ?? '—' }}</dd></div>
                    <div><dt class="inline text-slate-500">Total:</dt> <dd class="inline font-semibold tabular-nums text-slate-900">{{ $detail['currency'] ?? 'KES' }} {{ number_format((float) ($detail['amount'] ?? 0), 2) }}</dd></div>
                </dl>
            </div>

            <x-workflow-rail
                key="accounting_requisition"
                :status="$detail['workflow_key'] ?? $row->status"
                :steps="$detail['rail_steps'] ?? []"
                size="sm"
                density="compact"
                label="Workflow progress"
                class="mb-4 border-t border-slate-100 pt-4"
            />

            @if ($isReadOnly)
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm border-t border-slate-100 pt-4">
                    <div><span class="text-xs font-semibold uppercase text-slate-500">Requester</span><p class="mt-0.5 font-medium text-slate-800">{{ $detail['requester'] ?? '—' }}</p></div>
                    <div><span class="text-xs font-semibold uppercase text-slate-500">Branch</span><p class="mt-0.5 font-medium text-slate-800">{{ $detail['branch'] ?? '—' }}</p></div>
                    <div><span class="text-xs font-semibold uppercase text-slate-500">Department</span><p class="mt-0.5 font-medium text-slate-800">{{ $detail['department'] ?? '—' }}</p></div>
                    <div><span class="text-xs font-semibold uppercase text-slate-500">Request type</span><p class="mt-0.5 font-medium text-slate-800">{{ $detail['request_type'] ?? '—' }}</p></div>
                    <div><span class="text-xs font-semibold uppercase text-slate-500">Expense account</span><p class="mt-0.5 font-medium text-slate-800">{{ $detail['expense_account'] ?? '—' }}</p></div>
                    <div><span class="text-xs font-semibold uppercase text-slate-500">Expense for</span><p class="mt-0.5 font-medium text-slate-800">{{ $detail['cost_center'] ?? '—' }}</p></div>
                    <div><span class="text-xs font-semibold uppercase text-slate-500">Payee</span><p class="mt-0.5 font-medium text-slate-800">{{ $detail['beneficiary_name'] ?? '—' }}</p></div>
                    <div><span class="text-xs font-semibold uppercase text-slate-500">M-Pesa number</span><p class="mt-0.5 font-medium text-slate-800">{{ $detail['beneficiary_phone'] ?? '—' }}</p></div>
                    <div><span class="text-xs font-semibold uppercase text-slate-500">Pay by</span><p class="mt-0.5 font-medium text-slate-800">{{ ($detail['payment_method'] ?? '') === 'mpesa' ? 'M-Pesa' : (($detail['payment_method'] ?? '—') === '—' ? '—' : str_replace('_', ' ', $detail['payment_method'])) }}</p></div>
                    <div class="sm:col-span-2"><span class="text-xs font-semibold uppercase text-slate-500">Justification</span><p class="mt-0.5 text-slate-700">{{ $detail['justification'] ?? '—' }}</p></div>
                    @if (! empty($detail['attachment']))
                        <div class="sm:col-span-2"><span class="text-xs font-semibold uppercase text-slate-500">Attachment</span><p class="mt-0.5 text-sm text-blue-700">File attached</p></div>
                    @endif
                </div>

                @if (! empty($detail['line_items']))
                    <div class="mt-4 req-items-table-wrap">
                        <table class="min-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">Category</th>
                                    <th class="px-3 py-2 text-right">Qty</th>
                                    <th class="px-3 py-2 text-right">Unit Cost</th>
                                    <th class="px-3 py-2 text-right">Total</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-slate-100 bg-white">
                                @foreach ($detail['line_items'] as $item)
                                    <tr>
                                        <td class="px-3 py-2">{{ $item['description'] ?: '—' }}</td>
                                        <td class="px-3 py-2">{{ $item['category'] ?: '—' }}</td>
                                        <td class="px-3 py-2 text-right tabular-nums">{{ number_format((float) $item['qty'], 2) }}</td>
                                        <td class="px-3 py-2 text-right tabular-nums">{{ number_format((float) $item['unit_cost'], 2) }}</td>
                                        <td class="px-3 py-2 text-right tabular-nums font-medium">{{ number_format((float) $item['total'], 2) }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @endif

                @if ($inModal)
                    <div class="loan-form-modal__actions req-form-footer mt-4 !px-0">
                        <button type="button" class="req-btn-secondary inline-flex min-h-[2.5rem] w-full sm:w-auto 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>Close</button>
                    </div>
                @endif
            @else
                @include('loan.accounting.requisitions.partials.form-body', [
                    'formAction' => route('loan.accounting.requisitions.update', $row),
                    'formMethod' => 'patch',
                    'formTitle' => $row->reference ?: 'Requisition',
                    'row' => $row,
                    'detail' => $detail,
                    'filterOptions' => $filterOptions,
                    'currentUser' => $row->requestedByUser?->loadMissing('employee'),
                    'accountingRequisitionCustomFields' => $accountingRequisitionCustomFields ?? [],
                ])
            @endif
        </article>

        <article class="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
            <x-workflow-timeline
                key="accounting_requisition"
                :status="$detail['status_label'] ?? $row->status"
                :history="$detail['approval_history'] ?? []"
                size="sm"
                density="compact"
                label="Approval history"
            />
        </article>
    </div>
</x-loan.form-page>