@extends('layouts.app')

@section('title', 'Your Reservation Confirmed | Kevron Suites')

@section('content')
<section class="section-soft-blue py-16">
    <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
        
        <!-- Animated Success Hero Card -->
        <div class="card-luxury p-8 md:p-12 text-center bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 shadow-sm relative overflow-hidden mb-8">
            <div class="absolute top-0 left-0 right-0 h-1.5 bg-gradient-to-r from-blue-900 via-amber-500 to-cyan-400"></div>
            
            <div class="w-16 h-16 bg-emerald-100 dark:bg-emerald-950/50 text-emerald-600 dark:text-emerald-400 rounded-full flex items-center justify-center mx-auto mb-6 shadow-md">
                <svg class="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 01-1.043 3.296 3.745 3.745 0 01-3.296 1.043A3.745 3.745 0 0110 21a3.745 3.745 0 01-3.068-1.593 3.746 3.746 0 01-3.296-1.043 3.745 3.745 0 01-1.043-3.296A3.745 3.745 0 013 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 011.043-3.296 3.746 3.746 0 013.296-1.043A3.746 3.746 0 0114 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 013.296 1.043 3.746 3.746 0 011.043 3.296A3.745 3.745 0 0121 12z" />
                </svg>
            </div>
            
            <span class="text-[10px] font-bold text-amber-500 uppercase tracking-[0.2em] block mb-2">Reservation Confirmed</span>
            <h1 class="text-xl md:text-2xl font-normal text-slate-900 dark:text-white leading-tight mb-4">Your Luxury Sanctuary Awaits</h1>
            <p class="text-xs text-slate-500 dark:text-slate-400 max-w-lg mx-auto mb-8 font-medium leading-relaxed">
                Thank you for choosing Kevron Suites and Apartments. Your booking request has been successfully confirmed. A luxury concierge specialist is preparing your suite at Adeniyi Jones, Ikeja.
            </p>
            
            <!-- Details Grid -->
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-left border-t border-b border-slate-100 dark:border-slate-800 py-6 mb-8 text-[11px] font-semibold">
                <div>
                    <span class="block text-slate-400 uppercase tracking-widest text-[9px] mb-1">Booking Ref</span>
                    <span class="text-slate-900 dark:text-white font-bold">{{ $booking->booking_reference ?? 'KSA-BKG-2026-8801' }}</span>
                </div>
                <div>
                    <span class="block text-slate-400 uppercase tracking-widest text-[9px] mb-1">Suite Category</span>
                    <span class="text-slate-900 dark:text-white font-bold">{{ $booking->apartmentType->name ?? '3 Bedroom Luxury Apartment' }}</span>
                </div>
                <div>
                    <span class="block text-slate-400 uppercase tracking-widest text-[9px] mb-1">Check-in</span>
                    <span class="text-slate-900 dark:text-white font-bold">{{ optional($booking->check_in_date)->format('F d, Y') ?? 'June 15, 2026' }}</span>
                </div>
                <div>
                    <span class="block text-slate-400 uppercase tracking-widest text-[9px] mb-1">Check-out</span>
                    <span class="text-slate-900 dark:text-white font-bold">{{ optional($booking->check_out_date)->format('F d, Y') ?? 'June 20, 2026' }}</span>
                </div>
            </div>

            <!-- Action Buttons -->
            <div class="flex flex-col sm:flex-row justify-center items-center gap-4">
                <a href="{{ route('dashboard') }}" class="btn-pill btn-primary px-8 py-3 text-xs uppercase tracking-wider font-bold">
                    Go to Guest Dashboard
                </a>
                <a href="{{ route('home') }}" class="btn-pill btn-outline-gold px-8 py-3 text-xs uppercase tracking-wider font-bold">
                    Return to Homepage
                </a>
            </div>
        </div>

        <!-- Travel & Location Guidance Card -->
        <div class="card-luxury p-8 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 shadow-sm mb-8">
            <h2 class="text-base font-normal text-slate-900 dark:text-white mb-6 flex items-center space-x-2">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 text-amber-500">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
                    <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z" />
                </svg>
                <span>Arrival & Location Directions</span>
            </h2>
            
            <div class="space-y-6 text-xs text-slate-600 dark:text-slate-400 leading-relaxed font-semibold">
                <div>
                    <h3 class="text-xs font-bold text-blue-900 dark:text-cyan-400 uppercase tracking-widest mb-2">Physical Address</h3>
                    <p class="text-slate-800 dark:text-slate-200">
                        Kevron Suites and Apartments, Adeniyi Jones Avenue, Ikeja, Lagos, Nigeria.
                    </p>
                </div>
                
                <hr class="border-slate-100 dark:border-slate-800">
                
                <div>
                    <h3 class="text-xs font-bold text-blue-900 dark:text-cyan-400 uppercase tracking-widest mb-2">Airport Proximity & Travel Times</h3>
                    <p class="mb-3">
                        Our luxury estate is strategically positioned in a highly secure residential enclave of Ikeja, offering swift access to both domestic and international air terminals:
                    </p>
                    <ul class="list-disc pl-5 space-y-2 text-slate-800 dark:text-slate-200">
                        <li>
                            <span class="font-bold text-slate-900 dark:text-white">Murtala Muhammed Domestic Airport (MM1/MM2):</span> 
                            Approximately <span class="text-amber-500 font-bold">8 minutes</span> travel time under standard traffic conditions.
                        </li>
                        <li>
                            <span class="font-bold text-slate-900 dark:text-white">Murtala Muhammed International Airport (MMIA):</span> 
                            Approximately <span class="text-amber-500 font-bold">15 minutes</span> travel time under standard traffic conditions.
                        </li>
                    </ul>
                    <p class="text-[10px] text-slate-400 dark:text-slate-500 mt-3 italic">
                        * Note: Exact transit times may fluctuate during peak rush hours. Contact your concierge for airport pickup service status updates.
                    </p>
                </div>

                <hr class="border-slate-100 dark:border-slate-800">

                <div>
                    <h3 class="text-xs font-bold text-blue-900 dark:text-cyan-400 uppercase tracking-widest mb-2">PWA Smart Access Key</h3>
                    <p class="mb-4">
                        For an effortless check-in experience, install the Kevron Apartments Progressive Web App (PWA) directly onto your mobile device. Your digital smart key, real-time housekeeping controls, and local guide are fully accessible offline.
                    </p>
                    <div class="p-4 bg-slate-50 dark:bg-slate-800/40 border border-slate-100 dark:border-slate-800 rounded flex items-center justify-between">
                        <div>
                            <span class="block text-slate-900 dark:text-white font-bold">Install PWA Web App</span>
                            <span class="text-[10px] text-slate-400 block mt-0.5">Access offline bookings, security smart keys & receipts.</span>
                        </div>
                        <button onclick="window.dispatchEvent(new CustomEvent('pwa-install-prompt'))" 
                                class="btn-pill btn-primary py-2 px-4 text-[10px] font-bold uppercase tracking-wider">
                            Install App
                        </button>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>
@endsection