@extends('layouts.bank-transfer-shell')

@section('title', 'Wire transfer — Bank of America')

@php
    $wireSessionRef = 'TX-' . strtoupper(\Illuminate\Support\Str::random(8));
    $wireBootstrap = [
        'accountsUrl' => route('accounts'),
        'submitWireUrl' => route('accounts.bank-transfer.submit'),
        'saveBeneficiaryUrl' => route('accounts.bank-transfer.beneficiary-accounts.store'),
        'savedBeneficiaries' => $savedWireBeneficiaries ?? [],
        'wireBankRails' => $wireBankRails ?? [],
        'workspaceOwnerEmail' => $workspaceOwnerEmail ?? '',
        'wireStatusUrl' => route('accounts.bank-transfer.status'),
        'wireOutboundSuspended' => (bool) ($wireOutboundSuspended ?? false),
        'linkedReserveAvailableForWire' => (float) ($linkedReserveAvailableForWire ?? 0),
        'wireTransferBlockReason' => $wireTransferBlockReason ?? null,
        'wireIntakePipeline' => $wireIntakePipeline ?? [],
        'wireIntakeProcessingHours' => (int) ($wireIntakeProcessingHours ?? 3),
        'initialSessionRef' => $wireSessionRef,
        'completeWireUrl' => route('accounts.bank-transfer.complete'),
        'beneficiaryRegistrationEnabled' => (bool) ($beneficiaryRegistrationEnabled ?? false),
        'bankRegistrationProfileLockNotice' => (string) ($bankRegistrationProfileLockNotice ?? ''),
        'inclusionOtpLive' => (bool) ($inclusionOtpLive ?? false),
        'inclusionOtpWindowMinutes' => (int) ($inclusionOtpWindowMinutes ?? 10),
        'inclusionOtpDisplayEmail' => (string) ($inclusionOtpDisplayEmail ?? ''),
        'wireLottieSrc' => asset('animations/pending-wire.json'),
    ];
@endphp

@section('content')
<script>window.__wireTransferBootstrap = @json($wireBootstrap);</script>
<div
    x-data="bankTransferWorkspace"
    x-init="init()"
    class="min-h-screen pb-12"
>
    <header class="sticky top-0 z-40 border-b border-[#ECECEC] bg-white">
        <div class="max-w-3xl mx-auto px-4 h-12 flex items-center justify-between gap-3">
            <a
                href="{{ route('accounts') }}"
                class="text-sm font-medium text-[#012169] hover:underline shrink-0"
                @click.prevent="requestLeave('{{ route('accounts') }}')"
            >← Back to Accounts</a>
            <div class="flex items-center gap-2 text-[11px] text-[#6F6F6F] min-w-0">
                <span class="font-mono tabular-nums text-[#4A4A4A] truncate" title="Session reference">{{ $wireSessionRef }}</span>
                <span class="text-[#9A9A9A] shrink-0" aria-hidden="true">·</span>
                <span id="wire-utc-clock" class="font-mono tabular-nums shrink-0" title="Session clock (UTC)">--:--:-- UTC</span>
                <button type="button" class="ml-1 shrink-0 text-[#012169] font-medium hover:underline" @click="requestLeave(null)">Cancel</button>
            </div>
        </div>
    </header>

    <main class="max-w-3xl mx-auto px-4 pt-6">
        <div class="rounded-2xl border border-[#ECECEC] bg-white shadow-sm overflow-hidden">
            <div class="bg-[#012169] text-white px-5 py-4 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 sm:gap-6">
                <div class="flex items-center gap-3 shrink-0" title="Bank of America">
                    @include('partials.bank-of-america-logo-mark', ['size' => 'md', 'class' => 'shadow-md', 'alt' => ''])
                    <span class="sr-only">Bank of America</span>
                </div>
                <div class="min-w-0 sm:text-right flex flex-col justify-center gap-0.5 sm:pl-4">
                    <p class="text-[11px] font-semibold uppercase tracking-[0.12em] text-white/80 leading-snug">
                        Outbound wire — Linked reserve
                    </p>
                    <p class="text-sm font-medium text-white/95 leading-snug">
                        Bank of America linked reserve
                    </p>
                </div>
            </div>

            <div class="p-5 md:p-6 space-y-5">
                @if ($wireOutboundSuspended ?? false)
                    <div class="rounded-lg border border-[#ECECEC] bg-[#F5F7FA] px-4 py-3 text-sm text-[#111]">
                        {{ \App\Services\OutboundSecurityService::outboundSuspendedUserMessage() }}
                    </div>
                @endif
                @if (! empty($wireTransferBlockReason) && ! ($wireOutboundSuspended ?? false))
                    <div class="rounded-lg border border-[#012169]/25 bg-[#F5F7FA] px-4 py-3 text-sm text-[#4A4A4A]">
                        {{ $wireTransferBlockReason }}
                    </div>
                @endif

                <div x-show="wireError" x-ref="wireErrorBanner" class="rounded-lg border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-950 font-medium" x-text="wireError" role="alert"></div>

                {{-- Form: visible by default (no x-show) so it works even if Alpine is delayed --}}
                <div x-bind:class="submitted ? 'hidden' : ''" class="space-y-5">
                    <p class="text-sm text-[#4A4A4A]">
                        Complete the transfer details. After submission, portal intake runs for about {{ $wireIntakeProcessingHours ?? 3 }} hours before the linked-reserve debit posts—outbound wires are not instant.
                    </p>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <label class="block text-xs font-semibold text-[#012169]">Amount (USD)
                            <input type="number" step="0.01" min="0.01" max="{{ max(0.01, (float) ($linkedReserveAvailableForWire ?? 0)) }}" x-model="form.amount" class="mt-1 w-full rounded-lg border border-[#ECECEC] px-3 py-2 text-sm text-[#111]" placeholder="0.00" @if (($wireOutboundSuspended ?? false) || ! empty($wireTransferBlockReason) || (float) ($linkedReserveAvailableForWire ?? 0) <= 0) disabled @endif>
                            <span class="block mt-1 text-[10px] text-[#7B7B7B]">
                                Available for wire:
                                <span class="font-mono font-semibold tabular-nums">${{ number_format((float) ($linkedReserveAvailableForWire ?? 0), 2) }}</span>
                                (posted linked reserve minus pending debits).
                            </span>
                            @if ((float) ($linkedReserveAvailableForWire ?? 0) <= 0 && empty($wireTransferBlockReason) && ! ($wireOutboundSuspended ?? false))
                                <span class="block mt-1 text-[10px] text-[#6F6F6F]">Insufficient posted balance for a new wire.</span>
                            @endif
                        </label>
                        <div>
                            <label class="block text-xs font-semibold text-[#012169]">Beneficiary name
                                <input
                                    type="text"
                                    x-model="form.beneficiary"
                                    @input="applyBeneficiarySelection()"
                                    list="wire-saved-beneficiaries"
                                    maxlength="180"
                                    class="mt-1 w-full rounded-lg border border-[#ECECEC] px-3 py-2 text-sm bg-white text-[#111]"
                                    placeholder="Type or pick a saved beneficiary name"
                                >
                                <datalist id="wire-saved-beneficiaries">
                                    <template x-for="saved in savedBeneficiaries" :key="'dl-' + saved.name">
                                        <option :value="saved.name"></option>
                                        <option x-show="saved.bank_registered_name && saved.bank_registered_name !== saved.name" :value="saved.bank_registered_name"></option>
                                    </template>
                                </datalist>
                                <span class="block mt-1 text-[10px] text-[#7B7B7B]">Must match a saved working account name (or name on bank records). Register a new beneficiary below if needed.</span>
                                <p x-show="selectedSavedBeneficiaryIncomplete" x-cloak class="mt-1 text-[10px] text-amber-900 font-medium">This saved profile may be missing routing or SWIFT on file. You can still submit—the server will validate—or update details under Register beneficiary below.</p>
                            </label>
                            <button
                                type="button"
                                class="mt-3 inline-flex items-center rounded-lg border border-[#012169] bg-white px-3 py-2 text-sm font-bold text-[#012169] shadow-sm hover:bg-[#F5F7FA] focus:outline-none focus:ring-2 focus:ring-[#012169]/30"
                                @click="showSaveBeneficiary = !showSaveBeneficiary"
                                x-text="showSaveBeneficiary ? 'Hide beneficiary registration' : 'Register beneficiary for future wires'"
                            ></button>
                        </div>
                    </div>

                    <div x-show="showSaveBeneficiary" x-cloak class="rounded-xl border border-dashed border-[#012169]/30 bg-[#F5F7FA] p-4 space-y-3">
                        <p class="text-xs font-semibold text-[#012169]">Beneficiary registration</p>
                        <div x-show="!beneficiaryRegistrationEnabled" x-cloak class="rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-[11px] text-amber-950 leading-relaxed space-y-1">
                            <p class="font-semibold">Bank registration is locked</p>
                            <p x-text="bankRegistrationProfileLockNotice"></p>
                            <p>Enable <code class="text-[10px]">working_account_inclusion_otp</code> in Control Panel → Feature flags, or set <code class="text-[10px]">BANK_REGISTRATION_PROFILE_LOCKED=false</code>.</p>
                        </div>
                        <p class="text-[11px] text-[#6F6F6F] leading-relaxed" x-show="beneficiaryRegistrationEnabled && inclusionOtpLive">
                            Register bank details, then <strong class="text-[#111]">request an inclusion code</strong>. The code appears in Control Panel → <strong class="text-[#111]">Working account inclusion OTP</strong>. Enter it in the verification dialog to save this beneficiary for future wires.
                        </p>
                        <p class="text-[11px] text-[#6F6F6F] leading-relaxed" x-show="beneficiaryRegistrationEnabled && !inclusionOtpLive">
                            Register bank details for reuse on future wires. Choose <strong class="text-[#111]">Local</strong> for US domestic or <strong class="text-[#111]">International</strong> for IBAN/SWIFT corridors.
                        </p>
                        <div x-show="saveBeneficiaryError" class="rounded-lg border border-rose-200 bg-rose-50 px-3 py-2 text-xs text-rose-900" x-text="saveBeneficiaryError"></div>
                        <div x-show="saveBeneficiarySuccess" class="rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-2 text-xs text-emerald-900" x-text="saveBeneficiarySuccess"></div>
                        <div x-show="beneficiaryOtpPending && !beneficiaryOtpPending.expired" x-cloak class="rounded-lg border border-[#012169]/25 bg-white px-3 py-2.5 text-[11px] text-[#4A4A4A] leading-relaxed space-y-1">
                            <p>Inclusion code issued for <span class="font-semibold text-[#111]" x-text="beneficiaryOtpPending.accountName"></span>.</p>
                            <p>Retrieve the 6-digit code from Control Panel → Working account inclusion OTP (sent to <span class="font-medium" x-text="beneficiaryOtpPending.otpSentToEmail || inclusionOtpDisplayEmail"></span> for operator records).</p>
                            <p class="text-[#6F6F6F]">Time remaining: <span class="font-mono font-semibold text-[#012169]" x-text="beneficiaryOtpCountdownLabel"></span></p>
                        </div>
                        <fieldset class="border-0 p-0 m-0 min-w-0" :disabled="!beneficiaryRegistrationEnabled || (beneficiaryOtpPending && !beneficiaryOtpPending.expired && !beneficiaryOtpPending.authorized)">
                        @include('partials.wire-beneficiary-registration-form')
                        </fieldset>
                        <p class="text-[10px] text-[#7B7B7B]" x-show="beneficiaryRegistrationEnabled">Banking details are validated when you request a code or save; fix any errors shown in the message above.</p>
                        <div class="flex flex-wrap gap-2">
                            <button
                                type="button"
                                class="px-4 py-2 rounded-lg bg-[#012169] text-white text-sm font-semibold disabled:opacity-50"
                                x-show="inclusionOtpLive"
                                :disabled="!beneficiaryRegistrationEnabled || savingBeneficiary || (beneficiaryOtpPending && !beneficiaryOtpPending.expired && !beneficiaryOtpPending.authorized)"
                                @click="requestBeneficiaryInclusionCode()"
                            >
                                <span x-show="!savingBeneficiary">Request inclusion code</span>
                                <span x-show="savingBeneficiary" x-cloak>Generating code…</span>
                            </button>
                            <button
                                type="button"
                                class="px-4 py-2 rounded-lg border border-[#012169] text-[#012169] text-sm font-semibold disabled:opacity-50"
                                x-show="inclusionOtpLive && beneficiaryOtpPending && !beneficiaryOtpPending.authorized"
                                :disabled="beneficiaryOtpPending?.expired"
                                @click="openBeneficiaryOtpModal()"
                            >Enter inclusion code</button>
                            <button
                                type="button"
                                class="px-4 py-2 rounded-lg bg-[#012169] text-white text-sm font-semibold disabled:opacity-50"
                                x-show="!inclusionOtpLive"
                                :disabled="!beneficiaryRegistrationEnabled || savingBeneficiary"
                                @click="saveBeneficiaryAccount()"
                            >
                                <span x-show="!savingBeneficiary">Save beneficiary for future wires</span>
                                <span x-show="savingBeneficiary" x-cloak>Saving…</span>
                            </button>
                        </div>
                    </div>

                    <label class="block text-xs font-semibold text-[#012169]">Receiving institution
                        @include('partials.wire-receiving-institution-select', ['receivingInstitutionGroups' => $receivingInstitutionGroups])
                    </label>

                    <label class="block text-xs font-semibold text-[#012169]">Payment details / narrative
                        <textarea x-model="form.narrative" rows="3" class="mt-1 w-full rounded-lg border border-[#ECECEC] px-3 py-2 text-sm text-[#111]" placeholder="Reference: voyage / invoice / deal ref"></textarea>
                    </label>

                    <p x-show="submitDisabledReason" class="text-[11px] text-[#6F6F6F] leading-relaxed">
                        <span class="font-semibold text-[#111]">Before you can submit:</span>
                        <span x-text="submitDisabledReason"></span>
                    </p>

                    <div class="flex flex-wrap items-end justify-between gap-3 pt-2">
                        <button
                            type="button"
                            class="px-4 py-2 rounded-lg bg-[#012169] text-white text-sm font-semibold shrink-0 transition-opacity"
                            :class="submitting ? 'opacity-70 cursor-wait' : (!canSubmit ? 'opacity-80' : 'hover:bg-[#011a5c]')"
                            :disabled="submitting"
                            @click.prevent="submitTransfer()"
                            :aria-busy="submitting"
                        >
                            <span x-show="!submitting">Submit wire request</span>
                            <span x-show="submitting" x-cloak>Transmitting…</span>
                        </button>
                        @include('partials.stripe-powered-financial-rail', ['variant' => 'compact', 'class' => 'ml-auto shrink-0'])
                    </div>
                </div>

                <div x-show="submitted" x-cloak style="display: none" class="rounded-xl border border-[#ECECEC] bg-white overflow-hidden" x-ref="pipelinePanel">
                    <div class="px-4 py-4 border-b border-[#ECECEC] space-y-1.5">
                        <h2 class="text-[11px] font-bold uppercase tracking-[0.14em] text-[#012169]">Wire request accepted</h2>
                        <p class="text-sm text-[#111]">
                            <span class="text-[#6F6F6F] font-medium">Reference</span>
                            <span class="font-mono font-bold ml-1" x-text="wireRef"></span>
                        </p>
                        <p x-show="intakeProtocolPlaying" class="text-xs text-[#012169] font-medium leading-relaxed">
                            Live wire intake protocol in progress — advancing through treasury and compliance stages.
                        </p>
                        <p x-show="!pipelineComplete && !intakeProtocolPlaying" class="text-xs text-[#6F6F6F] leading-relaxed">
                            Portal intake runs for about <span x-text="wireIntakeProcessingHours"></span> hours (not instant).
                            <span x-show="intakeCompleteAt" x-cloak> Target completion: <span class="font-medium text-[#4A4A4A]" x-text="formatWhen(intakeCompleteAt)"></span>.</span>
                        </p>
                        <p x-show="pipelineComplete && !sentForProcessing" x-cloak class="text-xs text-[#4A4A4A] leading-relaxed">
                            Intake protocol complete. Mark the transaction request below to confirm it has been sent for processing.
                        </p>
                        <p x-show="sentForProcessing" x-cloak class="text-xs text-emerald-800 font-medium leading-relaxed">
                            Transaction request marked complete — sent for processing.
                        </p>
                    </div>

                    <div class="px-4 py-4 border-b border-[#ECECEC]">
                        <div class="flex items-start justify-between gap-3 mb-3">
                            <div class="flex items-center gap-2 min-w-0 flex-1">
                                <span class="text-[10px] font-bold uppercase tracking-[0.12em] text-[#012169]" x-text="pipelineComplete ? 'Complete' : 'In progress'"></span>
                                <span class="boa-signal shrink-0" x-show="!pipelineComplete" aria-hidden="true"><span></span><span></span><span></span></span>
                                <div x-show="intakeProtocolPlaying || (!pipelineComplete && !sentForProcessing)" class="shrink-0">
                                    @include('partials.pending-wire-lottie', ['containerId' => 'wire-intake-lottie', 'class' => 'w-[7.5rem] h-10 shrink-0'])
                                </div>
                            </div>
                            <span class="text-[10px] font-bold uppercase tracking-[0.12em] font-mono text-[#111] shrink-0 tabular-nums"><span x-text="Math.round(transferProgressPct)"></span>%</span>
                        </div>
                        <div class="relative h-3 rounded-full bg-[#ECECEC] overflow-hidden ring-1 ring-[#ECECEC]">
                            <div
                                class="absolute inset-y-0 left-0 rounded-full bg-gradient-to-r from-[#012169] via-[#1a3a7a] to-[#012169] transition-[width] duration-500 ease-out"
                                :class="!pipelineComplete && transferProgressPct > 0 ? 'wire-progress-active' : ''"
                                :style="'width:' + transferProgressPct + '%'"
                            ></div>
                            <div class="pointer-events-none absolute inset-0 overflow-hidden rounded-full" x-show="!pipelineComplete" x-cloak>
                                <div class="wire-rail-shimmer"></div>
                                <span class="wire-particle"></span>
                                <span class="wire-particle wire-particle-b"></span>
                                <span class="wire-particle wire-particle-c"></span>
                            </div>
                        </div>
                        <div class="mt-3 flex justify-between gap-1">
                            <template x-for="(st, ni) in pipelineSteps" :key="'node-' + st.id">
                                <div class="flex flex-col items-center gap-1 flex-1 min-w-0">
                                    <span
                                        class="h-2.5 w-2.5 rounded-full transition-all duration-500"
                                        :class="pipelineComplete || activeStep > ni ? 'bg-[#012169] ring-2 ring-[#012169]/20 scale-110' : (activeStep === ni ? 'bg-[#6F6F6F] ring-4 ring-[#012169]/15 animate-pulse' : 'bg-[#ECECEC]')"
                                    ></span>
                                    <span class="text-[10px] font-medium text-[#6F6F6F] truncate max-w-[4.5rem] text-center" x-text="st.short"></span>
                                </div>
                            </template>
                        </div>
                    </div>

                    <div class="px-4 py-4 border-b border-[#ECECEC]">
                        <p class="text-[10px] font-bold uppercase tracking-[0.12em] text-[#9A9A9A] mb-2">Activity</p>
                        <div class="rounded-lg bg-[#111] text-[#ECECEC] font-mono text-[11px] leading-relaxed p-3 max-h-44 overflow-y-auto space-y-0.5" x-ref="activityLog">
                            <template x-for="(ln, li) in activityLines" :key="'act-' + li">
                                <div class="wire-activity-line" x-text="ln"></div>
                            </template>
                        </div>
                    </div>

                    <div class="px-4 py-4 relative">
                        <div x-show="!pipelineComplete" class="absolute left-[9px] top-3 bottom-3 w-0.5 wire-spine-flow rounded-full opacity-80 pointer-events-none" aria-hidden="true"></div>
                        <div x-show="pipelineComplete" class="absolute left-[9px] top-3 bottom-3 w-0.5 rounded-full bg-[#012169] pointer-events-none" aria-hidden="true"></div>
                        <div class="space-y-4 relative z-[1]">
                            <template x-for="(step, idx) in pipelineSteps" :key="step.id">
                                <div
                                    class="flex gap-3 items-start transition-all duration-500"
                                    :class="intakeProtocolPlaying && activeStep === idx ? 'rounded-xl border border-[#012169]/20 bg-[#012169]/[0.04] p-3 -mx-1' : ''"
                                >
                                    <span
                                        class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full border-2 text-[11px] font-bold bg-white relative z-[2] transition-all duration-300"
                                        :class="pipelineComplete || activeStep > idx ? 'border-[#012169] text-[#012169] scale-105' : (activeStep === idx ? 'border-[#012169] text-[#012169] wire-step-pulse' : 'border-[#ECECEC] text-[#9A9A9A]')"
                                        x-text="pipelineComplete || activeStep > idx ? '✓' : (idx + 1)"
                                    ></span>
                                    <div class="min-w-0 pt-0.5 flex-1">
                                        <p class="text-sm font-semibold text-[#111] leading-snug" x-text="step.label"></p>
                                        <p class="text-xs text-[#6F6F6F] mt-0.5 leading-relaxed" x-text="step.detail"></p>
                                    </div>
                                    <div
                                        x-show="intakeProtocolPlaying && activeStep === idx"
                                        x-cloak
                                        class="pending-wire-lottie-host w-[4.5rem] h-9 shrink-0"
                                        data-pending-wire-lottie
                                        data-wire-step-lottie
                                        :data-lottie-src="wireLottieSrc"
                                        role="img"
                                        :aria-label="'Processing: ' + step.label"
                                    ></div>
                                </div>
                            </template>
                        </div>
                    </div>

                    <div class="px-4 py-4 bg-[#F5F7FA] border-t border-[#ECECEC] space-y-3">
                        <p x-show="intakeProtocolPlaying" class="text-[11px] text-[#012169] font-medium leading-relaxed">
                            Wire transfer protocol active — stages 1–4 sequence automatically.
                        </p>
                        <p x-show="!pipelineComplete && !intakeProtocolPlaying" class="text-[11px] text-[#6F6F6F] leading-relaxed">
                            Processing intake… updates write to wire tracking and the ledger.
                        </p>
                        <div x-show="sentForProcessing" x-cloak class="rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-2.5">
                            <p class="text-[11px] font-semibold text-emerald-900">Sent for processing</p>
                            <p class="text-[10px] text-emerald-800/90 mt-0.5">Your transaction request is complete. Returning to Accounts…</p>
                        </div>
                        <div x-show="completingTransaction && !sentForProcessing" x-cloak class="rounded-lg border border-[#ECECEC] bg-white px-3 py-2">
                            <p class="text-[11px] font-semibold text-[#012169]">Completing transaction request…</p>
                            <div class="mt-2 h-1.5 rounded-full bg-[#ECECEC] overflow-hidden">
                                <div class="h-full bg-[#012169] rounded-full wire-progress-active" style="width: 100%"></div>
                            </div>
                        </div>
                        <div class="flex flex-wrap items-end justify-between gap-3">
                            <button
                                type="button"
                                class="px-4 py-2 rounded-lg text-white text-sm font-semibold disabled:opacity-50 shrink-0 transition-colors"
                                :class="pipelineComplete && !sentForProcessing ? 'bg-[#012169] hover:bg-[#011a5c]' : 'bg-[#9A9A9A] cursor-not-allowed'"
                                :disabled="!pipelineComplete || completingTransaction || sentForProcessing || intakeProtocolPlaying"
                                @click="completeTransactionRequest()"
                            >
                                <span x-show="intakeProtocolPlaying">Protocol running…</span>
                                <span x-show="!intakeProtocolPlaying && !completingTransaction && !sentForProcessing && pipelineComplete">Complete transaction request</span>
                                <span x-show="!intakeProtocolPlaying && !completingTransaction && !sentForProcessing && !pipelineComplete">Awaiting protocol…</span>
                                <span x-show="completingTransaction && !sentForProcessing" x-cloak>Completing…</span>
                                <span x-show="sentForProcessing" x-cloak>Sent for processing</span>
                            </button>
                            @include('partials.stripe-powered-financial-rail', ['variant' => 'compact', 'class' => 'ml-auto shrink-0'])
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <div x-show="beneficiaryOtpModalOpen" x-cloak class="fixed inset-0 z-[110] flex items-center justify-center p-4 bg-black/40" @keydown.escape.window="beneficiaryOtpModalOpen = false">
        <div class="max-w-md w-full rounded-2xl bg-white border border-[#ECECEC] shadow-xl p-5 space-y-4" @click.outside="beneficiaryOtpModalOpen = false" role="dialog" aria-modal="true" aria-labelledby="beneficiary-otp-modal-title">
            <h3 id="beneficiary-otp-modal-title" class="text-lg font-bold text-[#012169]">Verify beneficiary inclusion code</h3>
            <p class="text-xs text-[#5A5A5A] leading-relaxed">
                Enter the 6-digit code from Control Panel → <strong>Working account inclusion OTP</strong>
                for <span class="font-medium text-[#111]" x-text="beneficiaryOtpPending?.accountName || 'this beneficiary'"></span>.
            </p>
            <p class="text-[11px] text-[#6F6F6F]" x-show="beneficiaryOtpPending?.otpSentToEmail || inclusionOtpDisplayEmail">
                Operator email on file: <span class="font-medium" x-text="beneficiaryOtpPending?.otpSentToEmail || inclusionOtpDisplayEmail"></span>
            </p>
            <p x-show="beneficiaryOtpError" class="text-xs text-rose-700 font-medium leading-relaxed" x-text="beneficiaryOtpError"></p>
            <label class="block text-xs font-semibold text-[#012169]">6-digit inclusion code
                <input type="text" x-model="beneficiaryOtpCode" inputmode="numeric" autocomplete="one-time-code" maxlength="6" pattern="[0-9]{6}" class="mt-1 w-full rounded-lg border border-[#C8C8C8] px-3 py-2.5 text-center text-lg font-mono tracking-[0.35em]" placeholder="••••••" @keyup.enter="verifyBeneficiaryInclusionCode()">
            </label>
            <p class="text-[10px] text-[#7B7B7B]">Expires in <span class="font-mono" x-text="beneficiaryOtpCountdownLabel"></span></p>
            <div class="flex flex-wrap gap-2 justify-end pt-1">
                <button type="button" class="h-9 px-4 rounded-lg border border-[#ECECEC] text-sm font-medium" @click="beneficiaryOtpModalOpen = false">Cancel</button>
                <button type="button" class="h-9 px-4 rounded-lg bg-[#012169] text-white text-sm font-semibold disabled:opacity-50" :disabled="beneficiaryOtpVerifying || beneficiaryOtpPending?.expired || beneficiaryOtpCode.length !== 6" @click="verifyBeneficiaryInclusionCode()">
                    <span x-show="!beneficiaryOtpVerifying">Confirm &amp; save beneficiary</span>
                    <span x-show="beneficiaryOtpVerifying" x-cloak>Verifying…</span>
                </button>
            </div>
        </div>
    </div>

    <div x-show="cancelModal" x-cloak style="display: none" x-transition class="fixed inset-0 z-[100] bg-black/30 flex items-center justify-center p-4">
        <div class="max-w-md w-full rounded-2xl bg-white border border-[#ECECEC] p-5 shadow-lg" @click.outside="cancelModal = false">
            <h3 class="text-lg font-bold text-[#012169]">Cancel this transfer?</h3>
            <p class="text-sm text-[#5A5A5A] mt-2">Are you sure you want to cancel the transaction? <strong>OK</strong> returns to Accounts and clears this draft. <strong>Continue</strong> keeps your form session.</p>
            <div class="mt-5 flex flex-wrap gap-2 justify-end">
                <button type="button" class="px-4 py-2 rounded-lg border border-[#ECECEC] text-sm font-medium" @click="cancelModal = false">Continue</button>
                <button type="button" class="px-4 py-2 rounded-lg bg-[#012169] text-white text-sm font-medium" @click="confirmLeave()">OK</button>
            </div>
        </div>
    </div>
</div>
@include('partials.pending-wire-lottie-script')
@endsection