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

@php
    $showForm = $personalAppointmentMode || ! empty($leadOptions);
@endphp

<div
    class="fixed inset-0 z-[60] flex items-center justify-center px-4 py-8 sm:px-6"
    x-show="appointmentModalOpen"
    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="closeAppointmentModal()"
        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="dashboard-appointment-title"
        @click.stop
    >
        <div class="flex items-start justify-between gap-4 border-b border-gray-100 px-5 py-4">
            <div>
                <h3 id="dashboard-appointment-title" class="text-base font-semibold text-gray-900">
                    @if ($personalAppointmentMode)
                        New personal appointment
                    @else
                        New appointment
                    @endif
                </h3>
                <p class="mt-1 text-sm text-gray-600" x-show="appointmentDate">
                    <span x-text="formattedAppointmentDate"></span>
                </p>
                @if ($personalAppointmentMode)
                    <p class="mt-1 text-sm text-gray-500">Optional: who you are meeting with (team member and/or lead).</p>
                @endif
            </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="closeAppointmentModal()"
                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>

        @if (! $showForm)
            <div class="px-5 py-6 space-y-3">
                <p class="text-sm text-gray-600">
                    You do not have any leads assigned to you yet. Add or claim a lead before scheduling an appointment.
                </p>
                <a
                    href="{{ route('leads.new') }}"
                    class="inline-flex items-center text-sm font-medium text-red-600 hover:text-red-700"
                >
                    Add Leads / Prospects
                </a>
            </div>
        @else
            <form
                method="POST"
                class="px-5 py-4 space-y-4"
                x-bind:action="appointmentFormAction"
                @submit="if (!canSubmitNewAppointment()) { $event.preventDefault(); } else { document.body.classList.remove('overflow-y-hidden'); }"
            >
                @csrf
                @unless ($personalAppointmentMode)
                    <input type="hidden" name="__appointment_lead_id" x-bind:value="appointmentLeadId">
                @endunless
                <input type="hidden" name="__appointment_from" value="dashboard">
                <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="status" value="scheduled">

                @if ($personalAppointmentMode)
                    <div>
                        <label for="dashboard_appointment_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="dashboard_appointment_with_user_id"
                            name="with_user_id"
                            x-model="appointmentWithUserId"
                            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>

                    <div>
                        <label for="dashboard_appointment_lead_id" class="block text-sm font-medium text-gray-700">
                            Meeting with (lead / client) <span class="font-normal text-gray-500">(optional)</span>
                        </label>
                        <select
                            id="dashboard_appointment_lead_id"
                            name="lead_id"
                            x-model="appointmentLeadId"
                            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>
                    </div>
                @else
                    <div>
                        <label for="dashboard_appointment_lead_id" class="block text-sm font-medium text-gray-700">
                            Lead <span class="text-red-600">*</span>
                        </label>
                        <select
                            id="dashboard_appointment_lead_id"
                            required
                            x-model="appointmentLeadId"
                            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="!appointmentLeadId">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>
                        @error('lead_id')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                @endif

                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                        <label for="dashboard_appointment_date" class="block text-sm font-medium text-gray-700">Date</label>
                        <input
                            type="date"
                            id="dashboard_appointment_date"
                            name="appointment_date"
                            required
                            x-model="appointmentDate"
                            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"
                        >
                        @error('appointment_date')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                    <div>
                        <label for="dashboard_appointment_time" class="block text-sm font-medium text-gray-700">Time</label>
                        <input
                            type="time"
                            id="dashboard_appointment_time"
                            name="appointment_time"
                            required
                            x-model="appointmentTime"
                            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"
                        >
                        @error('appointment_time')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <div>
                    <label for="dashboard_appointment_location" class="block text-sm font-medium text-gray-700">Place / Location</label>
                    <input
                        type="text"
                        id="dashboard_appointment_location"
                        name="location"
                        maxlength="255"
                        x-model="appointmentLocation"
                        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="{{ $personalAppointmentMode ? 'e.g. Meeting, site visit' : 'e.g. Showroom, customer site' }}"
                    >
                    @error('location')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="dashboard_appointment_notes" class="block text-sm font-medium text-gray-700">Notes</label>
                    <textarea
                        id="dashboard_appointment_notes"
                        name="notes"
                        rows="3"
                        x-model="appointmentNotes"
                        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>
                    @error('notes')
                        <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="closeAppointmentModal()"
                    >
                        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"
                        :disabled="!canSubmitNewAppointment()"
                    >
                        @if ($personalAppointmentMode)
                            Add to my calendar
                        @else
                            Schedule appointment
                        @endif
                    </button>
                </div>
            </form>
        @endif
    </div>
</div>