@php
    $today = today()->toDateString();
@endphp

<div>
    <div class="flex flex-wrap items-center justify-between gap-3">
        <h1 class="text-xl font-semibold">Calendar</h1>
        @if ($properties->count() > 1)
            <select wire:model.live="property" class="input w-auto min-w-48" aria-label="Property">
                @foreach ($properties as $option)
                    <option value="{{ $option->id }}">{{ $option->name }}@if ($option->status !== App\Enums\Status::Active) (inactive)@endif</option>
                @endforeach
            </select>
        @elseif ($current)
            <span class="text-sm font-medium text-stone-600">{{ $current->name }}</span>
        @endif
    </div>

    @if (! $current)
        <div class="card mt-4 p-8 text-center text-sm text-stone-500">
            @if (auth()->user()->isOwner())
                Add a property and its rooms first.
            @else
                You have not been assigned to any properties yet. Ask an owner to assign you.
            @endif
        </div>
    @else
        <div class="mt-4 flex flex-wrap items-center gap-2">
            <button type="button" wire:click="shift(-7)" class="btn-secondary px-3" aria-label="Previous week">&larr;</button>
            <button type="button" wire:click="goToToday" class="btn-secondary">Today</button>
            <button type="button" wire:click="shift(7)" class="btn-secondary px-3" aria-label="Next week">&rarr;</button>
            <input type="date" wire:model.live="from" class="input w-auto" aria-label="Start date">
            <span class="ml-auto hidden text-xs text-stone-500 sm:block">Tap a free day to book it.</span>
        </div>

        @if ($rows->isEmpty())
            <div class="card mt-4 p-8 text-center text-sm text-stone-500">This property has no active rooms yet.</div>
        @else
            <div class="card mt-3 overflow-x-auto" wire:loading.class="opacity-60">
                <div class="min-w-max">
                    {{-- Header: one column per day. --}}
                    <div class="grid border-b border-stone-200" style="grid-template-columns: 5.5rem repeat({{ count($dates) }}, 3.25rem)">
                        <div class="sticky left-0 z-10 bg-white"></div>
                        @foreach ($dates as $date)
                            <div @class([
                                'py-2 text-center text-xs',
                                'bg-teal-700 text-white' => $date->toDateString() === $today,
                                'bg-stone-50 text-stone-500' => $date->isWeekend() && $date->toDateString() !== $today,
                                'text-stone-500' => ! $date->isWeekend() && $date->toDateString() !== $today,
                            ])>
                                <div>{{ $date->format('D') }}</div>
                                <div class="text-sm font-semibold">{{ $date->format('j') }}</div>
                                @if ($loop->first || $date->day === 1)
                                    <div class="text-[10px] uppercase">{{ $date->format('M') }}</div>
                                @endif
                            </div>
                        @endforeach
                    </div>

                    @foreach ($rows as $row)
                        <div class="grid h-14 border-b border-stone-100 last:border-b-0" style="grid-template-columns: 5.5rem repeat({{ count($dates) }}, 3.25rem)" wire:key="row-{{ $row['room']->id }}">
                            <div class="sticky left-0 z-20 flex flex-col justify-center border-r border-stone-200 bg-white px-2" style="grid-row: 1; grid-column: 1">
                                <span class="truncate text-sm font-semibold">{{ $row['room']->name }}</span>
                                <span class="truncate text-[11px] text-stone-500">{{ $row['room']->type }}</span>
                            </div>

                            @foreach ($dates as $i => $date)
                                @php($past = $date->toDateString() < $today)
                                @if ($canBook)
                                    <a href="{{ route('bookings.create', ['room' => $row['room']->id, 'check_in' => $date->toDateString()]) }}" wire:navigate
                                       style="grid-row: 1; grid-column: {{ $i + 2 }}"
                                       @class(['border-r border-stone-100 hover:bg-teal-50', 'bg-stone-50' => $date->isWeekend(), 'bg-stone-100/70' => $past])
                                       aria-label="Book {{ $row['room']->name }} from {{ $date->format('j M') }}"></a>
                                @else
                                    <div style="grid-row: 1; grid-column: {{ $i + 2 }}" @class(['border-r border-stone-100', 'bg-stone-50' => $date->isWeekend()])></div>
                                @endif
                            @endforeach

                            @foreach ($row['bars'] as $bar)
                                @if ($bar['type'] === 'booking')
                                    <a href="{{ route('bookings.show', $bar['booking']) }}" wire:navigate
                                       style="grid-row: 1; grid-column: {{ $bar['start'] + 1 }} / {{ $bar['end'] + 1 }}"
                                       @class([
                                           'z-10 my-2 mx-0.5 flex items-center truncate rounded-md px-2 text-xs font-medium shadow-sm',
                                           'bg-teal-700 text-white' => $bar['booking']->status === App\Enums\BookingStatus::Confirmed,
                                           'bg-emerald-600 text-white' => $bar['booking']->status === App\Enums\BookingStatus::CheckedIn,
                                           'bg-stone-300 text-stone-700' => $bar['booking']->status === App\Enums\BookingStatus::CheckedOut,
                                       ])
                                       title="{{ $bar['label'] }} · {{ $bar['booking']->check_in->format('j M') }} – {{ $bar['booking']->check_out->format('j M') }}">
                                        {{ $bar['label'] }}
                                    </a>
                                @else
                                    <div style="grid-row: 1; grid-column: {{ $bar['start'] + 1 }} / {{ $bar['end'] + 1 }}; background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgb(0 0 0 / 0.06) 6px 12px)"
                                         class="z-10 my-2 mx-0.5 flex items-center truncate rounded-md border border-amber-300 bg-amber-50 px-2 text-xs text-amber-900"
                                         title="Blocked: {{ $bar['label'] }}">
                                        {{ $bar['label'] }}
                                    </div>
                                @endif
                            @endforeach
                        </div>
                    @endforeach
                </div>
            </div>

            <div class="mt-3 flex flex-wrap gap-x-4 gap-y-1 text-xs text-stone-600">
                <span class="flex items-center gap-1.5"><span class="size-3 rounded-sm bg-teal-700"></span> Confirmed</span>
                <span class="flex items-center gap-1.5"><span class="size-3 rounded-sm bg-emerald-600"></span> Checked in</span>
                <span class="flex items-center gap-1.5"><span class="size-3 rounded-sm bg-stone-300"></span> Checked out</span>
                <span class="flex items-center gap-1.5"><span class="size-3 rounded-sm border border-amber-300 bg-amber-50"></span> Blocked</span>
            </div>
        @endif
    @endif
</div>