@extends('layouts.app')

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

@section('content')

{{-- ===== TABS + DATE PICKER ===== --}}
@include('reports._toolbar', ['active' => 'revenue', '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">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">from check-ins in period</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">Reservations</p>
        <p class="text-gray-800 font-bold text-2xl mt-1">{{ number_format($totalCount) }}</p>
        <p class="text-gray-400 text-xs mt-1">checked in during period</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">Avg Revenue / Booking</p>
        <p class="text-gray-800 font-bold text-2xl mt-1">₱{{ $totalCount > 0 ? number_format($totalRevenue / $totalCount, 0) : '—' }}</p>
        <p class="text-gray-400 text-xs mt-1">per reservation</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 Collected</p>
        <p class="text-gray-800 font-bold text-2xl mt-1">₱{{ number_format($totalPaid, 0) }}</p>
        <p class="text-gray-400 text-xs mt-1">payments on record</p>
    </div>
</div>

<div class="grid grid-cols-1 xl:grid-cols-2 gap-5">

    {{-- ===== 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">Revenue contribution per room category</p>
        </div>
        @if($byRoomType->isEmpty())
        <p class="px-5 py-8 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">
            <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">Bookings</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">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">
                        <p class="font-medium text-gray-700">{{ $type }}</p>
                        <div class="mt-1 flex items-center gap-1.5">
                            <div class="w-20 bg-gray-100 rounded-full h-1">
                                <div class="bg-teal-500 h-1 rounded-full" style="width: {{ $row['share'] }}%"></div>
                            </div>
                            <span class="text-[10px] text-gray-400">{{ $row['share'] }}%</span>
                        </div>
                    </td>
                    <td class="px-4 py-3 text-right">
                        <p class="font-semibold text-gray-700">{{ $row['count'] }}</p>
                        <p class="text-[10px] text-gray-400">{{ $row['avg_nights'] }}n avg</p>
                    </td>
                    <td class="px-4 py-3 text-right text-gray-600">₱{{ number_format($row['adr'], 0) }}</td>
                    <td class="px-5 py-3 text-right font-semibold text-gray-800">₱{{ number_format($row['revenue'], 0) }}</td>
                </tr>
                @endforeach
            </tbody>
        </table>
        </div>
        @endif
    </div>

    {{-- ===== BY BOOKING 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">Revenue and bookings by channel</p>
        </div>
        @if($bySource->isEmpty())
        <p class="px-5 py-8 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">
            <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">Bookings</th>
                    <th class="px-4 py-2.5 text-right text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Avg Stay</th>
                    <th class="px-5 py-2.5 text-right text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Revenue</th>
                </tr>
            </thead>
            <tbody>
                @foreach($bySource as $source => $row)
                @php
                $icons = ['Booking.com'=>'🔵','Agoda'=>'🟠','Airbnb'=>'🔴','Expedia'=>'🟡','Walk-in'=>'🚶','Direct'=>'📞','Direct (Phone)'=>'📞','Website'=>'🌐','Travel Agent'=>'✈️','Corporate'=>'🏢'];
                @endphp
                <tr class="{{ !$loop->last ? 'border-b border-gray-50' : '' }} hover:bg-gray-50/50 transition-colors">
                    <td class="px-5 py-3">
                        <div class="flex items-center gap-2">
                            <span class="text-base leading-none">{{ $icons[$source] ?? '📋' }}</span>
                            <div>
                                <p class="font-medium text-gray-700">{{ $source }}</p>
                                <div class="mt-1 flex items-center gap-1.5">
                                    <div class="w-20 bg-gray-100 rounded-full h-1">
                                        <div class="bg-teal-500 h-1 rounded-full" style="width: {{ $row['share'] }}%"></div>
                                    </div>
                                    <span class="text-[10px] text-gray-400">{{ $row['share'] }}%</span>
                                </div>
                            </div>
                        </div>
                    </td>
                    <td class="px-4 py-3 text-right font-semibold text-gray-700">{{ $row['count'] }}</td>
                    <td class="px-4 py-3 text-right text-gray-600">{{ $row['avg_nights'] }}n</td>
                    <td class="px-5 py-3 text-right font-semibold text-gray-800">₱{{ number_format($row['revenue'], 0) }}</td>
                </tr>
                @endforeach
            </tbody>
        </table>
        </div>
        @endif
    </div>

    {{-- ===== BY RATE PLAN ===== --}}
    <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 Rate Plan</h2>
            <p class="text-xs text-gray-400 mt-0.5">Which rate plans guests are booking on</p>
        </div>
        @if($byRatePlan->isEmpty())
        <p class="px-5 py-8 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">
            <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">Rate Plan</th>
                    <th class="px-4 py-2.5 text-right text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Bookings</th>
                    <th class="px-5 py-2.5 text-left text-[10px] font-semibold text-gray-400 uppercase tracking-wider w-32">Share</th>
                    <th class="px-5 py-2.5 text-right text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Revenue</th>
                </tr>
            </thead>
            <tbody>
                @foreach($byRatePlan as $row)
                <tr class="{{ !$loop->last ? 'border-b border-gray-50' : '' }} hover:bg-gray-50/50 transition-colors">
                    <td class="px-5 py-3">
                        <div class="flex items-center gap-2">
                            <span class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-bold bg-blue-50 text-blue-700 border-[0.5px] border-blue-200 flex-shrink-0">
                                {{ $row['code'] }}
                            </span>
                            <span class="font-medium text-gray-700">{{ $row['name'] }}</span>
                        </div>
                    </td>
                    <td class="px-4 py-3 text-right font-semibold text-gray-700">{{ $row['count'] }}</td>
                    <td class="px-5 py-3">
                        <div class="flex items-center gap-2">
                            <div class="flex-1 bg-gray-100 rounded-full h-1.5">
                                <div class="bg-blue-400 h-1.5 rounded-full" style="width: {{ $row['share'] }}%"></div>
                            </div>
                            <span class="text-[10px] text-gray-500 w-8 text-right">{{ $row['share'] }}%</span>
                        </div>
                    </td>
                    <td class="px-5 py-3 text-right font-semibold text-gray-800">₱{{ number_format($row['revenue'], 0) }}</td>
                </tr>
                @endforeach
            </tbody>
        </table>
        </div>
        @endif
    </div>

    {{-- ===== PAYMENT METHODS ===== --}}
    <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">Payment Methods</h2>
            <p class="text-xs text-gray-400 mt-0.5">Collected payments for reservations checked in during period</p>
        </div>
        @if($byPaymentMethod->isEmpty())
        <p class="px-5 py-8 text-center text-gray-300 text-sm">No payment records for this period.</p>
        @else
        @php $pmTotal = (float) $byPaymentMethod->sum('total'); @endphp
        <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">Method</th>
                    <th class="px-4 py-2.5 text-right text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Transactions</th>
                    <th class="px-5 py-2.5 text-left text-[10px] font-semibold text-gray-400 uppercase tracking-wider w-32">Share</th>
                    <th class="px-5 py-2.5 text-right text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Amount</th>
                </tr>
            </thead>
            <tbody>
                @foreach($byPaymentMethod as $pm)
                @php $pmShare = $pmTotal > 0 ? round($pm->total / $pmTotal * 100, 1) : 0; @endphp
                <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">{{ $pm->method }}</td>
                    <td class="px-4 py-3 text-right text-gray-600">{{ $pm->cnt }}</td>
                    <td class="px-5 py-3">
                        <div class="flex items-center gap-2">
                            <div class="flex-1 bg-gray-100 rounded-full h-1.5">
                                <div class="bg-green-400 h-1.5 rounded-full" style="width: {{ $pmShare }}%"></div>
                            </div>
                            <span class="text-[10px] text-gray-500 w-8 text-right">{{ $pmShare }}%</span>
                        </div>
                    </td>
                    <td class="px-5 py-3 text-right font-semibold text-gray-800">₱{{ number_format($pm->total, 0) }}</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">Total</td>
                    <td class="px-4 py-3 text-right font-bold text-gray-700">{{ $byPaymentMethod->sum('cnt') }}</td>
                    <td class="px-5 py-3"></td>
                    <td class="px-5 py-3 text-right font-bold text-teal-700">₱{{ number_format($pmTotal, 0) }}</td>
                </tr>
            </tfoot>
        </table>
        </div>
        @endif
    </div>

</div>

@endsection