@extends('layouts.app')

@section('title', 'Cancellations & No-Shows')
@section('nav_reports', 'bg-teal-50 text-teal-700 font-semibold')
@section('page_title', 'Reports')
@section('page_subtitle', 'Cancellations & No-Shows')

@section('content')

@include('reports._filter', [
    'active' => 'reports.cancellations', 'mode' => 'range', 'from' => $from, 'to' => $to,
    'title' => 'Cancellations & No-Shows',
    'subtitle' => 'Arrivals ' . \Carbon\Carbon::parse($from)->format('M j') . ' – ' . \Carbon\Carbon::parse($to)->format('M j, Y') . ' that were lost',
])

{{-- 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">Lost Bookings</p>
        <p class="text-gray-800 font-bold text-2xl mt-1">{{ number_format($lostCount) }}</p>
        <p class="text-gray-400 text-xs mt-1">{{ $cancelledCount }} cancelled · {{ $noShowCount }} no-show</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">Lost Revenue</p>
        <p class="text-red-600 font-bold text-2xl mt-1">₱{{ number_format($lostRevenue, 2) }}</p>
        <p class="text-gray-400 text-xs mt-1">{{ number_format($lostRoomNights) }} 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">Cancellation Rate</p>
        <p class="text-gray-800 font-bold text-2xl mt-1">{{ number_format($cancellationRate, 1) }}%</p>
        <p class="text-gray-400 text-xs mt-1">of {{ number_format($totalBookings) }} arriving bookings</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">Deposits Forfeited</p>
        <p class="text-teal-700 font-bold text-2xl mt-1">₱{{ number_format($forfeitedTotal, 2) }}</p>
        <p class="text-gray-400 text-xs mt-1">recovered from lost bookings</p>
    </div>
</div>

<div class="grid grid-cols-1 xl:grid-cols-2 gap-5 mb-5">
    {{-- By source --}}
    <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">
            <h2 class="text-sm font-semibold text-gray-700">By Booking Source</h2>
            <p class="text-xs text-gray-400 mt-0.5">Which channels leak the most</p>
        </div>
        @if($bySource->isEmpty())
        <p class="px-5 py-8 text-center text-gray-300 text-sm">No lost bookings for this period.</p>
        @else
        <div class="overflow-x-auto">
        <table class="w-full text-sm">
            <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">Source</th>
                    <th class="px-4 py-2.5 text-right text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Lost</th>
                    <th class="px-4 py-2.5 text-right text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Nights</th>
                    <th class="px-5 py-2.5 text-right text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Lost Revenue</th>
                </tr>
            </thead>
            <tbody>
                @foreach($bySource as $source => $row)
                <tr class="{{ !$loop->last ? 'border-b border-gray-50' : '' }} hover:bg-gray-50/50 transition-colors">
                    <td class="px-5 py-3 font-medium text-gray-700">{{ $source }}</td>
                    <td class="px-4 py-3 text-right text-gray-700">{{ $row['count'] }}</td>
                    <td class="px-4 py-3 text-right text-gray-600">{{ $row['nights'] }}</td>
                    <td class="px-5 py-3 text-right font-semibold text-gray-800">₱{{ number_format($row['revenue'], 2) }}</td>
                </tr>
                @endforeach
            </tbody>
        </table>
        </div>
        @endif
    </div>

    {{-- By room type --}}
    <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">
            <h2 class="text-sm font-semibold text-gray-700">By Room Type</h2>
            <p class="text-xs text-gray-400 mt-0.5">Lost demand per category</p>
        </div>
        @if($byRoomType->isEmpty())
        <p class="px-5 py-8 text-center text-gray-300 text-sm">No lost bookings for this period.</p>
        @else
        <div class="overflow-x-auto">
        <table class="w-full text-sm">
            <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">Room Type</th>
                    <th class="px-4 py-2.5 text-right text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Lost</th>
                    <th class="px-4 py-2.5 text-right text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Nights</th>
                    <th class="px-5 py-2.5 text-right text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Lost Revenue</th>
                </tr>
            </thead>
            <tbody>
                @foreach($byRoomType as $type => $row)
                <tr class="{{ !$loop->last ? 'border-b border-gray-50' : '' }} hover:bg-gray-50/50 transition-colors">
                    <td class="px-5 py-3 font-medium text-gray-700">{{ $type }}</td>
                    <td class="px-4 py-3 text-right text-gray-700">{{ $row['count'] }}</td>
                    <td class="px-4 py-3 text-right text-gray-600">{{ $row['nights'] }}</td>
                    <td class="px-5 py-3 text-right font-semibold text-gray-800">₱{{ number_format($row['revenue'], 2) }}</td>
                </tr>
                @endforeach
            </tbody>
        </table>
        </div>
        @endif
    </div>
</div>

{{-- Detail --}}
<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">
        <h2 class="text-sm font-semibold text-gray-700">Lost Bookings</h2>
        <p class="text-xs text-gray-400 mt-0.5">Highest value first</p>
    </div>
    @if($rows->isEmpty())
    <p class="px-5 py-10 text-center text-gray-300 text-sm">No cancellations or no-shows in this period. 🎉</p>
    @else
    <div class="overflow-x-auto">
        <table class="w-full text-sm min-w-[760px]">
            <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">Guest / Booking</th>
                    <th class="px-4 py-2.5 text-left text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Room</th>
                    <th class="px-4 py-2.5 text-left text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Source</th>
                    <th class="px-4 py-2.5 text-left text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Arrival</th>
                    <th class="px-4 py-2.5 text-center text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Nights</th>
                    <th class="px-4 py-2.5 text-left text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Status</th>
                    <th class="px-4 py-2.5 text-right text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Lost</th>
                    <th class="px-5 py-2.5 text-right text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Forfeited</th>
                </tr>
            </thead>
            <tbody>
                @foreach($rows as $row)
                <tr class="{{ !$loop->last ? 'border-b border-gray-50' : '' }} hover:bg-gray-50/50 transition-colors">
                    <td class="px-5 py-3">
                        <p class="font-medium text-gray-700">{{ $row['guest_name'] }}</p>
                        <p class="text-[10px] text-gray-400 font-mono">{{ $row['booking_no'] }}</p>
                    </td>
                    <td class="px-4 py-3">
                        <p class="text-gray-700">{{ $row['room_no'] }}</p>
                        <p class="text-[10px] text-gray-400">{{ $row['room_type'] }}</p>
                    </td>
                    <td class="px-4 py-3 text-gray-600">{{ $row['source'] }}</td>
                    <td class="px-4 py-3 text-gray-600">{{ $row['check_in']->format('M j, Y') }}</td>
                    <td class="px-4 py-3 text-center text-gray-600">{{ $row['nights'] }}</td>
                    <td class="px-4 py-3">
                        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-semibold border-[0.5px] {{ $row['status'] === 'no_show' ? 'bg-orange-50 text-orange-600 border-orange-200' : 'bg-red-50 text-red-600 border-red-200' }}">
                            {{ $row['status'] === 'no_show' ? 'No Show' : 'Cancelled' }}
                        </span>
                    </td>
                    <td class="px-4 py-3 text-right font-semibold text-red-600">₱{{ number_format($row['amount'], 2) }}</td>
                    <td class="px-5 py-3 text-right text-teal-700">{{ $row['forfeited'] > 0 ? '₱' . number_format($row['forfeited'], 2) : '—' }}</td>
                </tr>
                @endforeach
            </tbody>
            <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" colspan="6">Total</td>
                    <td class="px-4 py-3 text-right font-bold text-red-700">₱{{ number_format($lostRevenue, 2) }}</td>
                    <td class="px-5 py-3 text-right font-bold text-teal-700">₱{{ number_format($forfeitedTotal, 2) }}</td>
                </tr>
            </tfoot>
        </table>
    </div>
    @endif
</div>

@endsection