@extends('layouts.epelcon')
@section('title', 'Booking Calendar')

@section('content')
    <div class="mb-5 flex items-center justify-between">
        <div>
            <h1 class="text-xl font-extrabold text-slate-900 lg:text-2xl">Booking calendar</h1>
            <p class="text-sm text-slate-500">14-day room occupancy grid from {{ $days->first()->format('j M') }}.</p>
        </div>
        <a href="{{ route('epelcon.bookings.index') }}" class="rounded-xl bg-white px-4 py-2.5 text-sm font-bold text-slate-700 shadow-sm ring-1 ring-slate-200 hover:bg-slate-50">← List view</a>
    </div>

    <div class="overflow-x-auto rounded-2xl bg-white shadow-sm ring-1 ring-slate-200">
        <table class="w-full min-w-[900px] border-collapse text-xs">
            <thead>
            <tr class="bg-slate-50">
                <th class="sticky left-0 z-10 border-b border-r border-slate-200 bg-slate-50 px-3 py-2.5 text-left font-bold text-slate-500">Room</th>
                @foreach ($days as $day)
                    <th class="border-b border-slate-200 px-1 py-2.5 text-center font-bold {{ $day->isToday() ? 'bg-indigo-50 text-indigo-700' : 'text-slate-500' }}">
                        <span class="block">{{ $day->format('D') }}</span><span class="text-sm">{{ $day->format('j') }}</span>
                    </th>
                @endforeach
            </tr>
            </thead>
            <tbody>
            @foreach ($rooms as $room)
                <tr class="hover:bg-slate-50/60">
                    <td class="sticky left-0 z-10 border-r border-slate-100 bg-white px-3 py-2 font-bold text-slate-700">
                        {{ $room->number }} <span class="block text-[10px] font-medium text-slate-400">{{ $room->roomType->name }}</span>
                    </td>
                    @foreach ($days as $day)
                        @php
                            $bk = $room->bookings->first(fn ($b) => $day->betweenIncluded($b->check_in, $b->check_out->copy()->subDay()));
                            $cellColor = $bk ? (['pending' => 'bg-amber-200 text-amber-900', 'confirmed' => 'bg-sky-200 text-sky-900', 'checked_in' => 'bg-emerald-300 text-emerald-900'][$bk->status] ?? 'bg-slate-200') : '';
                        @endphp
                        <td class="h-11 border border-slate-100 p-0.5 text-center">
                            @if ($bk)
                                <a href="{{ route('epelcon.bookings.show', $bk) }}" title="{{ $bk->customer->name }} ({{ $bk->code }})"
                                   class="flex h-full items-center justify-center rounded-md {{ $cellColor }} px-1 text-[10px] font-bold leading-tight">
                                    {{ Str::limit(Str::before($bk->customer->name, ' '), 7, '') }}
                                </a>
                            @endif
                        </td>
                    @endforeach
                </tr>
            @endforeach
            </tbody>
        </table>
    </div>

    <div class="mt-3 flex gap-4 text-xs font-semibold text-slate-500">
        <span class="flex items-center gap-1.5"><span class="h-3 w-3 rounded bg-amber-200"></span> Pending</span>
        <span class="flex items-center gap-1.5"><span class="h-3 w-3 rounded bg-sky-200"></span> Confirmed</span>
        <span class="flex items-center gap-1.5"><span class="h-3 w-3 rounded bg-emerald-300"></span> In-house</span>
    </div>
@endsection
