@extends('layouts.app')

@section('title', 'Housekeeping Turnover')
@section('nav_reports', 'bg-teal-50 text-teal-700 font-semibold')
@section('page_title', 'Reports')
@section('page_subtitle', 'Housekeeping Turnover')

@section('content')
@php
    $taskBadge = [
        'due_out'  => 'bg-amber-50 text-amber-700 border-amber-200',
        'stayover' => 'bg-blue-50 text-blue-700 border-blue-200',
        'due_in'   => 'bg-teal-50 text-teal-700 border-teal-200',
    ];
    $statusBadge = [
        'available' => 'bg-teal-50 text-teal-700', 'clean' => 'bg-green-100 text-green-700',
        'occupied' => 'bg-teal-700 text-white', 'dirty' => 'bg-amber-100 text-amber-700',
        'maintenance' => 'bg-orange-100 text-orange-700', 'out_of_order' => 'bg-red-100 text-red-700',
    ];
@endphp

@include('reports._filter', [
    'active' => 'reports.housekeeping-turnover', 'mode' => 'date', 'date' => $date,
    'title' => 'Daily Housekeeping Turnover',
    'subtitle' => \Carbon\Carbon::parse($date)->format('l, F j, Y'),
])

{{-- Summary tiles --}}
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-5">
    <div class="bg-white border-[0.5px] border-gray-200 rounded-xl px-5 py-4">
        <p class="text-gray-400 text-xs">Rooms to Service</p>
        <p class="text-gray-800 font-bold text-2xl mt-1">{{ $roomsToService }}</p>
        <p class="text-gray-400 text-xs mt-1">across {{ count($byFloor) }} floor{{ count($byFloor) !== 1 ? 's' : '' }}</p>
    </div>
    <div class="bg-white border-[0.5px] border-gray-200 rounded-xl px-5 py-4">
        <p class="text-gray-400 text-xs">Due Out</p>
        <p class="text-amber-600 font-bold text-2xl mt-1">{{ $dueOutCount }}</p>
        <p class="text-gray-400 text-xs mt-1">full departure clean</p>
    </div>
    <div class="bg-white border-[0.5px] border-gray-200 rounded-xl px-5 py-4">
        <p class="text-gray-400 text-xs">Stayover</p>
        <p class="text-blue-700 font-bold text-2xl mt-1">{{ $stayoverCount }}</p>
        <p class="text-gray-400 text-xs mt-1">light service</p>
    </div>
    <div class="bg-white border-[0.5px] border-gray-200 rounded-xl px-5 py-4">
        <p class="text-gray-400 text-xs">Due In</p>
        <p class="text-teal-700 font-bold text-2xl mt-1">{{ $dueInCount }}</p>
        <p class="text-gray-400 text-xs mt-1">ready by arrival</p>
    </div>
</div>

@if(empty($byFloor))
<div class="bg-white border-[0.5px] border-gray-200 rounded-xl px-5 py-16 text-center">
    <p class="text-gray-300 text-sm">No room turnovers for this date. 🧹</p>
</div>
@else
<div class="space-y-5">
    @foreach($byFloor as $floor => $roomRows)
    <div class="bg-white border-[0.5px] border-gray-200 rounded-xl overflow-hidden">
        <div class="px-5 py-3 border-b border-gray-100 bg-gray-50/50 flex items-center justify-between">
            <h2 class="text-sm font-semibold text-gray-700">Floor {{ $floor }}</h2>
            <span class="text-xs text-gray-400">{{ count($roomRows) }} room{{ count($roomRows) !== 1 ? 's' : '' }}</span>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full text-sm min-w-[620px]">
                <thead>
                    <tr class="border-b border-gray-100">
                        <th class="px-5 py-2 text-left text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Room</th>
                        <th class="px-4 py-2 text-left text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Type</th>
                        <th class="px-4 py-2 text-left text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Task</th>
                        <th class="px-4 py-2 text-left text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Guest</th>
                        <th class="px-5 py-2 text-left text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Current Status</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($roomRows as $r)
                    <tr class="{{ !$loop->last ? 'border-b border-gray-50' : '' }} hover:bg-gray-50/50 transition-colors">
                        <td class="px-5 py-3 font-semibold text-gray-800">{{ $r['no'] }}</td>
                        <td class="px-4 py-3 text-gray-500 text-xs">{{ $r['type'] }}</td>
                        <td class="px-4 py-3">
                            <div class="flex flex-wrap gap-1">
                                @foreach($r['tasks'] as $t)
                                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-semibold border-[0.5px] {{ $taskBadge[$t['type']] }}">{{ $t['label'] }}</span>
                                @endforeach
                            </div>
                        </td>
                        <td class="px-4 py-3 text-gray-600 text-xs">
                            @foreach($r['tasks'] as $t)
                            <p class="truncate max-w-[160px]">{{ $t['guest'] }}</p>
                            @endforeach
                        </td>
                        <td class="px-5 py-3">
                            <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-semibold {{ $statusBadge[$r['status']] ?? 'bg-gray-100 text-gray-500' }}">{{ \Illuminate\Support\Str::headline($r['status']) }}</span>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
    @endforeach
</div>
@endif

@endsection