@extends('layouts.app')

@section('title', 'Housekeeping')
@section('page_title', 'Housekeeping')
@section('page_subtitle', 'Room status & cleaning queue — {{ now()->format(\'F j, Y\') }}')

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

@section('content')

@if (session('success'))
<div class="mb-5 bg-teal-50 border-[0.5px] border-teal-200 rounded-xl px-5 py-3.5 flex items-center gap-3">
    <svg class="w-4 h-4 text-teal-600 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
    </svg>
    <p class="text-teal-700 text-sm font-medium">{{ session('success') }}</p>
</div>
@endif

{{-- ===== STAT CARDS ===== --}}
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-4 mb-6">

    <div class="bg-white border-[0.5px] border-gray-200 rounded-xl p-4">
        <p class="text-gray-400 text-xs font-medium">Needs Cleaning</p>
        <p class="text-2xl font-bold {{ $stats['dirty'] > 0 ? 'text-amber-600' : 'text-gray-900' }} mt-1.5">{{ $stats['dirty'] }}</p>
        <p class="text-amber-500 text-xs mt-1 font-medium">Dirty rooms</p>
    </div>

    <div class="bg-white border-[0.5px] border-gray-200 rounded-xl p-4">
        <p class="text-gray-400 text-xs font-medium">Priority</p>
        <p class="text-2xl font-bold {{ $stats['priority'] > 0 ? 'text-red-600' : 'text-gray-900' }} mt-1.5">{{ $stats['priority'] }}</p>
        <p class="text-xs mt-1 font-medium {{ $stats['priority'] > 0 ? 'text-red-500' : 'text-gray-400' }}">Arriving today</p>
    </div>

    <div class="bg-white border-[0.5px] border-gray-200 rounded-xl p-4">
        <p class="text-gray-400 text-xs font-medium">Clean / Ready</p>
        <p class="text-2xl font-bold text-green-600 mt-1.5">{{ $stats['clean'] }}</p>
        <p class="text-green-500 text-xs mt-1 font-medium">Ready for sale</p>
    </div>

    <div class="bg-white border-[0.5px] border-gray-200 rounded-xl p-4">
        <p class="text-gray-400 text-xs font-medium">In-House</p>
        <div class="flex items-end gap-1.5 mt-1.5">
            <p class="text-2xl font-bold text-gray-900">{{ $stats['occupied'] }}</p>
            <span class="w-2 h-2 bg-teal-500 rounded-full mb-1.5 animate-pulse"></span>
        </div>
        <p class="text-gray-400 text-xs mt-1">Stayovers</p>
    </div>

    <div class="bg-white border-[0.5px] border-gray-200 rounded-xl p-4">
        <p class="text-gray-400 text-xs font-medium">Available</p>
        <p class="text-2xl font-bold text-gray-900 mt-1.5">{{ $stats['available'] }}</p>
        <p class="text-gray-400 text-xs mt-1">Vacant &amp; ready</p>
    </div>

    <div class="bg-white border-[0.5px] border-gray-200 rounded-xl p-4">
        <p class="text-gray-400 text-xs font-medium">Maintenance</p>
        <p class="text-2xl font-bold {{ $stats['maintenance'] > 0 ? 'text-orange-600' : 'text-gray-900' }} mt-1.5">{{ $stats['maintenance'] }}</p>
        <p class="text-xs mt-1 font-medium {{ $stats['maintenance'] > 0 ? 'text-orange-500' : 'text-gray-400' }}">Out of service</p>
    </div>

</div>


{{-- ===== PRIORITY: ARRIVING TODAY ===== --}}
@if ($priorityRooms->isNotEmpty())
<div class="bg-red-50 border-[0.5px] border-red-200 rounded-xl mb-5">

    <div class="flex items-center gap-3 px-5 py-3.5 border-b border-red-100">
        <svg class="w-4 h-4 text-red-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
        </svg>
        <h2 class="text-red-700 font-semibold text-sm">Urgent — Guest Arriving Today</h2>
        <span class="bg-red-500 text-white text-[10px] font-bold px-2 py-0.5 rounded-full">{{ $priorityRooms->count() }}</span>
        <p class="text-red-400 text-xs ml-1">These rooms must be cleaned before the guest arrives.</p>
    </div>

    <div class="p-4 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3">
        @foreach ($priorityRooms as $room)
        <div class="bg-white border-[0.5px] border-red-200 rounded-xl">
            <div class="h-1 bg-red-500 rounded-t-xl"></div>
            <div class="p-3">
                <div class="flex items-start justify-between mb-1.5">
                    <span class="text-gray-900 font-bold text-sm">{{ $room->no }}</span>
                    <span class="text-[9px] font-bold bg-red-500 text-white px-1.5 py-0.5 rounded-full leading-none whitespace-nowrap">URGENT</span>
                </div>
                <p class="text-gray-600 text-[11px] font-medium">{{ $room->type }}</p>
                <p class="text-gray-400 text-[10px] mt-0.5">{{ $room->beds }} · Floor {{ $room->floor }}</p>
                @if ($room->notes)
                    <p class="text-orange-600 text-[10px] mt-1.5 italic">{{ $room->notes }}</p>
                @endif
                <div class="mt-3 flex gap-1.5">
                    <form action="{{ route('housekeeping.clean', $room->no) }}" method="POST" class="flex-1"
                          data-confirm="Mark Room {{ $room->no }} as clean?">
                        @csrf
                        <button class="w-full py-1.5 text-[11px] font-semibold text-white bg-green-600 hover:bg-green-700 rounded-lg transition-colors">
                            Mark Clean
                        </button>
                    </form>
                    <form action="{{ route('housekeeping.maintenance', $room->no) }}" method="POST"
                          data-confirm="Send Room {{ $room->no }} to maintenance?">
                        @csrf
                        <button title="Send to Maintenance"
                                class="p-1.5 text-gray-400 hover:text-orange-600 hover:bg-orange-50 rounded-lg transition-colors border-[0.5px] border-gray-200">
                            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                            </svg>
                        </button>
                    </form>
                </div>
            </div>
        </div>
        @endforeach
    </div>

</div>
@endif


{{-- ===== NEEDS CLEANING ===== --}}
@if ($normalByFloor->isNotEmpty())
<div class="bg-white border-[0.5px] border-gray-200 rounded-xl mb-5">

    <div class="flex items-center justify-between px-5 py-4 border-b border-gray-100">
        <div class="flex items-center gap-2.5">
            <div class="w-2 h-2 bg-amber-400 rounded-full"></div>
            <h2 class="text-gray-800 font-semibold text-sm">Needs Cleaning</h2>
            <span class="bg-amber-100 text-amber-700 text-xs font-semibold px-2 py-0.5 rounded-full">
                {{ $normalByFloor->flatten()->count() }}
            </span>
        </div>
    </div>

    <div class="p-5 space-y-6">
        @foreach ($normalByFloor as $floor => $rooms)
        <div>
            <div class="flex items-center gap-3 mb-3">
                <h3 class="text-gray-500 text-xs font-semibold uppercase tracking-wider">Floor {{ $floor }}</h3>
                <div class="flex-1 h-px bg-gray-100"></div>
                <span class="text-gray-400 text-xs">{{ $rooms->count() }} room{{ $rooms->count() !== 1 ? 's' : '' }}</span>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3">
                @foreach ($rooms as $room)
                @php $isTomorrow = isset($arrivingTomorrow[$room->no]); @endphp
                <div class="border-[0.5px] {{ $isTomorrow ? 'border-amber-200 bg-amber-50/30' : 'border-gray-200 bg-white' }} rounded-xl">
                    <div class="h-1 bg-amber-400 rounded-t-xl"></div>
                    <div class="p-3">
                        <div class="flex items-start justify-between mb-1.5">
                            <span class="text-gray-900 font-bold text-sm">{{ $room->no }}</span>
                            @if ($isTomorrow)
                                <span class="text-[9px] font-bold bg-amber-400 text-white px-1.5 py-0.5 rounded-full leading-none whitespace-nowrap">Tomorrow</span>
                            @endif
                        </div>
                        <p class="text-gray-600 text-[11px] font-medium">{{ $room->type }}</p>
                        <p class="text-gray-400 text-[10px] mt-0.5">{{ $room->beds }}</p>
                        @if ($room->notes)
                            <p class="text-orange-600 text-[10px] mt-1.5 italic truncate" title="{{ $room->notes }}">{{ $room->notes }}</p>
                        @endif
                        <div class="mt-3 flex gap-1.5">
                            <form action="{{ route('housekeeping.clean', $room->no) }}" method="POST" class="flex-1"
                                  data-confirm="Mark Room {{ $room->no }} as clean?">
                                @csrf
                                <button class="w-full py-1.5 text-[11px] font-semibold text-white bg-green-600 hover:bg-green-700 rounded-lg transition-colors">
                                    Mark Clean
                                </button>
                            </form>
                            <div x-data="{ open: false }" class="relative">
                                <button type="button" @click="open = !open" title="More actions"
                                        class="p-1.5 text-gray-400 hover:text-gray-700 hover:bg-gray-100 rounded-lg transition-colors border-[0.5px] border-gray-200">
                                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/>
                                    </svg>
                                </button>
                                <div x-show="open" @click.outside="open = false" x-cloak
                                     class="absolute right-0 bottom-full mb-1 w-40 bg-white border-[0.5px] border-gray-200 rounded-xl shadow-lg z-20 py-1">
                                    <form action="{{ route('housekeeping.maintenance', $room->no) }}" method="POST"
                                          data-confirm="Send Room {{ $room->no }} to maintenance?">
                                        @csrf
                                        <button class="w-full text-left px-4 py-2 text-xs text-orange-600 hover:bg-orange-50 transition-colors">Maintenance</button>
                                    </form>
                                    <form action="{{ route('housekeeping.out-of-order', $room->no) }}" method="POST"
                                          data-confirm="Mark Room {{ $room->no }} as out of order?"
                                          data-danger="true">
                                        @csrf
                                        <button class="w-full text-left px-4 py-2 text-xs text-red-600 hover:bg-red-50 transition-colors">Out of Order</button>
                                    </form>
                                    <a href="{{ route('rooms.show', $room->no) }}"
                                       class="block px-4 py-2 text-xs text-gray-600 hover:bg-gray-50 transition-colors">View Room Details</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
        @endforeach
    </div>

</div>
@endif

{{-- Empty state when nothing dirty --}}
@if ($priorityRooms->isEmpty() && $normalByFloor->isEmpty())
<div class="bg-white border-[0.5px] border-gray-200 rounded-xl mb-5">
    <div class="flex flex-col items-center justify-center py-16 text-center">
        <svg class="w-12 h-12 text-green-200 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
        </svg>
        <p class="text-gray-500 text-sm font-semibold">All rooms are clean!</p>
        <p class="text-gray-300 text-xs mt-1">No rooms need cleaning right now.</p>
    </div>
</div>
@endif


{{-- ===== CLEAN ROOMS (READY) ===== --}}
@if ($cleanRooms->isNotEmpty())
<div class="bg-white border-[0.5px] border-gray-200 rounded-xl mb-5">

    <div class="flex items-center justify-between px-5 py-4 border-b border-gray-100">
        <div class="flex items-center gap-2.5">
            <div class="w-2 h-2 bg-green-500 rounded-full"></div>
            <h2 class="text-gray-800 font-semibold text-sm">Clean &amp; Ready</h2>
            <span class="bg-green-100 text-green-700 text-xs font-semibold px-2 py-0.5 rounded-full">{{ $cleanRooms->count() }}</span>
        </div>
        <p class="text-gray-400 text-xs">Cleaned — available for sale</p>
    </div>

    <div class="p-5">
        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-2">
            @foreach ($cleanRooms as $room)
            <div class="border-[0.5px] border-green-200 bg-green-50/40 rounded-xl overflow-hidden">
                <div class="h-1 bg-green-500"></div>
                <div class="p-2.5">
                    <div class="flex items-center justify-between">
                        <span class="text-gray-900 font-bold text-sm">{{ $room->no }}</span>
                        <svg class="w-3.5 h-3.5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/>
                        </svg>
                    </div>
                    <p class="text-gray-500 text-[10px] mt-0.5 leading-tight">{{ $room->type }}</p>
                    <p class="text-gray-400 text-[9px]">Floor {{ $room->floor }}</p>
                    <div class="mt-2 flex gap-1">
                        <form action="{{ route('housekeeping.available', $room->no) }}" method="POST" class="flex-1"
                              data-confirm="Release Room {{ $room->no }} as available for sale?">
                            @csrf
                            <button title="Release as Available"
                                    class="w-full py-1 text-[10px] font-semibold text-green-700 bg-green-100 hover:bg-green-200 rounded transition-colors">
                                Release
                            </button>
                        </form>
                        <form action="{{ route('housekeeping.dirty', $room->no) }}" method="POST"
                              data-confirm="Mark Room {{ $room->no }} as dirty?"
                              data-danger="true">
                            @csrf
                            <button title="Mark Dirty"
                                    class="px-1.5 py-1 text-[10px] text-gray-400 hover:text-amber-600 hover:bg-amber-50 rounded transition-colors border-[0.5px] border-gray-200">
                                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                                </svg>
                            </button>
                        </form>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>

</div>
@endif


{{-- ===== MAINTENANCE / OUT OF ORDER ===== --}}
@if ($maintenanceRooms->isNotEmpty())
<div class="bg-white border-[0.5px] border-gray-200 rounded-xl">

    <div class="flex items-center justify-between px-5 py-4 border-b border-gray-100">
        <div class="flex items-center gap-2.5">
            <div class="w-2 h-2 bg-orange-400 rounded-full"></div>
            <h2 class="text-gray-800 font-semibold text-sm">Maintenance &amp; Out of Order</h2>
            <span class="bg-orange-100 text-orange-700 text-xs font-semibold px-2 py-0.5 rounded-full">{{ $maintenanceRooms->count() }}</span>
        </div>
    </div>

    <div class="divide-y divide-gray-50">
        @foreach ($maintenanceRooms as $room)
        <div class="flex items-center gap-4 px-5 py-3.5">

            <div class="w-10 h-10 rounded-xl flex items-center justify-center flex-shrink-0
                        {{ $room->status === 'out_of_order' ? 'bg-red-50 border-[0.5px] border-red-200' : 'bg-orange-50 border-[0.5px] border-orange-200' }}">
                <span class="font-bold text-sm {{ $room->status === 'out_of_order' ? 'text-red-600' : 'text-orange-600' }}">{{ $room->no }}</span>
            </div>

            <div class="flex-1 min-w-0">
                <div class="flex items-center gap-2">
                    <p class="text-gray-800 font-medium text-xs">{{ $room->type }}</p>
                    <span class="text-[10px] font-semibold px-1.5 py-0.5 rounded-full
                                 {{ $room->status === 'out_of_order'
                                     ? 'bg-red-50 text-red-600 border-[0.5px] border-red-200'
                                     : 'bg-orange-50 text-orange-600 border-[0.5px] border-orange-200' }}">
                        {{ $room->status === 'out_of_order' ? 'Out of Order' : 'Maintenance' }}
                    </span>
                </div>
                <p class="text-gray-400 text-[11px]">{{ $room->beds }} · Floor {{ $room->floor }}</p>
                @if ($room->notes)
                    <p class="text-orange-600 text-[11px] mt-0.5 italic">{{ $room->notes }}</p>
                @endif
            </div>

            <div class="flex items-center gap-2 flex-shrink-0">
                <form action="{{ route('housekeeping.clean', $room->no) }}" method="POST"
                      data-confirm="Mark Room {{ $room->no }} as clean?">
                    @csrf
                    <button class="px-3 py-1.5 text-xs font-semibold text-green-700 bg-green-50 hover:bg-green-100 border-[0.5px] border-green-200 rounded-lg transition-colors">
                        Mark Clean
                    </button>
                </form>
                <form action="{{ route('housekeeping.available', $room->no) }}" method="POST"
                      data-confirm="Release Room {{ $room->no }} as available for sale?">
                    @csrf
                    <button class="px-3 py-1.5 text-xs font-semibold text-teal-700 bg-teal-50 hover:bg-teal-100 border-[0.5px] border-teal-200 rounded-lg transition-colors">
                        Release
                    </button>
                </form>
                <a href="{{ route('rooms.show', $room->no) }}"
                   class="px-3 py-1.5 text-xs font-semibold text-gray-500 hover:text-gray-700 hover:bg-gray-50 border-[0.5px] border-gray-200 rounded-lg transition-colors">
                    Details
                </a>
            </div>

        </div>
        @endforeach
    </div>

</div>
@endif

@endsection