@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 : '';
    $showParkFollowUpColumn = true;
    $assignedFilterOptions = [];
    $selectedAssignedStr = $selectedAssignedUserId !== null ? (string) $selectedAssignedUserId : '';
    if (! empty($isDealerWideView) && $isDealerWideView) {
        $assignedFilterOptions = [['value' => '', 'label' => 'All assignees']];
        foreach (($assigneeFilterUsers ?? []) 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];
        }
    }
@endphp

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

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

        @php
            $parkedLeadsAlpineConfig = [
                'toolbarMode' => 'parked',
                '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')),
                'reopenConvert' => null,
            ];
            if (filled(old('__park_lead_id'))) {
                $parkedLeadsAlpineConfig['reopenPark'] = [
                    'leadId' => (int) old('__park_lead_id'),
                    'leadLabel' => (string) old('__park_lead_label', ''),
                ];
            }
        @endphp

        <div
            class="bg-white border border-gray-200 rounded-xl shadow-sm p-4 space-y-3"
            x-data="leadPipelineTable(@js($parkedLeadsAlpineConfig))"
            x-on:keydown.escape.window="onEscapeWindow()"
        >
            <div class="flex min-h-[1.75rem] w-full flex-wrap items-center gap-x-2 gap-y-1">
                <div class="flex shrink-0 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 ? 'border-gray-200 bg-white text-gray-800' : 'cursor-not-allowed border-gray-100 bg-gray-50 text-gray-400'"
                        :disabled="selectedLeadId === null"
                        title="Move selected lead to your 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 ? 'border-gray-200 bg-white text-gray-800' : 'cursor-not-allowed border-gray-100 bg-gray-50 text-gray-400'"
                        :disabled="selectedLeadId === null"
                        title="Return selected lead to Active Leads (pipeline)"
                        x-on:click.stop="submitReturnToPipeline()"
                    >
                        Move to Active Leads
                    </button>
                    <x-lead-log-action-dropdown :types="$leadQuickActionTypes ?? []" />
                </div>

                <form
                    method="GET"
                    action="{{ route('dashboard.crm_leads.vehicle_sale_leads.parked_leads') }}"
                    class="flex min-w-0 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>
                    @if (! empty($isDealerWideView) && $isDealerWideView)
                        <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>
                    @endif
                    <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="overflow-x-auto">
                <table class="w-full table-fixed divide-y divide-gray-200 text-xs leading-tight">
                    @include('leads.partials.index-table-colgroup', ['showParkFollowUp' => true])
                    <thead class="bg-gray-50">
                        @include('leads.partials.index-table-head', ['showParkFollowUp' => true])
                    </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,
                                'convertUrl' => '',
                                'showParkFollowUp' => true,
                            ])
                        @empty
                            <tr>
                                <td colspan="15" class="px-2 py-8 text-center text-gray-500">
                                    @if (! empty($isDealerWideView))
                                        No parked leads match the selected filters.
                                    @else
                                        No parked leads for this period. Select a row on <a href="{{ route('leads.active') }}" class="font-medium text-[var(--dealer-accent-color)] hover:underline">Active Leads</a> and choose <strong>Park</strong> to add one with a follow-up date.
                                    @endif
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

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