{{--
    Repeatable guarantor capture for individual loan applications.
    @param \App\Models\LoanBookApplication|null $application
    @param \Illuminate\Support\Collection|null $existingGuarantors
    @param bool $unifiedAppraisal  One card per person: KYC + security + signature + single save
--}}
@php
    use App\Support\Validation\KenyanFieldRules;

    $unifiedAppraisal = (bool) ($unifiedAppraisal ?? false);
    $tabWorkspace = (bool) ($tabWorkspace ?? false);
    $appraisal = $appraisal ?? ($application?->appraisal ?? null);

    $rawGuarantors = $existingGuarantors ?? ($application?->guarantors ?? collect());
    $existing = $rawGuarantors
        ->values()
        ->map(fn ($g, $idx) => [
            'loan_book_guarantor_id' => $g->id,
            'sequence' => $g->sequence,
            'capture_mode' => old("guarantors.{$idx}.capture_mode", filled(data_get($g->meta_json, 'client_source_id')) ? 'client' : (filled(data_get($g->meta_json, 'register_source_id')) ? 'existing' : 'new')),
            'register_guarantor_id' => old("guarantors.{$idx}.register_guarantor_id", data_get($g->meta_json, 'register_source_id')),
            'loan_client_id' => old("guarantors.{$idx}.loan_client_id", data_get($g->meta_json, 'client_source_id') ?? $g->guarantor_client_id),
            'full_name' => old("guarantors.{$idx}.full_name", $g->full_name),
            'phone' => old("guarantors.{$idx}.phone", $g->phone),
            'id_number' => old("guarantors.{$idx}.id_number", $g->id_number),
            'relationship' => old("guarantors.{$idx}.relationship", $g->relationship),
            'address' => old("guarantors.{$idx}.address", $g->address()),
            'latitude' => old("guarantors.{$idx}.latitude", $g->latitude()),
            'longitude' => old("guarantors.{$idx}.longitude", $g->longitude()),
            'gps_accuracy_meters' => old("guarantors.{$idx}.gps_accuracy_meters", data_get($g->meta_json, 'gps_accuracy_meters')),
            'gps_source' => old("guarantors.{$idx}.gps_source", data_get($g->meta_json, 'gps_source')),
            'landmark' => old("guarantors.{$idx}.landmark", data_get($g->meta_json, 'landmark')),
            'residential_status' => old("guarantors.{$idx}.residential_status", data_get($g->meta_json, 'residential_status')),
            'gender' => old("guarantors.{$idx}.gender", data_get($g->meta_json, 'gender')),
            'marital_status' => old("guarantors.{$idx}.marital_status", data_get($g->meta_json, 'marital_status')),
            'date_of_birth' => old("guarantors.{$idx}.date_of_birth", data_get($g->meta_json, 'date_of_birth')),
            'title' => old("guarantors.{$idx}.title", data_get($g->meta_json, 'title')),
            'is_primary' => (bool) old("guarantors.{$idx}.is_primary", $g->isPrimary()),
            'guarantee_amount' => old("guarantors.{$idx}.guarantee_amount", $g->guaranteeAmount()),
            'is_client' => $g->isClientLinked(),
            'photo_path' => old("guarantors.{$idx}.photo_path", $g->photo_path),
            'id_front_photo_path' => old("guarantors.{$idx}.id_front_photo_path", $g->id_front_photo_path),
            'id_back_photo_path' => old("guarantors.{$idx}.id_back_photo_path", $g->id_back_photo_path),
            'photo_url' => $g->kycImageUrl($g->photo_path),
            'id_front_url' => $g->kycImageUrl($g->id_front_photo_path),
            'id_back_url' => $g->kycImageUrl($g->id_back_photo_path),
            'security_items' => collect($g->appraisalSecurityItems())->whenEmpty(fn ($c) => $c->push([
                'item' => '', 'description' => '', 'identification' => '', 'value' => '',
            ]))->values()->all(),
            'show_security_editor' => collect($g->appraisalSecurityItems())->contains(
                fn ($row) => filled($row['item'] ?? null)
                    || filled($row['description'] ?? null)
                    || filled($row['identification'] ?? null)
                    || filled($row['value'] ?? null),
            ),
            'existing_signature_url' => $g->appraisalSignatureDataUri(),
            'guarantor_signed_at' => \App\Support\LoanBook\SignatureTimestamp::forInput(
                data_get($g->meta_json, 'appraisal.signed_at')
            ),
            'signature_data' => '',
        ])
        ->all();

    if ($existing === [] && is_array(old('guarantors'))) {
        $existing = collect(old('guarantors'))->values()->map(fn ($row) => array_merge([
            'capture_mode' => 'new',
            'register_guarantor_id' => '',
            'loan_client_id' => '',
            'full_name' => '',
            'phone' => '',
            'id_number' => '',
            'relationship' => '',
            'address' => '',
            'latitude' => null,
            'longitude' => null,
            'gps_accuracy_meters' => null,
            'gps_source' => '',
            'landmark' => '',
            'residential_status' => '',
            'gender' => '',
            'marital_status' => '',
            'date_of_birth' => '',
            'title' => '',
            'is_primary' => false,
            'guarantee_amount' => null,
            'is_client' => false,
            'photo_path' => '',
            'id_front_photo_path' => '',
            'id_back_photo_path' => '',
            'photo_url' => null,
            'id_front_url' => null,
            'id_back_url' => null,
        ], is_array($row) ? $row : []))->all();
    }

    if ($existing === []) {
        $existing = [[
            'loan_book_guarantor_id' => null,
            'sequence' => null,
            'capture_mode' => 'new',
            'register_guarantor_id' => '',
            'loan_client_id' => '',
            'full_name' => '', 'phone' => '', 'id_number' => '', 'relationship' => '', 'address' => '',
            'latitude' => null, 'longitude' => null, 'gps_accuracy_meters' => null, 'gps_source' => '',
            'landmark' => '', 'residential_status' => '', 'gender' => '', 'marital_status' => '', 'date_of_birth' => '', 'title' => '',
            'is_primary' => true, 'guarantee_amount' => null, 'is_client' => false,
            'photo_path' => '', 'id_front_photo_path' => '', 'id_back_photo_path' => '',
            'photo_url' => null, 'id_front_url' => null, 'id_back_url' => null,
            'security_items' => [['item' => '', 'description' => '', 'identification' => '', 'value' => '']],
            'existing_signature_url' => null, 'guarantor_signed_at' => \App\Support\LoanBook\SignatureTimestamp::nowForInput(), 'signature_data' => '',
        ]];
    }

    $guaranteeAmount = (float) old('amount_requested', $application?->amount_requested ?? 0);
    $borrowerClientId = (int) ($application?->loan_client_id ?? 0);

    $eligibilityRules = app(\App\Services\LoanBook\LendingPolicySettings::class)->eligibilityRules();
    $guarantorRequired = (bool) ($eligibilityRules['guarantor_required'] ?? false);
    $guarantorPhotosRequired = (bool) ($eligibilityRules['guarantor_photos_required'] ?? false);
    $guarantorLocationRequired = (bool) ($eligibilityRules['guarantor_location_required'] ?? false);
    $guarantorIdRequired = (bool) ($eligibilityRules['guarantor_id_required'] ?? false);
    $repeatExistingGuarantorWaive = $application
        ? \App\Support\LoanBook\RepeatExistingGuarantorKycWaiver::appliesForApplication($application)
        : \App\Support\LoanBook\RepeatExistingGuarantorKycWaiver::appliesForClient(
            $loanClient ?? $prefilledClient ?? $selectedClient ?? null
        );
    $registerShowUrlTemplate = str_replace('999999', '__ID__', route('loan.lookups.guarantors.show', ['loan_book_guarantor' => 999999]));
    $clientSearchUrl = route('loan.lookups.guarantors.clients.search');
    $clientShowUrlTemplate = str_replace('999999', '__ID__', route('loan.lookups.guarantors.clients.show', ['loan_client' => 999999]));
    $pastGuarantorCollateral = $pastGuarantorCollateral ?? [];
@endphp

<section
    class="{{ $unifiedAppraisal || $tabWorkspace ? 'space-y-4' : 'rounded-lg border border-slate-200 bg-white p-4 space-y-4' }}"
    data-loan-application-guarantors
    x-data="loanApplicationGuarantors(@js($existing), @js(route('loan.lookups.guarantors.evaluate')), @js($application?->id), @js($guaranteeAmount > 0 ? $guaranteeAmount : null), @js($guarantorRequired), @js($guarantorPhotosRequired), @js(route('loan.lookups.guarantors.search')), @js($registerShowUrlTemplate), @js($unifiedAppraisal), @js(route('loan.lookups.guarantors.past')), @js($borrowerClientId > 0 ? $borrowerClientId : null), @js($repeatExistingGuarantorWaive), @js($tabWorkspace), @js($clientSearchUrl), @js($clientShowUrlTemplate), @js($pastGuarantorCollateral), @js($guarantorLocationRequired), @js($guarantorIdRequired))"
>
    @if ($tabWorkspace)
    <div class="loan-guarantor-capture-steps" role="tablist" aria-label="Capture steps">
        <button type="button" class="loan-guarantor-capture-steps__tab" :class="{ 'loan-guarantor-capture-steps__tab--active': captureStep === 1 }" @click="goCaptureStep(1)">1. Details</button>
        <button type="button" class="loan-guarantor-capture-steps__tab" :class="{ 'loan-guarantor-capture-steps__tab--active': captureStep === 2 }" @click="goCaptureStep(2)">2. Location & photos</button>
        <button type="button" @click="addGuarantor()" class="loan-ent-btn loan-ent-btn--outline loan-ent-btn--sm ml-auto">
            <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 guarantor
        </button>
    </div>
    @elseif ($unifiedAppraisal)
    <div class="flex justify-end">
        <button type="button" @click="addGuarantor()" 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 guarantor
        </button>
    </div>
    @else
    <div class="flex items-start justify-between gap-3">
        <div>
            <h3 class="text-sm font-semibold text-slate-900">Guarantors @if ($guarantorRequired)<span class="text-rose-600">*</span>@else<span class="ml-1 rounded-full bg-slate-100 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-slate-500">Optional</span>@endif</h3>
        </div>
        <button type="button" @click="addGuarantor()" class="inline-flex shrink-0 items-center gap-1 rounded-lg border border-slate-300 bg-white px-3 py-1.5 text-xs font-semibold text-slate-700 hover:bg-slate-50">
            <span class="text-base leading-none">+</span> Add guarantor
        </button>
    </div>
    @endif

    @error('guarantors')<p class="text-xs font-medium text-rose-700">{{ $message }}</p>@enderror
    <p x-show="policyError" x-cloak x-text="policyError" data-guarantor-policy-error class="text-xs font-medium text-rose-700"></p>

    <template x-for="(guarantor, index) in guarantors" :key="index">
        @if ($unifiedAppraisal)
        <form
            method="POST"
            action="{{ route('loan.book.applications.guarantors.sync', $application) }}"
            enctype="multipart/form-data"
            class="rounded-xl border border-slate-200 bg-white p-4 shadow-sm space-y-4"
            data-appraisal-ajax
            data-appraisal-anchor="appraisal-guarantors"
            data-appraisal-section="guarantor"
        >
            @csrf
            <input type="hidden" name="return_tab" value="appraisal">
            <input type="hidden" name="single_row_save" value="1">
            <input type="hidden" name="loan_book_guarantor_id" :value="guarantor.loan_book_guarantor_id || ''">
            <input type="hidden" name="target_sequence" :value="guarantor.sequence || (index + 1)">
            <x-loan.workspace-embed-field />
        @endif
        <div
            class="{{ $unifiedAppraisal ? '' : 'rounded-lg border border-slate-200 bg-slate-50/80 p-4 space-y-4' }}"
            data-guarantor-card
            :data-guarantor-has-security="(Array.isArray(guarantor.security_items) && guarantor.security_items.some((sec) => String(sec?.item || '').trim() !== '' || String(sec?.description || '').trim() !== '' || String(sec?.identification || '').trim() !== '' || String(sec?.value ?? '').trim() !== '')) ? '1' : '0'"
            x-init="if (guarantor.existing_signature_url) { $el.setAttribute('data-guarantor-has-signature', '1') }"
        >
            <div class="flex items-center justify-between gap-2">
                <p class="text-xs font-semibold uppercase tracking-wide text-slate-600" x-text="'Guarantor ' + (index + 1)"></p>
                <button
                    type="button"
                    x-show="guarantors.length > 1"
                    @click="removeGuarantor(index)"
                    class="loan-appraisal-remove-btn"
                    aria-label="Remove guarantor"
                >Remove guarantor</button>
            </div>

            @if ($tabWorkspace)
            <div x-show="captureStep === 1" x-cloak class="space-y-4">
            @endif
            <div class="flex flex-wrap items-center gap-4 text-xs">
                <label class="inline-flex items-center gap-2 font-semibold text-slate-700">
                    <input
                        type="radio"
                        class="border-slate-300 text-[#2f4f4f] focus:ring-[#2f4f4f]"
                        :name="fieldName(index, 'capture_mode')"
                        value="new"
                        x-model="guarantor.capture_mode"
                        @change="setCaptureMode(index, 'new')"
                    />
                    New
                </label>
                <label class="inline-flex items-center gap-2 font-semibold text-slate-700">
                    <input
                        type="radio"
                        class="border-slate-300 text-[#2f4f4f] focus:ring-[#2f4f4f]"
                        :name="fieldName(index, 'capture_mode')"
                        value="existing"
                        x-model="guarantor.capture_mode"
                        @change="setCaptureMode(index, 'existing')"
                    />
                    From register
                </label>
                <label class="inline-flex items-center gap-2 font-semibold text-slate-700">
                    <input
                        type="radio"
                        class="border-slate-300 text-[#2f4f4f] focus:ring-[#2f4f4f]"
                        :name="fieldName(index, 'capture_mode')"
                        value="client"
                        x-model="guarantor.capture_mode"
                        @change="setCaptureMode(index, 'client')"
                    />
                    Use existing client
                </label>
                <label class="inline-flex items-center gap-2 font-semibold text-slate-700" x-show="borrowerClientId">
                    <input
                        type="radio"
                        class="border-slate-300 text-[#2f4f4f] focus:ring-[#2f4f4f]"
                        :name="fieldName(index, 'capture_mode')"
                        value="past"
                        x-model="guarantor.capture_mode"
                        @change="setCaptureMode(index, 'past')"
                    />
                    Client’s past guarantors
                </label>
            </div>

            <fieldset
                x-show="guarantor.capture_mode === 'existing'"
                x-cloak
                class="m-0 min-w-0 space-y-3 border-0 p-0"
                :disabled="(guarantor.capture_mode || 'new') !== 'existing'"
            >
                <div>
                    @include('loan.book.applications.partials.guarantor-searchable-picker', [
                        'pickerMode' => 'existing',
                        'pickerLabel' => 'From register',
                        'pickerPlaceholder' => 'Search name, phone or ID number…',
                    ])
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4" x-show="guarantor.register_guarantor_id">
                    <div>
                        <label class="block text-xs font-semibold text-slate-600 mb-1">Full name</label>
                        <input
                            type="text"
                            class="w-full rounded-lg border-slate-200 text-sm"
                            x-model="guarantor.full_name"
                            :name="fieldName(index, 'full_name')"
                            autocomplete="name"
                            placeholder="e.g. Jane Wanjiku"
                        />
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-slate-600 mb-1">Phone</label>
                        <input
                            type="tel"
                            class="w-full rounded-lg border-slate-200 text-sm"
                            :class="fieldError(index, 'phone') ? 'border-rose-500 ring-rose-200' : ''"
                            x-model="guarantor.phone"
                            :name="fieldName(index, 'phone')"
                            data-loan-field-kind="phone_ke"
                            {!! KenyanFieldRules::htmlAttributeStringForKind(KenyanFieldRules::KIND_PHONE_KE) !!}
                            autocomplete="tel"
                            placeholder="e.g. 0712 345 678"
                            @input="onPhoneInput(index)"
                            @blur="onPhoneBlur(index)"
                        />
                        <p
                            x-show="fieldError(index, 'phone')"
                            x-text="fieldError(index, 'phone')"
                            data-guarantor-field-error
                            class="mt-1 text-xs text-rose-600"
                        ></p>
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-slate-600 mb-1">ID / registration</label>
                        <input
                            type="text"
                            class="w-full rounded-lg border-slate-200 text-sm"
                            :class="fieldError(index, 'id_number') ? 'border-rose-500 ring-rose-200' : ''"
                            x-model="guarantor.id_number"
                            :name="fieldName(index, 'id_number')"
                            data-loan-field-kind="national_id"
                            {!! KenyanFieldRules::htmlAttributeStringForKind(KenyanFieldRules::KIND_NATIONAL_ID) !!}
                            placeholder="e.g. 12345678"
                            @input="onIdInput(index)"
                            @blur="onIdBlur(index)"
                        />
                        <p
                            x-show="fieldError(index, 'id_number')"
                            x-text="fieldError(index, 'id_number')"
                            data-guarantor-field-error
                            class="mt-1 text-xs text-rose-600"
                        ></p>
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-slate-600 mb-1">Relationship to client</label>
                        <input type="text" class="w-full rounded-lg border-slate-200 text-sm" x-model="guarantor.relationship" :name="fieldName(index, 'relationship')" placeholder="e.g. spouse, sibling" />
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-slate-600 mb-1">Guarantee amount <span class="font-normal text-slate-400">(optional)</span></label>
                        <input type="number" min="0" step="0.01" class="w-full rounded-lg border-slate-200 text-sm" x-model="guarantor.guarantee_amount" :name="fieldName(index, 'guarantee_amount')" placeholder="e.g. 50000" />
                    </div>
                    <div class="md:col-span-2 flex items-center gap-2">
                        <input type="hidden" :name="fieldName(index, 'is_primary')" value="0" />
                        <input type="checkbox" class="rounded border-slate-300 text-[#2f4f4f] focus:ring-[#2f4f4f]" x-model="guarantor.is_primary" :name="fieldName(index, 'is_primary')" value="1" @change="onPrimaryChange(index)" />
                        <label class="text-xs font-semibold text-slate-700">{{ $unifiedAppraisal ? 'Primary' : 'Primary guarantor' }}</label>
                    </div>
                </div>
                <input type="hidden" :name="fieldName(index, 'photo_path')" x-model="guarantor.photo_path" />
                <input type="hidden" :name="fieldName(index, 'id_front_photo_path')" x-model="guarantor.id_front_photo_path" />
                <input type="hidden" :name="fieldName(index, 'id_back_photo_path')" x-model="guarantor.id_back_photo_path" />
                <div x-show="guarantor.register_guarantor_id && (guarantor.photo_url || guarantor.id_front_url || guarantor.id_back_url)" class="border-t border-slate-200 pt-3">
                    <p class="mb-2 text-xs font-semibold uppercase tracking-wide text-slate-600">KYC on file</p>
                    <div class="grid grid-cols-1 gap-3 sm:grid-cols-3">
                        <template x-if="guarantor.photo_url">
                            <div><p class="mb-1 text-[11px] text-slate-500">Passport</p><img :src="guarantor.photo_url" alt="" class="max-h-28 rounded border border-slate-200 object-cover" loading="lazy" decoding="async" /></div>
                        </template>
                        <template x-if="guarantor.id_front_url">
                            <div><p class="mb-1 text-[11px] text-slate-500">ID front</p><img :src="guarantor.id_front_url" alt="" class="max-h-28 rounded border border-slate-200 object-cover" loading="lazy" decoding="async" /></div>
                        </template>
                        <template x-if="guarantor.id_back_url">
                            <div><p class="mb-1 text-[11px] text-slate-500">ID back</p><img :src="guarantor.id_back_url" alt="" class="max-h-28 rounded border border-slate-200 object-cover" loading="lazy" decoding="async" /></div>
                        </template>
                    </div>
                </div>
            </fieldset>

            <fieldset
                x-show="guarantor.capture_mode === 'past'"
                x-cloak
                class="m-0 min-w-0 space-y-3 border-0 p-0"
                :disabled="(guarantor.capture_mode || 'new') !== 'past'"
            >
                <div>
                    @include('loan.book.applications.partials.guarantor-searchable-picker', [
                        'pickerMode' => 'past',
                        'pickerLabel' => 'Reuse past guarantor',
                        'pickerPlaceholder' => 'Search this client’s past guarantors…',
                    ])
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4" x-show="guarantor.register_guarantor_id">
                    <div>
                        <label class="block text-xs font-semibold text-slate-600 mb-1">Full name</label>
                        <input
                            type="text"
                            class="w-full rounded-lg border-slate-200 text-sm"
                            x-model="guarantor.full_name"
                            :name="fieldName(index, 'full_name')"
                            autocomplete="name"
                            placeholder="e.g. Jane Wanjiku"
                        />
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-slate-600 mb-1">Phone</label>
                        <input
                            type="tel"
                            class="w-full rounded-lg border-slate-200 text-sm"
                            :class="fieldError(index, 'phone') ? 'border-rose-500 ring-rose-200' : ''"
                            x-model="guarantor.phone"
                            :name="fieldName(index, 'phone')"
                            data-loan-field-kind="phone_ke"
                            {!! KenyanFieldRules::htmlAttributeStringForKind(KenyanFieldRules::KIND_PHONE_KE) !!}
                            autocomplete="tel"
                            placeholder="e.g. 0712 345 678"
                            @input="onPhoneInput(index)"
                            @blur="onPhoneBlur(index)"
                        />
                        <p
                            x-show="fieldError(index, 'phone')"
                            x-text="fieldError(index, 'phone')"
                            data-guarantor-field-error
                            class="mt-1 text-xs text-rose-600"
                        ></p>
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-slate-600 mb-1">ID / registration</label>
                        <input
                            type="text"
                            class="w-full rounded-lg border-slate-200 text-sm"
                            :class="fieldError(index, 'id_number') ? 'border-rose-500 ring-rose-200' : ''"
                            x-model="guarantor.id_number"
                            :name="fieldName(index, 'id_number')"
                            data-loan-field-kind="national_id"
                            {!! KenyanFieldRules::htmlAttributeStringForKind(KenyanFieldRules::KIND_NATIONAL_ID) !!}
                            placeholder="e.g. 12345678"
                            @input="onIdInput(index)"
                            @blur="onIdBlur(index)"
                        />
                        <p
                            x-show="fieldError(index, 'id_number')"
                            x-text="fieldError(index, 'id_number')"
                            data-guarantor-field-error
                            class="mt-1 text-xs text-rose-600"
                        ></p>
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-slate-600 mb-1">Relationship to client</label>
                        <input type="text" class="w-full rounded-lg border-slate-200 text-sm" x-model="guarantor.relationship" :name="fieldName(index, 'relationship')" placeholder="e.g. spouse, sibling" />
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-slate-600 mb-1">Guarantee amount <span class="font-normal text-slate-400">(optional)</span></label>
                        <input type="number" min="0" step="0.01" class="w-full rounded-lg border-slate-200 text-sm" x-model="guarantor.guarantee_amount" :name="fieldName(index, 'guarantee_amount')" placeholder="e.g. 50000" />
                    </div>
                    <div class="md:col-span-2 flex items-center gap-2">
                        <input type="hidden" :name="fieldName(index, 'is_primary')" value="0" />
                        <input type="checkbox" class="rounded border-slate-300 text-[#2f4f4f] focus:ring-[#2f4f4f]" x-model="guarantor.is_primary" :name="fieldName(index, 'is_primary')" value="1" @change="onPrimaryChange(index)" />
                        <label class="text-xs font-semibold text-slate-700">{{ $unifiedAppraisal ? 'Primary' : 'Primary guarantor' }}</label>
                    </div>
                </div>
                <input type="hidden" :name="fieldName(index, 'photo_path')" x-model="guarantor.photo_path" />
                <input type="hidden" :name="fieldName(index, 'id_front_photo_path')" x-model="guarantor.id_front_photo_path" />
                <input type="hidden" :name="fieldName(index, 'id_back_photo_path')" x-model="guarantor.id_back_photo_path" />
                <div x-show="guarantor.register_guarantor_id && (guarantor.photo_url || guarantor.id_front_url || guarantor.id_back_url)" class="border-t border-slate-200 pt-3">
                    <p class="mb-2 text-xs font-semibold uppercase tracking-wide text-slate-600">KYC on file</p>
                    <div class="grid grid-cols-1 gap-3 sm:grid-cols-3">
                        <template x-if="guarantor.photo_url">
                            <div><p class="mb-1 text-[11px] text-slate-500">Passport</p><img :src="guarantor.photo_url" alt="" class="max-h-28 rounded border border-slate-200 object-cover" loading="lazy" decoding="async" /></div>
                        </template>
                        <template x-if="guarantor.id_front_url">
                            <div><p class="mb-1 text-[11px] text-slate-500">ID front</p><img :src="guarantor.id_front_url" alt="" class="max-h-28 rounded border border-slate-200 object-cover" loading="lazy" decoding="async" /></div>
                        </template>
                        <template x-if="guarantor.id_back_url">
                            <div><p class="mb-1 text-[11px] text-slate-500">ID back</p><img :src="guarantor.id_back_url" alt="" class="max-h-28 rounded border border-slate-200 object-cover" loading="lazy" decoding="async" /></div>
                        </template>
                    </div>
                </div>
            </fieldset>

            <fieldset
                x-show="guarantor.capture_mode === 'client'"
                x-cloak
                class="m-0 min-w-0 space-y-3 border-0 p-0"
                :disabled="(guarantor.capture_mode || 'new') !== 'client'"
            >
                <div>
                    @include('loan.book.applications.partials.guarantor-searchable-picker', [
                        'pickerMode' => 'client',
                        'pickerLabel' => 'Existing client',
                        'pickerPlaceholder' => 'Search name, phone or ID number…',
                        'pickerHint' => 'Only clients with loan arrears cannot be selected. Blocked clients are highlighted in orange.',
                    ])
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4" x-show="guarantor.loan_client_id">
                    <div>
                        <label class="block text-xs font-semibold text-slate-600 mb-1">Full name</label>
                        <input
                            type="text"
                            class="w-full rounded-lg border-slate-200 text-sm"
                            x-model="guarantor.full_name"
                            :name="fieldName(index, 'full_name')"
                            autocomplete="name"
                            placeholder="e.g. Jane Wanjiku"
                        />
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-slate-600 mb-1">Phone</label>
                        <input
                            type="tel"
                            class="w-full rounded-lg border-slate-200 text-sm"
                            :class="fieldError(index, 'phone') ? 'border-rose-500 ring-rose-200' : ''"
                            x-model="guarantor.phone"
                            :name="fieldName(index, 'phone')"
                            data-loan-field-kind="phone_ke"
                            {!! KenyanFieldRules::htmlAttributeStringForKind(KenyanFieldRules::KIND_PHONE_KE) !!}
                            autocomplete="tel"
                            placeholder="e.g. 0712 345 678"
                            @input="onPhoneInput(index)"
                            @blur="onPhoneBlur(index)"
                        />
                        <p
                            x-show="fieldError(index, 'phone')"
                            x-text="fieldError(index, 'phone')"
                            data-guarantor-field-error
                            class="mt-1 text-xs text-rose-600"
                        ></p>
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-slate-600 mb-1">ID / registration</label>
                        <input
                            type="text"
                            class="w-full rounded-lg border-slate-200 text-sm"
                            :class="fieldError(index, 'id_number') ? 'border-rose-500 ring-rose-200' : ''"
                            x-model="guarantor.id_number"
                            :name="fieldName(index, 'id_number')"
                            data-loan-field-kind="national_id"
                            {!! KenyanFieldRules::htmlAttributeStringForKind(KenyanFieldRules::KIND_NATIONAL_ID) !!}
                            placeholder="e.g. 12345678"
                            @input="onIdInput(index)"
                            @blur="onIdBlur(index)"
                        />
                        <p
                            x-show="fieldError(index, 'id_number')"
                            x-text="fieldError(index, 'id_number')"
                            data-guarantor-field-error
                            class="mt-1 text-xs text-rose-600"
                        ></p>
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-slate-600 mb-1">Relationship to client</label>
                        <input type="text" class="w-full rounded-lg border-slate-200 text-sm" x-model="guarantor.relationship" :name="fieldName(index, 'relationship')" placeholder="e.g. spouse, sibling" />
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-slate-600 mb-1">Guarantee amount <span class="font-normal text-slate-400">(optional)</span></label>
                        <input type="number" min="0" step="0.01" class="w-full rounded-lg border-slate-200 text-sm" x-model="guarantor.guarantee_amount" :name="fieldName(index, 'guarantee_amount')" placeholder="e.g. 50000" />
                    </div>
                    <div class="md:col-span-2 flex items-center gap-2">
                        <input type="hidden" :name="fieldName(index, 'is_primary')" value="0" />
                        <input type="checkbox" class="rounded border-slate-300 text-[#2f4f4f] focus:ring-[#2f4f4f]" x-model="guarantor.is_primary" :name="fieldName(index, 'is_primary')" value="1" @change="onPrimaryChange(index)" />
                        <label class="text-xs font-semibold text-slate-700">{{ $unifiedAppraisal ? 'Primary' : 'Primary guarantor' }}</label>
                    </div>
                </div>
                <input type="hidden" :name="fieldName(index, 'photo_path')" x-model="guarantor.photo_path" />
                <input type="hidden" :name="fieldName(index, 'id_front_photo_path')" x-model="guarantor.id_front_photo_path" />
                <input type="hidden" :name="fieldName(index, 'id_back_photo_path')" x-model="guarantor.id_back_photo_path" />
                <div x-show="guarantor.loan_client_id && (guarantor.photo_url || guarantor.id_front_url || guarantor.id_back_url)" class="border-t border-slate-200 pt-3">
                    <p class="mb-2 text-xs font-semibold uppercase tracking-wide text-slate-600">KYC on file</p>
                    <div class="grid grid-cols-1 gap-3 sm:grid-cols-3">
                        <template x-if="guarantor.photo_url">
                            <div><p class="mb-1 text-[11px] text-slate-500">Passport</p><img :src="guarantor.photo_url" alt="" class="max-h-28 rounded border border-slate-200 object-cover" loading="lazy" decoding="async" /></div>
                        </template>
                        <template x-if="guarantor.id_front_url">
                            <div><p class="mb-1 text-[11px] text-slate-500">ID front</p><img :src="guarantor.id_front_url" alt="" class="max-h-28 rounded border border-slate-200 object-cover" loading="lazy" decoding="async" /></div>
                        </template>
                        <template x-if="guarantor.id_back_url">
                            <div><p class="mb-1 text-[11px] text-slate-500">ID back</p><img :src="guarantor.id_back_url" alt="" class="max-h-28 rounded border border-slate-200 object-cover" loading="lazy" decoding="async" /></div>
                        </template>
                    </div>
                </div>
            </fieldset>

            <fieldset
                x-show="guarantor.capture_mode === 'new'"
                class="m-0 grid min-w-0 grid-cols-1 gap-4 border-0 p-0 md:grid-cols-2"
                :disabled="(guarantor.capture_mode || 'new') !== 'new'"
            >
                <div>
                    <label class="block text-xs font-semibold text-slate-600 mb-1">Full name</label>
                    <input type="text" class="w-full rounded-lg border-slate-200 text-sm" x-model="guarantor.full_name" :name="fieldName(index, 'full_name')" autocomplete="name" placeholder="e.g. Jane Wanjiku" />
                </div>
                <div>
                    <label class="block text-xs font-semibold text-slate-600 mb-1">Phone</label>
                    <input
                        type="tel"
                        class="w-full rounded-lg border-slate-200 text-sm"
                        :class="fieldError(index, 'phone') ? 'border-rose-500 ring-rose-200' : ''"
                        x-model="guarantor.phone"
                        :name="fieldName(index, 'phone')"
                        data-loan-field-kind="phone_ke"
                        {!! KenyanFieldRules::htmlAttributeStringForKind(KenyanFieldRules::KIND_PHONE_KE) !!}
                        autocomplete="tel"
                        placeholder="e.g. 0712 345 678"
                        @input="onPhoneInput(index)"
                        @blur="onPhoneBlur(index)"
                    />
                    <p
                        x-show="fieldError(index, 'phone')"
                        x-text="fieldError(index, 'phone')"
                        data-guarantor-field-error
                        class="mt-1 text-xs text-rose-600"
                    ></p>
                </div>
                <div>
                    <label class="block text-xs font-semibold text-slate-600 mb-1">ID / registration</label>
                    <input
                        type="text"
                        class="w-full rounded-lg border-slate-200 text-sm"
                        :class="fieldError(index, 'id_number') ? 'border-rose-500 ring-rose-200' : ''"
                        x-model="guarantor.id_number"
                        :name="fieldName(index, 'id_number')"
                        data-loan-field-kind="national_id"
                        {!! KenyanFieldRules::htmlAttributeStringForKind(KenyanFieldRules::KIND_NATIONAL_ID) !!}
                        placeholder="e.g. 12345678"
                        @input="onIdInput(index)"
                        @blur="onIdBlur(index)"
                    />
                    <p
                        x-show="fieldError(index, 'id_number')"
                        x-text="fieldError(index, 'id_number')"
                        data-guarantor-field-error
                        class="mt-1 text-xs text-rose-600"
                    ></p>
                </div>
                <div>
                    <label class="block text-xs font-semibold text-slate-600 mb-1">Relationship to client</label>
                    <input type="text" class="w-full rounded-lg border-slate-200 text-sm" x-model="guarantor.relationship" :name="fieldName(index, 'relationship')" placeholder="e.g. spouse, sibling" />
                </div>
                <div>
                    <label class="block text-xs font-semibold text-slate-600 mb-1">Guarantee amount <span class="font-normal text-slate-400">(optional)</span></label>
                    <input type="number" min="0" step="0.01" class="w-full rounded-lg border-slate-200 text-sm" x-model="guarantor.guarantee_amount" :name="fieldName(index, 'guarantee_amount')" placeholder="e.g. 50000" />
                </div>
                <div class="md:col-span-2 flex items-center gap-2">
                    <input type="hidden" :name="fieldName(index, 'is_primary')" value="0" />
                    <input
                        type="checkbox"
                        class="rounded border-slate-300 text-[#2f4f4f] focus:ring-[#2f4f4f]"
                        x-model="guarantor.is_primary"
                        :name="fieldName(index, 'is_primary')"
                        value="1"
                        @change="onPrimaryChange(index)"
                    />
                    <label class="text-xs font-semibold text-slate-700">{{ $unifiedAppraisal ? 'Primary' : 'Primary guarantor' }}</label>
                </div>
            </fieldset>
            @if ($tabWorkspace)
            <div class="flex justify-end pt-1">
                <button type="button" class="loan-ent-btn loan-ent-btn--primary loan-ent-btn--sm" @click="goCaptureNext()">Continue to location & photos</button>
            </div>
            </div>
            <div x-show="captureStep === 2" x-cloak class="space-y-4">
            @endif

            <div
                id="appraisal-guarantor-location"
                class="md:col-span-2 rounded-lg border border-dashed border-slate-200 bg-slate-50/70 p-3 space-y-2"
                data-appraisal-anchor="appraisal-guarantor-location"
            >
                <div class="flex flex-wrap items-center justify-between gap-2">
                    <div>
                        <p class="text-xs font-semibold text-slate-700">
                            Guarantor location
                            <span
                                class="font-normal text-slate-400"
                                x-text="locationRequiredForRow(guarantor) ? '' : '(optional)'"
                            ></span>
                            <span class="text-rose-600" x-show="locationRequiredForRow(guarantor)">*</span>
                        </p>
                        <p class="text-[11px] text-slate-500" x-show="locationRequiredForRow(guarantor)" x-cloak>
                            Address or GPS required before completing appraisal.
                        </p>
                    </div>
                    <div class="flex flex-wrap gap-2">
                        <button
                            type="button"
                            class="inline-flex items-center gap-1.5 rounded-lg border border-teal-200 bg-teal-50 px-3 py-1.5 text-xs font-semibold text-teal-800 hover:bg-teal-100 disabled:cursor-wait disabled:opacity-60"
                            @click="captureGuarantorGps(index)"
                            :disabled="guarantor.gps_loading"
                            :aria-busy="guarantor.gps_loading ? 'true' : 'false'"
                        >
                            <span class="loan-submit-spinner !border-teal-300 !border-t-teal-800" x-show="guarantor.gps_loading" aria-hidden="true"></span>
                            <span x-show="!guarantor.gps_loading">Capture GPS</span>
                            <span x-show="guarantor.gps_loading">Reading GPS…</span>
                        </button>
                        <button
                            type="button"
                            class="inline-flex items-center rounded-lg border border-slate-200 bg-white px-3 py-1.5 text-xs font-semibold text-slate-700 hover:bg-slate-50"
                            @click="clearGuarantorGps(index)"
                            x-show="guarantor.latitude && guarantor.longitude"
                        >
                            Clear GPS
                        </button>
                    </div>
                </div>
                <textarea rows="2" class="w-full rounded-lg border-slate-200 text-sm" x-model="guarantor.address" :name="fieldName(index, 'address')" placeholder="Physical address (optional)"></textarea>
                <div class="mt-3 grid grid-cols-1 gap-3 md:grid-cols-2">
                    <div>
                        <label class="block text-xs font-semibold text-slate-600 mb-1">Landmark</label>
                        <input type="text" class="w-full rounded-lg border-slate-200 text-sm" x-model="guarantor.landmark" :name="fieldName(index, 'landmark')" placeholder="e.g. Near market" />
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-slate-600 mb-1">Residential status</label>
                        <select class="w-full rounded-lg border-slate-200 text-sm" x-model="guarantor.residential_status" :name="fieldName(index, 'residential_status')">
                            <option value="">— Select —</option>
                            <option value="own">Own</option>
                            <option value="rent">Rent</option>
                            <option value="family">Family</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-slate-600 mb-1">Gender</label>
                        <select class="w-full rounded-lg border-slate-200 text-sm" x-model="guarantor.gender" :name="fieldName(index, 'gender')">
                            <option value="">— Select —</option>
                            <option value="male">Male</option>
                            <option value="female">Female</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-slate-600 mb-1">Marital status</label>
                        <select class="w-full rounded-lg border-slate-200 text-sm" x-model="guarantor.marital_status" :name="fieldName(index, 'marital_status')">
                            <option value="">— Select —</option>
                            <option value="married">Married</option>
                            <option value="single">Single</option>
                            <option value="separated_divorced">Separated / divorced</option>
                            <option value="other">Other</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-slate-600 mb-1">Date of birth</label>
                        <input type="date" class="w-full rounded-lg border-slate-200 text-sm" x-model="guarantor.date_of_birth" :name="fieldName(index, 'date_of_birth')" />
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-slate-600 mb-1">Title</label>
                        <select class="w-full rounded-lg border-slate-200 text-sm" x-model="guarantor.title" :name="fieldName(index, 'title')">
                            <option value="">— Select —</option>
                            <option value="mr">Mr</option>
                            <option value="mrs">Mrs</option>
                            <option value="ms">Ms</option>
                        </select>
                    </div>
                </div>
                <input type="hidden" :name="fieldName(index, 'latitude')" :value="guarantor.latitude ?? ''">
                <input type="hidden" :name="fieldName(index, 'longitude')" :value="guarantor.longitude ?? ''">
                <input type="hidden" :name="fieldName(index, 'gps_accuracy_meters')" :value="guarantor.gps_accuracy_meters ?? ''">
                <input type="hidden" :name="fieldName(index, 'gps_source')" :value="guarantor.gps_source || ''">
                <p class="text-[11px] text-slate-600" x-show="guarantor.latitude && guarantor.longitude">
                    Coordinates:
                    <span class="font-mono" x-text="guarantor.latitude + ', ' + guarantor.longitude"></span>
                    <template x-if="mapsUrl(guarantor)">
                        <a :href="mapsUrl(guarantor)" target="_blank" rel="noopener" class="ml-2 font-semibold text-teal-700 hover:underline">Open map</a>
                    </template>
                    <span class="text-slate-400" x-show="guarantor.gps_accuracy_meters"> · ± <span x-text="guarantor.gps_accuracy_meters"></span> m</span>
                </p>
                <p class="text-[11px] font-medium text-rose-700" x-show="guarantor.gps_error" x-text="guarantor.gps_error"></p>
            </div>

            <fieldset
                x-show="guarantor.capture_mode === 'new'"
                class="m-0 min-w-0 space-y-0 border-0 border-t border-slate-200 p-0 pt-3"
                :disabled="(guarantor.capture_mode || 'new') !== 'new'"
            >
                <p class="mb-1 text-xs font-semibold uppercase tracking-wide text-slate-600">
                    KYC photos
                    <span class="text-rose-600" x-show="photosRequiredForRow(guarantor)">*</span>
                </p>
                <div class="grid grid-cols-1 gap-3 sm:grid-cols-3">
                    <x-loan.kyc-photo-capture
                        label="Passport photo"
                        facing-mode="user"
                        name-alpine="fieldName(index, 'photo')"
                        current-url-alpine="guarantor.photo_url"
                        :show-empty-hint="false"
                    />
                    <x-loan.kyc-photo-capture
                        label="ID front"
                        facing-mode="environment"
                        name-alpine="fieldName(index, 'id_front_photo')"
                        current-url-alpine="guarantor.id_front_url"
                        :show-empty-hint="false"
                    />
                    <x-loan.kyc-photo-capture
                        label="ID back"
                        facing-mode="environment"
                        name-alpine="fieldName(index, 'id_back_photo')"
                        current-url-alpine="guarantor.id_back_url"
                        :show-empty-hint="false"
                    />
                </div>
            </fieldset>

            <div class="flex flex-wrap items-center gap-3 text-xs">
                <span class="inline-flex items-center rounded-full px-2 py-0.5 font-semibold" :class="guarantor.is_client ? 'bg-teal-100 text-teal-800' : 'bg-slate-100 text-slate-600'">
                    Is Client: <span class="ml-1" x-text="guarantor.is_client ? 'Yes' : 'No'"></span>
                </span>
                <span x-show="guarantor.matched_client_name" class="text-slate-600" x-text="guarantor.matched_client_name ? ('Matched: ' + guarantor.matched_client_name) : ''"></span>
            </div>

            <template x-if="guarantor.warnings && guarantor.warnings.length">
                <div class="rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-900 space-y-1">
                    <template x-for="(warning, wIndex) in guarantor.warnings" :key="wIndex">
                        <p x-text="warning"></p>
                    </template>
                </div>
            </template>
            <p x-show="guarantor.blocked" class="text-xs font-semibold text-rose-700">This person cannot be selected.</p>

            @if ($tabWorkspace)
            <div class="flex flex-wrap justify-between gap-2 pt-1">
                <button type="button" class="loan-ent-btn loan-ent-btn--secondary loan-ent-btn--sm" @click="goCaptureBack()">Back to details</button>
                <p class="text-[11px] font-semibold text-slate-500 self-center">Then Continue below to confirm & save.</p>
            </div>
            </div>
            @endif

            @if ($unifiedAppraisal)
            <div class="border-t border-slate-200 pt-3 space-y-3">
                <div class="flex flex-wrap items-center justify-between gap-2">
                    <p class="text-xs font-semibold uppercase tracking-wide text-slate-600">Security</p>
                    <div class="flex flex-wrap items-center gap-2">
                        @if ($unifiedAppraisal && ($pastGuarantorCollateral ?? []) !== [])
                            <div class="flex flex-wrap items-center gap-1.5" x-show="pastGuarantorCollateralSources.length" x-cloak>
                                <select x-model="selectedPastGuarantorSecurityKey" class="rounded border-slate-200 text-xs max-w-[14rem]">
                                    <option value="">Use past security…</option>
                                    <template x-for="source in pastGuarantorCollateralSources" :key="source.key">
                                        <option :value="source.key" x-text="source.guarantor_name + ' · ' + source.source_label"></option>
                                    </template>
                                </select>
                                <button type="button" @click="importPastGuarantorSecurity(index)" :disabled="!selectedPastGuarantorSecurityKey" class="loan-ent-btn loan-ent-btn--outline loan-ent-btn--sm">
                                    Import items
                                </button>
                            </div>
                        @endif
                        <button type="button" @click="addSecurityItem(index)" 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 item') }}
                    </button>
                </div>

                <div x-show="!guarantor.show_security_editor" x-cloak>
                    <x-loan.editable-table-empty
                        title="No security items added"
                    >
                        <x-slot:action>
                            <button type="button" @click="addSecurityItem(index)" 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 item') }}
                            </button>
                        </x-slot:action>
                    </x-loan.editable-table-empty>
                </div>

                <div class="loan-appraisal-table-scroll overflow-x-auto rounded-md border border-slate-200" x-show="guarantor.show_security_editor" 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>
                                <th class="w-16 px-2 py-2">Actions</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100">
                            <template x-for="(sec, sIndex) in guarantor.security_items" :key="'sec-'+index+'-'+sIndex">
                                <tr>
                                    <td class="px-2 py-1.5" data-label="Item">
                                        <input
                                            type="text"
                                            x-model="sec.item"
                                            :name="fieldNameNested(index, 'security_items', sIndex, 'item')"
                                            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
                                            type="text"
                                            x-model="sec.description"
                                            :name="fieldNameNested(index, 'security_items', sIndex, 'description')"
                                            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
                                            type="text"
                                            x-model="sec.identification"
                                            :name="fieldNameNested(index, 'security_items', sIndex, 'identification')"
                                            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"
                                            x-model="sec.value"
                                            :name="fieldNameNested(index, 'security_items', sIndex, 'value')"
                                            class="loan-appraisal-table__input w-full min-w-[5rem] text-right"
                                            placeholder="0.00"
                                        >
                                    </td>
                                    <td class="loan-appraisal-table__actions px-2 py-1.5 text-center" data-label="Remove">
                                        <button
                                            type="button"
                                            @click="removeSecurityItem(index, sIndex)"
                                            class="loan-appraisal-remove-btn loan-appraisal-remove-btn--icon"
                                            title="Remove item"
                                            aria-label="Remove security item"
                                            x-show="guarantor.security_items.length > 1"
                                        >&times;</button>
                                    </td>
                                </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="guarantorSecurityTotalLabel(index)"></dd>
                    </div>
                </dl>
            </div>
            <div class="border-t border-slate-200 pt-3">
                <div
                    x-data="loanApplicationSignature({
                        existingSignature: guarantor.existing_signature_url,
                        signedAt: guarantor.guarantor_signed_at,
                        suggestedName: guarantor.full_name,
                        initialOpen: Boolean(guarantor.existing_signature_url),
                    })"
                    class="space-y-2"
                    data-signature-panel
                    data-loan-application-signature
                    :class="locked && 'loan-signature-panel--locked'"
                >
                    <p class="flex items-center gap-2 text-xs font-semibold uppercase tracking-wide text-slate-600">
                        Signature
                        <span x-show="locked" x-cloak class="inline-flex h-5 w-5 items-center justify-center rounded-full bg-emerald-100 text-emerald-700" aria-hidden="true">
                            <svg class="h-3 w-3" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" /></svg>
                        </span>
                    </p>
                    <label class="block text-xs text-slate-600">Signed at
                        <input
                            type="datetime-local"
                            class="mt-0.5 w-full rounded border-slate-200 text-sm"
                            x-model="signedAt"
                            @if ($unifiedAppraisal)
                                name="guarantors[0][guarantor_signed_at]"
                            @else
                                :name="fieldName(index, 'guarantor_signed_at')"
                            @endif
                            :readonly="locked"
                            :disabled="!locked"
                            :required="locked"
                        >
                    </label>
                    <div class="overflow-hidden rounded-md border border-slate-300 bg-white" data-signature-canvas-wrap>
                        <canvas x-ref="canvas" class="loan-appraisal-sig-canvas loan-appraisal-sig-canvas--guarantor block w-full touch-none"
                            :class="locked ? 'cursor-default' : 'cursor-crosshair'"
                            @mousedown.prevent.stop="startDraw($event)" @mousemove="draw($event)" @mouseup.prevent.stop="endDraw()" @mouseleave="endDraw()"
                            @touchstart.prevent.stop="startDraw($event)" @touchmove.prevent.stop="draw($event)" @touchend.prevent.stop="endDraw()"></canvas>
                    </div>
                    <input
                        type="hidden"
                        @if ($unifiedAppraisal)
                            name="guarantors[0][guarantor_signature]"
                        @else
                            :name="fieldName(index, 'guarantor_signature')"
                        @endif
                        :value="signatureData"
                        :disabled="!locked"
                    >
                    @include('loan.book.applications.partials.signature-pad-actions')
                </div>
            </div>
            <div class="flex justify-stretch sm:justify-end pt-2 loan-appraisal-manual-save">
                <button type="button" data-appraisal-manual-save class="loan-ent-btn loan-ent-btn--primary w-full sm:w-auto inline-flex items-center justify-center gap-1.5">
                    <span data-save-label>Save guarantor</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">
                        <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd"/></svg>
                        Saved
                    </span>
                </button>
            </div>
            @endif
        </div>
        @if ($unifiedAppraisal)
        </form>
        @endif
    </template>
</section>