@php
    use App\Support\Money;
    $currency = config('zues.currency');
@endphp

<div class="mx-auto max-w-2xl">
    <a href="{{ $bookingId ? route('bookings.show', $bookingId) : ($groupWithId ? route('bookings.show', $groupWithId) : route('calendar', ['property' => $propertyId])) }}" wire:navigate class="tap text-sm text-stone-500 hover:text-stone-800">&larr; Back</a>
    <h1 class="mt-2 text-xl font-semibold">{{ $heading }}</h1>
    <p class="mt-0.5 text-sm text-stone-500">{{ $property?->name }}</p>
    @if ($groupWithId)
        <p class="mt-2 text-sm text-stone-600">Same guest and dates, in another room. The bookings are linked by a group reference.</p>
    @endif

    <form wire:submit="save" class="mt-4 space-y-4">
        <div class="card space-y-4 p-5">
            <h2 class="font-semibold">Stay</h2>

            @error('check_in')
                <div class="rounded-lg bg-red-50 px-3 py-2 text-sm text-red-800" role="alert">{{ $message }}</div>
            @enderror

            <x-field label="Room" for="room_id">
                <select wire:model.live="room_id" id="room_id" class="input" required>
                    <option value="">Choose a room</option>
                    @foreach ($this->rooms as $room)
                        <option value="{{ $room->id }}">{{ $room->name }}{{ $room->type ? ' · '.$room->type : '' }} · up to {{ $room->capacity }} · {{ Money::format($room->base_rate) }}</option>
                    @endforeach
                </select>
            </x-field>

            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label for="check_in" class="label">Check-in</label>
                    <input wire:model.live="check_in" id="check_in" type="date" class="input" required>
                </div>
                <x-field label="Check-out" for="check_out">
                    <input wire:model.live="check_out" id="check_out" type="date" class="input" required>
                </x-field>
            </div>

            <div class="grid grid-cols-2 gap-4">
                <x-field label="Guests" for="guests_count">
                    <input wire:model="guests_count" id="guests_count" type="number" min="1" max="50" inputmode="numeric" class="input" required>
                </x-field>
                <x-field label="Source" for="source">
                    <select wire:model.live="source" id="source" class="input">
                        @foreach ($sources as $option)
                            <option value="{{ $option->value }}">{{ $option->label() }}</option>
                        @endforeach
                    </select>
                </x-field>
            </div>
        </div>

        <div class="card space-y-4 p-5">
            <h2 class="font-semibold">Guest</h2>
            <div class="grid gap-4 sm:grid-cols-2">
                <x-field label="Phone" for="guest_phone">
                    <input wire:model.blur="guest_phone" id="guest_phone" type="tel" class="input" placeholder="0712 345 678" autocomplete="off">
                </x-field>
                <x-field label="Name" for="guest_name">
                    <input wire:model="guest_name" id="guest_name" type="text" class="input" autocomplete="off" required>
                </x-field>
            </div>
            @if ($returningGuest)
                <p class="rounded-lg bg-teal-50 px-3 py-2 text-sm text-teal-900">{{ $returningGuest }}</p>
            @endif
            <div class="grid gap-4 sm:grid-cols-2">
                <x-field label="Email" for="guest_email">
                    <input wire:model="guest_email" id="guest_email" type="email" class="input" autocomplete="off">
                </x-field>
                <x-field label="ID or passport number" for="guest_id_number">
                    <input wire:model="guest_id_number" id="guest_id_number" type="text" class="input" autocomplete="off">
                </x-field>
            </div>
        </div>

        <div class="card space-y-4 p-5">
            <h2 class="font-semibold">Price</h2>
            <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
                <x-field label="Nightly rate ({{ $currency }})" for="nightly_rate">
                    <input wire:model.live.debounce.400ms="nightly_rate" id="nightly_rate" type="text" inputmode="numeric" class="input" required>
                </x-field>
                <x-field label="Extras ({{ $currency }})" for="extras" hint="Airport pickup, extra bed…">
                    <input wire:model.live.debounce.400ms="extras" id="extras" type="text" inputmode="numeric" class="input">
                </x-field>
                <x-field label="Discount ({{ $currency }})" for="discount">
                    <input wire:model.live.debounce.400ms="discount" id="discount" type="text" inputmode="numeric" class="input">
                </x-field>
            </div>

            <dl class="space-y-1 rounded-lg bg-stone-50 p-3 text-sm">
                <div class="flex justify-between">
                    <dt class="text-stone-600">{{ trans_choice(':count night|:count nights', $this->nights) }} × {{ Money::format((int) Money::parse($nightly_rate)) }}</dt>
                    <dd>{{ Money::format($this->nights * (int) Money::parse($nightly_rate)) }}</dd>
                </div>
                <div class="flex justify-between border-t border-stone-200 pt-1 text-base font-semibold">
                    <dt>Total</dt>
                    <dd>{{ Money::format($this->total) }}</dd>
                </div>
            </dl>

            <x-field label="Notes" for="notes">
                <textarea wire:model="notes" id="notes" rows="2" class="input" placeholder="Arrival time, special requests…"></textarea>
            </x-field>
        </div>

        <button type="submit" class="btn-primary w-full sm:w-auto" wire:loading.attr="disabled" wire:target="save">
            {{ $bookingId ? 'Save changes' : 'Save booking' }}
        </button>
    </form>
</div>