@php
    $monthNames = [
        1 => 'January', 2 => 'February', 3 => 'March', 4 => 'April', 5 => 'May', 6 => 'June',
        7 => 'July', 8 => 'August', 9 => 'September', 10 => 'October', 11 => 'November', 12 => 'December',
    ];
    $monthSelectOptions = [];
    foreach ($monthNames as $num => $label) {
        $monthSelectOptions[] = ['value' => (string) $num, 'label' => $label];
    }
    $yearSelectOptions = collect($yearOptions ?? [])->map(fn ($y) => ['value' => (string) $y, 'label' => (string) $y])->all();
    $statusFilterOptions = [['value' => '', 'label' => 'All statuses']];
    foreach (($statusOptions ?? []) as $st) {
        $statusFilterOptions[] = ['value' => (string) $st, 'label' => ucfirst($st)];
    }
    $selectedStatusStr = $selectedStatus !== null ? (string) $selectedStatus : '';
    $leadTypeFilterOptions = [['value' => '', 'label' => 'All types']];
    foreach (($leadTypeOptions ?? []) as $lt) {
        $leadTypeFilterOptions[] = ['value' => (string) $lt, 'label' => ucfirst($lt)];
    }
    $selectedLeadTypeStr = $selectedLeadType !== null ? (string) $selectedLeadType : '';
    $assignedFilterOptions = [['value' => '', 'label' => 'All assignees']];
    foreach (($users ?? []) as $u) {
        $label = trim(($u->name ?? '').' '.($u->surname ?? ''));
        $label = $label !== '' ? $label : ('User #'.$u->id);
        $label = (bool) ($u->is_disabled ?? false) ? ($label.' (disabled)') : $label;
        $assignedFilterOptions[] = ['value' => (string) $u->id, 'label' => $label];
    }
    $selectedAssignedStr = $selectedAssignedUserId !== null ? (string) $selectedAssignedUserId : '';
@endphp

<x-app-layout>
    <x-slot name="header">
        {{ __('All Leads') }}
    </x-slot>

    <div class="space-y-4 py-6 px-3 sm:px-4 md:px-5">
        <x-flash-messages />

        @php
            $leadSummaryMetrics = [
                ['label' => 'Total leads', 'key' => 'total'],
                ['label' => 'Individuals', 'key' => 'individual'],
                ['label' => 'Businesses', 'key' => 'business'],
                ['label' => 'New', 'key' => 'new'],
                ['label' => 'Contacted', 'key' => 'contacted'],
                ['label' => 'Converted', 'key' => 'converted'],
                ['label' => 'Lost', 'key' => 'lost'],
            ];
        @endphp
        <div class="overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm">
            <dl class="grid grid-cols-2 divide-y divide-gray-100 sm:grid-cols-4 lg:grid-cols-7 lg:divide-y-0 lg:divide-x">
                @foreach ($leadSummaryMetrics as $metric)
                    <div class="flex min-w-0 items-center justify-between gap-2 px-3 py-2 sm:block sm:px-4">
                        <dt class="truncate text-[10px] font-medium uppercase leading-none tracking-wide text-gray-500">
                            {{ $metric['label'] }}
                        </dt>
                        <dd class="shrink-0 text-base font-semibold tabular-nums leading-none text-gray-900 sm:mt-1 sm:text-lg">
                            {{ number_format((int) data_get($summary, $metric['key'], 0)) }}
                        </dd>
                    </div>
                @endforeach
            </dl>
        </div>

        @php
            $allLeadsAlpineConfig = [
                'toolbarMode' => 'all',
                'saleDate' => old('sale_date', now()->format('Y-m-d')),
                'saleStatus' => old('status', 'delivered'),
                'saleVehicleMake' => old('vehicle_make', ''),
                'saleVehicleModel' => old('vehicle_model', ''),
                'saleVehicleVariant' => old('vehicle_variant', ''),
                'saleVehicleYear' => old('vehicle_year', ''),
                'saleStockNumber' => old('stock_number', ''),
                'sellingPrice' => old('selling_price', ''),
                'grossProfit' => old('gross_profit', ''),
                'notes' => old('notes', ''),
                'todayDate' => now()->format('Y-m-d'),
                'leadUrlBase' => url('/leads'),
                'parkReasonDefault' => old('park_reason', ''),
                'parkFollowUpDefault' => old('park_follow_up_date', now()->format('Y-m-d')),
                'appointmentDateDefault' => old('appointment_date', now()->format('Y-m-d')),
                'appointmentTimeDefault' => old('appointment_time', '09:00'),
                'appointmentLocationDefault' => old('location', ''),
                'appointmentNotesDefault' => old('notes', ''),
                'financeApplicationDateDefault' => old('application_date', now()->format('Y-m-d')),
                'financeApplicationStatusDefault' => old('status', 'submitted'),
                'financeApplicantNameDefault' => old('applicant_name', ''),
                'financeVehicleDefault' => old('vehicle', ''),
                'reopenConvert' => null,
            ];
            if (filled(old('__convert_lead_id'))) {
                $reopenLeadId = (int) old('__convert_lead_id');
                $allLeadsAlpineConfig['reopenConvert'] = [
                    'leadId' => $reopenLeadId,
                    'leadLabel' => (string) old('__convert_lead_label', ''),
                    'convertUrl' => route('leads.convert-to-sale', $reopenLeadId),
                ];
            }
            if (filled(old('__park_lead_id'))) {
                $allLeadsAlpineConfig['reopenPark'] = [
                    'leadId' => (int) old('__park_lead_id'),
                    'leadLabel' => (string) old('__park_lead_label', ''),
                ];
            }
            if (filled(old('__appointment_lead_id'))) {
                $allLeadsAlpineConfig['reopenAppointment'] = [
                    'leadId' => (int) old('__appointment_lead_id'),
                    'leadLabel' => (string) old('__appointment_lead_label', ''),
                ];
            }
            if (filled(old('__finance_application_lead_id'))) {
                $allLeadsAlpineConfig['reopenFinanceApplication'] = [
                    'leadId' => (int) old('__finance_application_lead_id'),
                    'leadLabel' => (string) old('__finance_application_lead_label', ''),
                    'applicantName' => (string) old('applicant_name', ''),
                ];
            }
            if (! empty($isManagementView) && $isManagementView) {
                $allLeadsAlpineConfig['canReassignLead'] = true;
            }
            if (filled(old('__reassign_lead_id'))) {
                $allLeadsAlpineConfig['reopenReassign'] = [
                    'leadId' => (int) old('__reassign_lead_id'),
                    'leadLabel' => (string) old('__reassign_lead_label', ''),
                    'assignedUserId' => old('assigned_user_id') !== null && old('assigned_user_id') !== ''
                        ? (string) old('assigned_user_id')
                        : '',
                ];
            }
        @endphp

        <div
            class="bg-white border border-gray-200 rounded-xl shadow-sm p-4 space-y-3"
            x-data="myLeadsTable(@js($allLeadsAlpineConfig))"
            x-on:keydown.escape.window="onEscapeWindow()"
        >
            <div class="flex min-h-[1.75rem] flex-wrap items-center gap-x-3 gap-y-2">
                <div class="flex flex-wrap items-center gap-2">
                        <x-lead-view-details-button />
                        <x-lead-edit-details-button />
                        <button
                            type="button"
                            class="inline-flex items-center rounded-lg border px-2.5 py-1 text-xs font-semibold shadow-sm transition-colors enabled:hover:border-red-600 enabled:hover:bg-red-600 enabled:hover:text-white"
                            :class="(selectedLeadId !== null && selectionCanMarkSale) ? 'border-gray-200 bg-white text-gray-800' : 'cursor-not-allowed border-gray-100 bg-gray-50 text-gray-400'"
                            :disabled="selectedLeadId === null || !selectionCanMarkSale"
                            :title="selectedLeadId === null ? 'Select a row first' : (selectionCanMarkSale ? 'Record a sale for this lead' : 'Mark as sale is only for active leads without a sale')"
                            x-on:click.stop="openMarkAsSale()"
                        >
                            Mark as Sale
                        </button>
                        <button
                            type="button"
                            class="inline-flex items-center rounded-lg border px-2.5 py-1 text-xs font-semibold shadow-sm transition-colors enabled:hover:border-red-600 enabled:hover:bg-red-600 enabled:hover:text-white"
                            :class="(selectedLeadId !== null && selectionCanHotPark) ? 'border-gray-200 bg-white text-gray-800' : 'cursor-not-allowed border-gray-100 bg-gray-50 text-gray-400'"
                            :disabled="selectedLeadId === null || !selectionCanHotPark"
                            :title="selectedLeadId === null ? 'Select a row first' : (selectionCanHotPark ? 'Move selected lead to your Hot List' : 'Hot List is only for pipeline leads (not customers, parked, or already on Hot List)')"
                            x-on:click.stop="submitHotList()"
                        >
                            Hot List
                        </button>
                        <button
                            type="button"
                            class="inline-flex items-center rounded-lg border px-2.5 py-1 text-xs font-semibold shadow-sm transition-colors enabled:hover:border-red-600 enabled:hover:bg-red-600 enabled:hover:text-white"
                            :class="(selectedLeadId !== null && selectionCanHotPark) ? 'border-gray-200 bg-white text-gray-800' : 'cursor-not-allowed border-gray-100 bg-gray-50 text-gray-400'"
                            :disabled="selectedLeadId === null || !selectionCanHotPark"
                            :title="selectedLeadId === null ? 'Select a row first' : (selectionCanHotPark ? 'Park this lead with a reason and follow-up date' : 'Park is only for pipeline leads (not customers, parked, or on Hot List)')"
                            x-on:click.stop="openParkModal()"
                        >
                            Park
                        </button>
                        <x-lead-log-action-dropdown :types="$leadQuickActionTypes ?? []" />
                        <x-lead-make-appointment-button disabled-title="Select a row first" />
                        <x-lead-log-finance-application-button />
                        <x-lead-log-quote-button />
                        @if (! empty($isManagementView) && $isManagementView)
                            <button
                                type="button"
                                class="inline-flex items-center rounded-lg border px-2.5 py-1 text-xs font-semibold shadow-sm transition-colors enabled:hover:border-red-600 enabled:hover:bg-red-600 enabled:hover:text-white"
                                :class="selectedLeadId !== null ? 'border-gray-200 bg-white text-gray-800' : 'cursor-not-allowed border-gray-100 bg-gray-50 text-gray-400'"
                                :disabled="selectedLeadId === null"
                                :title="selectedLeadId === null ? 'Select a row first' : 'Assign this record to another salesman'"
                                x-on:click.stop="openReassignModal()"
                            >
                                Reassign
                            </button>
                        @endif
                    </div>

                    <form
                        method="GET"
                        action="{{ route('leads.all') }}"
                        class="flex shrink-0 flex-wrap items-center gap-x-2 gap-y-1"
                    >
                    <div class="flex shrink-0 items-center gap-1">
                        <label for="month" class="whitespace-nowrap text-[10px] font-medium leading-none text-gray-500">Month</label>
                        <div class="relative h-7 w-max shrink-0">
                            <x-styled-select
                                name="month"
                                id="month"
                                :selected="(string) (int) $selectedMonth"
                                :options="$monthSelectOptions"
                                compact
                                class="h-full"
                            />
                        </div>
                    </div>
                    <div class="flex shrink-0 items-center gap-1">
                        <label for="year" class="whitespace-nowrap text-[10px] font-medium leading-none text-gray-500">Year</label>
                        <div class="relative h-7 w-max shrink-0">
                            <x-styled-select
                                name="year"
                                id="year"
                                :selected="(string) (int) $selectedYear"
                                :options="$yearSelectOptions"
                                compact
                                class="h-full"
                            />
                        </div>
                    </div>
                    <div class="flex shrink-0 items-center gap-1">
                        <label for="status" class="whitespace-nowrap text-[10px] font-medium leading-none text-gray-500">Status</label>
                        <div class="relative h-7 w-max shrink-0">
                            <x-styled-select
                                name="status"
                                id="status"
                                :selected="$selectedStatusStr"
                                :options="$statusFilterOptions"
                                compact
                                class="h-full"
                            />
                        </div>
                    </div>
                    <div class="flex shrink-0 items-center gap-1">
                        <label for="lead_type" class="whitespace-nowrap text-[10px] font-medium leading-none text-gray-500">Type</label>
                        <div class="relative h-7 w-max shrink-0">
                            <x-styled-select
                                name="lead_type"
                                id="lead_type"
                                :selected="$selectedLeadTypeStr"
                                :options="$leadTypeFilterOptions"
                                compact
                                class="h-full"
                            />
                        </div>
                    </div>
                    <div class="flex min-w-0 shrink-0 items-center gap-1">
                        <label for="assigned_user_id" class="whitespace-nowrap text-[10px] font-medium leading-none text-gray-500">Assigned</label>
                        <div class="relative h-7 w-max shrink-0">
                            <x-styled-select
                                name="assigned_user_id"
                                id="assigned_user_id"
                                :selected="$selectedAssignedStr"
                                :options="$assignedFilterOptions"
                                compact
                                class="h-full"
                            />
                        </div>
                    </div>
                    <button
                        type="submit"
                        class="inline-flex h-6 shrink-0 items-center rounded-md bg-[var(--dealer-accent-color)] px-2 text-[10px] font-medium text-[var(--dealer-accent-text-color)] shadow-sm hover:opacity-95 focus:outline-none focus:ring-1 focus:ring-[var(--dealer-accent-color)]"
                    >
                        Apply
                    </button>
                    </form>

                <p class="ml-auto shrink-0 whitespace-nowrap text-right text-xs text-gray-500 leading-none">{{ number_format(count($leads ?? [])) }} record(s)</p>
            </div>

            <div class="space-y-2">
                <p
                    class="text-left text-xs text-amber-900"
                    x-show="selectedLeadId !== null && !selectionCanMarkSale"
                    x-cloak
                >
                    <span class="rounded-md bg-amber-50 px-2 py-1 ring-1 ring-amber-200">
                        <strong>Mark as sale</strong> is only for leads <strong>without a recorded sale</strong>. Choose a different row if this one is not eligible.
                    </span>
                </p>
            </div>

            <div class="overflow-x-auto">
                <table class="w-full table-fixed divide-y divide-gray-200 text-xs leading-tight">
                    @include('leads.partials.index-table-colgroup')
                    <thead class="bg-gray-50">
                        @include('leads.partials.index-table-head')
                    </thead>
                    <tbody
                        class="divide-y divide-gray-100 bg-white"
                        x-on:click="handleTableClick($event)"
                    >
                        @forelse (($leads ?? []) as $lead)
                            @include('leads.partials.index-table-row', ['lead' => $lead])
                        @empty
                            <tr>
                                <td colspan="14" class="px-2 py-4 text-center text-gray-500">
                                    No leads for this selection.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <div
                class="fixed inset-0 z-50 flex items-center justify-center px-4 py-8 sm:px-6"
                x-show="modalOpen"
                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="closeModal()"
                    aria-hidden="true"
                ></div>

                <div
                    class="relative z-10 w-full max-w-lg rounded-2xl border border-gray-200 bg-white shadow-2xl"
                    role="dialog"
                    aria-modal="true"
                    aria-labelledby="all-leads-convert-sale-title"
                    @click.stop
                >
                    <div class="flex items-start justify-between gap-4 border-b border-gray-100 px-5 py-4">
                        <div>
                            <h3 id="all-leads-convert-sale-title" class="text-base font-semibold text-gray-900">Convert to sale</h3>
                            <p class="mt-1 text-sm text-gray-600" x-text="leadLabel"></p>
                            <p class="mt-0.5 text-xs text-gray-500">Lead #<span x-text="leadId"></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="closeModal()"
                            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" x-bind:action="formAction" class="px-5 py-4 space-y-4" @submit="document.body.classList.remove('overflow-y-hidden')">
                        @csrf
                        <input type="hidden" name="__convert_lead_id" x-model="leadId">
                        <input type="hidden" name="__convert_lead_label" x-model="leadLabel">

                        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                            <div class="sm:col-span-2">
                                <label for="all_leads_modal_sale_date" class="block text-sm font-medium text-gray-700">Sale date</label>
                                <input
                                    id="all_leads_modal_sale_date"
                                    type="date"
                                    name="sale_date"
                                    x-model="saleDate"
                                    required
                                    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="sm:col-span-2">
                                <label for="all_leads_modal_sale_status" class="block text-sm font-medium text-gray-700">Sale status</label>
                                <select
                                    id="all_leads_modal_sale_status"
                                    name="status"
                                    x-model="saleStatus"
                                    required
                                    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\SaleStatuses::creatableStatuses() as $saleStatus)
                                        <option value="{{ $saleStatus }}">{{ \App\Support\SaleStatuses::label($saleStatus) }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div>
                                <label for="all_leads_modal_vehicle_make" class="block text-sm font-medium text-gray-700">Make</label>
                                <input
                                    id="all_leads_modal_vehicle_make"
                                    type="text"
                                    name="vehicle_make"
                                    x-model="saleVehicleMake"
                                    maxlength="255"
                                    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="all_leads_modal_vehicle_model" class="block text-sm font-medium text-gray-700">Model</label>
                                <input
                                    id="all_leads_modal_vehicle_model"
                                    type="text"
                                    name="vehicle_model"
                                    x-model="saleVehicleModel"
                                    maxlength="255"
                                    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>
                                <label for="all_leads_modal_vehicle_variant" class="block text-sm font-medium text-gray-700">Variant</label>
                                <input
                                    id="all_leads_modal_vehicle_variant"
                                    type="text"
                                    name="vehicle_variant"
                                    x-model="saleVehicleVariant"
                                    maxlength="255"
                                    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="all_leads_modal_vehicle_year" class="block text-sm font-medium text-gray-700">Year</label>
                                <input
                                    id="all_leads_modal_vehicle_year"
                                    type="number"
                                    name="vehicle_year"
                                    x-model="saleVehicleYear"
                                    min="{{ \App\Support\VehicleYear::MIN }}"
                                    max="{{ (int) now()->format('Y') + 2 }}"
                                    step="1"
                                    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 class="sm:col-span-2">
                                <label for="all_leads_modal_stock_number" class="block text-sm font-medium text-gray-700">Stock number</label>
                                <input
                                    id="all_leads_modal_stock_number"
                                    type="text"
                                    name="stock_number"
                                    x-model="saleStockNumber"
                                    maxlength="255"
                                    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="all_leads_modal_selling_price" class="block text-sm font-medium text-gray-700">Selling price</label>
                                <x-currency-input name="selling_price" id="all_leads_modal_selling_price" model="sellingPrice" />
                            </div>
                            <div>
                                <label for="all_leads_modal_gross_profit" class="block text-sm font-medium text-gray-700">Gross profit</label>
                                <x-currency-input name="gross_profit" id="all_leads_modal_gross_profit" model="grossProfit" />
                            </div>
                            <div class="sm:col-span-2">
                                <label for="all_leads_modal_notes" class="block text-sm font-medium text-gray-700">Notes</label>
                                <textarea
                                    id="all_leads_modal_notes"
                                    name="notes"
                                    x-model="notes"
                                    rows="2"
                                    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>

                        <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="closeModal()"
                            >
                                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"
                            >
                                Convert to sale
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <div
                class="fixed inset-0 z-[60] flex items-center justify-center px-4 py-8 sm:px-6"
                x-show="parkModalOpen"
                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="closeParkModal()"
                    aria-hidden="true"
                ></div>

                <div
                    class="relative z-10 w-full max-w-lg rounded-2xl border border-gray-200 bg-white shadow-2xl"
                    role="dialog"
                    aria-modal="true"
                    aria-labelledby="all-leads-park-title"
                    @click.stop
                >
                    <div class="flex items-start justify-between gap-4 border-b border-gray-100 px-5 py-4">
                        <div>
                            <h3 id="all-leads-park-title" class="text-base font-semibold text-gray-900">Park lead</h3>
                            <p class="mt-1 text-sm text-gray-600" x-text="parkLeadLabel"></p>
                            <p class="mt-0.5 text-xs text-gray-500">Lead #<span x-text="parkLeadId"></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="closeParkModal()"
                            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(/\/$/, '') + '/' + parkLeadId + '/park'"
                        @submit="document.body.classList.remove('overflow-y-hidden')"
                    >
                        @csrf
                        <input type="hidden" name="__park_lead_id" x-bind:value="parkLeadId">
                        <input type="hidden" name="__park_lead_label" x-bind:value="parkLeadLabel">

                        <div class="space-y-4">
                            <div>
                                <label for="all_leads_park_reason" class="block text-sm font-medium text-gray-700">Why is this lead being parked?</label>
                                <textarea
                                    id="all_leads_park_reason"
                                    name="park_reason"
                                    x-model="parkReason"
                                    rows="4"
                                    required
                                    minlength="3"
                                    maxlength="5000"
                                    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"
                                    placeholder="Describe the situation…"
                                ></textarea>
                            </div>
                            <div>
                                <label for="all_leads_park_follow_up_date" class="block text-sm font-medium text-gray-700">Follow-up date</label>
                                <input
                                    id="all_leads_park_follow_up_date"
                                    type="date"
                                    name="park_follow_up_date"
                                    x-model="parkFollowUp"
                                    required
                                    x-bind:min="config.todayDate"
                                    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="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="closeParkModal()"
                            >
                                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"
                            >
                                Park lead
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <x-lead-appointment-modal />
            <x-lead-finance-application-modal />
            <x-lead-quote-modal />

            @if (! empty($isManagementView) && $isManagementView)
                <div
                    class="fixed inset-0 z-[70] flex items-center justify-center px-4 py-8 sm:px-6"
                    x-show="reassignModalOpen"
                    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="closeReassignModal()"
                        aria-hidden="true"
                    ></div>

                    <div
                        class="relative z-10 w-full max-w-lg rounded-2xl border border-gray-200 bg-white shadow-2xl"
                        role="dialog"
                        aria-modal="true"
                        aria-labelledby="all-leads-reassign-title"
                        @click.stop
                    >
                        <div class="flex items-start justify-between gap-4 border-b border-gray-100 px-5 py-4">
                            <div>
                                <h3 id="all-leads-reassign-title" class="text-base font-semibold text-gray-900">Reassign lead</h3>
                                <p class="mt-1 text-sm text-gray-600" x-text="reassignLeadLabel"></p>
                                <p class="mt-0.5 text-xs text-gray-500">Lead #<span x-text="reassignLeadId"></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="closeReassignModal()"
                                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(/\/$/, '') + '/' + reassignLeadId + '/reassign'"
                            @submit="document.body.classList.remove('overflow-y-hidden')"
                        >
                            @csrf
                            <input type="hidden" name="__reassign_lead_id" x-bind:value="reassignLeadId">
                            <input type="hidden" name="__reassign_lead_label" x-bind:value="reassignLeadLabel">

                            <div>
                                <label for="all_leads_reassign_assigned_user_id" class="block text-sm font-medium text-gray-700">Assign to salesman</label>
                                @if (($reassignSalesmen ?? collect())->isEmpty())
                                    <p class="mt-2 text-sm text-amber-800">There are no active salesman users to assign to. Add or enable users with the Salesman role first.</p>
                                @else
                                    <select
                                        id="all_leads_reassign_assigned_user_id"
                                        name="assigned_user_id"
                                        x-model="reassignAssigneeId"
                                        required
                                        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"
                                    >
                                        <option value="" disabled>— Select salesman —</option>
                                        @foreach (($reassignSalesmen ?? collect()) as $sm)
                                            @php
                                                $smLabel = trim(($sm->name ?? '').' '.($sm->surname ?? ''));
                                                $smLabel = $smLabel !== '' ? $smLabel : ('User #'.$sm->id);
                                            @endphp
                                            <option value="{{ (int) $sm->id }}">{{ $smLabel }}</option>
                                        @endforeach
                                    </select>
                                @endif
                                @error('assigned_user_id')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </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="closeReassignModal()"
                                >
                                    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 disabled:cursor-not-allowed disabled:opacity-50"
                                    @if (($reassignSalesmen ?? collect())->isEmpty())
                                        disabled
                                    @endif
                                >
                                    Save assignment
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            @endif

            <x-lead-view-details-modal />
            <x-lead-quick-call-modal />
        </div>
    </div>
</x-app-layout>