<form wire:submit="save" class="space-y-6">

    @if ($error)
        <div class="rounded-lg bg-rose-50 border border-rose-200 text-rose-800 text-sm px-4 py-3">{{ $error }}</div>
    @endif

    <x-card title="Servicio y profesional">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Servicio *</label>
                <select wire:model.live="serviceId" class="w-full text-sm border border-gray-300 rounded-lg px-3 py-2">
                    <option value="">Selecciona un servicio</option>
                    @foreach ($this->services as $svc)
                        <option value="{{ $svc->id }}">{{ $svc->name }} — $ {{ number_format($svc->price, 0, ',', '.') }} · {{ $svc->duration_minutes }} min</option>
                    @endforeach
                </select>
                @error('serviceId') <p class="text-rose-600 text-xs mt-1">{{ $message }}</p> @enderror
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Profesional</label>
                <select wire:model.live="employeeId" class="w-full text-sm border border-gray-300 rounded-lg px-3 py-2" @disabled(! $serviceId)>
                    <option value="">Cualquier disponible</option>
                    @foreach ($this->employees as $emp)
                        <option value="{{ $emp->id }}">{{ $emp->fullName() }}</option>
                    @endforeach
                </select>
                @if ($serviceId && $this->employees->isEmpty())
                    <p class="mt-1 text-xs text-amber-700">Este servicio todavía no tiene profesionales asignados.</p>
                @endif
            </div>
        </div>
    </x-card>

    <x-card title="Fecha y hora">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Fecha *</label>
                <input type="date" wire:model.live="date" min="{{ now()->toDateString() }}" class="w-full text-sm border border-gray-300 rounded-lg px-3 py-2">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Horarios disponibles</label>
                @if (! $serviceId)
                    <p class="text-xs text-gray-500 italic">Selecciona un servicio primero.</p>
                @elseif ($this->slots->isEmpty())
                    <p class="text-xs text-gray-500 italic">Sin disponibilidad para esta fecha.</p>
                @else
                    <div class="grid grid-cols-4 gap-2">
                        @foreach ($this->slots as $slot)
                            @php $slotEmployee = $this->employees->firstWhere('id', $slot['employee_id']); @endphp
                            <button type="button"
                                    wire:click="selectSlot('{{ $slot['start'] }}', {{ $slot['employee_id'] }})"
                                    @class([
                                        'py-1.5 rounded border text-xs font-medium text-left px-2',
                                        'bg-indigo-600 border-indigo-600 text-white' => $time === $slot['start'] && $resolvedEmployeeId === $slot['employee_id'],
                                        'border-gray-200 hover:border-indigo-500' => ! ($time === $slot['start'] && $resolvedEmployeeId === $slot['employee_id']),
                                    ])>
                                <span class="block font-bold">{{ $slot['start'] }}</span>
                                @if (! $employeeId && $slotEmployee)
                                    <span class="block truncate opacity-80">{{ $slotEmployee->first_name }}</span>
                                @endif
                            </button>
                        @endforeach
                    </div>
                    @error('time') <p class="text-rose-600 text-xs mt-2">{{ $message }}</p> @enderror
                    @error('resolvedEmployeeId') <p class="text-rose-600 text-xs mt-2">{{ $message }}</p> @enderror
                @endif
            </div>
        </div>
    </x-card>

    <x-card title="Cliente">
        @if ($customerId)
            <div class="flex items-center justify-between bg-emerald-50 border border-emerald-200 rounded-lg p-3 text-sm">
                <span class="text-emerald-800">Cliente existente: <strong>{{ $first_name }} {{ $last_name }}</strong> · {{ $phone }}</span>
                <button type="button" wire:click="clearCustomer" class="text-xs text-emerald-700 hover:underline">Cambiar</button>
            </div>
        @else
            <div class="mb-4 relative">
                <label class="block text-sm font-medium text-gray-700 mb-1">Buscar cliente existente</label>
                <input type="text" wire:model.live.debounce.300ms="customerSearch" placeholder="Nombre o teléfono…" class="w-full text-sm border border-gray-300 rounded-lg px-3 py-2">
                @if ($this->customerMatches->isNotEmpty())
                    <ul class="absolute z-10 w-full mt-1 bg-white border border-gray-200 rounded-lg shadow-lg max-h-60 overflow-y-auto">
                        @foreach ($this->customerMatches as $match)
                            <li>
                                <button type="button" wire:click="pickCustomer({{ $match->id }})" class="w-full text-left px-3 py-2 hover:bg-gray-50 text-sm">
                                    <strong>{{ $match->fullName() }}</strong>
                                    <span class="text-gray-500"> · {{ $match->phone }}</span>
                                </button>
                            </li>
                        @endforeach
                    </ul>
                @endif
            </div>
        @endif

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Nombre *</label>
                <input type="text" wire:model="first_name" class="w-full text-sm border border-gray-300 rounded-lg px-3 py-2" required>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Apellido</label>
                <input type="text" wire:model="last_name" class="w-full text-sm border border-gray-300 rounded-lg px-3 py-2">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Celular *</label>
                <div class="flex rounded-lg border border-gray-300 bg-white focus-within:border-indigo-500 focus-within:ring-1 focus-within:ring-indigo-500">
                    <span class="inline-flex items-center border-r border-gray-200 px-3 text-sm font-bold text-gray-700">{{ $countryCallingCode }}</span>
                    <input type="tel" wire:model="phone" placeholder="3001234567" inputmode="numeric" class="min-w-0 flex-1 rounded-lg border-0 px-3 py-2 text-sm focus:ring-0" required>
                </div>
                <p class="mt-1 text-xs text-gray-500">Escribe solo los 10 dígitos. También puedes pegar el número completo con indicativo.</p>
                @error('phone') <p class="text-rose-600 text-xs mt-1">{{ $message }}</p> @enderror
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Email *</label>
                <input type="email" wire:model="email" class="w-full text-sm border border-gray-300 rounded-lg px-3 py-2" required>
                @error('email') <p class="text-rose-600 text-xs mt-1">{{ $message }}</p> @enderror
            </div>
            <div class="md:col-span-2">
                <label class="block text-sm font-medium text-gray-700 mb-1">Notas</label>
                <textarea wire:model="notes" rows="2" class="w-full text-sm border border-gray-300 rounded-lg px-3 py-2"></textarea>
            </div>
        </div>
    </x-card>

    <div class="flex items-center justify-end gap-2">
        <x-btn href="{{ route('tenant.bookings.index') }}" variant="secondary">Cancelar</x-btn>
        <x-btn type="submit" variant="primary">Crear reserva</x-btn>
    </div>
</form>
