@php
    $inFormModal = request()->header('Turbo-Frame') === 'loan-form-modal';

    $initialStep = 1;
    if ($errors->any()) {
        $bag = $errors->keys();
        $step3Keys = ['loan_branch_id', 'assigned_employee_id', 'notes', 'referral', 'referrer_type', 'referrer_loan_client_id', 'referrer_name', 'referrer_phone', 'referral_notes'];
        $step2Keys = array_filter($bag, static fn ($k) => str_starts_with((string) $k, 'biodata_meta') || str_starts_with((string) $k, 'biodata_files'));
        if (array_intersect($bag, $step3Keys) !== []) {
            $initialStep = 3;
        } elseif ($step2Keys !== []) {
            $initialStep = 2;
        } else {
            $initialStep = 1;
        }
    }
@endphp

<x-loan.modal-form
    title="Add client"
    :maxWidth="$inFormModal ? '4xl' : '5xl'"
>
    <x-slot name="actions">
        <a href="{{ 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')

    <div
        @class([
            'client-form-sheet 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="clientCreateForm({{ (int) $initialStep }})"
    >
        <div class="client-form-panel">
            <form method="post" action="{{ route('loan.clients.store') }}" class="client-form" enctype="multipart/form-data" data-loan-validate-form data-skip-requirement-markers novalidate>
                @csrf

                <div class="client-form-scroll">
                {{-- Mobile / modal step chrome --}}
                <div class="client-form-steps">
                    <div class="client-form-steps__meta">
                        <p class="client-form-steps__count">
                            Step <span x-text="step"></span> of <span x-text="totalSteps"></span>
                        </p>
                        <p class="client-form-steps__title" x-text="stepTitle()"></p>
                    </div>
                    <div class="client-form-steps__track" role="list" aria-label="Form progress">
                        <template x-for="n in totalSteps" :key="n">
                            <button
                                type="button"
                                class="client-form-steps__dot"
                                :class="{ 'is-active': step === n, 'is-done': step > n }"
                                :aria-current="step === n ? 'step' : null"
                                @click="goTo(n)"
                                :aria-label="'Go to step ' + n"
                            ></button>
                        </template>
                    </div>
                </div>

                {{-- Step 1: Personal details --}}
                <section
                    class="client-form-section"
                    data-step="1"
                    x-show="step === 1"
                    x-cloak
                >
                    <header class="client-form-section__head client-form-section__head--desktop">
                        <h3 class="client-form-section__title">Personal details</h3>
                        <p class="client-form-section__hint">Identity and contact information for this client.</p>
                    </header>

                    <div class="client-form-fields">
                        <div class="client-form-field client-form-field--full">
                            <x-input-label value="Client number" />
                            <div class="client-form-readonly">Auto-assigned when you save</div>
                            <x-input-error class="mt-2" :messages="$errors->get('client_number')" />
                        </div>

                        <div class="client-form-field">
                            <x-input-label for="first_name" value="First name *" />
                            <x-text-input id="first_name" name="first_name" type="text" class="mt-1 block w-full" :value="old('first_name')" required autocomplete="given-name" placeholder="e.g. Jane" />
                            <x-input-error class="mt-2" :messages="$errors->get('first_name')" />
                        </div>

                        <div class="client-form-field">
                            <x-input-label for="last_name" value="Last name *" />
                            <x-text-input id="last_name" name="last_name" type="text" class="mt-1 block w-full" :value="old('last_name')" required autocomplete="family-name" placeholder="e.g. Wanjiku" />
                            <x-input-error class="mt-2" :messages="$errors->get('last_name')" />
                        </div>

                        <div class="client-form-field">
                            <x-input-label for="phone" value="Phone number *" />
                            <x-phone-input id="phone" name="phone" :value="old('phone')" />
                            <x-input-error class="mt-2" :messages="$errors->get('phone')" />
                        </div>

                        <div class="client-form-field">
                            <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')" autocomplete="email" placeholder="name@example.com" />
                            <x-input-error class="mt-2" :messages="$errors->get('email')" />
                        </div>

                        <div class="client-form-field">
                            <x-input-label for="id_number" value="National ID or passport number" />
                            <x-text-input id="id_number" name="id_number" type="text" class="mt-1 block w-full" :value="old('id_number')" placeholder="National ID or passport number" />
                            <x-input-error class="mt-2" :messages="$errors->get('id_number')" />
                        </div>

                        <div class="client-form-field">
                            <x-input-label for="gender" value="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') === $value)>{{ $label }}</option>
                                @endforeach
                            </select>
                            <x-input-error class="mt-2" :messages="$errors->get('gender')" />
                        </div>

                        <div class="client-form-field">
                            <x-input-label for="next_of_kin_name" value="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')" />
                            <x-input-error class="mt-2" :messages="$errors->get('next_of_kin_name')" />
                        </div>

                        <div class="client-form-field">
                            <x-input-label for="next_of_kin_contact" value="Next of 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')" />
                            <x-input-error class="mt-2" :messages="$errors->get('next_of_kin_contact')" />
                        </div>

                        @include('loan.clients.partials.spouse-fields', ['fullWidth' => true])

                        <div class="client-form-field client-form-field--full">
                            <x-input-label for="address" value="Address" />
                            <x-textarea-input id="address" name="address" rows="2" class="mt-1 block w-full">{{ old('address') }}</x-textarea-input>
                            <x-input-error class="mt-2" :messages="$errors->get('address')" />
                        </div>

                        <div class="client-form-field client-form-field--full">
                            <x-loan.geo-location-pin
                                :latitude="old('latitude')"
                                :longitude="old('longitude')"
                                :accuracy="old('gps_accuracy_meters')"
                                :source="old('gps_source')"
                                label="Pin business / home location"
                            />
                        </div>

                        <div class="client-form-field client-form-field--full">
                            <x-loan.kyc-photo-capture
                                name="client_photo"
                                id="client_photo"
                                :label="$biodataLabels['client_photo'] ?? 'Client photo'"
                                facing-mode="user"
                                :error-messages="$errors->get('client_photo')"
                            />
                        </div>
                        <div class="client-form-field client-form-field--full">
                            <x-loan.kyc-photo-capture
                                name="id_back_photo"
                                id="id_back_photo"
                                :label="$biodataLabels['id_back_photo'] ?? 'ID back photo'"
                                facing-mode="environment"
                                :error-messages="$errors->get('id_back_photo')"
                            />
                        </div>
                        <div class="client-form-field client-form-field--full">
                            <x-loan.kyc-photo-capture
                                name="id_front_photo"
                                id="id_front_photo"
                                :label="$biodataLabels['id_front_photo'] ?? 'ID front photo'"
                                facing-mode="environment"
                                :error-messages="$errors->get('id_front_photo')"
                            />
                        </div>
                    </div>
                </section>

                {{-- Step 2: Economic profile --}}
                <section
                    class="client-form-section"
                    data-step="2"
                    x-show="step === 2"
                    x-cloak
                >
                    <header class="client-form-section__head">
                        <h3 class="client-form-section__title">Economic profile</h3>
                        <p class="client-form-section__hint">Complete these details before starting a loan application to avoid blockers later.</p>
                    </header>

                    <div class="client-form-fields client-form-fields--lending">
                        @include('loan.clients.partials.lending-profile-fields', ['client' => null])
                        @include('loan.clients.partials.additional-biodata-fields', ['client' => null])
                    </div>
                </section>

                {{-- Step 3: Assignment --}}
                <section
                    class="client-form-section"
                    data-step="3"
                    x-show="step === 3"
                    x-cloak
                >
                    <header class="client-form-section__head">
                        <h3 class="client-form-section__title">Assignment and status</h3>
                        <p class="client-form-section__hint">Branch, officer, status, notes, and referral.</p>
                    </header>

                    <div class="client-form-fields">
                        <div class="client-form-field">
                            @php
                                $defaultBranchId = old('loan_branch_id', $defaultLoanBranchId ?? '');
                                $branchLocked = (bool) ($lockClientBranch ?? false) && filled($defaultLoanBranchId);
                                $selectedBranch = ($directoryBranches ?? collect())->first(
                                    fn ($branch) => (string) $branch->id === (string) ($defaultBranchId ?: $defaultLoanBranchId)
                                );
                            @endphp
                            @if ($branchLocked)
                                <x-input-label for="loan_branch_id" value="Branch" />
                                <input type="hidden" name="loan_branch_id" value="{{ $defaultLoanBranchId }}">
                                <div class="client-form-readonly">{{ $selectedBranch->name ?? 'Your branch' }}</div>
                                <p class="mt-1 text-xs text-slate-500">Assigned to your branch automatically.</p>
                            @else
                                @include('loan.clients.partials.branch-select-with-modal', [
                                    'fieldId' => 'loan_branch_id',
                                    'selectedBranchId' => $defaultBranchId,
                                    'directoryBranches' => $directoryBranches ?? collect(),
                                    'label' => 'Branch',
                                    'placeholder' => 'Select branch...',
                                ])
                                @if (filled($defaultLoanBranchId))
                                    <p class="mt-1 text-xs text-slate-500">Defaults to your branch. Change only if onboarding for another branch.</p>
                                @endif
                            @endif
                        </div>

                        <div class="client-form-field">
                            <x-input-label for="assigned_employee_id" value="Assigned officer" />
                            @php
                                $canAssignClientToOtherOfficers = (bool) ($canAssignClientToOtherOfficers ?? false);
                                $defaultOfficerId = old('assigned_employee_id', $defaultAssignedEmployeeId ?? '');
                                $officerLocked = (bool) ($lockAssignedEmployee ?? false) && filled($defaultAssignedEmployeeId);
                                $selectedOfficer = $employees->first(
                                    fn ($employee) => (string) $employee->id === (string) ($defaultOfficerId ?: $defaultAssignedEmployeeId)
                                );
                            @endphp
                            @if ($officerLocked)
                                <input type="hidden" name="assigned_employee_id" value="{{ $defaultAssignedEmployeeId }}">
                                <div class="client-form-readonly">{{ $selectedOfficer->full_name ?? 'Current loan officer' }}</div>
                                <p class="mt-1 text-xs text-slate-500">Assigned to you automatically as the officer adding this client.</p>
                            @else
                                <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" @if ($canAssignClientToOtherOfficers) required @endif>
                                    <option value="">{{ $canAssignClientToOtherOfficers ? 'Select loan officer…' : 'None' }}</option>
                                    @foreach ($employees as $employee)
                                        <option value="{{ $employee->id }}" @selected((string) $defaultOfficerId === (string) $employee->id)>{{ $employee->full_name }}</option>
                                    @endforeach
                                </select>
                                @if ($canAssignClientToOtherOfficers)
                                    <p class="mt-1 text-xs text-slate-500">Only active loan officers in your branch are listed. The selected officer owns the client (including drafts) on their register and can complete or delete the draft.</p>
                                @elseif (filled($defaultAssignedEmployeeId))
                                    <p class="mt-1 text-xs text-slate-500">Defaults to the officer currently signed in.</p>
                                @endif
                            @endif
                            <x-input-error class="mt-2" :messages="$errors->get('assigned_employee_id')" />
                        </div>

                        <div class="client-form-field client-form-field--full rounded-lg border border-slate-200 bg-slate-50 px-3 py-3 text-sm text-slate-600">
                            <p class="font-medium text-slate-800">Lifecycle status</p>
                            <p class="mt-1">Assigned automatically by the system. <strong>Active</strong> clients have an open loan balance; <strong>dormant</strong> clients appear on the <a href="{{ route('loan.clients.index', app(\App\Services\LoanBook\ClientLifecycleTruthService::class)->dormantRegisterParams()) }}" class="text-teal-700 underline">dormant register</a> after the idle threshold.</p>
                        </div>

                        <div class="client-form-field client-form-field--full">
                            <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') }}</textarea>
                            <x-input-error class="mt-2" :messages="$errors->get('notes')" />
                        </div>

                        @if(auth()->user()?->hasLoanPermission('referrals.capture'))
                            <div class="client-form-field client-form-field--full">
                                @include('loan.clients.partials.referral-form-fields')
                            </div>
                        @endif
                    </div>
                </section>

                {{-- Step 4: Review --}}
                <section
                    class="client-form-section"
                    data-step="4"
                    x-show="step === 4"
                    x-cloak
                >
                    <header class="client-form-section__head">
                        <h3 class="client-form-section__title">Review</h3>
                        <p class="client-form-section__hint">Confirm details before saving. Use Edit to jump back to a section.</p>
                    </header>

                    <div class="client-form-review">
                        <div class="client-form-review__toolbar">
                            <button type="button" class="client-form-link" @click="goTo(1)">Edit personal</button>
                            <button type="button" class="client-form-link" @click="goTo(2)">Edit economic</button>
                            <button type="button" class="client-form-link" @click="goTo(3)">Edit assignment</button>
                        </div>

                        <div class="client-form-review__card">
                            <h4 class="client-form-review__heading">Client form preview</h4>
                            <div class="client-form-review__list">
                                <template x-if="previewFields.length === 0 && previewImages.length === 0">
                                    <p class="client-form-review__empty">Fill earlier steps to preview entered details here.</p>
                                </template>
                                <template x-for="item in previewFields" :key="item.key">
                                    <p class="client-form-review__row">
                                        <span class="client-form-review__label" x-text="item.label"></span>
                                        <span class="client-form-review__value" x-text="item.value"></span>
                                    </p>
                                </template>
                            </div>
                            <div class="client-form-review__images" x-show="previewImages.length > 0" x-cloak>
                                <h5 class="client-form-review__subheading">Uploaded images</h5>
                                <div class="client-form-review__grid">
                                    <template x-for="image in previewImages" :key="image.key">
                                        <figure class="client-form-review__figure">
                                            <img :src="image.url" :alt="image.label" />
                                            <figcaption x-text="image.label"></figcaption>
                                        </figure>
                                    </template>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
                </div>{{-- /.client-form-scroll --}}

                {{-- Pinned action bar (outside scroll so it never covers fields) --}}
                <div class="client-form-actions">
                    <p class="client-form-error-summary" x-show="errorSummary" x-cloak x-text="errorSummary" role="alert"></p>
                    <div class="client-form-actions__row" x-show="step < totalSteps" x-cloak>
                        <button
                            type="button"
                            class="client-form-btn client-form-btn--ghost"
                            @click="goBack()"
                            :disabled="step === 1"
                            :class="{ 'is-disabled': step === 1 }"
                        >
                            Back
                        </button>
                        <x-secondary-button type="submit" name="save_as_draft" value="1" formnovalidate class="client-form-btn client-form-btn--secondary">
                            {{ __('Save draft') }}
                        </x-secondary-button>
                        <button type="button" class="client-form-btn client-form-btn--primary" @click="goNext()">
                            Continue
                        </button>
                    </div>
                    <div class="client-form-actions__row client-form-actions__row--final" x-show="step === totalSteps" x-cloak>
                        <button type="button" class="client-form-btn client-form-btn--ghost" @click="goBack()">
                            Back
                        </button>
                        <x-secondary-button type="submit" name="save_as_draft" value="1" formnovalidate class="client-form-btn client-form-btn--secondary">
                            {{ __('Save as draft') }}
                        </x-secondary-button>
                        <x-primary-button class="client-form-btn client-form-btn--primary client-form-btn--save">
                            {{ __('Save client') }}
                        </x-primary-button>
                    </div>
                </div>
            </form>
        </div>

        {{-- Desktop sidebar preview (full-page only) --}}
        @unless ($inFormModal)
            <aside class="client-form-aside rounded-xl border border-slate-200 bg-white p-4 shadow-sm xl:sticky xl:top-4" x-data="{ mobilePreviewOpen: false }">
                <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">Fill the client form to preview entered details 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>
        @endunless
    </div>
</x-loan.modal-form>