@extends('layouts.booking')

@section('title', 'Booking Confirmed')

@section('content')
<div class="row justify-content-center">
    <div class="col-lg-7">
        <div class="hp-card text-center">
            <div class="hp-card-body py-5">
                <div class="rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width:80px;height:80px;background:var(--hp-green-light);">
                    <i class="bi bi-check-lg fs-1" style="color:var(--hp-primary);"></i>
                </div>
                <h2 class="fw-bold mb-2">Reservation Confirmed!</h2>
                <p class="text-muted">Thank you, {{ $reservation->guest->first_name }}. Your booking is confirmed.</p>
                <div class="hp-card mt-4 text-start">
                    <div class="hp-card-body">
                        <div class="row g-3">
                            <div class="col-sm-6"><small class="text-muted">Confirmation #</small><div class="fw-bold">{{ $reservation->number }}</div></div>
                            <div class="col-sm-6"><small class="text-muted">Status</small><div><x-status-badge :status="$reservation->status" /></div></div>
                            <div class="col-sm-6"><small class="text-muted">Check-in</small><div>{{ $reservation->check_in_date->format('M j, Y') }}</div></div>
                            <div class="col-sm-6"><small class="text-muted">Check-out</small><div>{{ $reservation->check_out_date->format('M j, Y') }}</div></div>
                            <div class="col-sm-6"><small class="text-muted">Room Type</small><div>{{ $reservation->roomType->name }}</div></div>
                            <div class="col-sm-6"><small class="text-muted">Total</small><div class="fw-bold">{{ $hotel?->currency ?? 'USD' }} {{ number_format($reservation->total_amount, 2) }}</div></div>
                        </div>
                    </div>
                </div>
                <a href="{{ route('book.search') }}" class="btn btn-hp-primary mt-4">Book Another Stay</a>
            </div>
        </div>
    </div>
</div>
@endsection