@extends('layouts.app')

@section('title', 'Booking Confirmed — Mzaar Mountain Resort')

@section('content')

<section class="container-x py-24 md:py-32 max-w-xl text-center">

    <div class="flex justify-center mb-6">
        <div class="flex h-16 w-16 items-center justify-center rounded-full bg-green-100 text-green-600">
            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>
        </div>
    </div>

    <h1 class="text-3xl md:text-4xl mb-3">
        @if($booking->status === 'confirmed') Booking confirmed! @else Booking received! @endif
    </h1>
    <p class="text-muted-foreground mb-8">
        @if($booking->status === 'confirmed')
            We look forward to seeing you. A confirmation has been sent to <strong>{{ $booking->guest_email }}</strong>.
        @else
            Your booking is pending confirmation. Our team will reach out to <strong>{{ $booking->guest_email }}</strong> shortly.
        @endif
    </p>

    <div class="rounded-2xl border border-border bg-card p-6 text-left space-y-3 mb-8">
        <div class="flex justify-between text-sm">
            <span class="text-muted-foreground">Confirmation code</span>
            <span class="font-mono font-semibold">{{ $booking->confirmation_code }}</span>
        </div>
        <div class="flex justify-between text-sm">
            <span class="text-muted-foreground">Activity</span>
            <span class="font-medium">{{ $booking->activity->name }}</span>
        </div>
        <div class="flex justify-between text-sm">
            <span class="text-muted-foreground">Date</span>
            <span class="font-medium">{{ \Carbon\Carbon::parse($booking->booking_date)->format('D, d M Y') }}</span>
        </div>
        @if($booking->start_time)
        <div class="flex justify-between text-sm">
            <span class="text-muted-foreground">Time</span>
            <span class="font-medium">{{ \Carbon\Carbon::parse($booking->start_time)->format('H:i') }}</span>
        </div>
        @endif
        <div class="flex justify-between text-sm">
            <span class="text-muted-foreground">Guests</span>
            <span class="font-medium">{{ $booking->num_people }}</span>
        </div>
        @if($booking->total_price)
        <div class="flex justify-between text-sm border-t border-border pt-3">
            <span class="text-muted-foreground">Total (pay on arrival)</span>
            <span class="font-semibold">${{ number_format($booking->total_price) }}</span>
        </div>
        @endif
    </div>

    <a href="{{ route('home') }}"
       class="inline-flex items-center gap-2 rounded-full bg-primary px-7 py-3.5 text-sm font-semibold text-primary-foreground transition hover:-translate-y-0.5">
        Back to home
    </a>

</section>

@endsection