@php
    use App\Support\LoanBook\SignatureTimestamp;

    $officerSignatures = app(\App\Services\LoanBook\Appraisal\LoanBookAppraisalOfficerSignatureService::class);
    $existingSignature = $officerSignatures->signatureDataUri($appraisal);
    $signedAt = SignatureTimestamp::forInput(
        old('officer_signed_at', $appraisal?->officer_signed_at)
    );
    $suggestedName = old(
        'officer_signature_name',
        $appraisal?->assignedOfficer?->name
            ?? auth()->user()?->name
            ?? ''
    );
    $showSignature = $errors->has('officer_signature')
        || $errors->has('officer_signed_at')
        || filled($existingSignature)
        || filled(old('officer_signature'))
        || $canEdit;
    $signatureConfig = [
        'existingSignature' => $existingSignature,
        'signedAt' => (string) $signedAt,
        'suggestedName' => (string) $suggestedName,
        'initialOpen' => $showSignature,
    ];
    $readOnly = ! $canEdit || ($appraisal?->isOfficerComplete() ?? false);
    $sigStatus = filled($existingSignature) ? 'Signed' : ($canEdit ? 'Required' : null);
    $saveFormId = $saveFormId ?? null;
@endphp

<div
    id="appraisal-officer-signature"
    class="scroll-mt-24 h-full"
    data-loan-application-signature
    data-officer-has-signature="{{ filled($existingSignature) ? '1' : '0' }}"
    @unless ($readOnly)
        x-data="loanApplicationSignature(@js($signatureConfig))"
    @endunless
>
    <x-loan.signature-panel-shell
        class="h-full"
        title="Loan officer signature"
        description="Draw to sign, then click Submit. Save before completing the appraisal."
        :status="$sigStatus"
        :disabled="$readOnly"
    >
        @unless ($readOnly)
            <x-slot:actions>
                <span
                    x-show="locked"
                    x-cloak
                    class="inline-flex items-center gap-1 rounded-full border border-emerald-200 bg-emerald-50 px-2 py-0.5 text-[11px] font-semibold text-emerald-800"
                >
                    <svg class="h-3.5 w-3.5" 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>
                    Submitted
                </span>
                <button
                    type="button"
                    class="loan-ent-btn loan-ent-btn--secondary loan-ent-btn--sm"
                    @click="toggleOpen()"
                    x-text="open ? 'Hide signature' : 'Open signature'"
                ></button>
            </x-slot:actions>
        @endunless

        @if ($readOnly)
            <x-slot:date>
                <p class="loan-ent-label">Signed at</p>
                <p class="mt-1 text-sm text-slate-800">{{ \App\Support\LoanBook\SignatureTimestamp::display($appraisal?->officer_signed_at) }}</p>
            </x-slot:date>
            <x-slot:signature>
                <div class="overflow-hidden rounded-md border border-slate-200 bg-white p-2">
                    @if ($existingSignature)
                        <img src="{{ $existingSignature }}" alt="Loan officer signature" class="max-h-28 max-w-full">
                    @else
                        <p class="text-xs text-slate-500">Not captured</p>
                    @endif
                </div>
            </x-slot:signature>
        @else
            <x-slot:date>
                <div x-show="open" x-cloak>
                    <label for="officer_signed_at" class="loan-ent-label">Signed at</label>
                    <input
                        id="officer_signed_at"
                        name="officer_signed_at"
                        type="datetime-local"
                        class="loan-ent-input mt-1"
                        x-model="signedAt"
                        :readonly="locked"
                        :disabled="!locked"
                        :required="locked"
                    />
                    @error('officer_signed_at')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                </div>
            </x-slot:date>

            <x-slot:signature>
                <div x-show="open" x-cloak class="space-y-2" data-signature-panel :class="locked && 'loan-signature-panel--locked'">
                    <div class="hidden" aria-hidden="true">
                        <input type="text" x-model="typedName" tabindex="-1" autocomplete="off">
                    </div>

                    <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 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>

                    @include('loan.book.applications.partials.signature-pad-actions', ['clearLabel' => 'Clear signature'])
                    @error('officer_signature')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                    <input type="hidden" name="officer_signature" :value="signatureData" :disabled="!locked">
                </div>
            </x-slot:signature>

            <x-slot:footer>
                <div class="flex justify-stretch sm:justify-end loan-appraisal-manual-save">
                    <button
                        type="button"
                        data-appraisal-manual-save
                        @if ($saveFormId) form="{{ $saveFormId }}" @endif
                        class="loan-ent-btn loan-ent-btn--primary w-full sm:w-auto"
                    >
                        Save signature
                    </button>
                </div>
            </x-slot:footer>
        @endif
    </x-loan.signature-panel-shell>
</div>