@extends('layouts.app')

@section('title', 'Find Your Booking | Kevron Suites')

@section('content')
<section class="section-soft-blue py-20 min-h-[75vh] flex items-center">
    <div class="max-w-md mx-auto px-4 sm:px-6 w-full">
        
        <!-- Header -->
        <div class="text-center mb-10">
            <span class="text-xs uppercase tracking-[0.2em] text-amber-500 font-bold block mb-2">Reservation Finder</span>
            <h2>Locate Your Booking</h2>
            <p class="text-xs text-slate-500 dark:text-slate-400 pt-2">
                Enter your reservation reference code and email to fetch your check-in credentials.
            </p>
        </div>

        <!-- Lookup Form & Results Wrapper -->
        <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded p-8 shadow-sm"
             style="border-radius: 0.1rem; box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;">

             @if(isset($booking))
                 <!-- Dynamic DB Results -->
                 <div class="space-y-6 text-xs font-semibold">
                     <div class="text-center pb-4 border-b border-slate-100 dark:border-slate-800">
                         @php
                             $statusColors = [
                                 'confirmed' => 'bg-emerald-100 dark:bg-emerald-950 text-emerald-600 dark:text-emerald-400',
                                 'pending' => 'bg-amber-100 dark:bg-amber-950 text-amber-600 dark:text-amber-400',
                                 'cancelled' => 'bg-red-100 dark:bg-red-950 text-red-600 dark:text-red-400',
                             ];
                             $statusColor = $statusColors[strtolower($booking->status)] ?? 'bg-blue-100 dark:bg-blue-950 text-blue-600 dark:text-blue-400';
                         @endphp
                         <span class="inline-block {{ $statusColor }} text-[9px] uppercase px-2.5 py-0.5 rounded-full font-bold tracking-wider mb-2">
                             {{ ucfirst($booking->status) }} Reservation
                         </span>
                         <h3 class="text-sm font-bold text-slate-900 dark:text-white">{{ $booking->booking_reference }}</h3>
                     </div>

                     <div class="space-y-3 leading-relaxed">
                         <div class="flex justify-between border-b border-slate-50 dark:border-slate-800 pb-2">
                             <span class="text-slate-400">Guest Name</span>
                             <span class="text-slate-800 dark:text-slate-200 font-bold">{{ $booking->guest->first_name }} {{ $booking->guest->last_name }}</span>
                         </div>
                         <div class="flex justify-between border-b border-slate-50 dark:border-slate-800 pb-2">
                             <span class="text-slate-400">Suite Type</span>
                             <span class="text-slate-800 dark:text-slate-200 font-bold">{{ $booking->apartmentType->name }}</span>
                         </div>
                         <div class="flex justify-between border-b border-slate-50 dark:border-slate-800 pb-2">
                             <span class="text-slate-400">Stay Duration</span>
                             <span class="text-slate-800 dark:text-slate-200 font-bold">
                                 {{ optional($booking->check_in_date)->format('M d, Y') }} to {{ optional($booking->check_out_date)->format('M d, Y') }}
                             </span>
                         </div>
                         <div class="flex justify-between border-b border-slate-50 dark:border-slate-800 pb-2">
                             <span class="text-slate-400">Total Invoice</span>
                             <span class="text-amber-500 font-bold">₦{{ number_format($booking->total_price) }}</span>
                         </div>
                         <div class="flex justify-between border-b border-slate-50 dark:border-slate-800 pb-2">
                             <span class="text-slate-400">Payment Status</span>
                             <span class="text-emerald-500 font-bold">{{ ucfirst($booking->payment_status) }}</span>
                         </div>
                         @if(strtolower($booking->payment_status) === 'paid' || strtolower($booking->status) === 'confirmed')
                             <div class="flex justify-between border-b border-slate-50 dark:border-slate-800 pb-2">
                                 <span class="text-slate-400">Smart Lock Keycode</span>
                                 <span class="text-blue-900 dark:text-cyan-400 font-mono font-bold">{{ $booking->unit->keyless_keycode ?? '7829#' }}</span>
                             </div>
                         @endif
                     </div>

                     <!-- Operation Actions -->
                     <div class="pt-4 space-y-2.5">
                         <div class="flex items-center gap-2">
                             <a href="{{ route('booking.modify', ['reference' => $booking->booking_reference]) }}" class="btn-pill btn-outline-gold text-[10px] py-2.5 w-1/2 text-center font-bold">
                                 Request Modification
                             </a>
                             <a href="{{ route('booking.cancel', ['reference' => $booking->booking_reference]) }}" class="btn-pill bg-red-600 text-white hover:bg-red-700 text-[10px] py-2.5 w-1/2 text-center font-bold">
                                 Request Cancellation
                             </a>
                         </div>
                         <a href="{{ route('booking.find') }}" class="btn-pill btn-primary text-[10px] py-2.5 w-full text-center font-bold">
                             Back to Finder
                         </a>
                     </div>
                 </div>
             @else
                 <!-- Search Form -->
                 <form method="POST" action="{{ route('booking.find_submit') }}" class="space-y-6 text-xs font-semibold">
                     @csrf
                     
                     @if($errors->has('error'))
                         <div class="bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-900 text-red-600 dark:text-red-400 p-3 text-[11px] font-bold" style="border-radius: 0.1rem;">
                             {{ $errors->first('error') }}
                         </div>
                     @endif

                     @if(session('success'))
                         <div class="bg-emerald-50 dark:bg-emerald-950/30 border border-emerald-200 dark:border-emerald-900 text-emerald-600 dark:text-emerald-400 p-3 text-[11px] font-bold" style="border-radius: 0.1rem;">
                             {{ session('success') }}
                         </div>
                     @endif

                     <div>
                         <label class="block text-slate-400 uppercase tracking-widest mb-1.5">Booking Reference</label>
                         <input type="text" name="reference" required placeholder="e.g. KSA-BKG-2026-9912"
                                class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded px-3.5 py-2 text-slate-950 dark:text-white focus:outline-none focus:border-blue-900 dark:focus:border-cyan-400 font-medium">
                     </div>

                     <div>
                         <label class="block text-slate-400 uppercase tracking-widest mb-1.5">Email Address</label>
                         <input type="email" name="email" required placeholder="e.g. john@example.com"
                                class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded px-3.5 py-2 text-slate-950 dark:text-white focus:outline-none focus:border-blue-900 dark:focus:border-cyan-400 font-medium">
                     </div>

                     <button type="submit" class="btn-pill btn-primary w-full py-3 text-xs uppercase tracking-wider font-bold">
                         Search Reservation
                     </button>
                 </form>
             @endif

        </div>

    </div>
</section>
@endsection