@if ($canActOnWorkflow || $canRejectWorkflow)
    <section
        id="loan-approval-action"
        class="loan-approval-proceed"
        @if ($hasApprovalValidationErrors ?? false) data-approval-validation-errors @endif
    >
        @if ($hasApprovalValidationErrors ?? false)
            <div
                class="rounded-md border border-rose-300 bg-rose-50 px-2.5 py-2 text-xs text-rose-900"
                role="alert"
                data-loan-validation-errors
                tabindex="-1"
            >
                <p class="font-semibold">Unable to complete this approval action. Review the issues below and try again.</p>
                <ul class="mt-1.5 list-disc space-y-0.5 pl-4">
                    @foreach ($approvalValidationLines as $line)
                        <li data-loan-field-error="{{ $line['field'] }}">{{ $line['message'] }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        @if (($borrowerBlocked ?? false) && ($canActOnWorkflow ?? false))
            <div class="loan-ent-req-banner loan-ent-req-banner--warning mt-3">
                <p class="loan-ent-req-banner__title">Client warnings may block approval.</p>
            </div>
        @endif

        @if ($canActOnWorkflow ?? false)
            @php
                $requiresApprovalOtp = ($approvalRequest ?? null)
                    && app(\App\Services\Communication\Otp\OtpApprovalIntegrationService::class)
                        ->requiresOtp((string) $approvalRequest->workflow_key);
                $aprTerms = (array) ($approvalWorkspace['terms']['approved'] ?? []);
                $reqTerms = (array) ($approvalWorkspace['terms']['requested'] ?? []);
                $carryPrincipal = old('approved_principal', $aprTerms['principal'] ?? $reqTerms['principal'] ?? $application->amount_requested ?? '');
                $carryTermValue = old('approved_term_value', $aprTerms['term_value'] ?? $reqTerms['term_value'] ?? $application->term_value ?? '');
                $carryTermUnit = old('approved_term_unit', $aprTerms['term_unit'] ?? $reqTerms['term_unit'] ?? $application->term_unit ?? 'monthly');
                $carryFrequency = old('approved_repayment_frequency', $aprTerms['repayment_frequency'] ?? $reqTerms['repayment_frequency'] ?? $carryTermUnit);
            @endphp

            @if ($requiresApprovalOtp && ($approvalRequest ?? null))
                <div class="mt-3 rounded-lg border border-slate-200 bg-slate-50 p-3 text-xs">
                    <p class="font-semibold text-slate-800">Staff OTP confirmation</p>
                    <p class="mt-1 text-slate-600">Loan approval requires a one-time code sent to your staff phone.</p>
                    <form
                        method="post"
                        action="{{ route('loan.approvals.issue_otp', $approvalRequest) }}"
                        class="mt-2"
                        x-data="{ submitting: false }"
                        @submit="if ($event.defaultPrevented) return; if (submitting && $el.dataset.allowBusySubmit !== '1') { $event.preventDefault(); return; } delete $el.dataset.allowBusySubmit; submitting = true"
                    >
                        @csrf
                        <x-loan.workspace-embed-field />
                        <x-loan.busy-submit-button
                            label="Send OTP code"
                            busy-label="Sending…"
                            class="inline-flex rounded-md border border-teal-300 bg-white px-3 py-1.5 text-xs font-semibold text-teal-900 hover:bg-teal-50"
                        />
                    </form>
                    @if (session('otp_challenge_token') || old('otp_challenge_token'))
                        <p class="mt-2 text-emerald-800">Code requested — enter the SMS digits below, then approve.</p>
                    @endif
                    @error('otp_code')
                        <p class="mt-2 text-red-600">{{ $message }}</p>
                    @enderror
                </div>
            @endif

            <form
                method="post"
                action="{{ route('loan.book.applications.approval.approve', $application) }}"
                class="loan-approval-proceed__form mt-3"
                x-data="{
                    submitting: false,
                    busyLabel: 'Approving…',
                    approvedPrincipal: @js((string) $carryPrincipal),
                    requestedPrincipal: @js((string) ($reqTerms['principal'] ?? $application->amount_requested ?? 0)),
                }"
                data-turbo-frame="{{ \App\Support\Navigation\WorkspaceEmbed::workflowActionTurboFrame() }}"
                data-preserve-workspace-scroll="1"
                data-swal-confirm="Record this approval decision and advance the workflow?"
                data-swal-title="Approve application"
                data-swal-confirm-text="Approve"
                data-busy-label="Approving…"
                @submit="if ($event.defaultPrevented) return; if (submitting && $el.dataset.allowBusySubmit !== '1') { $event.preventDefault(); return; } delete $el.dataset.allowBusySubmit; submitting = true; busyLabel = 'Approving…'"
            >
                @csrf
                <x-loan.workspace-embed-field />
                <div class="mt-1">
                    <label class="loan-ent-label" for="approval-approved-principal">Approved amount</label>
                    <p class="mt-0.5 text-[11px] text-slate-500">
                        Requested KES {{ number_format((float) ($reqTerms['principal'] ?? $application->amount_requested ?? 0), 2) }}.
                        You can approve a different amount. If you change it, say why in the decision comment.
                    </p>
                    <input
                        id="approval-approved-principal"
                        type="text"
                        inputmode="decimal"
                        name="approved_principal"
                        x-model="approvedPrincipal"
                        class="loan-ent-input mt-1.5 sm:max-w-xs tabular-nums"
                        autocomplete="off"
                    >
                    <p
                        class="mt-1 text-[11px] text-amber-800"
                        x-show="Number(approvedPrincipal) > 0 && Math.abs(Number(approvedPrincipal) - Number(requestedPrincipal)) > 0.009"
                        x-cloak
                    >
                        This differs from the requested amount. Record why in the decision comment below.
                    </p>
                </div>
                <input type="hidden" name="approved_term_value" value="{{ $carryTermValue }}">
                <input type="hidden" name="approved_term_unit" value="{{ $carryTermUnit }}">
                <input type="hidden" name="approved_repayment_frequency" value="{{ $carryFrequency }}">
                <input type="hidden" name="decision_type" value="approve">

                <label class="loan-ent-label" for="approval-comment-approve">Decision comment</label>
                <p class="mt-0.5 text-[11px] text-slate-500">
                    Optional for a standard approval. Required when you approve a different amount or add conditions.
                </p>
                <textarea
                    id="approval-comment-approve"
                    name="comments"
                    rows="2"
                    maxlength="2000"
                    @class([
                        'loan-ent-textarea mt-1.5',
                        'border-rose-400 ring-2 ring-rose-200' => $errors->has('comments') || $errors->has('approval') || $errors->has('stage'),
                    ])
                    placeholder="Optional note…"
                >{{ old('comments') }}</textarea>
                @error('comments')
                    <p class="mt-1 text-xs text-red-600" data-loan-field-error="comments">{{ $message }}</p>
                @enderror
                @error('approval')
                    <p class="mt-1 text-xs text-red-600" data-loan-field-error="approval">{{ $message }}</p>
                @enderror
                @error('approved_principal')
                    <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                @enderror

                @if ($requiresApprovalOtp && ($approvalRequest ?? null))
                    <input type="hidden" name="otp_challenge_token" value="{{ old('otp_challenge_token', session('otp_challenge_token')) }}">
                    <div class="mt-2">
                        <label for="approval-otp-code" class="loan-ent-label">OTP code from SMS</label>
                        <input
                            id="approval-otp-code"
                            type="text"
                            name="otp_code"
                            value="{{ old('otp_code') }}"
                            inputmode="numeric"
                            autocomplete="one-time-code"
                            placeholder="6-digit code"
                            class="loan-ent-input mt-1 sm:max-w-xs"
                        >
                    </div>
                @endif

                @if ($finalApproveBlocked ?? false)
                    <div class="loan-approval-proceed__gate mt-3" role="status" aria-live="polite">
                        <div class="loan-approval-proceed__gate-banner">
                            <span class="loan-approval-proceed__gate-icon" aria-hidden="true">
                                <svg viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5"><path fill-rule="evenodd" d="M10 1a4.5 4.5 0 00-4.5 4.5V9H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-.5V5.5A4.5 4.5 0 0010 1zm3 8V5.5a3 3 0 10-6 0V9h6z" clip-rule="evenodd"/></svg>
                            </span>
                            <div class="min-w-0">
                                <p class="loan-approval-proceed__gate-title">Approval locked</p>
                                <p class="loan-approval-proceed__gate-text" data-approval-blocker-hint>{{ $approveBlockReason }}</p>
                                @if ($approveBlockReasonHint ?? null)
                                    <p class="loan-approval-proceed__gate-subtext">{{ $approveBlockReasonHint }}</p>
                                @endif
                            </div>
                        </div>
                        <button
                            type="button"
                            class="loan-approval-proceed__btn--locked mt-2.5 inline-flex w-full items-center justify-center gap-2 sm:w-auto"
                            data-approve-blocked="1"
                            aria-disabled="true"
                            @click="scrollToApprovalBlocker(@js($approveBlockReasonKey ?? 'generic'))"
                        >
                            <svg viewBox="0 0 20 20" fill="currentColor" class="h-4 w-4 shrink-0 opacity-80" aria-hidden="true"><path fill-rule="evenodd" d="M10 1a4.5 4.5 0 00-4.5 4.5V9H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-.5V5.5A4.5 4.5 0 0010 1zm3 8V5.5a3 3 0 10-6 0V9h6z" clip-rule="evenodd"/></svg>
                            <span>{{ ($approveButtonLabel ?? '') !== '' ? $approveButtonLabel : 'Approve and complete' }} — locked</span>
                        </button>
                        <p class="loan-approval-proceed__gate-footnote">Tap the locked button to jump to what still needs action.</p>
                    </div>
                @else
                    <button
                        type="submit"
                        data-loan-busy-owner="1"
                        data-busy-label="Approving…"
                        data-swal-confirm="Record this approval decision and advance the workflow?"
                        data-swal-title="Approve application"
                        data-swal-confirm-text="Approve"
                        x-bind:aria-busy="submitting ? 'true' : 'false'"
                        x-bind:class="submitting ? 'opacity-90 cursor-wait' : ''"
                        class="loan-ent-btn loan-ent-btn--primary mt-2.5 inline-flex w-full items-center justify-center gap-1.5 sm:w-auto"
                    >
                        <span x-show="!submitting">{{ ($approveButtonLabel ?? '') !== '' ? $approveButtonLabel : 'Approve and complete' }}</span>
                        <span x-show="submitting" x-cloak class="inline-flex items-center gap-1.5">
                            <span class="loan-submit-spinner" aria-hidden="true"></span>
                            <span x-text="busyLabel">Approving…</span>
                        </span>
                    </button>
                @endif
            </form>
        @endif

        @if ($canRejectWorkflow ?? false)
            <details class="mt-4 rounded-lg border border-slate-200 bg-slate-50/80 px-3 py-2">
                <summary class="cursor-pointer text-xs font-semibold text-slate-600">Reject entire application</summary>
                <div class="mt-3">
                    <form
                        method="post"
                        action="{{ route('loan.book.applications.approval.reject', $application) }}"
                        x-data="{ submitting: false, busyLabel: 'Rejecting…' }"
                        data-turbo-frame="{{ \App\Support\Navigation\WorkspaceEmbed::workflowActionTurboFrame() }}"
                        data-preserve-workspace-scroll="1"
                        data-swal-confirm="Reject this application and send it back to the selected stage?"
                        data-swal-title="Reject & send back"
                        data-swal-confirm-text="Reject"
                        data-busy-label="Rejecting…"
                        @submit="if ($event.defaultPrevented) return; if (submitting && $el.dataset.allowBusySubmit !== '1') { $event.preventDefault(); return; } delete $el.dataset.allowBusySubmit; submitting = true; busyLabel = 'Rejecting…'"
                    >
                        @csrf
                        <x-loan.workspace-embed-field />
                        @php
                            $rejectTargets = $approvalWorkspace['reject_targets'] ?? \App\Support\Approval\ApprovalRejectTargetOptions::correctionWorkspaces();
                            $rejectTargetDefault = old('reject_target', $rejectTargets[0]['value'] ?? 'appraisal');
                        @endphp
                        <label class="loan-ent-label" for="reject_target">Send rejection back to</label>
                        <select id="reject_target" name="reject_target" required class="loan-ent-input mt-1">
                            @foreach ($rejectTargets as $target)
                                <option value="{{ $target['value'] }}" @selected($rejectTargetDefault === $target['value'])>{{ $target['label'] }}</option>
                            @endforeach
                        </select>
                        @error('reject_target')
                            <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                        @enderror
                        <label class="loan-ent-label mt-3" for="approval-comment-reject">Correction notes</label>
                        <textarea
                            id="approval-comment-reject"
                            name="comments"
                            rows="3"
                            required
                            maxlength="2000"
                            class="loan-ent-textarea mt-1.5"
                            placeholder="What should be corrected…"
                        >{{ old('comments') }}</textarea>
                        @error('comments')
                            <p class="mt-1 text-xs text-red-600" data-loan-field-error="comments">{{ $message }}</p>
                        @enderror
                        <button
                            type="submit"
                            class="loan-ent-btn loan-approval-btn--reject mt-2.5 inline-flex w-full items-center justify-center gap-1.5 sm:w-auto"
                        >
                            {{ $workflowActionLabels['reject'] ?? 'Reject & send back' }}
                        </button>
                    </form>
                </div>
            </details>
        @endif
    </section>
@endif