@can('finance-applications.create')
<div
    class="fixed inset-0 z-[60] flex items-center justify-center px-4 py-8 sm:px-6"
    x-show="financeApplicationModalOpen"
    x-cloak
    x-transition:enter="ease-out duration-200"
    x-transition:enter-start="opacity-0"
    x-transition:enter-end="opacity-100"
    x-transition:leave="ease-in duration-150"
    x-transition:leave-start="opacity-100"
    x-transition:leave-end="opacity-0"
>
    <div
        class="absolute inset-0 bg-gray-900/50 backdrop-blur-[1px]"
        @click="closeFinanceApplicationModal()"
        aria-hidden="true"
    ></div>

    <div
        class="relative z-10 w-full max-w-lg rounded-2xl border border-gray-200 bg-white shadow-2xl max-h-[90vh] overflow-y-auto"
        role="dialog"
        aria-modal="true"
        aria-labelledby="finance-application-lead-title"
        @click.stop
    >
        <div class="flex items-start justify-between gap-4 border-b border-gray-100 px-5 py-4">
            <div>
                <h3 id="finance-application-lead-title" class="text-base font-semibold text-gray-900">Log Finance Application</h3>
                <p class="mt-1 text-sm text-gray-600" x-text="financeApplicationLeadLabel"></p>
                <p class="mt-0.5 text-xs text-gray-500">Lead #<span x-text="financeApplicationLeadId"></span></p>
            </div>
            <button
                type="button"
                class="rounded-lg p-1.5 text-gray-400 hover:bg-gray-100 hover:text-gray-700 focus:outline-none focus:ring-2 focus:ring-[var(--dealer-accent-color)]"
                @click="closeFinanceApplicationModal()"
                aria-label="Close"
            >
                <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                </svg>
            </button>
        </div>

        <form
            method="POST"
            class="px-5 py-4 space-y-4"
            x-bind:action="String(config.leadUrlBase || '').replace(/\/$/, '') + '/' + financeApplicationLeadId + '/finance-applications'"
            @submit="document.body.classList.remove('overflow-y-hidden')"
        >
            @csrf
            <input type="hidden" name="__finance_application_lead_id" x-bind:value="financeApplicationLeadId">
            <input type="hidden" name="__finance_application_lead_label" x-bind:value="financeApplicationLeadLabel">

            <div>
                <label for="finance_application_date" class="block text-sm font-medium text-gray-700">Application date</label>
                <input
                    type="date"
                    id="finance_application_date"
                    name="application_date"
                    required
                    x-model="financeApplicationDate"
                    class="mt-1 block w-full rounded-xl border-gray-300 shadow-sm focus:border-[var(--dealer-accent-color)] focus:ring-[var(--dealer-accent-color)] text-sm"
                >
            </div>

            <div>
                <label for="finance_applicant_name" class="block text-sm font-medium text-gray-700">Applicant name</label>
                <input
                    type="text"
                    id="finance_applicant_name"
                    name="applicant_name"
                    required
                    maxlength="255"
                    x-model="financeApplicantName"
                    class="mt-1 block w-full rounded-xl border-gray-300 shadow-sm focus:border-[var(--dealer-accent-color)] focus:ring-[var(--dealer-accent-color)] text-sm"
                >
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                    <label for="finance_vehicle_make" class="block text-sm font-medium text-gray-700">Make</label>
                    <input type="text" id="finance_vehicle_make" name="vehicle_make" maxlength="255" x-model="financeVehicleMake" placeholder="e.g. Toyota"
                        class="mt-1 block w-full rounded-xl border-gray-300 shadow-sm focus:border-[var(--dealer-accent-color)] focus:ring-[var(--dealer-accent-color)] text-sm">
                </div>
                <div>
                    <label for="finance_vehicle_model" class="block text-sm font-medium text-gray-700">Model</label>
                    <input type="text" id="finance_vehicle_model" name="vehicle_model" maxlength="255" x-model="financeVehicleModel" placeholder="e.g. Hilux"
                        class="mt-1 block w-full rounded-xl border-gray-300 shadow-sm focus:border-[var(--dealer-accent-color)] focus:ring-[var(--dealer-accent-color)] text-sm">
                </div>
            </div>
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                    <label for="finance_vehicle_variant" class="block text-sm font-medium text-gray-700">Variant</label>
                    <input type="text" id="finance_vehicle_variant" name="vehicle_variant" maxlength="255" x-model="financeVehicleVariant" placeholder="e.g. 2.8 GD-6 Raider"
                        class="mt-1 block w-full rounded-xl border-gray-300 shadow-sm focus:border-[var(--dealer-accent-color)] focus:ring-[var(--dealer-accent-color)] text-sm">
                </div>
                <div>
                    <label for="finance_vehicle_year" class="block text-sm font-medium text-gray-700">Year</label>
                    <input type="number" id="finance_vehicle_year" name="vehicle_year" min="{{ \App\Support\VehicleYear::MIN }}" max="{{ \App\Support\VehicleYear::max() }}" x-model="financeVehicleYear" placeholder="{{ now()->format('Y') }}"
                        class="mt-1 block w-full rounded-xl border-gray-300 shadow-sm focus:border-[var(--dealer-accent-color)] focus:ring-[var(--dealer-accent-color)] text-sm">
                </div>
            </div>
            <div>
                <label for="finance_stock_number" class="block text-sm font-medium text-gray-700">Stock number</label>
                <input type="text" id="finance_stock_number" name="stock_number" maxlength="255" x-model="financeStockNumber" placeholder="e.g. STK-00123"
                    class="mt-1 block w-full rounded-xl border-gray-300 shadow-sm focus:border-[var(--dealer-accent-color)] focus:ring-[var(--dealer-accent-color)] text-sm">
            </div>

            <div>
                <label for="finance_house" class="block text-sm font-medium text-gray-700">Finance house / bank</label>
                <input
                    type="text"
                    id="finance_house"
                    name="finance_house"
                    maxlength="255"
                    x-model="financeHouse"
                    class="mt-1 block w-full rounded-xl border-gray-300 shadow-sm focus:border-[var(--dealer-accent-color)] focus:ring-[var(--dealer-accent-color)] text-sm"
                >
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                    <label for="finance_amount_financed" class="block text-sm font-medium text-gray-700">Amount financed</label>
                    <x-currency-input name="amount_financed" id="finance_amount_financed" model="financeAmountFinanced" />
                </div>
                <div>
                    <label for="finance_deposit" class="block text-sm font-medium text-gray-700">Deposit</label>
                    <x-currency-input name="deposit" id="finance_deposit" model="financeDeposit" />
                </div>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                    <label for="finance_term_months" class="block text-sm font-medium text-gray-700">Term (months)</label>
                    <input
                        type="number"
                        id="finance_term_months"
                        name="term_months"
                        min="1"
                        max="96"
                        x-model="financeTermMonths"
                        class="mt-1 block w-full rounded-xl border-gray-300 shadow-sm focus:border-[var(--dealer-accent-color)] focus:ring-[var(--dealer-accent-color)] text-sm"
                    >
                </div>
                <div>
                    <label for="finance_application_status" class="block text-sm font-medium text-gray-700">Status</label>
                    <select
                        id="finance_application_status"
                        name="status"
                        required
                        x-model="financeApplicationStatus"
                        class="mt-1 block w-full rounded-xl border-gray-300 shadow-sm focus:border-[var(--dealer-accent-color)] focus:ring-[var(--dealer-accent-color)] text-sm"
                    >
                        @foreach (\App\Support\FinanceApplicationStatuses::all() as $status)
                            <option value="{{ $status }}">{{ \App\Support\FinanceApplicationStatuses::label($status) }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <div>
                <label for="finance_reference_number" class="block text-sm font-medium text-gray-700">Reference number</label>
                <input
                    type="text"
                    id="finance_reference_number"
                    name="reference_number"
                    maxlength="255"
                    x-model="financeReferenceNumber"
                    class="mt-1 block w-full rounded-xl border-gray-300 shadow-sm focus:border-[var(--dealer-accent-color)] focus:ring-[var(--dealer-accent-color)] text-sm"
                >
            </div>

            <div>
                <label for="finance_application_notes" class="block text-sm font-medium text-gray-700">Notes</label>
                <textarea
                    id="finance_application_notes"
                    name="notes"
                    rows="3"
                    x-model="financeApplicationNotes"
                    class="mt-1 block w-full rounded-xl border-gray-300 shadow-sm focus:border-[var(--dealer-accent-color)] focus:ring-[var(--dealer-accent-color)] text-sm"
                ></textarea>
            </div>

            <div class="flex flex-col-reverse gap-2 border-t border-gray-100 pt-4 sm:flex-row sm:justify-end">
                <button
                    type="button"
                    class="inline-flex justify-center rounded-xl border border-gray-200 bg-white px-4 py-2.5 text-sm font-semibold text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-300 focus:ring-offset-2"
                    @click="closeFinanceApplicationModal()"
                >
                    Cancel
                </button>
                <button
                    type="submit"
                    class="inline-flex justify-center rounded-xl bg-[var(--dealer-accent-color)] px-4 py-2.5 text-sm font-semibold text-[var(--dealer-accent-text-color)] shadow-sm hover:opacity-95 focus:outline-none focus:ring-2 focus:ring-[var(--dealer-accent-color)] focus:ring-offset-2"
                >
                    Save application
                </button>
            </div>
        </form>
    </div>
</div>
@endcan