@extends('layouts.app')

@section('title', 'Night Audit — ' . \Carbon\Carbon::parse($date)->format('M j, Y'))
@section('nav_reports', 'bg-teal-50 text-teal-700 font-semibold')
@section('page_title', 'Reports')
@section('page_subtitle', 'Night Audit — ' . \Carbon\Carbon::parse($date)->format('l, F j, Y'))

@section('content')

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

{{-- ===== 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">Arrivals</p>
        <p class="text-gray-800 font-bold text-2xl mt-1">{{ $arrivals->count() }}</p>
        <p class="text-gray-400 text-xs mt-1">
            {{ $arrivals->where('status','checked_in')->count() }} checked in
            @if($arrivals->where('status','confirmed')->count() + $arrivals->where('status','pending')->count() > 0)
            · {{ $arrivals->whereIn('status',['confirmed','pending'])->count() }} expected
            @endif
        </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">Departures</p>
        <p class="text-gray-800 font-bold text-2xl mt-1">{{ $departures->count() }}</p>
        <p class="text-gray-400 text-xs mt-1">
            {{ $departures->where('status','checked_out')->count() }} checked out
            @if($departures->where('status','checked_in')->count() > 0)
            · <span class="text-amber-600">{{ $departures->where('status','checked_in')->count() }} still in house</span>
            @endif
        </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">In House</p>
        <p class="text-teal-700 font-bold text-2xl mt-1">{{ $inHouse->count() }}</p>
        <p class="text-gray-400 text-xs mt-1">guests currently checked in</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">Collected Today</p>
        <p class="text-teal-700 font-bold text-2xl mt-1">₱{{ number_format($totalCollected, 0) }}</p>
        <p class="text-gray-400 text-xs mt-1">{{ $payments->count() }} payment{{ $payments->count() !== 1 ? 's' : '' }}</p>
    </div>
</div>

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

    {{-- ===== LEFT 2/3: ARRIVALS + DEPARTURES ===== --}}
    <div class="xl:col-span-2 space-y-5">

        {{-- Arrivals --}}
        <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 gap-3">
                <div class="w-2 h-2 rounded-full bg-teal-500"></div>
                <h2 class="text-sm font-semibold text-gray-700">Arrivals</h2>
                <span class="ml-auto text-xs text-gray-400">{{ $arrivals->count() }} reservation{{ $arrivals->count() !== 1 ? 's' : '' }}</span>
            </div>
            @if($arrivals->isEmpty())
            <p class="px-5 py-8 text-center text-gray-300 text-sm">No arrivals for this date.</p>
            @else
            <div class="overflow-x-auto">
            <table class="w-full text-sm min-w-[540px]">
                <thead>
                    <tr class="border-b border-gray-100 bg-gray-50/50">
                        <th class="px-5 py-2 text-left text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Guest</th>
                        <th class="px-4 py-2 text-left text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Room</th>
                        <th class="px-4 py-2 text-center text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Nights</th>
                        <th class="px-4 py-2 text-right text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Amount</th>
                        <th class="px-5 py-2 text-left text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Status</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($arrivals as $res)
                    @php
                    $badge = match($res->status) {
                        'checked_in' => 'bg-green-50 text-green-700 border-green-200',
                        'confirmed'  => 'bg-teal-50 text-teal-700 border-teal-200',
                        'pending'    => 'bg-amber-50 text-amber-700 border-amber-200',
                        default      => 'bg-gray-50 text-gray-500 border-gray-200',
                    };
                    $label = match($res->status) {
                        'checked_in' => 'Checked In',
                        'confirmed'  => 'Confirmed',
                        'pending'    => 'Pending',
                        default      => ucfirst($res->status),
                    };
                    @endphp
                    <tr class="{{ !$loop->last ? 'border-b border-gray-50' : '' }} hover:bg-gray-50/50 transition-colors">
                        <td class="px-5 py-3">
                            <a href="{{ route('reservations.show', $res->id) }}" class="font-medium text-gray-800 hover:text-teal-700 transition-colors">
                                {{ $res->guest_name }}
                            </a>
                            <p class="text-[10px] text-gray-400">{{ $res->booking_no }}</p>
                        </td>
                        <td class="px-4 py-3">
                            <p class="font-semibold text-gray-700">{{ $res->room_no }}</p>
                            <p class="text-[10px] text-gray-400">{{ $res->room_type }}</p>
                        </td>
                        <td class="px-4 py-3 text-center text-gray-600">{{ $res->nights }}</td>
                        <td class="px-4 py-3 text-right font-medium text-gray-700">₱{{ number_format($res->amount, 0) }}</td>
                        <td class="px-5 py-3">
                            <span class="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-semibold border-[0.5px] {{ $badge }}">
                                {{ $label }}
                            </span>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
            </div>
            @endif
        </div>

        {{-- Departures --}}
        <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 gap-3">
                <div class="w-2 h-2 rounded-full bg-gray-400"></div>
                <h2 class="text-sm font-semibold text-gray-700">Departures</h2>
                <span class="ml-auto text-xs text-gray-400">{{ $departures->count() }} reservation{{ $departures->count() !== 1 ? 's' : '' }}</span>
            </div>
            @if($departures->isEmpty())
            <p class="px-5 py-8 text-center text-gray-300 text-sm">No departures for this date.</p>
            @else
            <div class="overflow-x-auto">
            <table class="w-full text-sm min-w-[480px]">
                <thead>
                    <tr class="border-b border-gray-100 bg-gray-50/50">
                        <th class="px-5 py-2 text-left text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Guest</th>
                        <th class="px-4 py-2 text-left text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Room</th>
                        <th class="px-4 py-2 text-right text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Amount</th>
                        <th class="px-5 py-2 text-left text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Status</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($departures as $res)
                    @php
                    $badge = match($res->status) {
                        'checked_out' => 'bg-gray-100 text-gray-500 border-gray-300',
                        'checked_in'  => 'bg-amber-50 text-amber-700 border-amber-200',
                        default       => 'bg-gray-50 text-gray-500 border-gray-200',
                    };
                    $label = match($res->status) {
                        'checked_out' => 'Checked Out',
                        'checked_in'  => 'Still In House',
                        default       => ucfirst($res->status),
                    };
                    @endphp
                    <tr class="{{ !$loop->last ? 'border-b border-gray-50' : '' }} hover:bg-gray-50/50 transition-colors">
                        <td class="px-5 py-3">
                            <a href="{{ route('reservations.show', $res->id) }}" class="font-medium text-gray-800 hover:text-teal-700 transition-colors">
                                {{ $res->guest_name }}
                            </a>
                            <p class="text-[10px] text-gray-400">{{ $res->booking_no }}</p>
                        </td>
                        <td class="px-4 py-3">
                            <p class="font-semibold text-gray-700">{{ $res->room_no }}</p>
                            <p class="text-[10px] text-gray-400">{{ $res->room_type }}</p>
                        </td>
                        <td class="px-4 py-3 text-right font-medium text-gray-700">₱{{ number_format($res->amount, 0) }}</td>
                        <td class="px-5 py-3">
                            <span class="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-semibold border-[0.5px] {{ $badge }}">
                                {{ $label }}
                            </span>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
            </div>
            @endif
        </div>

    </div>

    {{-- ===== RIGHT 1/3: PAYMENTS + IN-HOUSE SUMMARY ===== --}}
    <div class="space-y-5">

        {{-- Payment breakdown --}}
        <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">Payments Collected</h2>
                <p class="text-teal-700 font-bold text-xl mt-1">₱{{ number_format($totalCollected, 0) }}</p>
            </div>
            @if($byPaymentMethod->isEmpty())
            <p class="px-5 py-6 text-center text-gray-300 text-sm">No payments on this date.</p>
            @else
            <div class="divide-y divide-gray-50">
                @foreach($byPaymentMethod as $method => $pm)
                @php $pmShare = $totalCollected > 0 ? round($pm['total'] / $totalCollected * 100) : 0; @endphp
                <div class="px-5 py-3">
                    <div class="flex items-center justify-between mb-1.5">
                        <span class="text-sm font-medium text-gray-700">{{ $method }}</span>
                        <span class="text-sm font-semibold text-gray-800">₱{{ number_format($pm['total'], 0) }}</span>
                    </div>
                    <div class="flex items-center gap-2">
                        <div class="flex-1 bg-gray-100 rounded-full h-1.5">
                            <div class="bg-teal-500 h-1.5 rounded-full" style="width: {{ $pmShare }}%"></div>
                        </div>
                        <span class="text-[10px] text-gray-400 w-12 text-right">{{ $pm['count'] }} txn · {{ $pmShare }}%</span>
                    </div>
                </div>
                @endforeach
            </div>
            @if($payments->count() > 0)
            <div class="px-5 py-3 border-t border-gray-100 bg-gray-50/50">
                <p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider mb-2">Transactions</p>
                <div class="space-y-2 max-h-48 overflow-y-auto">
                    @foreach($payments as $pmt)
                    <div class="flex items-start justify-between gap-2 text-xs">
                        <div class="min-w-0">
                            <p class="font-medium text-gray-700 truncate">{{ $pmt->reservation?->guest_name ?? '—' }}</p>
                            <p class="text-gray-400 text-[10px]">{{ $pmt->method }}{{ $pmt->reference ? ' · ' . $pmt->reference : '' }}</p>
                        </div>
                        <span class="font-semibold text-gray-800 flex-shrink-0">₱{{ number_format($pmt->amount, 0) }}</span>
                    </div>
                    @endforeach
                </div>
            </div>
            @endif
        </div>

        {{-- In-House summary --}}
        <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 gap-3">
                <div class="w-2 h-2 rounded-full bg-green-500"></div>
                <h2 class="text-sm font-semibold text-gray-700">In House</h2>
                <span class="ml-auto text-xs font-bold text-green-700">{{ $inHouse->count() }}</span>
            </div>
            @if($inHouse->isEmpty())
            <p class="px-5 py-6 text-center text-gray-300 text-sm">No guests in house.</p>
            @else
            <div class="divide-y divide-gray-50 max-h-72 overflow-y-auto">
                @foreach($inHouse as $res)
                <div class="px-5 py-2.5 hover:bg-gray-50/50 transition-colors">
                    <div class="flex items-center justify-between gap-2">
                        <div class="min-w-0">
                            <a href="{{ route('reservations.show', $res->id) }}"
                               class="text-xs font-medium text-gray-700 hover:text-teal-700 transition-colors truncate block">
                                {{ $res->guest_name }}
                            </a>
                            <p class="text-[10px] text-gray-400">{{ $res->room_no }} · out {{ \Carbon\Carbon::parse($res->check_out)->format('M j') }}</p>
                        </div>
                        <span class="text-[10px] font-medium text-gray-500 flex-shrink-0">{{ $res->room_type }}</span>
                    </div>
                </div>
                @endforeach
            </div>
            @endif
        </div>

        @endif
    </div>

</div>

@endsection