@php
    use App\Support\Loan\ClientLocationPolicy;

    $inFormModal = request()->header('Turbo-Frame') === 'loan-form-modal';
    $locationReadOnly = $loan_client->kind === \App\Models\LoanClient::KIND_CLIENT
        && $loan_client->hasRegisteredCoordinates()
        && ! ClientLocationPolicy::canChangeExistingClientCoordinates(auth()->user(), $loan_client);
@endphp

<x-loan.modal-form
    :title="$loan_client->kind === 'lead' ? 'Edit lead' : 'Edit client'"
    :maxWidth="$inFormModal ? '4xl' : '5xl'"
>
    <x-slot name="actions">
        @if ($loan_client->kind === \App\Models\LoanClient::KIND_CLIENT)
            <a href="{{ route('loan.clients.show', $loan_client) }}" data-turbo-frame="loan-workspace-content" class="inline-flex items-center justify-center rounded-lg border border-teal-200 bg-teal-50 px-4 py-2 text-sm font-semibold text-teal-800 hover:bg-teal-100 transition-colors">
                Client 360
            </a>
        @endif
        @if ($loan_client->kind === 'lead')
            <a href="{{ $loan_client->loanPortalProfileUrl() }}" class="inline-flex items-center justify-center rounded-lg border border-slate-200 bg-white px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50 transition-colors">
                Lead workspace
            </a>
        @endif
        <a href="{{ $loan_client->kind === 'lead' ? route('loan.clients.leads') : route('loan.clients.index') }}" data-turbo-frame="loan-workspace-content" class="inline-flex items-center justify-center rounded-lg border border-slate-200 bg-white px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50 transition-colors">
            Back to list
        </a>
    </x-slot>

    @include('loan.clients.partials.identity-flashes', ['contextClient' => $loan_client])

    @if ($loan_client->kind === \App\Models\LoanClient::KIND_CLIENT && $loan_client->isDraft())
        <div class="mb-4 rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900">
            This client is saved as a <strong>draft</strong>. Complete the required details and save to activate the profile, or keep saving as draft while you gather information.
        </div>
    @endif

    <div
        @class([
            'grid items-start gap-6',
            'mx-auto max-w-3xl grid-cols-1' => $inFormModal,
            'max-w-7xl grid-cols-1 xl:grid-cols-[minmax(0,1fr)_320px]' => ! $inFormModal,
        ])
        x-data="clientFormPreview()"
    >
            <div class="bg-white border border-slate-200 rounded-xl shadow-sm p-6 sm:p-8">
            <form
                method="post"
                action="{{ route('loan.clients.update', $loan_client) }}"
                class="space-y-5"
                enctype="multipart/form-data"
                data-loan-validate-form
                data-skip-requirement-markers
                @if ($loan_client->kind === \App\Models\LoanClient::KIND_CLIENT && ! $loan_client->isDraft() && ($operationalStatusForm['can_edit'] ?? false))
                    x-data="{ submitting: false }"
                    @submit.prevent="
                        if (submitting) return;
                        const statusSelect = document.getElementById('operational_status');
                        const reasonInput = document.getElementById('status_change_reason');
                        const initial = statusSelect?.dataset.initial ?? '';
                        const next = statusSelect?.value ?? initial;
                        if (! statusSelect || next === initial) {
                            $el.submit();
                            return;
                        }
                        const result = await (window.swalPrompt ? window.swalPrompt({
                            title: 'Change client status?',
                            input: 'textarea',
                            inputPlaceholder: 'Reason for this status change…',
                            inputAttributes: { 'aria-label': 'Status change reason' },
                            confirmButtonText: 'Save status',
                            inputValidator: (value) => {
                                if (! value || ! String(value).trim()) {
                                    return 'A reason is required';
                                }
                            },
                        }) : Promise.resolve({ isConfirmed: false }));
                        if (! result.isConfirmed) return;
                        if (reasonInput) reasonInput.value = String(result.value).trim();
                        submitting = true;
                        $el.submit();
                    "
                @endif
            >
                @csrf
                @method('patch')
                @if (filled($returnUrl ?? null))
                    <input type="hidden" name="return_url" value="{{ $returnUrl }}">
                @endif

                <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
                    <div class="sm:col-span-2">
                        <x-input-label for="client_number" value="Client / lead number" />
                        <x-text-input id="client_number" name="client_number" type="text" class="mt-1 block w-full bg-slate-50 text-slate-600" :value="old('client_number', $loan_client->client_number)" required readonly autocomplete="off" />
                        <p class="mt-1 text-xs text-slate-500">Auto-assigned ID (cannot be changed).</p>
                        <x-input-error class="mt-2" :messages="$errors->get('client_number')" />
                    </div>
                    <div>
                        <x-input-label for="first_name" value="{{ ($biodataLabels['full_name'] ?? 'Name') }} (First name)" />
                        <x-text-input id="first_name" name="first_name" type="text" class="mt-1 block w-full" :value="old('first_name', $loan_client->first_name)" required />
                        <x-input-error class="mt-2" :messages="$errors->get('first_name')" />
                    </div>
                    <div>
                        <x-input-label for="last_name" value="{{ ($biodataLabels['full_name'] ?? 'Name') }} (Last name)" />
                        <x-text-input id="last_name" name="last_name" type="text" class="mt-1 block w-full" :value="old('last_name', $loan_client->last_name)" required />
                        <x-input-error class="mt-2" :messages="$errors->get('last_name')" />
                    </div>
                    <div>
                        <x-input-label for="phone" value="{{ $biodataLabels['phone'] ?? 'Client Contact' }}" />
                        <x-phone-input id="phone" name="phone" :value="old('phone', $loan_client->phone)" />
                        <x-input-error class="mt-2" :messages="$errors->get('phone')" />
                    </div>
                    <div>
                        <x-input-label for="email" value="Email" />
                        <x-text-input id="email" name="email" type="email" class="mt-1 block w-full" :value="old('email', $loan_client->email)" />
                        <x-input-error class="mt-2" :messages="$errors->get('email')" />
                    </div>
                    <div>
                        <x-input-label for="id_number" value="{{ $biodataLabels['id_number'] ?? 'Idno' }}" />
                        <x-text-input id="id_number" name="id_number" type="text" class="mt-1 block w-full" :value="old('id_number', $loan_client->id_number)" />
                        <x-input-error class="mt-2" :messages="$errors->get('id_number')" />
                    </div>
                    <div>
                        <x-input-label for="gender" value="{{ $biodataLabels['gender'] ?? 'Gender' }}" />
                        <select id="gender" name="gender" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            <option value="">— Select —</option>
                            @foreach (['male' => 'Male', 'female' => 'Female', 'other' => 'Other'] as $value => $label)
                                <option value="{{ $value }}" @selected(old('gender', $loan_client->gender) === $value)>{{ $label }}</option>
                            @endforeach
                        </select>
                        <x-input-error class="mt-2" :messages="$errors->get('gender')" />
                    </div>
                    <div>
                        <x-input-label for="next_of_kin_contact" value="{{ $biodataLabels['next_of_kin_contact'] ?? 'Kin Contact' }}" />
                        <x-text-input id="next_of_kin_contact" name="next_of_kin_contact" type="text" class="mt-1 block w-full" :value="old('next_of_kin_contact', $loan_client->next_of_kin_contact)" />
                        <x-input-error class="mt-2" :messages="$errors->get('next_of_kin_contact')" />
                    </div>
                    <div>
                        <x-input-label for="next_of_kin_name" value="{{ $biodataLabels['next_of_kin_name'] ?? 'Next Of Kin' }}" />
                        <x-text-input id="next_of_kin_name" name="next_of_kin_name" type="text" class="mt-1 block w-full" :value="old('next_of_kin_name', $loan_client->next_of_kin_name)" />
                        <x-input-error class="mt-2" :messages="$errors->get('next_of_kin_name')" />
                    </div>
                    @include('loan.clients.partials.spouse-fields', ['client' => $loan_client])
                    <div>
                        @include('loan.clients.partials.branch-select-with-modal', [
                            'fieldId' => 'loan_branch_id',
                            'selectedBranchId' => old('loan_branch_id', $loan_client->loan_branch_id),
                            'directoryBranches' => $directoryBranches ?? collect(),
                            'label' => 'Branch',
                            'placeholder' => 'Select branch...',
                        ])
                    </div>
                    <div class="sm:col-span-2">
                        <x-input-label for="address" value="Address" />
                        <x-textarea-input id="address" name="address" rows="2" class="mt-1 block w-full">{{ old('address', $loan_client->address) }}</x-textarea-input>
                        <x-input-error class="mt-2" :messages="$errors->get('address')" />
                    </div>
                    <div id="gps" class="sm:col-span-2 scroll-mt-24">
                        <x-loan.geo-location-pin
                            :latitude="old('latitude', $loan_client->latitude)"
                            :longitude="old('longitude', $loan_client->longitude)"
                            :accuracy="old('gps_accuracy_meters', $loan_client->gps_accuracy_meters)"
                            :source="old('gps_source', $loan_client->gps_source)"
                            label="Pin business / home location"
                            :readOnly="$locationReadOnly"
                            :autoCaptureGps="! $loan_client->hasRegisteredCoordinates()"
                        />
                    </div>
                    <x-loan.kyc-photo-capture
                        name="client_photo"
                        id="client_photo"
                        :label="$biodataLabels['client_photo'] ?? 'Client Photo'"
                        facing-mode="user"
                        :current-url="$loan_client->client_photo_path ? $loan_client->kycImageUrl($loan_client->client_photo_path) : null"
                        :error-messages="$errors->get('client_photo')"
                    />
                    <x-loan.kyc-photo-capture
                        name="id_back_photo"
                        id="id_back_photo"
                        :label="$biodataLabels['id_back_photo'] ?? 'Id Back Photo'"
                        facing-mode="environment"
                        :current-url="$loan_client->id_back_photo_path ? $loan_client->kycImageUrl($loan_client->id_back_photo_path) : null"
                        :error-messages="$errors->get('id_back_photo')"
                    />
                    <x-loan.kyc-photo-capture
                        name="id_front_photo"
                        id="id_front_photo"
                        wrapper-class="sm:col-span-2"
                        :label="$biodataLabels['id_front_photo'] ?? 'Id Front Photo'"
                        facing-mode="environment"
                        :current-url="$loan_client->id_front_photo_path ? $loan_client->kycImageUrl($loan_client->id_front_photo_path) : null"
                        :error-messages="$errors->get('id_front_photo')"
                    />
                    @include('loan.clients.partials.lending-profile-fields', ['client' => $loan_client])
                    <div>
                        <x-input-label for="assigned_employee_id" value="{{ $biodataLabels['assigned_employee_id'] ?? 'Loan Officer' }}" />
                        <select id="assigned_employee_id" name="assigned_employee_id" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            <option value="">— None —</option>
                            @foreach ($employees as $employee)
                                <option value="{{ $employee->id }}" @selected(old('assigned_employee_id', $loan_client->assigned_employee_id) == $employee->id)>{{ $employee->full_name }}</option>
                            @endforeach
                        </select>
                        <x-input-error class="mt-2" :messages="$errors->get('assigned_employee_id')" />
                    </div>
                    @if ($loan_client->kind === 'lead')
                        <div>
                            <x-input-label for="lead_status" value="Lead status" />
                            <select id="lead_status" name="lead_status" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                @foreach (['new', 'contacted', 'qualified', 'lost'] as $st)
                                    <option value="{{ $st }}" @selected(old('lead_status', $loan_client->lead_status ?? 'new') === $st)>{{ ucfirst($st) }}</option>
                                @endforeach
                            </select>
                            <x-input-error class="mt-2" :messages="$errors->get('lead_status')" />
                        </div>
                    @else
                        @if ($loan_client->isDraft())
                            <div>
                                <x-input-label value="Status" />
                                <div class="mt-1 rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-900">Draft</div>
                            </div>
                        @else
                            @include('loan.clients.partials.client-operational-status-select', [
                                'loan_client' => $loan_client,
                                'operationalStatusForm' => $operationalStatusForm ?? [],
                            ])
                        @endif
                    @endif
                    @include('loan.clients.partials.additional-biodata-fields', ['client' => $loan_client])
                    <div class="sm:col-span-2">
                        <x-input-label for="notes" value="Notes" />
                        <textarea id="notes" name="notes" rows="3" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">{{ old('notes', $loan_client->notes) }}</textarea>
                        <x-input-error class="mt-2" :messages="$errors->get('notes')" />
                    </div>
                </div>

                <div class="flex flex-wrap items-center gap-3 pt-2">
                    @if ($loan_client->kind === \App\Models\LoanClient::KIND_CLIENT && $loan_client->isDraft())
                        <x-primary-button name="finalize_client" value="1">{{ __('Complete client') }}</x-primary-button>
                        <x-secondary-button type="submit" name="save_as_draft" value="1" formnovalidate>
                            {{ __('Save as draft') }}
                        </x-secondary-button>
                    @else
                        <x-primary-button>{{ __('Save changes') }}</x-primary-button>
                    @endif
                </div>
            </form>
            @if ($loan_client->kind === \App\Models\LoanClient::KIND_CLIENT && $loan_client->isDraft())
                <form
                    method="post"
                    action="{{ route('loan.clients.destroy_draft', $loan_client) }}"
                    class="mt-3"
                    data-swal-confirm="{{ __('Remove this incomplete draft permanently? You will be able to create the same person again.') }}"
                    data-swal-title="{{ __('Delete draft') }}"
                >
                    @csrf
                    @method('delete')
                    <button type="submit" class="inline-flex items-center rounded-md border border-rose-200 bg-white px-3 py-2 text-sm font-semibold text-rose-700 shadow-sm hover:bg-rose-50">
                        {{ __('Delete draft') }}
                    </button>
                </form>
            @endif
            </div>
            @if ($inFormModal)
                <aside
                    x-show="previewFields.length > 0 || previewImages.length > 0"
                    x-cloak
                    class="rounded-xl border border-slate-200 bg-white p-4 shadow-sm"
                    x-data="{ mobilePreviewOpen: true }"
                >
            @else
            <aside class="rounded-xl border border-slate-200 bg-white p-4 shadow-sm xl:sticky xl:top-4" x-data="{ mobilePreviewOpen: false }">
            @endif
                <button
                    type="button"
                    class="flex w-full items-center justify-between rounded-md text-left xl:cursor-default"
                    @click="if (window.innerWidth < 1280) mobilePreviewOpen = !mobilePreviewOpen"
                >
                    <h4 class="text-xs font-semibold uppercase tracking-wide text-slate-600">Client form preview</h4>
                    <span class="text-xs font-semibold text-slate-500 xl:hidden" x-text="mobilePreviewOpen ? 'Hide' : 'Show'"></span>
                </button>
                <div class="mt-3 space-y-1 text-xs text-slate-700" x-show="mobilePreviewOpen || window.innerWidth >= 1280" x-cloak>
                    <template x-if="previewFields.length === 0 && previewImages.length === 0">
                        <p class="text-slate-500">Update fields to preview current draft here.</p>
                    </template>
                    <template x-for="item in previewFields" :key="item.key">
                        <p>
                            <span class="font-semibold text-slate-600" x-text="item.label + ':'"></span>
                            <span x-text="item.value"></span>
                        </p>
                    </template>
                </div>
                <div class="mt-3 space-y-2" x-show="(mobilePreviewOpen || window.innerWidth >= 1280) && previewImages.length > 0" x-cloak>
                    <h5 class="text-[11px] font-semibold uppercase tracking-wide text-slate-500">Uploaded images</h5>
                    <div class="grid grid-cols-2 gap-2">
                        <template x-for="image in previewImages" :key="image.key">
                            <figure class="overflow-hidden rounded-md border border-slate-200 bg-slate-50 p-1">
                                <img :src="image.url" :alt="image.label" class="h-20 w-full rounded object-cover" />
                                <figcaption class="mt-1 truncate text-[10px] text-slate-600" x-text="image.label"></figcaption>
                            </figure>
                        </template>
                    </div>
                </div>
            </aside>
        </div>
</x-loan.modal-form>