@extends('public.layouts.guest')

@section('title', 'Booking Confirmed — ' . \App\Models\Setting::get('property_name','Parkview Hotel CDO'))

@section('content')

<div class="min-h-screen bg-gray-50 flex items-center py-16">
    <div class="max-w-xl mx-auto px-4 sm:px-6 w-full">

        {{-- Success header --}}
        <div class="text-center mb-8">
            <div class="w-20 h-20 bg-teal-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <svg class="w-10 h-10 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                </svg>
            </div>
            <h1 class="text-2xl font-bold text-gray-900">Booking Received!</h1>
            <p class="text-gray-400 text-sm mt-2">Thank you, {{ $reservation->guest_name }}. Your request has been submitted.</p>
        </div>

        {{-- Booking reference card --}}
        <div class="bg-white rounded-2xl border-[0.5px] border-gray-200 shadow-sm overflow-hidden mb-5">

            {{-- Reference banner --}}
            <div class="bg-teal-600 p-5 text-center">
                <p class="text-teal-200 text-xs font-semibold uppercase tracking-widest mb-1">Booking Reference</p>
                <p class="text-white font-bold text-2xl tracking-widest">{{ $reservation->booking_no }}</p>
                <p class="text-teal-200 text-xs mt-1">Save this number — you'll need it at check-in</p>
            </div>

            {{-- Details --}}
            <div class="p-6 space-y-3 text-sm">
                <div class="flex justify-between py-2 border-b border-gray-100">
                    <span class="text-gray-500">Room Type</span>
                    <span class="font-semibold">{{ $reservation->room->type ?? $reservation->room_no }}</span>
                </div>
                <div class="flex justify-between py-2 border-b border-gray-100">
                    <span class="text-gray-500">Check-in</span>
                    <span class="font-semibold">{{ \Carbon\Carbon::parse($reservation->check_in)->format('l, M d, Y') }}</span>
                </div>
                <div class="flex justify-between py-2 border-b border-gray-100">
                    <span class="text-gray-500">Check-out</span>
                    <span class="font-semibold">{{ \Carbon\Carbon::parse($reservation->check_out)->format('l, M d, Y') }}</span>
                </div>
                <div class="flex justify-between py-2 border-b border-gray-100">
                    <span class="text-gray-500">Duration</span>
                    @php $nights = \Carbon\Carbon::parse($reservation->check_in)->diffInDays($reservation->check_out); @endphp
                    <span class="font-semibold">{{ $nights }} night{{ $nights !== 1 ? 's' : '' }}</span>
                </div>
                <div class="flex justify-between py-2 border-b border-gray-100">
                    <span class="text-gray-500">Guests</span>
                    <span class="font-semibold">{{ $reservation->pax }}</span>
                </div>
                <div class="flex justify-between py-2 border-b border-gray-100">
                    <span class="text-gray-500">Total Amount</span>
                    <span class="font-bold text-teal-600">₱{{ number_format($reservation->amount) }}</span>
                </div>
                <div class="flex justify-between py-2">
                    <span class="text-gray-500">Status</span>
                    <span class="inline-flex items-center gap-1.5 bg-amber-50 text-amber-700 border-[0.5px] border-amber-200 text-xs font-semibold px-2.5 py-1 rounded-lg">
                        <span class="w-1.5 h-1.5 rounded-full bg-amber-400"></span>
                        Pending Confirmation
                    </span>
                </div>
            </div>
        </div>

        {{-- Message --}}
        @if(!empty($booking['confirmation_message']))
        <div class="bg-blue-50 border-[0.5px] border-blue-100 rounded-2xl p-5 mb-5">
            <div class="flex items-start gap-3">
                <svg class="w-4 h-4 text-blue-500 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
                <p class="text-blue-700 text-sm">{{ $booking['confirmation_message'] }}</p>
            </div>
        </div>
        @endif

        {{-- Check-in/out times --}}
        <div class="bg-white rounded-2xl border-[0.5px] border-gray-200 p-5 mb-6 flex justify-around text-center">
            <div>
                <p class="text-xs text-gray-400 mb-0.5">Check-in from</p>
                <p class="font-bold text-gray-900">{{ $booking['check_in_time'] ?? '2:00 PM' }}</p>
            </div>
            <div class="border-l border-gray-100"></div>
            <div>
                <p class="text-xs text-gray-400 mb-0.5">Check-out by</p>
                <p class="font-bold text-gray-900">{{ $booking['check_out_time'] ?? '12:00 NN' }}</p>
            </div>
        </div>

        <div class="flex flex-col sm:flex-row gap-3">
            <a href="{{ route('public.home') }}"
               class="flex-1 text-center border-[0.5px] border-gray-200 hover:border-teal-300 text-gray-600 hover:text-teal-700 font-semibold py-3 rounded-xl text-sm transition-colors">
                Back to Home
            </a>
            <a href="{{ route('public.book') }}"
               class="flex-1 text-center bg-teal-600 hover:bg-teal-700 text-white font-semibold py-3 rounded-xl text-sm transition-colors">
                Make Another Booking
            </a>
        </div>
    </div>
</div>

@endsection