@props([
    'leadOptions' => [],
    'managementMode' => false,
    'managementRestrictLeadsToAssignee' => true,
    'personalAppointmentMode' => false,
    'teamMemberOptions' => [],
])

<div
    class="fixed inset-0 z-[60] flex items-center justify-center px-4 py-8 sm:px-6"
    x-show="editModalOpen"
    x-cloak
    x-transition
>
    <div class="absolute inset-0 bg-gray-900/50 backdrop-blur-[1px]" @click="closeEditModal()" 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"
        @click.stop
    >
        <div class="flex items-start justify-between gap-4 border-b border-gray-100 px-5 py-4">
            <div>
                <h3 class="text-base font-semibold text-gray-900">Edit appointment</h3>
                <p class="mt-1 text-sm text-gray-600" x-text="selectionLabel"></p>
            </div>
            <button type="button" class="rounded-lg p-1.5 text-gray-400 hover:bg-gray-100" @click="closeEditModal()" aria-label="Close">
                <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><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="editFormActionUrl || '#'"
            @submit="
                if (!canSubmitEditAppointment()) {
                    $event.preventDefault();
                    return;
                }
                const url = editFormActionUrl || editFormAction;
                if (!url || url === '#') {
                    $event.preventDefault();
                    window.alert('Unable to save this appointment. Close the dialog, refresh the page, and try again.');
                    return;
                }
                $event.target.action = url;
                document.body.classList.remove('overflow-y-hidden');
            "
        >
            @csrf
            <input type="hidden" name="__appointment_id" x-bind:value="editAppointmentId">
            @if ($managementMode)
                <input type="hidden" name="__management_restrict_leads_to_assignee" value="{{ ($managementRestrictLeadsToAssignee ?? true) ? '1' : '0' }}">
            @endif
            <input type="hidden" name="__appointment_from" x-bind:value="config.appointmentFrom ?? 'appointments'">
            <input type="hidden" name="__filter_year" x-bind:value="config.filterYear ?? ''">
            <input type="hidden" name="__filter_month" x-bind:value="config.filterMonth ?? ''">
            <input type="hidden" name="__filter_day" x-bind:value="config.filterDay">
            <input type="hidden" name="__filter_status" x-bind:value="config.filterStatus">
            <input type="hidden" name="__filter_salesman" x-bind:value="config.filterSalesman ?? ''">
            <input type="hidden" name="__edit_salesman_id" x-bind:value="editSalesmanId">
            @if ($personalAppointmentMode)
                <div>
                    <label for="edit_with_user_id" class="block text-sm font-medium text-gray-700">
                        Meeting with (team member) <span class="font-normal text-gray-500">(optional)</span>
                    </label>
                    <select
                        id="edit_with_user_id"
                        name="with_user_id"
                        x-model="editWithUserId"
                        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="">None</option>
                        @foreach ($teamMemberOptions as $option)
                            <option value="{{ (int) $option['id'] }}">{{ $option['label'] }}</option>
                        @endforeach
                    </select>
                </div>
            @endif
            <div>
                <label for="edit_lead_id" class="block text-sm font-medium text-gray-700">
                    @if ($personalAppointmentMode)
                        Meeting with (lead / client) <span class="font-normal text-gray-500">(optional)</span>
                    @else
                        Lead / Client <span class="text-red-600">*</span>
                    @endif
                </label>
                @if (empty($leadOptions) && ! $personalAppointmentMode)
                    <p class="mt-2 text-sm text-gray-600">
                        @if ($managementMode)
                            No leads are available for salespeople.
                        @else
                            You do not have any leads assigned to you. Assign a lead before editing this appointment.
                        @endif
                    </p>
                @elseif ($personalAppointmentMode)
                    <select
                        id="edit_lead_id"
                        name="lead_id"
                        x-model="editLeadId"
                        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="">None</option>
                        @foreach ($leadOptions as $option)
                            <option value="{{ (int) $option['id'] }}">{{ $option['label'] }}</option>
                        @endforeach
                    </select>
                    <p class="mt-1 text-xs text-gray-500">Optional link to any lead at this dealer.</p>
                @elseif ($managementMode)
                    <div class="mb-4">
                        <label for="edit_with_user_id_mgmt" class="block text-sm font-medium text-gray-700">
                            Meeting with (team member) <span class="font-normal text-gray-500">(optional)</span>
                        </label>
                        <select
                            id="edit_with_user_id_mgmt"
                            name="with_user_id"
                            x-model="editWithUserId"
                            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="">None</option>
                            @foreach ($teamMemberOptions as $option)
                                <option value="{{ (int) $option['id'] }}">{{ $option['label'] }}</option>
                            @endforeach
                        </select>
                    </div>
                    <select
                        id="edit_lead_id"
                        name="lead_id"
                        x-model="editLeadId"
                        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="">None</option>
                        <template x-for="opt in filteredEditLeadOptions()" :key="opt.id">
                            <option :value="String(opt.id)" x-text="opt.label"></option>
                        </template>
                    </select>
                    <p class="mt-1 text-xs text-gray-500">Select a lead, a team member, or both. Leads must be assigned to this appointment's salesperson.</p>
                @else
                    <select
                        id="edit_lead_id"
                        name="lead_id"
                        required
                        x-model="editLeadId"
                        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 :selected="!editLeadId">Select one of your leads</option>
                        @foreach ($leadOptions as $option)
                            <option value="{{ (int) $option['id'] }}">{{ $option['label'] }}</option>
                        @endforeach
                    </select>
                    <p class="mt-1 text-xs text-gray-500">Only leads assigned to you are listed.</p>
                @endif
            </div>
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                    <label for="edit_appointment_date" class="block text-sm font-medium text-gray-700">Date</label>
                    <input type="date" id="edit_appointment_date" name="appointment_date" required x-model="editDate" 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>
                    <label for="edit_appointment_time" class="block text-sm font-medium text-gray-700">Time</label>
                    <input type="time" id="edit_appointment_time" name="appointment_time" required x-model="editTime" 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="edit_location" class="block text-sm font-medium text-gray-700">Place / Location</label>
                <input type="text" id="edit_location" name="location" maxlength="255" x-model="editLocation" 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="edit_notes" class="block text-sm font-medium text-gray-700">Notes</label>
                <textarea id="edit_notes" name="notes" rows="3" x-model="editNotes" 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 hover:bg-gray-50" @click="closeEditModal()">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)] hover:opacity-95 disabled:cursor-not-allowed disabled:opacity-50"
                    @if (empty($leadOptions) && ! $personalAppointmentMode) disabled @endif
                >Save changes</button>
            </div>
        </form>
    </div>
</div>