@extends('layouts.app') @section('title', 'My Calendar — ' . $periodStart->format('F Y')) @section('nav_calendar', 'bg-teal-50 text-teal-700 font-semibold') @section('page_title', 'My Calendar') @section('page_subtitle', $periodStart->format('F Y')) @section('content') @php $CELL = 40; // px per day column $ROOM = 160; // px for room label column $statusClasses = [ 'pending' => 'bg-amber-100 border-[0.5px] border-amber-300 text-amber-800', 'confirmed' => 'bg-teal-100 border-[0.5px] border-teal-300 text-teal-800', 'checked_in' => 'bg-green-100 border-[0.5px] border-green-300 text-green-800', 'checked_out' => 'bg-gray-100 border-[0.5px] border-gray-300 text-gray-400', ]; $statusLabels = [ 'pending' => 'Pending', 'confirmed' => 'Confirmed', 'checked_in' => 'In House', 'checked_out' => 'Checked Out', ]; $floors = $roomsByFloor->keys()->toArray(); @endphp @if(session('success'))

{{ session('success') }}

@endif @if(session('error'))

{{ session('error') }}

@endif
{{-- ===== TOP BAR: month nav ===== --}}
{{ $periodStart->copy()->subMonth()->format('M Y') }} {{ $periodStart->format('F Y') }} {{ $periodStart->copy()->addMonth()->format('M Y') }} @if($monthParam !== now()->format('Y-m')) Today @endif
{{-- ===== FILTER TOOLBAR ===== --}}
{{-- Search --}}
{{-- Separator --}}
{{-- Status filter --}}
Status
{{-- Separator --}}
{{-- Floor filter --}}
Floor @foreach($floors as $f) @endforeach
{{-- Separator + Hide empty (pushed right) --}}
{{-- ===== CALENDAR GRID ===== --}}
{{-- ── HEADER ROW ── --}}
{{-- Corner --}}
Room
{{-- Day columns --}} @foreach($days as $i => $day) @php $isToday = $todayOffset === $i; $isWeekend = in_array($day->dayOfWeek, [0, 6]); @endphp
{{ $day->format('D') }} {{ $day->format('j') }}
@endforeach
{{-- ── FLOOR + ROOM ROWS ── --}} @foreach($roomsByFloor as $floor => $floorRooms) {{-- Wrap the whole floor section so x-show hides both divider + rooms --}}
{{-- Floor divider row --}}
Floor {{ $floor }}
@foreach($days as $i => $day) @php $isToday = $todayOffset === $i; $isWeekend = in_array($day->dayOfWeek, [0, 6]); @endphp
@endforeach
{{-- Room rows --}} @foreach($floorRooms as $room) @php $roomHasRes = count($bars[$room->no] ?? []) > 0; @endphp
{{-- Sticky room label --}}
{{ $room->no }} {{ $room->type }} @php $dot = match($room->status) { 'occupied' => 'bg-green-400', 'dirty' => 'bg-orange-400', 'maintenance' => 'bg-red-400', 'out_of_order'=> 'bg-red-600', 'clean' => 'bg-teal-400', default => 'bg-gray-200', }; @endphp
{{-- Timeline cell --}}
{{-- Day gridlines + weekend/today shading --}} @foreach($days as $i => $day) @php $isToday = $todayOffset === $i; $isWeekend = in_array($day->dayOfWeek, [0, 6]); @endphp
@endforeach {{-- SortableJS drop zone — contains only bars (not gridlines) --}}
{{-- Reservation bars --}} @foreach($bars[$room->no] ?? [] as $bar) @php $cls = $statusClasses[$bar['status']] ?? 'bg-gray-100 text-gray-400'; $leftPx = $bar['offset'] * $CELL; $widthPx = max(6, $bar['width'] * $CELL - 2); $rl = $bar['clipped_left'] ? '' : 'rounded-l-[5px]'; $rr = $bar['clipped_right'] ? '' : 'rounded-r-[5px]'; $tipStatus = $statusLabels[$bar['status']] ?? ucfirst($bar['status']); $draggable = $bar['status'] === 'checked_in'; @endphp {{-- x-data="{}" makes $el refer to THIS (not the outer component root) --}} @if($draggable) {{-- Drag handle strip — always visible at 50%, full on hover --}} {{ $bar['guest_name'] }} @else {{ $bar['guest_name'] }} @endif @endforeach
{{-- end .cal-drop-zone --}}
@endforeach
{{-- end floor group --}} @endforeach
{{-- ===== FLOATING TOOLTIP ===== --}}

{{-- end calendarData() --}} {{-- ===== ROOM TRANSFER MODAL ===== --}}
{{-- Backdrop --}}
{{-- Panel --}}
{{-- Header --}}

Room Transfer

{{-- Body --}}
{{-- Guest info --}}

{{-- Room arrows --}}

From

To

{{-- Warning if room not clean/available --}}
Room is and cannot accept a transfer. Drop the guest onto a different room.
{{-- Transfer form --}}
@csrf
@endsection @push('pageTour') @php $__pageTour = [ ['target' => '[data-tour=month-nav]', 'title' => 'Month navigation', 'desc' => 'Move between months or jump back to today. The timeline shows every room down the side and each day across the top.'], ['target' => '[data-tour=status-filter]', 'title' => 'Status filter', 'desc' => 'Toggle which booking states appear as bars — pending, confirmed, in-house, or checked-out.'], ['target' => '[data-tour=guest-search]', 'title' => 'Guest search', 'desc' => 'Type a name to dim every bar except matching guests, so a booking is easy to spot in a busy month.'], ['target' => '.cal-drag-handle', 'title' => 'Drag to transfer', 'desc' => "Grab the handle on a checked-in guest's bar and drop it on another room to transfer them — you'll confirm with a reason. (Shown only when an in-house booking is visible.)"], ]; @endphp @endpush