@extends('admin.layouts.app')
@section('title', 'Check-out Guest')
@section('page-title', 'Check-out - ' . $booking->booking_number)

@section('content')
<div class="max-w-4xl mx-auto">
    <div class="bg-white rounded-xl shadow-sm p-6">
        <div class="flex justify-between items-center mb-6">
            <h2 class="text-xl font-bold text-navy">Check-out Guest: {{ $booking->guest_name }}</h2>
            <a href="{{ route('reception.index') }}" class="text-gray-500 hover:text-gray-700">
                <i class="fas fa-arrow-left"></i> Back
            </a>
        </div>

        <!-- Guest & Room Summary -->
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6 p-4 bg-gray-50 rounded-lg">
            <div>
                <p class="text-sm text-gray-500">Room</p>
                <p class="font-semibold text-lg">{{ $booking->room?->room_number ?? 'N/A' }}</p>
            </div>
            <div>
                <p class="text-sm text-gray-500">Check-in Date</p>
                <p class="font-semibold">{{ $booking->check_in_date->format('M d, Y') }}</p>
            </div>
            <div>
                <p class="text-sm text-gray-500">Check-out Date</p>
                <p class="font-semibold">{{ $booking->check_out_date->format('M d, Y') }}</p>
            </div>
            <div>
                <p class="text-sm text-gray-500">Nights Stayed</p>
                <p class="font-semibold">{{ $booking->nights }}</p>
            </div>
        </div>

        <!-- Charges Summary -->
        <div class="mb-6">
            <h3 class="font-semibold text-navy mb-4">Folio Summary</h3>
            <div class="border rounded-lg overflow-hidden">
                <table class="w-full text-sm">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-4 py-3 text-left">Description</th>
                            <th class="px-4 py-3 text-right">Amount</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($booking->folio?->charges ?? [] as $charge)
                        <tr class="border-t">
                            <td class="px-4 py-3">{{ $charge->description }}</td>
                            <td class="px-4 py-3 text-right">₦ {{ number_format($charge->amount, 0) }}</td>
                        </tr>
                        @empty
                        <tr class="border-t">
                            <td class="px-4 py-3">Room Charges</td>
                            <td class="px-4 py-3 text-right">₦ {{ number_format($booking->subtotal + $booking->tax_amount, 0) }}</td>
                        </tr>
                        @endforelse
                    </tbody>
                    <tfoot class="bg-gray-50 font-bold">
                        <tr>
                            <td class="px-4 py-3">Total Charges</td>
                            <td class="px-4 py-3 text-right">₦ {{ number_format($booking->folio?->total_charges ?? $booking->total_amount, 0) }}</td>
                        </tr>
                        <tr>
                            <td class="px-4 py-3 text-green-600">Payments Made</td>
                            <td class="px-4 py-3 text-right text-green-600">- ₦ {{ number_format($booking->folio?->total_payments ?? 0, 0) }}</td>
                        </tr>
                        <tr class="text-lg">
                            <td class="px-4 py-3">Balance Due</td>
                            <td class="px-4 py-3 text-right text-red-600">₦ {{ number_format($booking->folio?->balance ?? $booking->total_amount, 0) }}</td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>

        <form action="{{ route('reception.checkout', $booking) }}" method="POST">
            @csrf
            <div class="flex justify-between items-center pt-6 border-t">
                <div>
                    @if(($booking->folio?->balance ?? $booking->total_amount) > 0)
                    <p class="text-red-600 font-semibold">
                        <i class="fas fa-exclamation-triangle mr-2"></i>
                        Guest has outstanding balance!
                    </p>
                    @else
                    <p class="text-green-600 font-semibold">
                        <i class="fas fa-check-circle mr-2"></i>
                        Folio is settled
                    </p>
                    @endif
                </div>
                <div class="flex gap-4">
                    <a href="{{ route('reception.folio', $booking) }}" class="px-6 py-2 border rounded-lg hover:bg-gray-50">
                        View Full Folio
                    </a>
                    <button type="submit" class="px-6 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700">
                        <i class="fas fa-sign-out-alt mr-2"></i>Complete Check-out
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection