@php
    $indexRoute = $indexRoute ?? route('appointments.index');
    $appointmentFrom = $appointmentFrom ?? 'appointments';
    $appointmentsBase = $appointmentsBase ?? rtrim(route('appointments.index'), '/');
    $appointmentStoreUrl = $appointmentStoreUrl ?? null;
    $managementMode = (bool) ($managementMode ?? false);
    $managementRestrictLeadsToAssignee = (bool) ($managementRestrictLeadsToAssignee ?? $managementMode);
    $personalAppointmentMode = (bool) ($personalAppointmentMode ?? false);
    $appointmentsViewerId = auth()->id() !== null ? (int) auth()->id() : null;
    $showSalesmanColumn = (bool) ($showSalesmanColumn ?? false);
    $salesmanOptions = $salesmanOptions ?? [];
    $selectedSalesmanId = $selectedSalesmanId ?? null;
    $selectedSalesmanStr = $selectedSalesmanId !== null ? (string) $selectedSalesmanId : '';

    $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();
    $daySelectOptions = [['value' => '', 'label' => 'All days']];
    foreach (($dayOptions ?? []) as $dayNum) {
        $daySelectOptions[] = ['value' => (string) $dayNum, 'label' => (string) $dayNum];
    }
    $selectedDayStr = $selectedDay !== null ? (string) $selectedDay : '';
    $statusFilterOptions = [['value' => '', 'label' => 'All statuses']];
    foreach (($statusOptions ?? []) as $st) {
        $statusFilterOptions[] = [
            'value' => (string) $st,
            'label' => match ($st) {
                'no_show' => 'No show',
                'missed' => 'Missed',
                default => ucfirst($st),
            },
        ];
    }
    $selectedStatusStr = $selectedStatus !== null ? (string) $selectedStatus : '';
    $salesmanFilterOptions = [['value' => '', 'label' => 'All salespeople']];
    foreach ($salesmanOptions as $option) {
        $salesmanFilterOptions[] = [
            'value' => (string) $option['id'],
            'label' => $option['label'],
        ];
    }

    $reopenAppointmentId = old('__appointment_id');
    $reopenReschedule = filled($reopenAppointmentId) && ($errors->has('reschedule_reason') || filled(old('reschedule_reason')));
    $reopenEdit = filled($reopenAppointmentId) && ! $reopenReschedule;
    $reopenEditSalesmanId = '';
    if ($reopenEdit && $reopenAppointmentId) {
        $reopenEditSalesmanId = (string) old(
            '__edit_salesman_id',
            \App\Models\Appointment::query()->whereKey((int) $reopenAppointmentId)->value('user_id') ?? '',
        );
    }
    $reopenNewAppointment = old('__appointment_from') === $appointmentFrom
        && ! $reopenEdit
        && ! $reopenReschedule
        && (
            $personalAppointmentMode
            || filled(old('lead_id') ?: old('__appointment_lead_id'))
        );

    $rescheduleRouteName = $managementMode ? 'sales-appointments.reschedule' : 'appointments.reschedule';
    $updateRouteName = $managementMode ? 'sales-appointments.update' : 'appointments.update';
    $appointmentReschedulePathTemplate = preg_replace(
        '#/(\d+)/reschedule$#',
        '/__ID__/reschedule',
        route($rescheduleRouteName, ['appointment' => 1]),
    );
    $appointmentUpdatePathTemplate = preg_replace(
        '#/(\d+)$#',
        '/__ID__',
        route($updateRouteName, ['appointment' => 1]),
    );

    $appointmentsAlpineConfig = [
        'appointmentsBase' => rtrim($appointmentsBase, '/'),
        'appointmentReschedulePathTemplate' => $appointmentReschedulePathTemplate,
        'appointmentUpdatePathTemplate' => $appointmentUpdatePathTemplate,
        'appointmentStoreUrl' => $appointmentStoreUrl,
        'leadUrlBase' => url('/leads'),
        'managementMode' => $managementMode,
        'managementRestrictLeadsToAssignee' => $managementRestrictLeadsToAssignee,
        'personalAppointmentMode' => $personalAppointmentMode,
        'todayDate' => now()->format('Y-m-d'),
        'filterYear' => (string) (int) $selectedYear,
        'filterMonth' => (string) (int) $selectedMonth,
        'filterDay' => $selectedDayStr,
        'filterStatus' => $selectedStatusStr,
        'filterSalesman' => $selectedSalesmanStr,
        'appointmentDateDefault' => old('appointment_date', now()->format('Y-m-d')),
        'appointmentTimeDefault' => old('appointment_time', '09:00'),
        'appointmentLocationDefault' => old('location', ''),
        'appointmentNotesDefault' => old('notes', ''),
        'appointmentLeadIdDefault' => old('lead_id', old('__appointment_lead_id', '')),
        'appointmentWithUserIdDefault' => old('with_user_id', ''),
        'reopenAppointment' => $reopenNewAppointment ? [
            'leadId' => filled(old('lead_id', old('__appointment_lead_id'))) ? (int) old('lead_id', old('__appointment_lead_id')) : null,
            'withUserId' => filled(old('with_user_id')) ? (int) old('with_user_id') : null,
        ] : null,
        'editWithUserIdDefault' => old('with_user_id', ''),
        'reopenEdit' => $reopenEdit ? ['appointmentId' => (int) $reopenAppointmentId] : null,
        'reopenReschedule' => $reopenReschedule ? ['appointmentId' => (int) $reopenAppointmentId] : null,
        'editLeadIdDefault' => old('lead_id', ''),
        'editSalesmanIdDefault' => $reopenEditSalesmanId,
        'editDateDefault' => old('appointment_date', ''),
        'editTimeDefault' => old('appointment_time', '09:00'),
        'editLocationDefault' => old('location', ''),
        'editNotesDefault' => old('notes', ''),
        'leadOptions' => $leadOptions ?? [],
        'salesmanOptions' => $salesmanOptions,
        'rescheduleDateDefault' => old('appointment_date', ''),
        'rescheduleTimeDefault' => old('appointment_time', '09:00'),
        'rescheduleReasonDefault' => old('reschedule_reason', ''),
        'appointmentFrom' => $appointmentFrom,
    ];

    $tableColspan = match (true) {
        $personalAppointmentMode => 6,
        $showSalesmanColumn => 11,
        default => 10,
    };
@endphp

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

    <div
        class="bg-white border border-gray-200 rounded-xl shadow-sm p-4 space-y-3"
        x-data="appointmentsTable(@js($appointmentsAlpineConfig))"
        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">
                    <button
                        type="button"
                        class="inline-flex items-center rounded-lg border border-[var(--dealer-accent-color)] bg-[var(--dealer-accent-color)] px-2.5 py-1 text-xs font-semibold text-[var(--dealer-accent-text-color)] shadow-sm transition-opacity hover:opacity-95"
                        title="Schedule a new appointment"
                        x-on:click.stop="openNewAppointmentModal()"
                    >
                        New Appointment
                    </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-[var(--dealer-accent-color)] enabled:hover:bg-[var(--dealer-accent-color)] enabled:hover:text-[var(--dealer-accent-text-color)]"
                        :class="selectedAppointmentId !== null ? 'border-gray-200 bg-white text-gray-800' : 'cursor-not-allowed border-gray-100 bg-gray-50 text-gray-400'"
                        :disabled="selectedAppointmentId === null"
                        :title="selectedAppointmentId === null ? 'Select an appointment first' : 'Edit appointment details'"
                        x-on:click.stop="openEditModal()"
                    >
                        Edit
                    </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-[var(--dealer-accent-color)] enabled:hover:bg-[var(--dealer-accent-color)] enabled:hover:text-[var(--dealer-accent-text-color)]"
                        :class="(selectedAppointmentId !== null && selectionCanReschedule) ? 'border-gray-200 bg-white text-gray-800' : 'cursor-not-allowed border-gray-100 bg-gray-50 text-gray-400'"
                        :disabled="selectedAppointmentId === null || !selectionCanReschedule"
                        :title="selectedAppointmentId === null ? 'Select an appointment first' : (selectionCanReschedule ? 'Change date, time, and reason' : 'Only scheduled or missed appointments can be rescheduled')"
                        x-on:click.stop="openRescheduleModal()"
                    >
                        Reschedule
                    </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-green-600 enabled:hover:bg-green-600 enabled:hover:text-white"
                            :class="(selectedAppointmentId !== null && selectionCanComplete) ? 'border-gray-200 bg-white text-gray-800' : 'cursor-not-allowed border-gray-100 bg-gray-50 text-gray-400'"
                            :disabled="selectedAppointmentId === null || !selectionCanComplete"
                            :title="selectedAppointmentId === null ? 'Select an appointment first' : (selectionCanComplete ? 'Mark this appointment as completed' : 'This appointment is already completed or cannot be marked complete')"
                            x-on:click.stop="submitMarkComplete()"
                        >
                            Mark as completed
                        </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="(selectedAppointmentId !== null && selectionCanMissed) ? 'border-gray-200 bg-white text-gray-800' : 'cursor-not-allowed border-gray-100 bg-gray-50 text-gray-400'"
                            :disabled="selectedAppointmentId === null || !selectionCanMissed"
                            :title="selectedAppointmentId === null ? 'Select an appointment first' : (selectionCanMissed ? 'Mark this appointment as missed' : 'Only scheduled appointments can be marked missed')"
                            x-on:click.stop="submitMarkMissed()"
                        >
                            Missed
                        </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-amber-600 enabled:hover:bg-amber-600 enabled:hover:text-white"
                            :class="(selectedAppointmentId !== null && selectionCanNoShow) ? 'border-gray-200 bg-white text-gray-800' : 'cursor-not-allowed border-gray-100 bg-gray-50 text-gray-400'"
                            :disabled="selectedAppointmentId === null || !selectionCanNoShow"
                            :title="selectedAppointmentId === null ? 'Select an appointment first' : (selectionCanNoShow ? 'Mark that the client did not show up' : 'Only scheduled appointments can be marked no show')"
                            x-on:click.stop="submitMarkNoShow()"
                        >
                            No Show
                        </button>
            </div>

            <form
                method="GET"
                action="{{ $indexRoute }}"
                class="ml-4 flex min-w-0 shrink-0 flex-wrap items-center gap-x-2 gap-y-1"
            >
                @if ($showSalesmanColumn)
                    <div class="flex shrink-0 items-center gap-1">
                        <label for="salesman" class="whitespace-nowrap text-[10px] font-medium leading-none text-gray-500">Salesperson</label>
                        <div class="relative h-7 w-max shrink-0">
                            <x-styled-select
                                name="salesman"
                                id="salesman"
                                :selected="$selectedSalesmanStr"
                                :options="$salesmanFilterOptions"
                                compact
                                class="h-full"
                            />
                        </div>
                    </div>
                @endif
                <div class="flex shrink-0 items-center gap-1">
                    <label for="day" class="whitespace-nowrap text-[10px] font-medium leading-none text-gray-500">Day</label>
                    <div class="relative h-7 w-max shrink-0">
                        <x-styled-select
                            name="day"
                            id="day"
                            :selected="$selectedDayStr"
                            :options="$daySelectOptions"
                            compact
                            class="h-full"
                        />
                    </div>
                </div>
                <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>
                <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 text-right text-xs text-gray-500 leading-none">
                {{ number_format(count($appointments ?? [])) }} appointment(s)
            </p>
        </div>

        <div class="overflow-x-auto" x-on:click="handleTableClick($event)">
            <table class="w-full table-auto divide-y divide-gray-200 text-xs leading-tight">
                <thead class="bg-gray-50">
                    <tr>
                        <th scope="col" class="whitespace-nowrap px-2 py-1 text-left font-semibold text-gray-700">Date / time</th>
                        @if ($personalAppointmentMode)
                            <th scope="col" class="whitespace-nowrap px-2 py-1 text-left font-semibold text-gray-700">Person</th>
                            <th scope="col" class="whitespace-nowrap px-2 py-1 text-left font-semibold text-gray-700">Place</th>
                            <th scope="col" class="whitespace-nowrap px-2 py-1 text-left font-semibold text-gray-700">Email</th>
                            <th scope="col" class="whitespace-nowrap px-2 py-1 text-left font-semibold text-gray-700">Contact number</th>
                            <th scope="col" class="whitespace-nowrap px-2 py-1 text-left font-semibold text-gray-700">Status</th>
                        @else
                            @if ($showSalesmanColumn)
                                <th scope="col" class="whitespace-nowrap px-2 py-1 text-left font-semibold text-gray-700">Salesperson</th>
                            @endif
                            <th scope="col" class="whitespace-nowrap px-2 py-1 text-left font-semibold text-gray-700">Lead</th>
                            <th scope="col" class="whitespace-nowrap px-2 py-1 text-left font-semibold text-gray-700">Type</th>
                            <th scope="col" class="whitespace-nowrap px-2 py-1 text-left font-semibold text-gray-700">Representative</th>
                            <th scope="col" class="whitespace-nowrap px-2 py-1 text-left font-semibold text-gray-700">Phone</th>
                            <th scope="col" class="whitespace-nowrap px-2 py-1 text-left font-semibold text-gray-700">Email</th>
                            <th scope="col" class="whitespace-nowrap px-2 py-1 text-left font-semibold text-gray-700">Vehicle</th>
                            <th scope="col" class="whitespace-nowrap px-2 py-1 text-left font-semibold text-gray-700">Location</th>
                            <th scope="col" class="whitespace-nowrap px-2 py-1 text-left font-semibold text-gray-700">Notes</th>
                            <th scope="col" class="whitespace-nowrap px-2 py-1 text-left font-semibold text-gray-700">Status</th>
                        @endif
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100 bg-white">
                    @forelse ($appointments as $appointment)
                        @php
                            $lead = $appointment->lead;
                            $salesman = $appointment->user;
                            $salesmanName = $salesman
                                ? trim(trim((string) $salesman->name).' '.trim((string) ($salesman->surname ?? '')))
                                : '—';
                            if ($salesmanName === '' && $salesman) {
                                $salesmanName = 'Salesperson #'.$salesman->id;
                            }
                            $timeForInput = $appointment->appointment_time
                                ? \Illuminate\Support\Str::substr((string) $appointment->appointment_time, 0, 5)
                                : ($appointment->appointment_datetime?->format('H:i') ?? '09:00');
                        @endphp
                        <tr
                            class="cursor-pointer select-none transition-colors hover:bg-gray-50"
                            data-appointment-id="{{ $appointment->id }}"
                            data-edit-url="{{ route($updateRouteName, $appointment) }}"
                            data-reschedule-url="{{ route($rescheduleRouteName, $appointment) }}"
                            data-lead-id="{{ (int) ($appointment->lead_id ?? 0) }}"
                            data-salesman-id="{{ (int) ($appointment->user_id ?? 0) }}"
                            data-with-user-id="{{ (int) ($appointment->with_user_id ?? 0) }}"
                            data-lead-label="{{ $personalAppointmentMode ? $appointment->managerPersonName($appointmentsViewerId) : $appointment->counterpartyLabelForViewer($appointmentsViewerId) }}"
                            data-is-personal="{{ $appointment->lead_id === null ? '1' : '0' }}"
                            data-can-complete="{{ $appointment->canBeMarkedComplete() ? '1' : '0' }}"
                            data-can-reschedule="{{ $appointment->canBeRescheduled() ? '1' : '0' }}"
                            data-can-missed="{{ $appointment->canBeMarkedMissed() ? '1' : '0' }}"
                            data-can-no-show="{{ $appointment->canBeMarkedNoShow() ? '1' : '0' }}"
                            data-appointment-date="{{ $appointment->appointment_date?->format('Y-m-d') ?? '' }}"
                            data-appointment-time="{{ $timeForInput }}"
                            data-location="{{ e($appointment->location ?? '') }}"
                            data-notes="{{ e($appointment->notes ?? '') }}"
                            x-bind:class="selectedAppointmentId !== null && Number(selectedAppointmentId) === {{ (int) $appointment->id }}
                                ? 'bg-slate-50 ring-1 ring-inset ring-gray-200/90 shadow-[inset_3px_0_0_#dc2626] hover:bg-slate-100'
                                : ''"
                        >
                            <td class="px-2 py-1.5 whitespace-nowrap text-gray-900">{{ $appointment->formattedDateTime() }}</td>
                            @if ($personalAppointmentMode)
                                <td class="px-2 py-1.5 text-gray-900">{{ $appointment->managerPersonName($appointmentsViewerId) }}</td>
                                <td class="px-2 py-1.5 text-gray-700">{{ $appointment->managerPlace() ?? '—' }}</td>
                                <td class="px-2 py-1.5 text-gray-700">{{ $appointment->managerContactEmail() ?? '—' }}</td>
                                <td class="px-2 py-1.5 text-gray-700">{{ $appointment->managerContactPhone() ?? '—' }}</td>
                                <td class="px-2 py-1.5">
                                    <span class="inline-flex rounded-full px-2 py-0.5 text-[10px] font-medium {{ $appointment->statusPillClasses() }}">
                                        {{ $appointment->statusLabel() }}
                                    </span>
                                </td>
                            @else
                                @if ($showSalesmanColumn)
                                    <td class="px-2 py-1.5 text-gray-900 whitespace-nowrap">{{ $salesmanName }}</td>
                                @endif
                                <td class="px-2 py-1.5 text-gray-900">{{ $appointment->counterpartyLabelForViewer($appointmentsViewerId) }}</td>
                                <td class="px-2 py-1.5">
                                    <x-appointment-subtext :appointment="$appointment" />
                                    @if (! $appointment->displaySubtext())
                                        <span class="text-gray-400">—</span>
                                    @endif
                                </td>
                                <td class="px-2 py-1.5 text-gray-700">{{ $lead?->displayRepresentativeName() ?: '—' }}</td>
                                <td class="px-2 py-1.5 text-gray-700">{{ $lead?->displayPhone() ?? '—' }}</td>
                                <td class="px-2 py-1.5 text-gray-700">{{ $lead?->displayEmail() ?? '—' }}</td>
                                <td class="px-2 py-1.5 text-gray-700">{{ $lead?->displayVehicleInterest() ?: '—' }}</td>
                                <td class="px-2 py-1.5 text-gray-700">{{ $appointment->location ?: '—' }}</td>
                                <td class="px-2 py-1.5 text-gray-700 max-w-xs truncate" title="{{ $appointment->notes }}">{{ $appointment->notes ?: '—' }}</td>
                                <td class="px-2 py-1.5">
                                    <span class="inline-flex rounded-full px-2 py-0.5 text-[10px] font-medium {{ $appointment->statusPillClasses() }}">
                                        {{ $appointment->statusLabel() }}
                                    </span>
                                </td>
                            @endif
                        </tr>
                    @empty
                        <tr>
                            <td colspan="{{ $tableColspan }}" class="px-4 py-8 text-center text-sm text-gray-500">
                                No appointments match these filters.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <x-appointments-new-modal
            :lead-options="$leadOptions ?? []"
            :management-mode="$managementMode"
            :management-restrict-leads-to-assignee="$managementRestrictLeadsToAssignee"
            :personal-appointment-mode="$personalAppointmentMode"
            :salesman-options="$salesmanOptions ?? []"
            :team-member-options="$teamMemberOptions ?? $salesmanOptions ?? []"
        />
        <x-appointments-edit-modal
            :lead-options="$leadOptions ?? []"
            :management-mode="$managementMode"
            :management-restrict-leads-to-assignee="$managementRestrictLeadsToAssignee"
            :personal-appointment-mode="$personalAppointmentMode"
            :team-member-options="$teamMemberOptions ?? $salesmanOptions ?? []"
        />
        <x-appointments-reschedule-modal />
    </div>
</div>