@php
    use App\Enums\DocumentType;
    use App\Enums\VisaEntryType;
    $chevronSvg = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238a8fa8' d='M6 8L1 3h10z'/%3E%3C/svg%3E";
    $inp  = 'w-full rounded-[8px] border border-[#dde0ec] bg-white px-3 py-[10px] text-[13px] text-ui-ink outline-none transition-colors placeholder:text-ui-muted focus:border-ui-gold focus:ring-[3px] focus:ring-[rgba(232,133,10,0.08)] disabled:cursor-not-allowed disabled:bg-slate-50 disabled:text-slate-400';
    $sel  = "w-full cursor-pointer appearance-none rounded-[8px] border border-[#dde0ec] bg-white bg-no-repeat px-3 py-[10px] pr-8 text-[13px] text-ui-ink outline-none transition-colors focus:border-ui-gold focus:ring-[3px] focus:ring-[rgba(232,133,10,0.08)] disabled:cursor-not-allowed disabled:bg-slate-50";
    $lbl  = 'block text-[12px] font-semibold text-[#3a3f5a]';
    $sectionCard = 'rounded-[12px] border border-[#e8eaf0] bg-white p-6';
    $sectionTitle = 'mb-[18px] text-[14px] font-bold text-ui-ink';

    $fileInputClass = 'block w-full text-[11px] text-ui-muted '
        .'file:mr-2 file:rounded-[7px] file:border file:border-[#dde0ec] '
        .'file:bg-white file:px-3 file:py-1.5 file:text-[11px] '
        .'file:font-semibold file:text-[#3a3f5a] file:cursor-pointer '
        .'hover:file:border-ui-gold hover:file:text-ui-gold';

    $fixedDocSlots = [
        ['key' => 'passport',      'property' => 'file_passport',      'type' => DocumentType::Passport,               'label' => 'Passport',                 'icon' => 'fa-passport',     'required' => true],
        ['key' => 'id_card',       'property' => 'file_id_card',       'type' => DocumentType::IdCard,                 'label' => 'ID card',                  'icon' => 'fa-id-card',      'required' => true],
        ['key' => 'picture',       'property' => 'file_picture',       'type' => DocumentType::Picture,                'label' => 'Picture',                  'icon' => 'fa-user-circle',  'required' => true],
        ['key' => 'non_criminal',  'property' => 'file_non_criminal',  'type' => DocumentType::NonCriminalCertificate, 'label' => 'Non-criminal certificate', 'icon' => 'fa-file-shield',  'required' => true],
        ['key' => 'previous_visa', 'property' => 'file_previous_visa', 'type' => DocumentType::PreviousVisa,           'label' => 'Previous visa',            'icon' => 'fa-stamp',        'required' => false],
    ];

    $nationalityOptions = config('nationalities.names', []);
    if (! empty($applicationModel?->nationality) && ! in_array($applicationModel->nationality, $nationalityOptions, true)) {
        $nationalityOptions = array_values(array_unique(array_merge([$applicationModel->nationality], $nationalityOptions)));
        sort($nationalityOptions);
    }
@endphp

<div class="space-y-5" wire:key="application-form-{{ $applicationId }}">

    {{-- Flash banners --}}
    @if (session('status') === 'submitted')
        <div class="flex items-center gap-3 rounded-[8px] border border-sky-200 bg-sky-50 px-4 py-3 text-[13px] font-medium text-sky-800">
            <i class="fa-solid fa-lock shrink-0 text-sky-500"></i>
            Application submitted. Editing is now locked.
        </div>
    @endif
    @if (session('status') === 'details-saved')
        <div class="flex items-center gap-3 rounded-[8px] border border-emerald-200 bg-emerald-50 px-4 py-3 text-[13px] font-medium text-emerald-800">
            <i class="fa-solid fa-circle-check shrink-0 text-emerald-600"></i>
            Application details saved.
        </div>
    @endif
    @if ($isAdminContext ?? false)
        <div class="flex items-start gap-3 rounded-[8px] border border-indigo-200 bg-indigo-50 px-4 py-3 text-[12.5px] leading-relaxed text-indigo-950">
            <i class="fa-solid fa-user-shield mt-0.5 shrink-0 text-indigo-600"></i>
            <span>You are editing as <strong>admin</strong>. Changes are saved on behalf of the customer. Use <strong>Save changes</strong> to update fields; use <strong>Submit application</strong> to mark the application as submitted (same as customer submit).</span>
        </div>
    @elseif ($isAgentContext ?? false)
        <div class="flex items-start gap-3 rounded-[8px] border border-amber-200 bg-amber-50 px-4 py-3 text-[12.5px] leading-relaxed text-amber-950">
            <i class="fa-solid fa-building-user mt-0.5 shrink-0 text-amber-600"></i>
            <span>
                @if ($applicationModel && $applicationModel->user_id === null)
                    This case is filed under <strong>your agent account</strong> only—there is no applicant portal login. Enter the traveler’s details and documents below; our admins will see that you created this application.
                @else
                    You are submitting this application <strong>for a linked customer</strong>. Complete the form and required documents, then submit. The customer can see the application on their account after you submit it.
                @endif
            </span>
        </div>
    @endif
    @error('documents')
        <div class="flex items-center gap-3 rounded-[8px] border border-amber-200 bg-amber-50 px-4 py-3 text-[13px] font-medium text-amber-800">
            <i class="fa-solid fa-triangle-exclamation shrink-0 text-amber-500"></i>
            {{ $message }}
        </div>
    @enderror

    @php($visaDocs = $applicationModel?->documents?->where('type', \App\Enums\DocumentType::Visa)->values() ?? collect())
    @php($visaNote = trim((string) ($applicationModel?->visa_note ?? '')))
    @if ($visaDocs->isNotEmpty() || $visaNote !== '')
        <section class="rounded-[12px] border border-emerald-200 bg-emerald-50 p-6">
            <div class="flex items-start gap-3">
                <div class="mt-0.5 text-emerald-700"><i class="fa-regular fa-folder-open text-[18px]"></i></div>
                <div class="min-w-0 flex-1">
                    <div class="text-[14px] font-bold text-emerald-900">
                        @if ($visaDocs->isNotEmpty())
                            Documents from admin ({{ $visaDocs->count() }})
                        @else
                            Note from admin
                        @endif
                    </div>
                    <p class="mt-1 text-[11.5px] leading-relaxed text-emerald-900/80">
                        @if ($visaDocs->isNotEmpty())
                            The admin has shared {{ $visaDocs->count() === 1 ? 'a file' : 'files' }} with you. Please review {{ $visaDocs->count() === 1 ? 'it' : 'them' }} below.
                        @else
                            The admin has left you a note about your application.
                        @endif
                    </p>

                    @if ($visaNote !== '')
                        <div class="mt-3 rounded-[8px] border border-emerald-300/60 bg-white p-3">
                            <div class="mb-1 flex items-center gap-1.5 text-[11px] font-bold uppercase tracking-wider text-emerald-800">
                                <i class="fa-regular fa-message"></i> Note from admin
                            </div>
                            <p class="whitespace-pre-line text-[12.5px] leading-relaxed text-emerald-900/90">{{ $visaNote }}</p>
                        </div>
                    @endif

                    @if ($visaDocs->isNotEmpty())
                        <ul class="mt-3 divide-y divide-emerald-100 overflow-hidden rounded-[8px] border border-emerald-200 bg-white">
                            @foreach ($visaDocs as $doc)
                                <li class="flex items-center justify-between gap-3 px-3 py-2 text-[12.5px]">
                                    <span class="flex min-w-0 items-center gap-2 truncate text-emerald-900">
                                        <i class="fa-regular fa-file shrink-0 text-emerald-600"></i>
                                        <span class="truncate">{{ $doc->custom_label ?: basename($doc->file_path) }}</span>
                                    </span>
                                    <x-document-preview-link
                                        :url="asset('storage/'.$doc->file_path)"
                                        :filename="basename($doc->file_path)"
                                        :label="$doc->custom_label ?: basename($doc->file_path)"
                                        link-text="View"
                                        link-class="inline-flex shrink-0 items-center gap-1.5 rounded-md bg-emerald-700 px-3 py-1.5 text-[11.5px] font-semibold text-white hover:bg-emerald-800"
                                    >
                                        <i class="fa-solid fa-eye"></i> View
                                    </x-document-preview-link>
                                </li>
                            @endforeach
                        </ul>
                    @endif
                </div>
            </div>
        </section>
    @endif


    {{-- ── PERSONAL INFORMATION ─────────────────────────────────────── --}}
    <section class="{{ $sectionCard }}">
        <div class="{{ $sectionTitle }}">Personal Information</div>

        {{-- Row 1: full name · passport · dob · nationality --}}
        <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
            <div class="flex flex-col gap-1.5">
                <label class="{{ $lbl }}">Full Name</label>
                <input type="text" wire:model.blur="full_name" @disabled($locked ?? false)
                       placeholder="As per passport" class="{{ $inp }}" />
                @error('full_name') <p class="text-[11.5px] text-red-600">{{ $message }}</p> @enderror
            </div>

            <div class="flex flex-col gap-1.5">
                <label class="{{ $lbl }}">Passport Number</label>
                <input type="text" wire:model.blur="passport_number" @disabled($locked ?? false)
                       class="{{ $inp }}" />
                @error('passport_number') <p class="text-[11.5px] text-red-600">{{ $message }}</p> @enderror
            </div>

            <div class="flex flex-col gap-1.5">
                <label class="{{ $lbl }}">Date of Birth</label>
                <x-dob-picker model="dob" :value="$dob" :disabled="(bool) ($locked ?? false)" :input-class="$inp.' pr-9'" />
                @error('dob') <p class="text-[11.5px] text-red-600">{{ $message }}</p> @enderror
            </div>

            <div class="flex flex-col gap-1.5">
                <label class="{{ $lbl }}">Nationality</label>
                <select wire:model.blur="nationality" @disabled($locked ?? false)
                        class="{{ $sel }}"
                        style="background-image:url('{{ $chevronSvg }}'); background-position:right 10px center;">
                    <option value="">Select nationality</option>
                    @foreach ($nationalityOptions as $n)
                        <option value="{{ $n }}">{{ $n }}</option>
                    @endforeach
                </select>
                @error('nationality') <p class="text-[11.5px] text-red-600">{{ $message }}</p> @enderror
            </div>
        </div>

        {{-- FORM_VERSION: 2026-06-04-entry --}}
        <div class="mt-4 grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5">
            <div class="flex flex-col gap-1.5">
                <label class="{{ $lbl }}">Visa category</label>
                <select wire:model.live="visa_type" @disabled($locked ?? false)
                        class="{{ $sel }}"
                        style="background-image:url('{{ $chevronSvg }}'); background-position:right 10px center;">
                    <option value="">Select visa category</option>
                    <option value="L">L Tourism</option>
                    <option value="M">M Commercial and trade activities</option>
                    <option value="F">F Exchanges, visits, study tours, or other relevant activities</option>
                    <option value="Q1">Q1 Family member/relative of Chinese citizen or PR holder (more than 180 days)</option>
                    <option value="Q2">Q2 Family member/relative of Chinese citizen or PR holder (no more than 180 days)</option>
                    <option value="S1">S1 Family member of foreigner in China / personal matters (more than 180 days)</option>
                    <option value="S2">S2 Family member of foreigner in China / personal matters (no more than 180 days)</option>
                    <option value="Z">Z Work</option>
                    <option value="X1">X1 Long-term study (more than 180 days)</option>
                    <option value="X2">X2 Short-term study (no more than 180 days)</option>
                    <option value="J1">J1 Resident foreign journalist</option>
                    <option value="J2">J2 Short-term news coverage</option>
                    <option value="C">C Crew member</option>
                    <option value="G">G Transit</option>
                    <option value="D">D Permanent residence</option>
                    <option value="R">R High talent or specialist</option>
                    <option value="K">K Young STEM talent or specialist</option>
                </select>
                @error('visa_type') <p class="text-[11.5px] text-red-600">{{ $message }}</p> @enderror
            </div>
            <div class="flex flex-col gap-1.5">
                <label class="{{ $lbl }}">Stay Duration and Validity</label>
                <input type="text" wire:model.blur="visa_duration" @disabled(($locked ?? false) || $visa_type === '')
                       placeholder="{{ $visa_type !== '' ? 'e.g. 30 days per entry' : 'Select category first' }}"
                       class="{{ $inp }}" />
                @error('visa_duration') <p class="text-[11.5px] text-red-600">{{ $message }}</p> @enderror
            </div>
            <div class="flex flex-col gap-1.5">
                <label class="{{ $lbl }}">Entry</label>
                <select wire:model.live="entry_type" @disabled($locked ?? false)
                        class="{{ $sel }}"
                        style="background-image:url('{{ $chevronSvg }}'); background-position:right 10px center;">
                    <option value="">Select entry</option>
                    @foreach (VisaEntryType::cases() as $entryOption)
                        <option value="{{ $entryOption->value }}">{{ $entryOption->label() }}</option>
                    @endforeach
                </select>
                @error('entry_type') <p class="text-[11.5px] text-red-600">{{ $message }}</p> @enderror
            </div>
            <div class="flex flex-col gap-1.5">
                <label class="{{ $lbl }}">Marital status</label>
                <select wire:model.live="marital_status" @disabled($locked ?? false)
                        class="{{ $sel }}"
                        style="background-image:url('{{ $chevronSvg }}'); background-position:right 10px center;">
                    <option value="single">Single</option>
                    <option value="married">Married</option>
                    <option value="divorced">Divorced</option>
                    <option value="widowed">Widowed</option>
                </select>
                @error('marital_status') <p class="text-[11.5px] text-red-600">{{ $message }}</p> @enderror
            </div>
            <div class="flex flex-col gap-1.5">
                <label class="{{ $lbl }}">Qualifications</label>
                <input type="text" wire:model.blur="qualification" @disabled($locked ?? false)
                       placeholder="e.g. Bachelor, Diploma, High school"
                       class="{{ $inp }}" />
                @error('qualification') <p class="text-[11.5px] text-red-600">{{ $message }}</p> @enderror
            </div>
        </div>

        <div class="relative z-10 mt-4 grid gap-4 overflow-visible sm:grid-cols-2">
            <div class="relative flex flex-col gap-1.5 overflow-visible">
                <label class="{{ $lbl }}">Contact Number</label>
                <div class="grid gap-2 overflow-visible sm:grid-cols-3">
                    <div class="relative overflow-visible sm:col-span-1">
                        <label class="sr-only">Country</label>
                        <x-phone-country-select
                            :options="$this->phoneDialOptions()"
                            model="contact_dial_code"
                            :selected="$contact_dial_code"
                            :disabled="(bool) ($locked ?? false)"
                            placeholder="Select country" />
                    </div>
                    <div class="sm:col-span-2">
                        <label class="sr-only">Phone number</label>
                        <input type="tel" wire:model.blur="contact_local_number" @disabled($locked ?? false)
                               class="{{ $inp }}" placeholder="e.g. 3001234567" />
                    </div>
                </div>
                <p class="mt-1 text-[11px] text-ui-muted">Saved as: <span class="font-mono">{{ $contact_dial_code }}{{ preg_replace('/\D+/', '', (string) $contact_local_number) }}</span></p>
                @error('contact_number') <p class="text-[11.5px] text-red-600">{{ $message }}</p> @enderror
            </div>
            @if ($isAdminContext ?? false)
                <div class="flex flex-col gap-1.5">
                    <label class="{{ $lbl }}">Contact reference</label>
                    <input type="text" wire:model.blur="contact_reference" @disabled($locked ?? false)
                           class="{{ $inp }}" placeholder="e.g. local contact name or reference" />
                    @error('contact_reference') <p class="text-[11.5px] text-red-600">{{ $message }}</p> @enderror
                </div>
            @endif
        </div>
    </section>

    {{-- ── FAMILY DETAILS ───────────────────────────────────────────── --}}
    <section class="{{ $sectionCard }}">
        <div class="{{ $sectionTitle }}">Family Details</div>
        <div class="grid gap-4 sm:grid-cols-3">
            <div class="flex flex-col gap-1.5">
                <label class="{{ $lbl }}">Father's Name</label>
                <input type="text" wire:model.blur="father_name" @disabled($locked ?? false) class="{{ $inp }}" />
                @error('father_name') <p class="text-[11.5px] text-red-600">{{ $message }}</p> @enderror
            </div>
            <div class="flex flex-col gap-1.5">
                <label class="{{ $lbl }}">Mother's Name</label>
                <input type="text" wire:model.blur="mother_name" @disabled($locked ?? false) class="{{ $inp }}" />
                @error('mother_name') <p class="text-[11.5px] text-red-600">{{ $message }}</p> @enderror
            </div>
            <div class="flex flex-col gap-1.5">
                <label class="{{ $lbl }}">Wife's Name <span class="font-normal text-ui-muted">(if married)</span></label>
                <input type="text" wire:model.blur="wife_name" @disabled($locked ?? false) class="{{ $inp }}" />
                @error('wife_name') <p class="text-[11.5px] text-red-600">{{ $message }}</p> @enderror
            </div>
        </div>
    </section>

    {{-- ── UPLOAD DOCUMENTS ─────────────────────────────────────────── --}}
    @if (! empty($applicationModel))
        <section id="customer-documents" class="{{ $sectionCard }} scroll-mt-24">
            <div class="{{ $sectionTitle }}">Upload Documents</div>

            @if (session('doc-status') === 'uploaded')
                <div class="mb-4 flex items-center gap-2 rounded-[8px] border border-emerald-200 bg-emerald-50 px-3 py-2 text-[13px] font-medium text-emerald-700">
                    <i class="fa-solid fa-circle-check shrink-0"></i> File uploaded successfully.
                </div>
            @endif

            <p class="-mt-3 mb-3 text-[12px] text-ui-muted">PDF / JPG / PNG, max 5 MB each</p>

            <div class="grid gap-[14px] sm:grid-cols-2 lg:grid-cols-4">

                {{-- Fixed slots --}}
                @foreach ($fixedDocSlots as $slot)
                    @php($docsOfType = $applicationModel->documents->where('type', $slot['type']))
                    @php($has = $docsOfType->isNotEmpty())
                    <div wire:key="fixed-slot-{{ $slot['key'] }}-{{ $has ? 'filled' : 'empty' }}"
                         class="flex flex-col items-center gap-2 rounded-[10px] border border-[#e8eaf0] bg-[#fafbfd] px-4 py-4 text-center">
                        <div class="mb-0.5 text-2xl text-ui-nav">
                            <i class="fa-solid {{ $slot['icon'] }}"></i>
                        </div>
                        <p class="text-[12.5px] font-semibold leading-snug text-ui-ink">{{ $slot['label'] }}</p>

                        @if ($has)
                            <div class="flex items-center gap-1 text-[11.5px] font-medium text-emerald-600">
                                <i class="fa-solid fa-circle-check text-[11px]"></i> Uploaded
                            </div>
                            <div class="flex flex-wrap items-center justify-center gap-1.5">
                                @foreach ($docsOfType as $doc)
                                    <x-document-preview-link
                                        :url="asset('storage/'.$doc->file_path)"
                                        :filename="basename($doc->file_path)"
                                        :label="$slot['label']"
                                        link-class="rounded-[7px] border border-[#dde0ec] bg-white px-[22px] py-[6px] text-[12px] font-medium text-[#3a3f5a] transition hover:border-ui-gold hover:text-ui-gold"
                                    />
                                    @if (! ($locked ?? false))
                                        <button type="button" wire:click="deleteDocument({{ $doc->id }})"
                                                class="text-[11.5px] font-medium text-red-500 hover:underline">
                                            Delete
                                        </button>
                                    @endif
                                @endforeach
                            </div>
                        @else
                            @if (! ($locked ?? false))
                                <p class="text-[10.5px] font-semibold {{ $slot['required'] ? 'text-amber-600' : 'text-slate-400' }}">
                                    {{ $slot['required'] ? 'Required' : 'Optional' }}
                                </p>

                                <input type="file" wire:model="{{ $slot['property'] }}"
                                       accept=".pdf,.jpg,.jpeg,.png" class="{{ $fileInputClass }}" />

                                @error($slot['property']) <p class="mt-1 text-[11px] text-red-600">{{ $message }}</p> @enderror
                                <div wire:loading wire:target="{{ $slot['property'] }}" class="text-[10px] text-amber-600">
                                    <i class="fa-solid fa-spinner fa-spin"></i> Uploading…
                                </div>
                            @else
                                <p class="text-[11px] text-slate-400">—</p>
                            @endif
                        @endif
                    </div>
                @endforeach

                {{-- Existing "Other" custom-labeled docs --}}
                @foreach ($applicationModel->documents->where('type', \App\Enums\DocumentType::Other) as $doc)
                    <div wire:key="other-doc-{{ $doc->id }}"
                         class="flex flex-col items-center gap-2 rounded-[10px] border border-[#e8eaf0] bg-[#fafbfd] px-4 py-4 text-center">
                        <div class="mb-0.5 text-2xl text-ui-nav">
                            <i class="fa-regular fa-folder-open"></i>
                        </div>
                        <p class="line-clamp-2 break-all text-[12.5px] font-semibold leading-snug text-ui-ink">
                            {{ $doc->custom_label ?: 'Other document' }}
                        </p>

                        <div class="flex items-center gap-1 text-[11.5px] font-medium text-emerald-600">
                            <i class="fa-solid fa-circle-check text-[11px]"></i> Uploaded
                        </div>
                        <div class="flex flex-wrap items-center justify-center gap-1.5">
                            <x-document-preview-link
                                :url="asset('storage/'.$doc->file_path)"
                                :filename="basename($doc->file_path)"
                                :label="$doc->custom_label ?: 'Other document'"
                                link-class="rounded-[7px] border border-[#dde0ec] bg-white px-[22px] py-[6px] text-[12px] font-medium text-[#3a3f5a] transition hover:border-ui-gold hover:text-ui-gold"
                            />
                            @if (! ($locked ?? false))
                                <button type="button" wire:click="deleteDocument({{ $doc->id }})"
                                        class="text-[11.5px] font-medium text-red-500 hover:underline">
                                    Delete
                                </button>
                            @endif
                        </div>
                    </div>
                @endforeach

                {{-- Add More Document --}}
                @if (! ($locked ?? false))
                    <div wire:key="add-more-doc-{{ $file ? 'has-file' : 'empty' }}"
                         class="flex flex-col items-center gap-2 rounded-[10px] border border-dashed border-[#c0c5d8] bg-white px-4 py-4 text-center">
                        <div class="mb-0.5 text-2xl text-ui-nav">
                            <i class="fa-regular fa-folder-open"></i>
                        </div>

                        <input type="text" wire:model.blur="custom_label"
                               class="w-full rounded-[7px] border border-[#dde0ec] bg-white px-2 py-1.5 text-center text-[12px] font-semibold text-ui-ink focus:border-ui-gold focus:outline-none focus:ring-[2px] focus:ring-[rgba(232,133,10,0.08)]"
                               placeholder="Document name" />
                        @error('custom_label') <p class="text-[11px] text-red-600">{{ $message }}</p> @enderror

                        @if ($file)
                            <div class="flex items-center gap-1 text-[11.5px] font-medium text-emerald-600">
                                <i class="fa-solid fa-circle-check text-[11px]"></i> Selected
                            </div>
                            @if (method_exists($file, 'getClientOriginalName'))
                                <p class="line-clamp-2 break-all text-[11px] leading-tight text-ui-muted">
                                    {{ $file->getClientOriginalName() }}
                                </p>
                            @endif
                        @else
                            <p class="text-[10.5px] font-semibold text-slate-400">Optional</p>
                        @endif

                        <input type="file" wire:model="file" accept=".pdf,.jpg,.jpeg,.png"
                               class="{{ $fileInputClass }}" />

                        @error('file') <p class="text-[11px] text-red-600">{{ $message }}</p> @enderror
                        <div wire:loading wire:target="file" class="text-[10px] text-amber-600">
                            <i class="fa-solid fa-spinner fa-spin"></i> Uploading…
                        </div>

                        <button type="button" wire:click="saveDocument"
                                wire:loading.attr="disabled" wire:target="saveDocument,file"
                                class="w-full rounded-[7px] border border-[#dde0ec] bg-white py-[6px] text-[12px] font-semibold text-[#3a3f5a] transition hover:border-ui-gold hover:text-ui-gold disabled:opacity-60">
                            <span wire:loading.remove wire:target="saveDocument">
                                <i class="fa-solid fa-plus text-[11px]"></i> Add document
                            </span>
                            <span wire:loading wire:target="saveDocument">Saving…</span>
                        </button>
                    </div>
                @endif
            </div>

            @if ($locked ?? false)
                <p class="mt-5 text-center text-[12px] text-ui-muted">Document uploads are locked once an application is submitted.</p>
            @endif
        </section>
    @endif

    {{-- ── SUBMIT / LOCKED / ADMIN ─────────────────────────────────── --}}
    @if ($isAdminContext ?? false)
        <div class="space-y-3">
            <button type="button" wire:click="saveApplicationDetails"
                    wire:loading.attr="disabled"
                    class="flex w-full items-center justify-center gap-[10px] rounded-[10px] border border-[#dde0ec] bg-white py-[14px] text-[14px] font-semibold text-ui-ink transition hover:border-ui-gold hover:text-ui-gold">
                <i class="fa-solid fa-floppy-disk"></i>
                <span wire:loading.remove wire:target="saveApplicationDetails">Save changes</span>
                <span wire:loading wire:target="saveApplicationDetails">Saving…</span>
            </button>
            @if (! ($applicationModel?->is_submitted ?? false))
                <button type="button" wire:click="submitApplication"
                        wire:loading.attr="disabled"
                        class="flex w-full items-center justify-center gap-[10px] rounded-[10px] bg-ui-ink py-[15px] text-[15px] font-semibold text-white transition hover:bg-[#2a2a4a]">
                    <i class="fa-solid fa-lock"></i>
                    <span wire:loading.remove wire:target="submitApplication">Submit application (mark as submitted)</span>
                    <span wire:loading wire:target="submitApplication">Submitting…</span>
                </button>
                <p class="text-center text-[11.5px] leading-relaxed text-ui-muted">
                    Submit marks the application as submitted for the customer. Required-document checks can be skipped when submitting from the admin panel.
                </p>
            @else
                <p class="rounded-[10px] border border-[#e8eaf0] bg-[#fafbfd] px-4 py-3 text-center text-[12px] leading-relaxed text-ui-muted">
                    Already submitted — the customer cannot edit their side. You can still <strong>save changes</strong> here to correct details or documents.
                </p>
            @endif
        </div>
    @elseif (! ($locked ?? false))
        <button type="button" wire:click="submitApplication"
                class="flex w-full items-center justify-center gap-[10px] rounded-[10px] bg-ui-ink py-[15px] text-[15px] font-semibold text-white transition hover:bg-[#2a2a4a]">
            <i class="fa-solid fa-lock"></i>
            Submit Application
        </button>
        <p class="mt-[-8px] text-center text-[12px] text-ui-muted">
            Note: Once submitted, you cannot change or edit any information.
        </p>
    @else
        <div class="rounded-[10px] border border-[#e8eaf0] bg-[#fafbfd] px-6 py-4 text-center text-[13px] text-ui-muted">
            This application has been submitted and can no longer be edited.
        </div>
    @endif

</div>