@php
    $workspace = $appraisalWorkspace ?? [];
    $workflow = $appraisalWorkflow ?? [];
    $appraisal = $workspace['appraisal'] ?? null;
    $canEdit = (bool) ($workspace['canEdit'] ?? false);
    $editLockReason = filled($workspace['editLockReason'] ?? null) ? (string) $workspace['editLockReason'] : null;
    $canComplete = (bool) ($workspace['canComplete'] ?? false);
    $officerComplete = (bool) ($appraisal?->isOfficerWorkComplete() ?? false);
    // Signature + Complete must be available while editable. Readiness may require
    // the officer signature, so gating the pad on canComplete creates a deadlock.
    $canSignAndFinish = $canEdit && ! $officerComplete;
    $readOnlyBrowse = ! $canEdit;
    $collateralSummary = $workspace['collateralSummary'] ?? [];
    $tableItems = $workspace['collateralTableItems'] ?? [];
    $completionErrors = (array) ($workspace['completionErrors'] ?? []);
    $investigation = $workspace['field_investigation'] ?? [];
    $repeatBorrowerHistory = $workspace['repeat_borrower_history'] ?? [];
    $pastCollateralCatalog = $workspace['past_collateral_catalog'] ?? ['applicant' => [], 'guarantor' => [], 'is_repeat_borrower' => false];
    $workspaceGuidance = $workspace['workspace_guidance'] ?? [];
    $verificationPhotos = $investigation['verification_photos'] ?? [];
    $businessGpsReady = (bool) ($investigation['business_gps_ready'] ?? false);
    $fieldPhotoCount = (int) ($investigation['verification_photo_count'] ?? count($verificationPhotos));
    $hasInitialCollateral = collect($tableItems)->contains(function ($row) {
        return filled($row['item'] ?? null)
            || filled($row['description'] ?? null)
            || filled($row['identification'] ?? null)
            || filled($row['value'] ?? null);
    });

    $policyPayload = $workspace['policy'] ?? [];
    $guarantorSignatureRequired = (bool) data_get($policyPayload, 'appraisal.guarantor_signature_required', false);
    $officerSignatureRequired = (bool) data_get($policyPayload, 'appraisal.officer_signature_required', true);

    $requirementDefs = [];
    if ($guarantorSignatureRequired) {
        $requirementDefs['guarantor_signature'] = 'Guarantor signature';
    }
    if ($officerSignatureRequired) {
        $requirementDefs['officer_signature'] = 'Loan officer signature';
    }
    $requirementItems = [];
    foreach ($requirementDefs as $errorKey => $label) {
        $anchor = match ($errorKey) {
            'guarantor_signature' => 'appraisal-guarantors',
            'officer_signature' => 'appraisal-officer-signature',
            default => 'appraisal-collateral',
        };
        $requirementItems[] = [
            'key' => $errorKey,
            'label' => $label,
            'status' => array_key_exists($errorKey, $completionErrors) ? 'incomplete' : 'complete',
            'anchor' => $anchor,
        ];
    }
    $incompleteRequirements = collect($requirementItems)->where('status', 'incomplete')->values();

    $firstIncompleteAnchor = $incompleteRequirements->first()['anchor'] ?? '';
    $fieldInvestigationDone = filled($investigation['findings'] ?? null)
        || ! empty($investigation['visits']);
    $fieldVisitRequired = (bool) data_get($policyPayload, 'appraisal.visit_required', false)
        || (bool) data_get($policyPayload, 'appraisal.field_investigation_required', false);
    if (! $fieldInvestigationDone && ! $fieldVisitRequired) {
        $fieldInvestigationDone = filled($investigation['visit_date'] ?? null);
    }
    $repeatBorrowerReviewRequired = $repeatBorrowerHistory !== [];
    $repeatBorrowerReviewDone = ! $repeatBorrowerReviewRequired
        || collect($repeatBorrowerHistory)->every(fn (array $row): bool => (bool) ($row['review_submitted'] ?? false));
    // Appraisal workspace is Security → Field visit → Sign-off. Open on the first workflow
    // step that still needs input — not on sign-off just because the officer signature is missing.
    $collateralRequired = (bool) data_get($policyPayload, 'collateral.required', false);
    $initialStep = match (true) {
        $readOnlyBrowse && $officerComplete => 1,
        $officerComplete => 3,
        $collateralRequired && ! $hasInitialCollateral => 1,
        ! $fieldInvestigationDone => 2,
        default => 3,
    };
    $initialSecurityTab = ($readOnlyBrowse && $officerComplete) || ! in_array($firstIncompleteAnchor, ['appraisal-guarantors', 'appraisal-guarantor-signature'], true)
        ? 'collateral'
        : 'guarantors';
    // Always present the register table when editable so resume-from-register is not an empty state.
    $showCollateralEditor = $canEdit || $hasInitialCollateral;

    $visitingOfficer = old('visiting_officer', $investigation['visiting_officer'] ?? '');
    $canPickVisitingOfficer = (bool) ($investigation['can_pick_visiting_officer'] ?? false);
    $visitingOfficerOptions = $investigation['visiting_officer_options'] ?? [];
    $coAppraiserEmployeeId = (int) old('co_appraiser_employee_id', $investigation['co_appraiser_employee_id'] ?? 0);
    $coAppraiserOptions = $investigation['co_appraiser_options'] ?? [];

    $originationSummary = $workspace['origination_summary'] ?? [];
    $clientSum = $originationSummary['client'] ?? [];
    $gpsRaw = (string) ($clientSum['gps'] ?? '—');
    $gpsReady = $gpsRaw !== '' && $gpsRaw !== '—' && ! str_contains(strtolower($gpsRaw), 'not captured');
    $kycLabel = (string) ($clientSum['kyc'] ?? '—');
    $officerSignatures = app(\App\Services\LoanBook\Appraisal\LoanBookAppraisalOfficerSignatureService::class);
    $hasOfficerSignature = $officerSignatures->hasSignature($appraisal);
@endphp

<div
    class="loan-appraisal-workspace loan-appraisal-workspace--steps loan-ent-has-sticky-bar mx-auto max-w-6xl space-y-3"
    data-appraisal-ready="{{ $incompleteRequirements->isEmpty() ? '1' : '0' }}"
    data-guarantor-signature-required="{{ $guarantorSignatureRequired ? '1' : '0' }}"
    data-first-incomplete="{{ $firstIncompleteAnchor }}"
    x-data="loanAppraisalWorkspace(@js([
        'items' => $tableItems !== []
            ? $tableItems
            : [['item' => '', 'description' => '', 'identification' => '', 'value' => '']],
        'canEdit' => $canEdit,
        'readOnlyBrowse' => $readOnlyBrowse,
        'loanAmount' => (float) ($collateralSummary['loan_amount'] ?? $application->displayPrincipal() ?? 0),
        'showCollateralEditor' => $showCollateralEditor,
        'canComplete' => $canSignAndFinish,
        'readinessComplete' => $incompleteRequirements->isEmpty(),
        'hasOfficerSignature' => $hasOfficerSignature,
        'fieldInvestigationDone' => $fieldInvestigationDone,
        'firstIncompleteAnchor' => $firstIncompleteAnchor,
        'initialStep' => $initialStep,
        'initialSecurityTab' => $initialSecurityTab,
        'pastCollateralCatalog' => $pastCollateralCatalog,
        'workspaceGuidance' => $workspaceGuidance,
        'guarantorRequired' => (bool) (($workspace['guarantor_assessment']['required'] ?? false)),
        'collateralRequired' => $collateralRequired,
        'guarantorMinCount' => (int) ($workspace['guarantor_assessment']['min_count'] ?? 1),
        'collateralMinCoveragePct' => (float) data_get($policyPayload, 'collateral.minimum_coverage_pct', 100),
        'serverGuarantorCount' => (int) ($workspace['guarantor_assessment']['count'] ?? 0),
        'serverApplicantCollateralDone' => (bool) ($workspaceGuidance['applicant_collateral_done'] ?? false),
        'serverGuarantorCollateralDone' => (bool) ($workspaceGuidance['guarantor_collateral_done'] ?? false),
        'fieldVisitRequired' => $fieldVisitRequired,
        'guarantorSignatureRequired' => $guarantorSignatureRequired,
        'repeatBorrowerReviewRequired' => $repeatBorrowerReviewRequired,
        'serverRepeatBorrowerReviewDone' => $repeatBorrowerReviewDone,
    ]))"
>
    @if ($errors->any())
        <div class="rounded-lg border border-rose-200 bg-rose-50 px-3 py-2 text-xs text-rose-900" role="alert">
            <p class="font-semibold">Could not save appraisal changes.</p>
            <ul class="mt-1 list-disc space-y-0.5 pl-4">
                @foreach ($errors->all() as $message)
                    <li>{{ $message }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    @if ($readOnlyBrowse && $editLockReason)
        <div class="rounded-lg border border-sky-200 bg-sky-50 px-3 py-2 text-xs text-sky-950" role="status">
            <p class="font-semibold">Appraisal is view-only</p>
            <p class="mt-0.5">{{ $editLockReason }}</p>
            <p class="mt-1 text-sky-800">Use <span class="font-semibold">Next</span> and <span class="font-semibold">Back</span> below to browse what the loan officer submitted. It reopens for editing only if this file is rejected back to appraisal.</p>
        </div>
    @endif

    {{-- Appraisal workspace progress (officer work, not loan lifecycle) --}}
    <div
        class="loan-appraisal-desk-banner loan-appraisal-desk-banner--{{ ($workspaceGuidance['pending'] ?? []) !== [] ? 'attention' : 'ready' }}"
        role="status"
        aria-live="polite"
    >
        <p class="loan-appraisal-desk-banner__desk" data-appraisal-desk-label>{{ $workspaceGuidance['appraisal_desk'] ?? 'Appraisal' }}</p>
        <span class="loan-appraisal-desk-banner__stage">{{ $workspaceGuidance['loan_stage'] ?? str($application->stage)->headline() }}</span>
        <span class="loan-appraisal-desk-banner__pct" data-appraisal-desk-pct>{{ (int) ($workspaceGuidance['progress_percent'] ?? 0) }}%</span>
    </div>

    @if (($workspaceGuidance['pending'] ?? []) !== [] && $canEdit)
        <div
            class="loan-appraisal-pending-checklist"
            role="region"
            aria-label="Outstanding requirements"
            data-appraisal-pending-checklist
        >
            <ul class="loan-appraisal-pending-checklist__list" data-appraisal-pending-list>
                @foreach ($workspaceGuidance['pending'] as $pendingItem)
                    <li
                        class="loan-appraisal-pending-checklist__item loan-appraisal-pending-checklist__item--{{ $pendingItem['tone'] ?? 'danger' }}"
                        data-pending-key="{{ $pendingItem['key'] ?? '' }}"
                    >
                        {{ $pendingItem['label'] }}
                    </li>
                @endforeach
            </ul>
        </div>
    @elseif ($canEdit)
        <div
            class="loan-appraisal-pending-checklist hidden"
            role="region"
            aria-label="Outstanding requirements"
            data-appraisal-pending-checklist
            hidden
        >
            <ul class="loan-appraisal-pending-checklist__list" data-appraisal-pending-list></ul>
        </div>
    @endif

    <nav class="loan-appraisal-ws-progress" aria-label="Appraisal progress">
        <div class="loan-appraisal-ws-progress__bar" aria-hidden="true">
            <div class="loan-appraisal-ws-progress__fill" :style="'width:' + progressPct + '%'"></div>
        </div>
        <ol class="loan-appraisal-ws-progress__steps">
            <template x-for="step in workspaceSteps" :key="step.id">
                <li>
                    <button
                        type="button"
                        class="loan-appraisal-ws-progress__step"
                        :class="{
                            'loan-appraisal-ws-progress__step--current': workspaceStep === step.id,
                            'loan-appraisal-ws-progress__step--done': stepStatus(step.id) === 'done',
                            'loan-appraisal-ws-progress__step--incomplete': stepStatus(step.id) === 'incomplete',
                        }"
                        :title="stepStatus(step.id) === 'incomplete' ? 'Not filled yet' : (stepStatus(step.id) === 'done' ? 'Complete' : '')"
                        @click="goToStep(step.id)"
                    >
                        <span class="loan-appraisal-ws-progress__mark" x-text="stepMark(step.id)"></span>
                        <span class="loan-appraisal-ws-progress__label" x-text="step.label"></span>
                    </button>
                </li>
            </template>
        </ol>
        <p class="loan-appraisal-ws-progress__pct">
            <span x-text="progressPct"></span>% complete
            <span class="loan-appraisal-ws-progress__autosave" x-show="autosaveState" x-cloak x-text="autosaveState"></span>
        </p>
    </nav>

    {{-- Machine-only requirement keys for Complete-appraisal checks (no visible copy). --}}
    <div data-appraisal-requirements-host hidden aria-hidden="true">
        @foreach ($requirementItems as $item)
            <span
                data-requirement-key="{{ $item['key'] }}"
                data-requirement-anchor="{{ $item['anchor'] }}"
                data-requirement-status="{{ $item['status'] }}"
                data-requirement-label="{{ $item['label'] }}"
            ></span>
        @endforeach
    </div>

    {{-- ═══════════════ STEP 1: Collateral Requirements ═══════════════ --}}
    <section
        class="loan-appraisal-step"
        data-appraisal-step="1"
        x-show="workspaceStep === 1"
        x-cloak
    >
        <header class="loan-appraisal-step__header">
            <h2 class="loan-appraisal-step__title">Fulfill collateral requirements</h2>
            <p class="loan-appraisal-step__hint">Complete applicant collateral first, followed by guarantor collateral.</p>
        </header>

        <div class="loan-appraisal-subtabs" role="tablist" aria-label="Collateral requirement stages">
            <button
                type="button"
                role="tab"
                class="loan-appraisal-subtabs__tab"
                :class="{
                    'loan-appraisal-subtabs__tab--active': securityTab === 'collateral',
                    'loan-appraisal-subtabs__tab--done': applicantCollateralDone,
                    'loan-appraisal-subtabs__tab--pending': !applicantCollateralDone && securityTabVisited('collateral'),
                }"
                :aria-selected="securityTab === 'collateral'"
                @click="securityTab = 'collateral'; markSecurityTabVisited('collateral')"
            >
                <span class="loan-appraisal-subtabs__status" x-text="applicantCollateralDone ? '✓' : (!applicantCollateralDone && securityTabVisited('collateral') ? '!' : '1')"></span>
                Stage 1. Applicant collateral
            </button>
            <button
                type="button"
                role="tab"
                class="loan-appraisal-subtabs__tab"
                :class="{
                    'loan-appraisal-subtabs__tab--active': securityTab === 'guarantors',
                    'loan-appraisal-subtabs__tab--done': guarantorCollateralDone,
                    'loan-appraisal-subtabs__tab--pending': !guarantorCollateralDone && securityTabVisited('guarantors'),
                }"
                :aria-selected="securityTab === 'guarantors'"
                @click="securityTab = 'guarantors'; markSecurityTabVisited('guarantors')"
            >
                <span class="loan-appraisal-subtabs__status" x-text="guarantorCollateralDone ? '✓' : (!guarantorCollateralDone && securityTabVisited('guarantors') ? '!' : '2')"></span>
                Stage 2. Guarantor collateral
            </button>
        </div>

        {{-- Collateral --}}
        <div x-show="securityTab === 'collateral'" x-cloak role="tabpanel">
            <form
                id="appraisal-collateral"
                method="post"
                action="{{ route('loan.book.applications.appraisal.collateral', $application) }}"
                class="scroll-mt-24 space-y-3"
                data-appraisal-ajax
                data-appraisal-anchor="appraisal-collateral"
                data-appraisal-section="collateral"
                @input="markDirty('collateral')"
                @change="markDirty('collateral')"
            >
                @csrf
                <x-loan.workspace-embed-field />

                <div class="flex flex-wrap items-center justify-between gap-2">
                    <p class="text-xs font-semibold uppercase tracking-wide text-slate-600">Applicant's collateral register</p>
                    <div class="flex flex-wrap items-center gap-2">
                        @if ($canEdit && ($pastCollateralCatalog['applicant'] ?? []) !== [])
                            <div class="flex flex-wrap items-center gap-1.5" x-show="pastApplicantSources.length" x-cloak>
                                <select x-model="selectedPastApplicantKey" class="rounded border-slate-200 text-xs max-w-[14rem]">
                                    <option value="">Use past collateral…</option>
                                    <template x-for="source in pastApplicantSources" :key="source.key">
                                        <option :value="source.key" x-text="source.source_label + (source.submitted_at ? ' · ' + source.submitted_at : '')"></option>
                                    </template>
                                </select>
                                <button type="button" @click="importPastApplicantCollateral()" :disabled="!selectedPastApplicantKey" class="loan-ent-btn loan-ent-btn--outline loan-ent-btn--sm">
                                    Import items
                                </button>
                            </div>
                        @endif
                        @if ($canEdit)
                            <button type="button" @click="addCollateralRow()" class="loan-ent-btn loan-ent-btn--outline loan-ent-btn--sm">
                                <svg class="loan-ent-btn__icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z"/></svg>
                                Add collateral
                            </button>
                        @endif
                    </div>
                </div>

                <div x-show="!showCollateralEditor" x-cloak>
                    <x-loan.editable-table-empty title="No collateral items added">
                        @if ($canEdit)
                            <x-slot:action>
                                <button type="button" @click="addCollateralRow()" class="loan-ent-btn loan-ent-btn--outline loan-ent-btn--sm">Add collateral</button>
                            </x-slot:action>
                        @endif
                    </x-loan.editable-table-empty>
                </div>

                <div class="loan-appraisal-table-scroll overflow-x-auto rounded-md border border-slate-200" x-show="showCollateralEditor" x-cloak>
                    <table class="loan-appraisal-table min-w-full text-xs">
                        <thead class="border-b border-slate-200 bg-slate-50 text-left text-[10px] font-semibold uppercase tracking-wide text-slate-600">
                            <tr>
                                <th class="px-2 py-2">Item</th>
                                <th class="px-2 py-2">Description</th>
                                <th class="px-2 py-2">Identification</th>
                                <th class="px-2 py-2 text-right">Value (KES)</th>
                                @if ($canEdit)
                                    <th class="w-16 px-2 py-2">Actions</th>
                                @endif
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100">
                            <template x-for="(row, index) in items" :key="'c-'+index">
                                <tr>
                                    <td class="px-2 py-1.5" data-label="Item"><input :name="'items['+index+'][item]'" x-model="row.item" :disabled="!canEdit" class="loan-appraisal-table__input w-full min-w-[5rem]" placeholder="e.g. motorcycle"></td>
                                    <td class="px-2 py-1.5" data-label="Description"><input :name="'items['+index+'][description]'" x-model="row.description" :disabled="!canEdit" class="loan-appraisal-table__input w-full min-w-[7rem]" placeholder="e.g. make / condition"></td>
                                    <td class="px-2 py-1.5" data-label="Identification"><input :name="'items['+index+'][identification]'" x-model="row.identification" :disabled="!canEdit" class="loan-appraisal-table__input w-full min-w-[5rem]" placeholder="e.g. serial / plate"></td>
                                    <td class="px-2 py-1.5" data-label="Value (KES)"><input type="number" step="0.01" min="0" :name="'items['+index+'][value]'" x-model="row.value" :disabled="!canEdit" class="loan-appraisal-table__input w-full min-w-[5rem] text-right" placeholder="0.00"></td>
                                    @if ($canEdit)
                                        <td class="loan-appraisal-table__actions px-2 py-1.5 text-center" data-label="Remove">
                                            <button
                                                type="button"
                                                @click="removeCollateralRow(index)"
                                                class="loan-appraisal-remove-btn loan-appraisal-remove-btn--icon"
                                                title="Remove item"
                                                aria-label="Remove collateral item"
                                                x-show="items.length > 1"
                                            >&times;</button>
                                        </td>
                                    @endif
                                </tr>
                            </template>
                        </tbody>
                    </table>
                </div>

                <dl class="loan-ent-summary-strip">
                    <div class="loan-ent-summary-strip__item loan-ent-summary-strip__item--emphasis">
                        <dt class="loan-ent-summary-strip__label">Total accepted security</dt>
                        <dd class="loan-ent-summary-strip__value" x-text="totalAcceptedSecurityLabel"></dd>
                    </div>
                    <div class="loan-ent-summary-strip__item">
                        <dt class="loan-ent-summary-strip__label">Loan amount</dt>
                        <dd class="loan-ent-summary-strip__value" x-text="loanAmountLabel"></dd>
                    </div>
                    <div class="loan-ent-summary-strip__item">
                        <dt class="loan-ent-summary-strip__label">Coverage</dt>
                        <dd class="loan-ent-summary-strip__value" x-text="coverageLabel"></dd>
                    </div>
                </dl>
                <p class="text-[11px] text-slate-600">
                    Continue to
                    <button type="button" class="font-semibold text-[#2f4f4f] underline" @click="securityTab = 'guarantors'">Stage 2: Guarantor collateral</button>.
                </p>
            </form>
        </div>

        {{-- Guarantors --}}
        <div x-show="securityTab === 'guarantors'" x-cloak role="tabpanel" id="appraisal-guarantors">
            @php
                $appraisalGuarantors = $application->guarantors ?? collect();
            @endphp
            @if ($canEdit)
                @include('loan.book.applications.partials.guarantor-repeatable-fields', [
                    'application' => $application,
                    'appraisal' => $appraisal,
                    'existingGuarantors' => $appraisalGuarantors,
                    'unifiedAppraisal' => true,
                    'pastGuarantorCollateral' => $pastCollateralCatalog['guarantor'] ?? [],
                ])
            @else
                @include('loan.book.applications.partials.appraisal-guarantors-readonly', [
                    'application' => $application,
                    'workspace' => $workspace,
                ])
            @endif
        </div>
    </section>

    {{-- ═══════════════ STEP 2: Field Verification ═══════════════ --}}
    <section
        class="loan-appraisal-step"
        data-appraisal-step="2"
        x-show="workspaceStep === 2"
        x-cloak
        id="appraisal-investigation"
    >
        <header class="loan-appraisal-step__header">
            <h2 class="loan-appraisal-step__title">Field verification</h2>
            <p class="loan-appraisal-step__hint">Visit details, GPS, photos, and officer findings in one workspace.</p>
        </header>

        <div class="loan-appraisal-field-strip">
            <div class="loan-appraisal-field-strip__item {{ $businessGpsReady ? 'loan-appraisal-field-strip__item--ok' : 'loan-appraisal-field-strip__item--warn' }}">
                <span>Visit GPS</span>
                <strong>{{ $businessGpsReady ? 'Captured' : 'Optional — not set' }}</strong>
            </div>
            <div class="loan-appraisal-field-strip__item {{ $fieldPhotoCount > 0 ? 'loan-appraisal-field-strip__item--ok' : 'loan-appraisal-field-strip__item--warn' }}">
                <span>Visit photos</span>
                <strong>{{ $fieldPhotoCount > 0 ? $fieldPhotoCount.'/4 attached' : 'None yet' }}</strong>
            </div>
            <div class="loan-appraisal-field-strip__item {{ $gpsReady ? 'loan-appraisal-field-strip__item--ok' : 'loan-appraisal-field-strip__item--warn' }}">
                <span>Borrower GPS</span>
                <strong>{{ $gpsReady ? 'Captured' : 'Missing on client profile' }}</strong>
            </div>
            <div class="loan-appraisal-field-strip__item {{ strtolower($kycLabel) === 'present' ? 'loan-appraisal-field-strip__item--ok' : 'loan-appraisal-field-strip__item--warn' }}">
                <span>Borrower ID photos</span>
                <strong>{{ $kycLabel }}</strong>
            </div>
            <button type="button" class="loan-appraisal-field-strip__link" onclick="window.elisEntity360Nav?.tab('evidence')">Open Evidence tab</button>
        </div>
        <p class="mb-3 text-[11px] text-slate-500">
            Visit photos and visit GPS are captured on this page. Guarantor passport/ID photos are on Stage 2 (Guarantor collateral). Borrower ID photos and borrower GPS live on the Evidence tab.
        </p>

        @if ($canEdit)
            <form
                method="post"
                action="{{ route('loan.book.applications.appraisal.field_investigation', $application) }}"
                enctype="multipart/form-data"
                class="loan-appraisal-field-form space-y-3"
                data-appraisal-ajax
                data-appraisal-section="investigation"
                data-appraisal-anchor="appraisal-investigation"
                @input="markDirty('investigation')"
                @change="markDirty('investigation')"
            >
                @csrf
                <x-loan.workspace-embed-field />

                <div class="grid grid-cols-1 gap-3 sm:grid-cols-3">
                    <label class="block text-xs font-medium text-slate-700">Visit date
                        <input type="date" name="visit_date" value="{{ old('visit_date', $investigation['visit_date'] ?? '') }}" class="mt-0.5 w-full rounded border-slate-200 text-xs">
                    </label>
                    <label class="block text-xs font-medium text-slate-700">
                        Visiting officer
                        @if ($canPickVisitingOfficer)
                            <select name="visiting_officer" class="mt-0.5 w-full rounded border-slate-200 text-xs" required>
                                <option value="">Select officer…</option>
                                @foreach ($visitingOfficerOptions as $officer)
                                    <option value="{{ $officer['name'] }}" @selected((string) $visitingOfficer === (string) $officer['name'])>
                                        {{ $officer['name'] }}
                                    </option>
                                @endforeach
                                @if ($visitingOfficer !== '' && collect($visitingOfficerOptions)->every(fn ($o) => (string) ($o['name'] ?? '') !== (string) $visitingOfficer))
                                    <option value="{{ $visitingOfficer }}" selected>{{ $visitingOfficer }} (saved)</option>
                                @endif
                            </select>
                        @else
                            <input
                                type="text"
                                name="visiting_officer"
                                value="{{ $visitingOfficer }}"
                                readonly
                                class="mt-0.5 w-full rounded border-slate-200 bg-slate-50 text-xs text-slate-700"
                            >
                        @endif
                    </label>
                    <label class="block text-xs font-medium text-slate-700">
                        Co-appraiser <span class="font-normal text-slate-400">(optional)</span>
                        <select name="co_appraiser_employee_id" class="mt-0.5 w-full rounded border-slate-200 text-xs">
                            <option value="">No co-appraiser</option>
                            @foreach ($coAppraiserOptions as $officer)
                                <option value="{{ $officer['id'] }}" @selected($coAppraiserEmployeeId === (int) $officer['id'])>
                                    {{ $officer['name'] }}
                                </option>
                            @endforeach
                        </select>
                        <span class="mt-1 block text-[11px] font-normal text-slate-500">The colleague who accompanied the visiting officer.</span>
                    </label>
                </div>

                <label class="block text-xs font-medium text-slate-700">Officer findings
                    <textarea name="findings" rows="3" class="mt-0.5 w-full rounded border-slate-200 text-xs" placeholder="What did you observe on the visit?">{{ old('findings', $investigation['findings'] ?? '') }}</textarea>
                </label>

                <div class="space-y-2">
                    <div class="flex flex-wrap items-center justify-between gap-2">
                        <p class="text-xs font-semibold uppercase tracking-wide text-slate-600">Visit photos <span class="font-normal normal-case text-slate-400">(optional, max 4)</span></p>
                        <p class="text-[11px] text-slate-500">Shop, borrower, stock, signage, etc.</p>
                    </div>
                    @foreach ($verificationPhotos as $photo)
                        <input type="hidden" name="keep_verification_photos[]" value="{{ $photo['path'] }}">
                    @endforeach
                    <div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
                        @foreach ($verificationPhotos as $index => $photo)
                            <div class="rounded-lg border border-slate-200 bg-slate-50 p-2">
                                <div class="flex items-start justify-between gap-2">
                                    <p class="text-[11px] font-semibold text-slate-600">Photo {{ $index + 1 }}</p>
                                    <label class="inline-flex items-center gap-1 text-[11px] text-rose-700">
                                        <input type="checkbox" name="remove_verification_photos[]" value="{{ $photo['path'] }}" class="rounded border-rose-300">
                                        Remove
                                    </label>
                                </div>
                                <button type="button" class="mt-1 block w-full" @click="$dispatch('open-image-lightbox', { src: @js($photo['url']), label: @js('Visit photo '.($index + 1)) })">
                                    <img src="{{ $photo['url'] }}" alt="Visit photo {{ $index + 1 }}" class="max-h-32 w-full rounded object-contain bg-white">
                                </button>
                            </div>
                        @endforeach
                        @for ($slot = $fieldPhotoCount; $slot < 4; $slot++)
                            <x-loan.kyc-photo-capture
                                :name="'verification_photos['.$slot.']'"
                                :label="'Photo '.($slot + 1)"
                                facing-mode="environment"
                                :show-empty-hint="false"
                                wrapper-class="rounded-lg border border-dashed border-slate-200 bg-white p-2"
                            />
                        @endfor
                    </div>
                </div>

                <x-loan.geo-location-pin
                    :latitude="$investigation['latitude'] ?? null"
                    :longitude="$investigation['longitude'] ?? null"
                    :accuracy="$investigation['gps_accuracy_meters'] ?? null"
                    :source="$investigation['gps_source'] ?? null"
                    label="Business GPS"
                    help=""
                    :show-map="false"
                    :auto-capture-gps="false"
                    :compact="true"
                    gps-permission="loan_applications.update"
                />
                <div class="flex justify-end pt-1 loan-appraisal-manual-save">
                    <button type="submit" class="loan-ent-btn loan-ent-btn--primary inline-flex items-center justify-center gap-1.5">
                        <span data-save-label>Save visit</span>
                        <span data-saving-label class="hidden inline-flex items-center gap-1.5">
                            <span class="loan-submit-spinner" aria-hidden="true"></span>
                            Saving…
                        </span>
                        <span data-saved-label class="hidden inline-flex items-center gap-1">
                            Saved
                        </span>
                    </button>
                </div>
            </form>
        @else
            @include('loan.book.applications.partials.appraisal-field-investigation-readonly', [
                'investigation' => $investigation,
            ])
        @endif

        @if (! empty($investigation['visits']))
            <ul class="mt-2 space-y-1 text-[11px] text-slate-700">
                @foreach ($investigation['visits'] as $visit)
                    <li>#{{ $visit['id'] }} {{ $visit['title'] ?? '' }} · {{ $visit['status'] ?? '' }} · {{ $visit['completed_at'] ?? 'open' }}</li>
                @endforeach
            </ul>
        @endif
    </section>

    {{-- ═══════════════ STEP 3: Officer Sign-off ═══════════════ --}}
    <section
        class="loan-appraisal-step"
        data-appraisal-step="3"
        x-show="workspaceStep === 3"
        x-cloak
    >
        <header class="loan-appraisal-step__header">
            <h2 class="loan-appraisal-step__title">Officer sign-off</h2>
            <p class="loan-appraisal-step__hint">{{ $readOnlyBrowse ? 'Review what the loan officer signed off.' : 'Review readiness, sign, and complete the appraisal.' }}</p>
        </header>

        @if ($repeatBorrowerHistory !== [])
            @include('loan.book.applications.partials.repeat-borrower-history-review', [
                'repeatBorrowerHistory' => $repeatBorrowerHistory,
                'repeatBorrowerGraduation' => $workspace['repeat_borrower_graduation'] ?? null,
                'saveRepeatReviewUrl' => route('loan.book.applications.appraisal.repeat_borrower_review', $application),
                'canSignAndFinish' => $canSignAndFinish,
            ])
        @endif

        <div class="loan-appraisal-signoff-summary">
            <h3 class="loan-appraisal-signoff-summary__title">Completion checklist</h3>
            <ul class="loan-appraisal-signoff-summary__list">
                <li>
                    <button type="button" class="loan-appraisal-signoff-summary__row" @click="goToStep(1); securityTab = 'collateral'">
                        <span :class="applicantCollateralDone ? 'text-emerald-700' : 'text-rose-700'" x-text="applicantCollateralDone ? '✓' : '○'"></span>
                        Applicant collateral
                    </button>
                </li>
                <li>
                    <button type="button" class="loan-appraisal-signoff-summary__row" @click="goToStep(1); securityTab = 'guarantors'">
                        <span :class="guarantorCollateralDone ? 'text-emerald-700' : 'text-rose-700'" x-text="guarantorCollateralDone ? '✓' : '○'"></span>
                        Guarantor collateral
                    </button>
                </li>
                <li>
                    <button type="button" class="loan-appraisal-signoff-summary__row" @click="goToStep(2)">
                        <span :class="fieldStepTouched ? 'text-emerald-700' : 'text-rose-700'" x-text="fieldStepTouched ? '✓' : '○'"></span>
                        Field verification
                    </button>
                </li>
                @if ($repeatBorrowerHistory !== [])
                <li>
                    <button type="button" class="loan-appraisal-signoff-summary__row" @click="goToStep(3)">
                        <span :class="repeatBorrowerReviewDone ? 'text-emerald-700' : 'text-rose-700'" x-text="repeatBorrowerReviewDone ? '✓' : '○'"></span>
                        Repeat borrower review
                    </button>
                </li>
                @endif
                <li>
                    <span class="loan-appraisal-signoff-summary__row">
                        <span :class="officerSignatureDone ? 'text-emerald-700' : 'text-rose-700'" x-text="officerSignatureDone ? '✓' : '○'"></span>
                        Loan officer signature
                    </span>
                </li>
            </ul>
        </div>

        <div class="loan-ent-sig-grid loan-appraisal-sig-grid scroll-mt-20" id="appraisal-signatures">
            @if ($canSignAndFinish)
                <form
                    id="appraisal-officer-signature-form"
                    method="post"
                    action="{{ route('loan.book.applications.appraisal.officer_signature', $application) }}"
                    class="min-w-0 h-full"
                    data-appraisal-ajax
                    data-appraisal-anchor="appraisal-officer-signature"
                    data-appraisal-section="officer_signature"
                    @input="markDirty('officer_signature')"
                    @change="markDirty('officer_signature')"
                >
                    @csrf
                    <x-loan.workspace-embed-field />
                    @include('loan.book.applications.partials.officer-appraisal-signature', [
                        'appraisal' => $appraisal,
                        'canEdit' => true,
                        'saveFormId' => 'appraisal-officer-signature-form',
                    ])
                </form>
            @else
                @include('loan.book.applications.partials.officer-appraisal-signature', [
                    'appraisal' => $appraisal,
                    'canEdit' => false,
                ])
            @endif
        </div>

        @if (($workflow['verifications'] ?? collect())->isNotEmpty())
            <x-loan.enterprise-section title="Workflow verifications" muted class="mt-3">
                <ul class="space-y-1.5 text-xs">
                    @foreach ($workflow['verifications'] as $verification)
                        <li class="rounded border border-slate-100 bg-white px-2 py-1.5">
                            <span class="font-semibold text-slate-800">{{ $verification->workflow_stage_label ?: $verification->workflow_stage_key }}</span>
                            <span class="text-slate-500"> · {{ $verification->actor?->name }} · {{ optional($verification->verified_at)->format('d-M-Y H:i') }}</span>
                            @if ($verification->comments)<p class="mt-0.5 text-slate-700">{{ $verification->comments }}</p>@endif
                        </li>
                    @endforeach
                </ul>
            </x-loan.enterprise-section>
        @endif
    </section>

    @if ($canSignAndFinish)
        <form
            id="appraisal-complete-block"
            method="post"
            action="{{ route('loan.book.applications.appraisal.complete', $application) }}"
            class="hidden"
            data-appraisal-ajax
            data-appraisal-anchor="appraisal-complete-block"
            data-appraisal-section="complete"
            aria-hidden="true"
        >
            @csrf
            <x-loan.workspace-embed-field />
        </form>
    @endif

    <x-loan.sticky-action-bar class="loan-appraisal-sticky-host">
        <x-slot:start>
            <button
                type="button"
                class="loan-ent-btn loan-ent-btn--secondary"
                x-show="workspaceStep > 1 || (workspaceStep === 1 && securityTab === 'guarantors')"
                x-cloak
                @click="goBack()"
                :disabled="isSavingDraft || isCompleting || isNavigating"
            >Back</button>
        </x-slot:start>
        <x-slot:end>
            @if ($canEdit)
                <span class="loan-appraisal-ws-progress__autosave hidden sm:inline" x-show="autosaveState" x-cloak x-text="autosaveState"></span>
            @endif
            <button
                type="button"
                class="loan-ent-btn loan-ent-btn--primary inline-flex items-center justify-center gap-1.5"
                x-show="workspaceStep < 3"
                x-cloak
                @click="goNext()"
                :disabled="isSavingDraft || isCompleting || isNavigating"
                :aria-busy="isNavigating ? 'true' : 'false'"
            >
                <span
                    x-show="!isNavigating"
                    x-text="readOnlyBrowse
                        ? (workspaceStep === 1 && securityTab === 'collateral' ? 'Next: guarantors' : 'Next')
                        : (workspaceStep === 1 && securityTab === 'collateral'
                            ? 'Continue to guarantor collateral'
                            : (workspaceStep === 1 ? 'Continue to field verification' : 'Continue'))"
                >Next</span>
                <span x-show="isNavigating && !readOnlyBrowse" x-cloak class="inline-flex items-center gap-1.5">
                    <span class="loan-submit-spinner" aria-hidden="true"></span>
                    Saving…
                </span>
                <span x-show="isNavigating && readOnlyBrowse" x-cloak>Next…</span>
                <svg class="loan-ent-btn__icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" x-show="!isNavigating"><path fill-rule="evenodd" d="M3 10a.75.75 0 01.75-.75h10.638L10.23 5.29a.75.75 0 111.04-1.08l5.5 5.25a.75.75 0 010 1.08l-5.5 5.25a.75.75 0 11-1.04-1.08l4.158-3.96H3.75A.75.75 0 013 10z" clip-rule="evenodd"/></svg>
            </button>
            @if ($canSignAndFinish)
                <button
                    type="button"
                    class="loan-ent-btn loan-ent-btn--primary inline-flex items-center justify-center gap-1.5"
                    x-show="workspaceStep === 3"
                    x-cloak
                    @click="saveAndContinue()"
                    :disabled="isCompleting || isSavingDraft || isNavigating"
                    :aria-busy="isCompleting ? 'true' : 'false'"
                >
                    <span class="inline-flex items-center gap-1.5" x-show="!isCompleting">Complete appraisal</span>
                    <span class="inline-flex items-center gap-1.5" x-show="isCompleting" x-cloak>
                        <span class="loan-submit-spinner" aria-hidden="true"></span>
                        Completing…
                    </span>
                </button>
            @elseif ($officerComplete)
                <span class="inline-flex items-center rounded-md border border-emerald-200 bg-emerald-50 px-2.5 py-1 text-[11px] font-semibold text-emerald-800" x-show="workspaceStep === 3">
                    Appraisal completed
                </span>
            @endif
        </x-slot:end>
    </x-loan.sticky-action-bar>
</div>