@extends('layouts.app')

@section('title', 'Occupancy Report')
@section('nav_reports', 'bg-teal-50 text-teal-700 font-semibold')
@section('page_title', 'Reports')
@section('page_subtitle', 'Occupancy — ' . \Carbon\Carbon::parse($from)->format('M j') . ' – ' . \Carbon\Carbon::parse($to)->format('M j, Y'))

@section('content')

{{-- ===== TABS + DATE PICKER ===== --}}
@include('reports._toolbar', ['active' => 'occupancy', 'from' => $from, 'to' => $to, 'date' => $from])

{{-- ===== 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">Avg Occupancy</p>
        <p class="font-bold text-2xl mt-1 {{ $avgOcc >= 80 ? 'text-green-600' : ($avgOcc >= 60 ? 'text-teal-600' : ($avgOcc >= 40 ? 'text-amber-600' : 'text-gray-700')) }}">
            {{ number_format($avgOcc, 1) }}%
        </p>
        <p class="text-gray-400 text-xs mt-1">{{ $totalOccupiedNights }} of {{ $availableRoomNights }} room-nights</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">Total Revenue</p>
        <p class="text-teal-700 font-bold text-2xl mt-1">₱{{ number_format($totalRevenue, 0) }}</p>
        <p class="text-gray-400 text-xs mt-1">over {{ $daysCount }} day{{ $daysCount !== 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">ADR <span class="font-normal text-gray-300">(Avg Daily Rate)</span></p>
        <p class="text-gray-800 font-bold text-2xl mt-1">₱{{ number_format($avgAdr, 0) }}</p>
        <p class="text-gray-400 text-xs mt-1">per occupied room/night</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">RevPAR <span class="font-normal text-gray-300">(Rev per Avail. Room)</span></p>
        <p class="text-gray-800 font-bold text-2xl mt-1">₱{{ number_format($avgRevpar, 0) }}</p>
        <p class="text-gray-400 text-xs mt-1">{{ $totalRooms }} available rooms</p>
    </div>
</div>

{{-- ===== DAILY TABLE ===== --}}
<div class="bg-white border-[0.5px] border-gray-200 rounded-xl overflow-hidden">
    <div class="px-5 py-4 border-b border-gray-100 flex items-center justify-between">
        <div>
            <h2 class="text-sm font-semibold text-gray-700">Daily Breakdown</h2>
            <p class="text-xs text-gray-400 mt-0.5">Revenue distributed evenly across each night of each stay</p>
        </div>
        <span class="text-xs text-gray-400">{{ $totalRooms }} rooms available</span>
    </div>

    @if(empty($rows))
    <p class="px-5 py-10 text-center text-gray-300 text-sm">No data for this period.</p>
    @else
    <div class="overflow-x-auto">
        <table class="w-full text-sm min-w-[600px]">
            <thead>
                <tr class="border-b border-gray-100 bg-gray-50/50">
                    <th class="px-5 py-2.5 text-left text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Date</th>
                    <th class="px-4 py-2.5 text-center text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Occupied</th>
                    <th class="px-4 py-2.5 text-left text-[10px] font-semibold text-gray-400 uppercase tracking-wider w-40">Occupancy %</th>
                    <th class="px-4 py-2.5 text-right text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Revenue</th>
                    <th class="px-4 py-2.5 text-right text-[10px] font-semibold text-gray-400 uppercase tracking-wider">ADR</th>
                    <th class="px-5 py-2.5 text-right text-[10px] font-semibold text-gray-400 uppercase tracking-wider">RevPAR</th>
                </tr>
            </thead>
            <tbody>
                @foreach($rows as $row)
                @php
                $isToday   = $row['date']->isToday();
                $isWeekend = $row['date']->isWeekend();
                $occ       = $row['occ_pct'];
                $occColor  = $occ >= 80 ? 'bg-green-500' : ($occ >= 60 ? 'bg-teal-500' : ($occ >= 40 ? 'bg-amber-400' : 'bg-gray-300'));
                $occText   = $occ >= 80 ? 'text-green-700' : ($occ >= 60 ? 'text-teal-700' : ($occ >= 40 ? 'text-amber-700' : 'text-gray-500'));
                @endphp
                <tr class="{{ !$loop->last ? 'border-b border-gray-50' : '' }}
                            {{ $isToday ? 'bg-blue-50/40' : ($isWeekend ? 'bg-gray-50/30' : '') }}
                            hover:bg-gray-50/50 transition-colors">
                    <td class="px-5 py-2.5">
                        <div class="flex items-center gap-2">
                            @if($isToday)
                            <span class="text-[9px] font-bold text-blue-600 bg-blue-100 px-1.5 py-0.5 rounded-full uppercase tracking-wider">Today</span>
                            @endif
                            <span class="font-medium {{ $isToday ? 'text-blue-700' : 'text-gray-700' }}">
                                {{ $row['date']->format('D, M j') }}
                            </span>
                        </div>
                    </td>
                    <td class="px-4 py-2.5 text-center">
                        <span class="font-semibold text-gray-700">{{ $row['occupied'] }}</span>
                        <span class="text-gray-300 text-xs"> / {{ $totalRooms }}</span>
                    </td>
                    <td class="px-4 py-2.5">
                        <div class="flex items-center gap-2">
                            <div class="flex-1 bg-gray-100 rounded-full h-1.5 max-w-[80px]">
                                <div class="{{ $occColor }} h-1.5 rounded-full transition-all" style="width: {{ min(100, $occ) }}%"></div>
                            </div>
                            <span class="text-xs font-semibold {{ $occText }} w-10 text-right">{{ number_format($occ, 1) }}%</span>
                        </div>
                    </td>
                    <td class="px-4 py-2.5 text-right text-gray-700">
                        {{ $row['revenue'] > 0 ? '₱' . number_format($row['revenue'], 0) : '—' }}
                    </td>
                    <td class="px-4 py-2.5 text-right text-gray-600">
                        {{ $row['adr'] > 0 ? '₱' . number_format($row['adr'], 0) : '—' }}
                    </td>
                    <td class="px-5 py-2.5 text-right text-gray-600">
                        {{ $row['revpar'] > 0 ? '₱' . number_format($row['revpar'], 0) : '—' }}
                    </td>
                </tr>
                @endforeach
            </tbody>
            {{-- Totals row --}}
            <tfoot>
                <tr class="border-t-2 border-gray-200 bg-gray-50/70">
                    <td class="px-5 py-3 text-xs font-bold text-gray-500 uppercase tracking-wider">Period Total / Avg</td>
                    <td class="px-4 py-3 text-center font-bold text-gray-700">
                        {{ $totalOccupiedNights }}
                        <span class="text-gray-400 font-normal text-xs"> nts</span>
                    </td>
                    <td class="px-4 py-3">
                        @php $oc = $avgOcc; $cl = $oc >= 80 ? 'bg-green-500' : ($oc >= 60 ? 'bg-teal-500' : ($oc >= 40 ? 'bg-amber-400' : 'bg-gray-300')); $ct = $oc >= 80 ? 'text-green-700' : ($oc >= 60 ? 'text-teal-700' : ($oc >= 40 ? 'text-amber-700' : 'text-gray-500')); @endphp
                        <div class="flex items-center gap-2">
                            <div class="flex-1 bg-gray-200 rounded-full h-1.5 max-w-[80px]">
                                <div class="{{ $cl }} h-1.5 rounded-full" style="width: {{ min(100, $oc) }}%"></div>
                            </div>
                            <span class="text-xs font-bold {{ $ct }} w-10 text-right">{{ number_format($oc, 1) }}%</span>
                        </div>
                    </td>
                    <td class="px-4 py-3 text-right font-bold text-teal-700">₱{{ number_format($totalRevenue, 0) }}</td>
                    <td class="px-4 py-3 text-right font-semibold text-gray-700">₱{{ number_format($avgAdr, 0) }}</td>
                    <td class="px-5 py-3 text-right font-semibold text-gray-700">₱{{ number_format($avgRevpar, 0) }}</td>
                </tr>
            </tfoot>
        </table>
    </div>
    @endif
</div>

@endsection