@extends('layouts.app')

@section('title', 'Room Rack')
@section('page_title', 'Room Rack')
@section('page_subtitle', 'Live status of all {{ $counts[\'total\'] }} rooms')

@section('nav_roomrack', 'bg-teal-50 text-teal-700 font-semibold')

@section('content')

@php
$statusCfg = [
    'available'    => ['band' => 'bg-green-500',   'bg' => 'bg-green-50',    'border' => 'border-green-200',   'badge' => 'bg-green-100 text-green-700',   'label' => 'Available'],
    'clean'        => ['band' => 'bg-emerald-500',  'bg' => 'bg-emerald-50',  'border' => 'border-emerald-200', 'badge' => 'bg-emerald-100 text-emerald-700','label' => 'Clean'],
    'occupied'     => ['band' => 'bg-teal-600',     'bg' => 'bg-teal-50',     'border' => 'border-teal-200',    'badge' => 'bg-teal-100 text-teal-700',     'label' => 'Occupied'],
    'dirty'        => ['band' => 'bg-amber-400',    'bg' => 'bg-amber-50',    'border' => 'border-amber-200',   'badge' => 'bg-amber-100 text-amber-700',   'label' => 'Dirty'],
    'maintenance'  => ['band' => 'bg-orange-500',   'bg' => 'bg-orange-50',   'border' => 'border-orange-200',  'badge' => 'bg-orange-100 text-orange-700', 'label' => 'Maintenance'],
    'out_of_order' => ['band' => 'bg-red-500',      'bg' => 'bg-red-50',      'border' => 'border-red-200',     'badge' => 'bg-red-100 text-red-700',       'label' => 'Out of Order'],
];
@endphp

<div x-data="{ filter: 'all' }">

    {{-- Summary bar + filter tabs --}}
    <div class="bg-white border-[0.5px] border-gray-200 rounded-xl mb-5">
        <div class="flex flex-wrap items-center gap-1 px-4 py-3">

            <button @click="filter = 'all'"
                    :class="filter === 'all' ? 'bg-gray-900 text-white' : 'bg-gray-100 text-gray-500 hover:bg-gray-200'"
                    class="flex items-center gap-1.5 text-xs font-semibold px-3 py-1.5 rounded-lg transition-colors">
                All
                <span class="text-[10px] font-bold opacity-70">{{ $counts['total'] }}</span>
            </button>

            <button @click="filter = 'available'"
                    :class="filter === 'available' ? 'bg-green-600 text-white' : 'bg-green-50 text-green-700 hover:bg-green-100'"
                    class="flex items-center gap-1.5 text-xs font-semibold px-3 py-1.5 rounded-lg transition-colors border-[0.5px] border-green-200">
                <span class="w-2 h-2 rounded-full bg-green-500"></span>
                Available / Clean
                <span class="text-[10px] font-bold opacity-70">{{ $counts['available'] }}</span>
            </button>

            <button @click="filter = 'occupied'"
                    :class="filter === 'occupied' ? 'bg-teal-600 text-white' : 'bg-teal-50 text-teal-700 hover:bg-teal-100'"
                    class="flex items-center gap-1.5 text-xs font-semibold px-3 py-1.5 rounded-lg transition-colors border-[0.5px] border-teal-200">
                <span class="w-2 h-2 rounded-full bg-teal-500"></span>
                Occupied
                <span class="text-[10px] font-bold opacity-70">{{ $counts['occupied'] }}</span>
            </button>

            <button @click="filter = 'dirty'"
                    :class="filter === 'dirty' ? 'bg-amber-500 text-white' : 'bg-amber-50 text-amber-700 hover:bg-amber-100'"
                    class="flex items-center gap-1.5 text-xs font-semibold px-3 py-1.5 rounded-lg transition-colors border-[0.5px] border-amber-200">
                <span class="w-2 h-2 rounded-full bg-amber-400"></span>
                Dirty
                <span class="text-[10px] font-bold opacity-70">{{ $counts['dirty'] }}</span>
            </button>

            @if ($counts['maintenance'] > 0)
            <button @click="filter = 'maintenance'"
                    :class="filter === 'maintenance' ? 'bg-orange-500 text-white' : 'bg-orange-50 text-orange-700 hover:bg-orange-100'"
                    class="flex items-center gap-1.5 text-xs font-semibold px-3 py-1.5 rounded-lg transition-colors border-[0.5px] border-orange-200">
                <span class="w-2 h-2 rounded-full bg-orange-400"></span>
                Maintenance / OOO
                <span class="text-[10px] font-bold opacity-70">{{ $counts['maintenance'] }}</span>
            </button>
            @endif

            <div class="ml-auto flex items-center gap-4 pr-1">
                <div class="flex items-center gap-1.5">
                    <span class="w-2.5 h-2.5 rounded-full bg-teal-500 animate-pulse"></span>
                    <span class="text-gray-400 text-xs">{{ $counts['occupied'] }} in-house</span>
                </div>
                <span class="text-gray-300 text-xs">|</span>
                <span class="text-gray-400 text-xs">{{ now()->format('g:i A') }}</span>
            </div>

        </div>
    </div>

    {{-- Floor sections --}}
    @foreach ($floors as $floor => $rooms)
    <div class="mb-6">

        {{-- Floor header --}}
        <div class="flex items-center gap-3 mb-3">
            <h2 class="text-gray-700 font-bold text-sm">Floor {{ $floor }}</h2>
            <div class="flex-1 h-px bg-gray-200"></div>
            <span class="text-gray-400 text-xs">{{ $rooms->count() }} rooms</span>
        </div>

        {{-- Room grid --}}
        <div class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 xl:grid-cols-8 2xl:grid-cols-10 gap-2.5">

            @foreach ($rooms as $room)
            @php
                $cfg        = $statusCfg[$room->status] ?? $statusCfg['available'];
                $reservation = $checkedIn[$room->no] ?? null;
                $arriving    = $arrivingToday[$room->no] ?? null;
                $filterKey   = in_array($room->status, ['available', 'clean']) ? 'available'
                             : (in_array($room->status, ['maintenance', 'out_of_order']) ? 'maintenance'
                             : $room->status);

                if ($reservation) {
                    $href = route('reservations.show', $reservation->id);
                } elseif ($arriving) {
                    $href = route('reservations.show', $arriving->id);
                } elseif (in_array($room->status, ['available', 'clean'])) {
                    $href = route('reservations.create');
                } else {
                    $href = route('rooms.show', $room->no);
                }
            @endphp

            <div x-show="filter === 'all' || filter === '{{ $filterKey }}'">
                <a href="{{ $href }}"
                   class="{{ $cfg['bg'] }} border-[0.5px] {{ $cfg['border'] }} rounded-xl overflow-hidden hover:shadow-md hover:-translate-y-0.5 transition-all block">

                    {{-- Status band --}}
                    <div class="h-1 {{ $cfg['band'] }}"></div>

                    <div class="p-2.5">

                        {{-- Room # + badge --}}
                        <div class="flex items-start justify-between gap-1 mb-1.5">
                            <span class="text-gray-900 font-bold text-sm leading-none">{{ $room->no }}</span>
                            @if ($arriving && !$reservation)
                                <span class="text-[9px] font-bold bg-teal-500 text-white px-1.5 py-0.5 rounded-full leading-none whitespace-nowrap">Arriving</span>
                            @elseif ($room->status === 'dirty')
                                <span class="text-[9px] font-bold bg-amber-400 text-white px-1.5 py-0.5 rounded-full leading-none">Dirty</span>
                            @elseif ($room->status === 'maintenance')
                                <span class="text-[9px] font-bold bg-orange-500 text-white px-1.5 py-0.5 rounded-full leading-none">Maint.</span>
                            @elseif ($room->status === 'out_of_order')
                                <span class="text-[9px] font-bold bg-red-500 text-white px-1.5 py-0.5 rounded-full leading-none">OOO</span>
                            @endif
                        </div>

                        {{-- Type + beds --}}
                        <p class="text-gray-600 text-[10px] font-medium leading-tight">{{ $room->type }}</p>
                        <p class="text-gray-400 text-[9px] mt-0.5 leading-tight">{{ $room->beds }}</p>

                        {{-- Guest info (occupied) --}}
                        @if ($reservation)
                            <div class="mt-2 pt-1.5 border-t border-gray-100/70">
                                <p class="text-gray-800 text-[10px] font-semibold truncate leading-tight">{{ $reservation->guest_name }}</p>
                                <p class="text-gray-400 text-[9px] mt-0.5">Out: {{ $reservation->check_out->format('M j') }}</p>
                            </div>
                        @elseif ($arriving)
                            <div class="mt-2 pt-1.5 border-t border-gray-100/70">
                                <p class="text-teal-700 text-[10px] font-semibold truncate leading-tight">{{ $arriving->guest_name }}</p>
                                <p class="text-teal-500 text-[9px] mt-0.5">Arriving today</p>
                            </div>
                        @else
                            <div class="mt-2">
                                @if ($room->rate > 0)
                                    <p class="text-gray-400 text-[9px]">&#8369;{{ number_format($room->rate, 0) }}/night</p>
                                @endif
                            </div>
                        @endif

                    </div>
                </a>
            </div>
            @endforeach

        </div>
    </div>
    @endforeach

    {{-- Legend --}}
    <div class="flex flex-wrap items-center gap-4 mt-2 px-1">
        @foreach ([['bg-green-500','Available'],['bg-emerald-500','Clean'],['bg-teal-600','Occupied'],['bg-amber-400','Dirty'],['bg-orange-500','Maintenance'],['bg-red-500','Out of Order']] as [$color, $label])
        <div class="flex items-center gap-1.5">
            <span class="w-2.5 h-2.5 rounded-sm {{ $color }}"></span>
            <span class="text-gray-400 text-[11px]">{{ $label }}</span>
        </div>
        @endforeach
    </div>

</div>

@endsection