{{-- Livewire Booking Form --}}
<div>
    @if($success)
        {{-- Success Message --}}
        <div class="text-center py-8">
            <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <svg class="w-8 h-8 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                </svg>
            </div>
            <h4 class="text-lg font-bold text-umami-dark mb-2">Prenotazione Ricevuta!</h4>
            <p class="text-umami-text text-sm mb-4">
                Ti contatteremo a breve per confermare.<br>
                Codice: <strong>{{ $confirmationCode }}</strong>
            </p>
            <button
                wire:click="resetForm"
                class="text-umami-accent font-medium text-sm hover:underline"
            >
                Nuova prenotazione
            </button>
        </div>
    @else
        <form wire:submit="submit" class="space-y-4">
            {{-- Row 1: Guests + Date --}}
            <div class="grid grid-cols-2 gap-4">
                {{-- Guests --}}
                <div>
                    <label for="guests" class="block text-sm font-medium text-umami-text mb-1">
                        Persone
                    </label>
                    <select
                        wire:model.live="guests"
                        id="guests"
                        class="w-full rounded-lg border-umami-gray focus:border-umami-accent focus:ring-umami-accent"
                    >
                        @for($i = 1; $i <= 6; $i++)
                            <option value="{{ $i }}">{{ $i }} {{ $i === 1 ? 'persona' : 'persone' }}</option>
                        @endfor
                        <option value="7">7+ (chiamaci)</option>
                    </select>
                    @error('guests') <span class="text-red-500 text-xs mt-1">{{ $message }}</span> @enderror
                </div>

                {{-- Date --}}
                <div>
                    <label for="date" class="block text-sm font-medium text-umami-text mb-1">
                        Data
                    </label>
                    <input
                        wire:model.live="date"
                        type="date"
                        id="date"
                        min="{{ now()->toDateString() }}"
                        class="w-full rounded-lg border-umami-gray focus:border-umami-accent focus:ring-umami-accent"
                    />
                    @error('date') <span class="text-red-500 text-xs mt-1">{{ $message }}</span> @enderror
                </div>
            </div>

            {{-- Closed day notice --}}
            @if($isClosed)
                <div class="bg-red-50 border border-red-200 rounded-lg p-3 text-sm text-red-700">
                    Il ristorante è chiuso in questo giorno. Seleziona un'altra data.
                </div>
            @endif

            {{-- Time --}}
            <div>
                <label for="time" class="block text-sm font-medium text-umami-text mb-1">
                    Orario
                </label>
                <select
                    wire:model="time"
                    id="time"
                    class="w-full rounded-lg border-umami-gray focus:border-umami-accent focus:ring-umami-accent"
                    {{ $isClosed ? 'disabled' : '' }}
                >
                    <option value="">Seleziona orario</option>
                    @foreach($availableSlots as $slot)
                        <option value="{{ $slot['time'] }}" {{ !$slot['available'] ? 'disabled' : '' }}>
                            {{ $slot['time'] }}{{ !$slot['available'] ? ' — Completo' : '' }}
                        </option>
                    @endforeach
                </select>
                @error('time') <span class="text-red-500 text-xs mt-1">{{ $message }}</span> @enderror
            </div>

            @if(!$compact)
                {{-- Name --}}
                <div>
                    <label for="name" class="block text-sm font-medium text-umami-text mb-1">
                        Nome e Cognome
                    </label>
                    <input
                        wire:model="name"
                        type="text"
                        id="name"
                        placeholder="Mario Rossi"
                        class="w-full rounded-lg border-umami-gray focus:border-umami-accent focus:ring-umami-accent"
                    />
                    @error('name') <span class="text-red-500 text-xs mt-1">{{ $message }}</span> @enderror
                </div>

                {{-- Phone --}}
                <div>
                    <label for="phone" class="block text-sm font-medium text-umami-text mb-1">
                        Telefono
                    </label>
                    <input
                        wire:model="phone"
                        type="tel"
                        id="phone"
                        placeholder="+39 333 1234567"
                        class="w-full rounded-lg border-umami-gray focus:border-umami-accent focus:ring-umami-accent"
                    />
                    @error('phone') <span class="text-red-500 text-xs mt-1">{{ $message }}</span> @enderror
                </div>

                {{-- Email (optional) --}}
                <div>
                    <label for="email" class="block text-sm font-medium text-umami-text mb-1">
                        Email <span class="text-gray-400">(opzionale)</span>
                    </label>
                    <input
                        wire:model="email"
                        type="email"
                        id="email"
                        placeholder="mario@esempio.it"
                        class="w-full rounded-lg border-umami-gray focus:border-umami-accent focus:ring-umami-accent"
                    />
                    @error('email') <span class="text-red-500 text-xs mt-1">{{ $message }}</span> @enderror
                </div>

                {{-- Notes (optional) --}}
                <div>
                    <label for="notes" class="block text-sm font-medium text-umami-text mb-1">
                        Note <span class="text-gray-400">(opzionale)</span>
                    </label>
                    <textarea
                        wire:model="notes"
                        id="notes"
                        rows="2"
                        placeholder="Allergie, seggiolone, tavolo esterno..."
                        class="w-full rounded-lg border-umami-gray focus:border-umami-accent focus:ring-umami-accent"
                    ></textarea>
                    @error('notes') <span class="text-red-500 text-xs mt-1">{{ $message }}</span> @enderror
                </div>
            @endif

            {{-- Submit Button --}}
            <button
                type="submit"
                wire:loading.attr="disabled"
                wire:loading.class="opacity-70 cursor-wait"
                class="w-full py-4 px-6 bg-umami-accent text-white font-semibold rounded-lg hover:bg-umami-accent transition-colors focus:outline-none focus:ring-2 focus:ring-umami-accent focus:ring-offset-2"
            >
                <span wire:loading.remove>
                    {{ $compact ? 'Verifica Disponibilità' : 'Conferma Prenotazione' }}
                </span>
                <span wire:loading class="flex items-center justify-center gap-2">
                    <svg class="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                    </svg>
                    Invio in corso...
                </span>
            </button>

            {{-- Call for large groups --}}
            @if($guests >= 7 || $showCallPrompt)
                <div class="text-center pt-2">
                    <p class="text-sm text-umami-text">
                        Per gruppi numerosi, chiamaci:
                    </p>
                    <a
                        href="tel:{{ str_replace(' ', '', config('umami.phone')) }}"
                        class="text-umami-accent font-semibold hover:underline"
                    >
                        {{ config('umami.phone', '392 204 3500') }}
                    </a>
                </div>
            @endif
        </form>
    @endif
</div>