<div>
    <!-- Appointment Form Modal -->
    @if($showModal)
        <div class="fixed inset-0 z-50 overflow-y-auto" x-data="{ show: @entangle('showModal') }" x-show="show" x-cloak>
            <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
                <div class="fixed inset-0 transition-opacity bg-zinc-500 bg-opacity-75" x-show="show" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"></div>

                <span class="hidden sm:inline-block sm:align-middle sm:h-screen">&#8203;</span>

                <div class="inline-block align-bottom bg-white dark:bg-zinc-800 rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-3xl sm:w-full sm:p-6" x-show="show" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100" x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
                    <!-- Header -->
                    <div class="flex items-center justify-between mb-6">
                        <h2 class="text-lg font-semibold text-zinc-900 dark:text-white dark:text-white">
                            {{ $editing ? 'Edit Appointment' : 'Schedule New Appointment' }}
                        </h2>
                        <button wire:click="closeModal" class="text-gray-400 hover:text-zinc-600 dark:text-zinc-400 dark:hover:text-gray-300 transition-colors duration-200">
                            <svg class="w-5 h-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"></path>
                            </svg>
                        </button>
                    </div>

                    <!-- Form -->
                    <form wire:submit="save" class="space-y-6">
                        <!-- Customer & Vehicle -->
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Customer</label>
                                <select wire:model.live="customer_id" class="block w-full rounded-md border-zinc-300 dark:border-zinc-600 dark:border-zinc-700 bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white dark:text-white border border-zinc-200 dark:border-zinc-700 focus:border-indigo-500 focus:ring-indigo-500">
                                    <option value="">Select Customer</option>
                                    @foreach($customers as $customer)
                                        <option value="{{ $customer->id }}">{{ $customer->full_name }}</option>
                                    @endforeach
                                </select>
                                @error('customer_id') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Vehicle</label>
                                <select wire:model="vehicle_id" {{ !$customer_id ? 'disabled' : '' }} class="block w-full rounded-md border-zinc-300 dark:border-zinc-600 dark:border-zinc-700 bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white dark:text-white border border-zinc-200 dark:border-zinc-700 focus:border-indigo-500 focus:ring-indigo-500 disabled:opacity-50">
                                    <option value="">Select Vehicle</option>
                                    @foreach($vehicles as $vehicle)
                                        <option value="{{ $vehicle->id }}">
                                            {{ $vehicle->year }} {{ $vehicle->make }} {{ $vehicle->model }} ({{ $vehicle->license_plate }})
                                        </option>
                                    @endforeach
                                </select>
                                @error('vehicle_id') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                            </div>
                        </div>

                        <!-- Date & Time -->
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Date</label>
                                <input type="date" wire:model.live="scheduled_date" class="block w-full rounded-md border-zinc-300 dark:border-zinc-600 dark:border-zinc-700 bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white dark:text-white border border-zinc-200 dark:border-zinc-700 focus:border-indigo-500 focus:ring-indigo-500" />
                                @error('scheduled_date') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Time</label>
                                <input type="time" wire:model.live="scheduled_time" class="block w-full rounded-md border-zinc-300 dark:border-zinc-600 dark:border-zinc-700 bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white dark:text-white border border-zinc-200 dark:border-zinc-700 focus:border-indigo-500 focus:ring-indigo-500" />
                                @error('scheduled_time') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Duration</label>
                                <select wire:model.live="estimated_duration_minutes" class="block w-full rounded-md border-zinc-300 dark:border-zinc-600 dark:border-zinc-700 bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white dark:text-white border border-zinc-200 dark:border-zinc-700 focus:border-indigo-500 focus:ring-indigo-500">
                                    @foreach($durationOptions as $minutes => $label)
                                        <option value="{{ $minutes }}">{{ $label }}</option>
                                    @endforeach
                                </select>
                                @error('estimated_duration_minutes') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                            </div>
                        </div>

                        <!-- Type & Technician -->
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Appointment Type</label>
                                <select wire:model="appointment_type" class="block w-full rounded-md border-zinc-300 dark:border-zinc-600 dark:border-zinc-700 bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white dark:text-white border border-zinc-200 dark:border-zinc-700 focus:border-indigo-500 focus:ring-indigo-500">
                                    @foreach($appointmentTypes as $value => $label)
                                        <option value="{{ $value }}">{{ $label }}</option>
                                    @endforeach
                                </select>
                                @error('appointment_type') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Assigned Technician</label>
                                <select wire:model.live="assigned_technician_id" class="block w-full rounded-md border-zinc-300 dark:border-zinc-600 dark:border-zinc-700 bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white dark:text-white border border-zinc-200 dark:border-zinc-700 focus:border-indigo-500 focus:ring-indigo-500">
                                    <option value="">Auto-assign</option>
                                    @foreach($technicians as $technician)
                                        <option value="{{ $technician->id }}">{{ $technician->full_name }}</option>
                                    @endforeach
                                </select>
                                @error('assigned_technician_id') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                            </div>
                        </div>

                        <!-- Service Details -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Service Requested</label>
                            <textarea wire:model="service_requested" 
                                     placeholder="Describe the service or repair needed..." 
                                     rows="3" 
                                     class="block w-full rounded-md border-zinc-300 dark:border-zinc-600 dark:border-zinc-700 bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white dark:text-white border border-zinc-200 dark:border-zinc-700 focus:border-indigo-500 focus:ring-indigo-500"></textarea>
                            @error('service_requested') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                        </div>

                        <!-- Notes -->
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Customer Notes</label>
                                <textarea wire:model="customer_notes" 
                                         placeholder="Notes from the customer..." 
                                         rows="3" 
                                         class="block w-full rounded-md border-zinc-300 dark:border-zinc-600 dark:border-zinc-700 bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white dark:text-white border border-zinc-200 dark:border-zinc-700 focus:border-indigo-500 focus:ring-indigo-500"></textarea>
                                @error('customer_notes') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Internal Notes</label>
                                <textarea wire:model="internal_notes" 
                                         placeholder="Internal notes (not visible to customer)..." 
                                         rows="3" 
                                         class="block w-full rounded-md border-zinc-300 dark:border-zinc-600 dark:border-zinc-700 bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white dark:text-white border border-zinc-200 dark:border-zinc-700 focus:border-indigo-500 focus:ring-indigo-500"></textarea>
                                @error('internal_notes') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                            </div>
                        </div>

                        <!-- Time Slot Validation -->
                        @if($scheduled_date && $scheduled_time && $assigned_technician_id)
                            <div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
                                <div class="flex items-center">
                                    <svg class="w-5 h-5 text-blue-600 dark:text-blue-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                    </svg>
                                    <div class="text-sm text-blue-800 dark:text-blue-200">
                                        <strong>Appointment Time:</strong> 
                                        {{ \Carbon\Carbon::parse($scheduled_date . ' ' . $scheduled_time)->format('M j, Y g:i A') }} - 
                                        {{ \Carbon\Carbon::parse($scheduled_date . ' ' . $scheduled_time)->addMinutes($estimated_duration_minutes)->format('g:i A') }}
                                    </div>
                                </div>
                            </div>
                        @endif

                        <!-- Actions -->
                        <div class="flex justify-end space-x-3 pt-6 border-t border-zinc-200 dark:border-zinc-700">
                            <button type="button" wire:click="closeModal" class="px-4 py-2 border border-zinc-300 dark:border-zinc-600 dark:border-gray-600 rounded-md border border-zinc-200 dark:border-zinc-700 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-zinc-800 hover:bg-zinc-50 dark:hover:bg-zinc-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 transition-colors duration-200">
                                Cancel
                            </button>
                            <button type="submit" class="px-4 py-2 border border-transparent rounded-md border border-zinc-200 dark:border-zinc-700 text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 transition-colors duration-200">
                                {{ $editing ? 'Update Appointment' : 'Schedule Appointment' }}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    @endif
</div>
