@php use App\Support\Money; @endphp

<div>
    <div class="flex items-center justify-between gap-4">
        <h1 class="text-xl font-semibold">Bookings</h1>
        <a href="{{ route('bookings.create', $property !== '' ? ['property' => $property] : []) }}" wire:navigate class="btn-primary">New booking</a>
    </div>

    <div class="-mx-4 mt-4 overflow-x-auto px-4">
        <div class="flex gap-1.5">
            @foreach (App\Livewire\Bookings\Index::VIEWS as $value => $label)
                <button type="button" wire:click="$set('view', '{{ $value }}')"
                        @class(['shrink-0 rounded-full border px-3 py-1.5 text-sm font-medium', 'border-teal-700 bg-teal-700 text-white' => $view === $value, 'border-stone-300 bg-white text-stone-700' => $view !== $value])>
                    {{ $label }}
                </button>
            @endforeach
        </div>
    </div>

    <div class="mt-3 grid gap-2 sm:grid-cols-2">
        <input wire:model.live.debounce.300ms="search" type="search" class="input" placeholder="Search guest name or phone" aria-label="Search">
        @if ($properties->count() > 1)
            <select wire:model.live="property" class="input" aria-label="Property">
                <option value="">All properties</option>
                @foreach ($properties as $option)
                    <option value="{{ $option->id }}">{{ $option->name }}</option>
                @endforeach
            </select>
        @endif
    </div>

    <ul class="card mt-4 divide-y divide-stone-100" wire:loading.class="opacity-60">
        @forelse ($bookings as $booking)
            @php($balance = $booking->balance())
            <li wire:key="booking-{{ $booking->id }}">
                <a href="{{ route('bookings.show', $booking) }}" wire:navigate class="flex items-center justify-between gap-4 px-4 py-3 hover:bg-stone-50">
                    <div class="min-w-0">
                        <div class="flex items-center gap-2">
                            <span class="truncate font-medium">{{ $booking->guest->name }}</span>
                            <span class="badge shrink-0 {{ $booking->status->badgeClasses() }}">{{ $booking->status->label() }}</span>
                        </div>
                        <div class="mt-0.5 truncate text-sm text-stone-500">
                            {{ $booking->check_in->format('j M') }} – {{ $booking->check_out->format('j M Y') }} · Room {{ $booking->room->name }}@if ($properties->count() > 1) · {{ $booking->room->property->name }}@endif
                        </div>
                    </div>
                    <div class="shrink-0 text-right text-sm">
                        <div class="font-medium">{{ Money::format($booking->total) }}</div>
                        @if ($balance > 0)
                            <div class="text-xs text-red-700">{{ Money::format($balance) }} due</div>
                        @elseif (! $booking->isCancelled())
                            <div class="text-xs text-emerald-700">Paid</div>
                        @endif
                    </div>
                </a>
            </li>
        @empty
            <li class="p-8 text-center text-sm text-stone-500">No bookings here.</li>
        @endforelse
    </ul>

    <div class="mt-4">{{ $bookings->links() }}</div>
</div>