@extends('layouts.app')

@section('title', $seo->meta_title ?? 'Book Luxury Serviced Apartments in Ikeja | Kevron Suites')
@section('meta_description', $seo->meta_description ?? 'Book your stay at Kevron Suites and Apartments.')

@section('content')
<section class="section-soft-blue py-12">
    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
        
        <!-- Header -->
        <div class="text-center mb-10">
            <span class="text-xs uppercase tracking-[0.25em] text-[#2B3192] font-bold block mb-2">Reservation Center</span>
            <h1 class="text-slate-900 dark:text-white leading-tight mb-2">Book Your Stay at Kevron Suites and Apartments</h1>
            <p class="text-xs text-slate-500 dark:text-slate-400 max-w-md mx-auto pt-2">
                Secure your stay in our Adeniyi Jones enclave. Uninterrupted power, high-speed Wi-Fi, and top-tier smart secure living.
            </p>
        </div>

        <!-- Multi-Step Booking Wizard (Powered by Alpine.js & fetch API) -->
        <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded p-8 shadow-sm relative"
             style="border-radius: 0.1rem; box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;"
             x-data="{
                // Branded Full-Page Loading Overlay
                showRedirectOverlay: false,
                step: 1,
                apartment_type_id: '{{ $apartments->first()->id ?? 1 }}',
                check_in: '{{ request('check_in', '') }}',
                check_out: '{{ request('check_out', '') }}',
                guests_count: '{{ request('guests', 2) }}',
                purpose: '',
                first_name: '',
                last_name: '',
                email: '',
                phone: '',
                country: 'Nigeria',
                special_requests: '',
                add_ons: {}, // slug -> boolean
                promo_code: '',
                payment_method: 'bank_transfer',
                policy_accepted: false,
                receipt_file: null,
                receipt_uploaded: false,
                
                // Live calculation states
                loading: false,
                available: null,
                availabilityMessage: '',
                pricing: null,
                errorMessage: '',
                
                init() {
                    const urlParams = new URLSearchParams(window.location.search);
                    const typeParam = urlParams.get('type') || '';
                    if (typeParam) {
                        @foreach($apartments as $apt)
                            if (typeParam === '{{ $apt->slug }}') {
                                this.apartment_type_id = '{{ $apt->id }}';
                            }
                        @endforeach
                    }
                    
                    // Set up watcher for apartment_type_id to fetch booked dates
                    this.$watch('apartment_type_id', (value) => {
                        updateBookingBookedDates(value, window.bookingCheckInPicker, window.bookingCheckOutPicker, this, 'check_in', 'check_out');
                    });
                    
                    // Initial fetch on DOM loaded
                    document.addEventListener('DOMContentLoaded', () => {
                        updateBookingBookedDates(this.apartment_type_id, window.bookingCheckInPicker, window.bookingCheckOutPicker, this, 'check_in', 'check_out');
                    });

                    if (this.check_in && this.check_out) {
                        this.checkAvailability();
                    }
                },
                
                handleFile(event) {
                    const file = event.target.files[0];
                    if (file) {
                        this.receipt_file = file;
                        this.receipt_uploaded = true;
                    }
                },
                
                async checkAvailability() {
                    if (!this.check_in || !this.check_out) {
                        this.errorMessage = 'Please select check-in and check-out dates.';
                        return;
                    }
                    this.loading = true;
                    this.errorMessage = '';
                    this.available = null;
                    try {
                        let res = await fetch('{{ route('booking.check_availability') }}', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
                            },
                            body: JSON.stringify({
                                apartment_type_id: this.apartment_type_id,
                                check_in: this.check_in,
                                check_out: this.check_out
                            })
                        });
                        let data = await res.json();
                        this.available = data.available;
                        this.availabilityMessage = data.message;
                        if (data.available) {
                            this.calculatePrice();
                        } else {
                            this.errorMessage = data.message;
                        }
                    } catch (e) {
                        this.errorMessage = 'Failed to check availability. Please try again.';
                    } finally {
                        this.loading = false;
                    }
                },
                
                async calculatePrice() {
                    if (!this.check_in || !this.check_out) return;
                    this.loading = true;
                    try {
                        let addOnPayload = {};
                        for (let slug in this.add_ons) {
                            if (this.add_ons[slug]) {
                                addOnPayload[slug] = { quantity: 1 };
                            }
                        }
                        let res = await fetch('{{ route('booking.calculate_price') }}', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
                            },
                            body: JSON.stringify({
                                apartment_type_id: this.apartment_type_id,
                                check_in: this.check_in,
                                check_out: this.check_out,
                                promo_code: this.promo_code,
                                add_ons: addOnPayload
                            })
                        });
                        let data = await res.json();
                        this.pricing = data;
                    } catch (e) {
                        console.error('Failed to calculate price.');
                    } finally {
                        this.loading = false;
                    }
                },
                
                toggleAddOn(slug) {
                    this.add_ons[slug] = !this.add_ons[slug];
                    this.calculatePrice();
                },
                
                validateStep3() {
                    if (!this.first_name || !this.last_name || !this.email || !this.phone || !this.country || !this.purpose || !this.special_requests) {
                        this.errorMessage = 'Please fill in all guest details, including purpose of stay and special requests.';
                        return false;
                    }
                    const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                    if (!emailPattern.test(this.email)) {
                        this.errorMessage = 'Please enter a valid email address.';
                        return false;
                    }
                    this.errorMessage = '';
                    return true;
                },
                
                async submitBooking() {
                    if (!this.policy_accepted) {
                        this.errorMessage = 'You must accept the terms and house rules to reserve.';
                        return;
                    }
                    this.loading = true;
                    this.errorMessage = '';
                    if (this.payment_method === 'online_flutterwave') {
                        this.showRedirectOverlay = true;
                    }
                    
                    let fd = new FormData();
                    fd.append('apartment_type_id', this.apartment_type_id);
                    fd.append('check_in', this.check_in);
                    fd.append('check_out', this.check_out);
                    fd.append('guests_count', this.guests_count);
                    fd.append('purpose', this.purpose);
                    fd.append('first_name', this.first_name);
                    fd.append('last_name', this.last_name);
                    fd.append('email', this.email);
                    fd.append('phone', this.phone);
                    fd.append('country', this.country);
                    fd.append('special_requests', this.special_requests);
                    fd.append('payment_method', this.payment_method);
                    fd.append('policy_accepted', this.policy_accepted ? '1' : '0');
                    if (this.receipt_file) {
                        fd.append('receipt', this.receipt_file);
                    }
                    
                    let addOnIdx = 0;
                    for (let slug in this.add_ons) {
                        if (this.add_ons[slug]) {
                            fd.append(`add_ons[${addOnIdx}]`, slug);
                            addOnIdx++;
                        }
                    }
                    if (this.promo_code) {
                        fd.append('promo_code', this.promo_code);
                    }
                    
                    try {
                        let res = await fetch('{{ route('booking.store') }}', {
                            method: 'POST',
                            headers: {
                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
                            },
                            body: fd
                        });
                        let data = await res.json();
                        if (data.success) {
                            window.location.href = data.redirect_url;
                        } else {
                            this.showRedirectOverlay = false;
                            this.errorMessage = data.error || 'Failed to submit booking. Check all fields.';
                        }
                    } catch (e) {
                        this.showRedirectOverlay = false;
                        this.errorMessage = 'Failed to submit booking. Please try again.';
                    } finally {
                        this.loading = false;
                        // Avoid hiding overlay if redirect is in progress
                        if (!this.showRedirectOverlay) {
                            this.loading = false;
                        }
                    }
                }
             }">

            <!-- Branded Redirect Overlay -->
            <div x-show="showRedirectOverlay" 
                 class="absolute inset-0 bg-[#090D2A]/90 backdrop-blur-md flex flex-col items-center justify-center z-50 animate-fade-in" 
                 style="border-radius: 0.1rem;"
                 x-transition:enter="transition ease-out duration-300"
                 x-transition:enter-start="opacity-0"
                 x-transition:enter-end="opacity-100"
                 x-transition:leave="transition ease-in duration-200"
                 x-transition:leave-start="opacity-100"
                 x-transition:leave-end="opacity-0">
                <div class="w-12 h-12 border-4 border-[#D6A84F] border-t-transparent rounded-full animate-spin mb-4"></div>
                <h3 class="text-[#D6A84F] text-sm uppercase tracking-widest font-extrabold mb-1">Redirecting to Secure Checkout...</h3>
                <p class="text-white/60 text-[10px] font-semibold">Please do not close this window or navigate away.</p>
                <div class="mt-6 flex items-center gap-2 text-white/40 text-[9px] font-bold uppercase tracking-wider">
                    <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
                    <span>Secured by Flutterwave</span>
                </div>
            </div>

            <!-- Steps Progress Bar -->
            <div class="flex items-center justify-between mb-8 text-[10px] font-bold text-slate-400 uppercase tracking-widest border-b border-slate-100 dark:border-slate-800 pb-4">
                <div class="flex items-center space-x-2" :class="{'text-blue-900 dark:text-cyan-400': step === 1, 'text-emerald-500': step > 1}">
                    <span class="w-5 h-5 rounded-full flex items-center justify-center border border-current">1</span>
                    <span>Stay Parameters</span>
                </div>
                <div class="w-10 border-t border-slate-200 dark:border-slate-800"></div>
                <div class="flex items-center space-x-2" :class="{'text-blue-900 dark:text-cyan-400': step === 2, 'text-emerald-500': step > 2, 'opacity-40': step < 2}">
                    <span class="w-5 h-5 rounded-full flex items-center justify-center border border-current">2</span>
                    <span>Add-On Options</span>
                </div>
                <div class="w-10 border-t border-slate-200 dark:border-slate-800"></div>
                <div class="flex items-center space-x-2" :class="{'text-blue-900 dark:text-cyan-400': step === 3, 'text-emerald-500': step > 3, 'opacity-40': step < 3}">
                    <span class="w-5 h-5 rounded-full flex items-center justify-center border border-current">3</span>
                    <span>Guest Details</span>
                </div>
                <div class="w-10 border-t border-slate-200 dark:border-slate-800"></div>
                <div class="flex items-center space-x-2" :class="{'text-blue-900 dark:text-cyan-400': step === 4, 'opacity-40': step < 4}">
                    <span class="w-5 h-5 rounded-full flex items-center justify-center border border-current">4</span>
                    <span>Policies & Checkout</span>
                </div>
            </div>

            <!-- Error Banner -->
            <div x-show="errorMessage" class="bg-red-50 dark:bg-red-950/20 border-l-4 border-red-500 p-4 mb-6 text-xs text-red-600 dark:text-red-400 font-semibold" style="border-radius: 0.1rem;">
                <span x-text="errorMessage"></span>
            </div>

            <!-- STEP 1: CHOOSE STAY & CHECK AVAILABILITY -->
            <div x-show="step === 1" class="space-y-6 text-xs font-semibold">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-slate-400 uppercase tracking-widest mb-1.5">Check-In Date</label>
                        <input type="date" id="booking_check_in" x-model="check_in" @change="available = null"
                               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">Check-Out Date</label>
                        <input type="date" id="booking_check_out" x-model="check_out" @change="available = null"
                               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>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-slate-400 uppercase tracking-widest mb-1.5">Suite Category</label>
                        <select x-model="apartment_type_id" @change="available = null"
                                class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded px-3.5 py-2.5 text-slate-950 dark:text-white focus:outline-none focus:border-blue-900 dark:focus:border-cyan-400 font-medium">
                            @foreach($apartments as $apt)
                                <option value="{{ $apt->id }}">{{ $apt->name }} (₦{{ number_format($apt->base_price_nightly) }} / night)</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="block text-slate-400 uppercase tracking-widest mb-1.5">Number of Guests</label>
                        <select x-model="guests_count" 
                                class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded px-3.5 py-2.5 text-slate-950 dark:text-white focus:outline-none focus:border-blue-900 dark:focus:border-cyan-400 font-medium">
                            <option value="1">1 Guest</option>
                            <option value="2">2 Guests</option>
                            <option value="3">3 Guests</option>
                            <option value="4">4 Guests</option>
                            <option value="6">6 Guests</option>
                            <option value="8">8 Guests</option>
                        </select>
                    </div>
                </div>

                <!-- Live Availability Feedback -->
                <div x-show="available !== null" :class="{'bg-emerald-50 dark:bg-emerald-950/20 text-emerald-600 dark:text-emerald-400': available, 'bg-red-50 dark:bg-red-950/20 text-red-600 dark:text-red-400': !available}" class="p-4 text-xs font-semibold leading-relaxed" style="border-radius: 0.1rem;">
                    <span x-text="availabilityMessage"></span>
                </div>

                <div class="pt-6 flex justify-end gap-3">
                    <button type="button" @click="checkAvailability()" :disabled="loading" class="btn-pill btn-outline-gold px-8 py-3">
                        Check Availability
                    </button>
                    <button type="button" @click="step = 2" :disabled="!available || loading" 
                            :class="{'opacity-50 cursor-not-allowed': !available}"
                            class="btn-pill btn-primary px-8 py-3">
                        Continue to Add-Ons
                    </button>
                </div>
            </div>

            <!-- STEP 2: CHOOSE ADD-ONS -->
            <div x-show="step === 2" class="space-y-6 text-xs font-semibold">
                <div>
                    <h3 class="text-xs font-bold text-amber-500 uppercase tracking-widest mb-4">Select Add-On Services</h3>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        
                        <!-- Airport Pickup -->
                        <div class="p-4 bg-slate-50 dark:bg-slate-800/40 rounded border border-slate-100 dark:border-slate-800 flex items-center justify-between" style="border-radius: 0.1rem;">
                            <div>
                                <span class="block text-slate-900 dark:text-white font-bold">Airport Pickup MM1/MM2</span>
                                <span class="text-[10px] text-slate-400 block mt-0.5">Standard local pickup — ₦15,000 flat</span>
                            </div>
                            <input type="checkbox" @change="toggleAddOn('airport-pickup-local')" class="w-4 h-4 text-blue-900 border-slate-300 rounded focus:ring-blue-900">
                        </div>

                        <!-- International Pickup -->
                        <div class="p-4 bg-slate-50 dark:bg-slate-800/40 rounded border border-slate-100 dark:border-slate-800 flex items-center justify-between" style="border-radius: 0.1rem;">
                            <div>
                                <span class="block text-slate-900 dark:text-white font-bold">Airport Pickup International</span>
                                <span class="text-[10px] text-slate-400 block mt-0.5">Premium SUV pickup — ₦25,000 flat</span>
                            </div>
                            <input type="checkbox" @change="toggleAddOn('airport-pickup-intl')" class="w-4 h-4 text-blue-900 border-slate-300 rounded focus:ring-blue-900">
                        </div>

                        <!-- Car Rental -->
                        <div class="p-4 bg-slate-50 dark:bg-slate-800/40 rounded border border-slate-100 dark:border-slate-800 flex items-center justify-between" style="border-radius: 0.1rem;">
                            <div>
                                <span class="block text-slate-900 dark:text-white font-bold">Executive Car Rental with Driver</span>
                                <span class="text-[10px] text-slate-400 block mt-0.5">dedicated SUV and professional driver — ₦50,000/day</span>
                            </div>
                            <input type="checkbox" @change="toggleAddOn('car-rental-driver')" class="w-4 h-4 text-blue-900 border-slate-300 rounded focus:ring-blue-900">
                        </div>

                        <!-- Laundry package -->
                        <div class="p-4 bg-slate-50 dark:bg-slate-800/40 rounded border border-slate-100 dark:border-slate-800 flex items-center justify-between" style="border-radius: 0.1rem;">
                            <div>
                                <span class="block text-slate-900 dark:text-white font-bold">Executive Laundry Package</span>
                                <span class="text-[10px] text-slate-400 block mt-0.5">Unlimited laundry during your stay — ₦10,000 flat</span>
                            </div>
                            <input type="checkbox" @change="toggleAddOn('executive-laundry')" class="w-4 h-4 text-blue-900 border-slate-300 rounded focus:ring-blue-900">
                        </div>

                    </div>
                </div>

                <div class="pt-6 flex justify-between">
                    <button type="button" @click="step = 1" class="btn-pill btn-outline-gold px-8 py-3">
                        Back
                    </button>
                    <button type="button" @click="step = 3" class="btn-pill btn-primary px-8 py-3">
                        Continue to Info
                    </button>
                </div>
            </div>

            <!-- STEP 3: ENTER GUEST DETAILS -->
            <div x-show="step === 3" class="space-y-6 text-xs font-semibold">
                <div>
                    <h3 class="text-xs font-bold text-blue-900 dark:text-cyan-400 uppercase tracking-widest mb-4">Guest Information</h3>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label class="block text-slate-400 uppercase tracking-widest mb-1.5">First Name</label>
                            <input type="text" x-model="first_name" required placeholder="John"
                                   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">Last Name</label>
                            <input type="text" x-model="last_name" required placeholder="Doe"
                                   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>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-slate-400 uppercase tracking-widest mb-1.5">Email Address</label>
                        <input type="email" x-model="email" required placeholder="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>
                    <div>
                        <label class="block text-slate-400 uppercase tracking-widest mb-1.5">Phone / WhatsApp Number</label>
                        <input type="text" x-model="phone" required placeholder="+234 803 123 4567"
                               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>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-slate-400 uppercase tracking-widest mb-1.5">Country</label>
                        <input type="text" x-model="country" required placeholder="Nigeria"
                               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">Purpose of Stay</label>
                        <select x-model="purpose" required
                                class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded px-3.5 py-2.5 text-slate-950 dark:text-white focus:outline-none focus:border-blue-900 dark:focus:border-cyan-400 font-medium">
                            <option value="">Select Purpose of Stay...</option>
                            <option value="Leisure">Leisure / Relaxation</option>
                            <option value="Business">Business / Executive</option>
                            <option value="Family">Family Vacation</option>
                            <option value="Group">Group Stay</option>
                            <option value="Corporate">Corporate Board Meeting</option>
                            <option value="Long Stay">Long-Term Stay</option>
                        </select>
                    </div>
                </div>

                <div>
                    <label class="block text-slate-400 uppercase tracking-widest mb-1.5">Special Requests</label>
                    <textarea x-model="special_requests" required placeholder="Any specific requirements or comments..." rows="3"
                              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"></textarea>
                </div>

                <div class="pt-6 flex justify-between">
                    <button type="button" @click="step = 2" class="btn-pill btn-outline-gold px-8 py-3">
                        Back
                    </button>
                    <button type="button" @click="if (validateStep3()) step = 4" class="btn-pill btn-primary px-8 py-3">
                        Continue to Checkout
                    </button>
                </div>
            </div>

            <!-- STEP 4: POLICY & PAYMENT -->
            <div x-show="step === 4" class="space-y-6 text-xs font-semibold">
                
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                    
                    <!-- Left: Policies and Options -->
                    <div class="lg:col-span-2 space-y-6">
                        
                        <!-- Policies Acceptances -->
                        <div class="p-6 bg-slate-50 dark:bg-slate-800/40 rounded border border-slate-100 dark:border-slate-800 space-y-4" style="border-radius: 0.1rem;">
                            <h3 class="text-xs font-bold text-amber-500 uppercase tracking-widest">Policy Acceptance</h3>
                            <p class="text-[11px] text-slate-500 leading-relaxed font-medium">
                                To complete your booking request, you must accept our policies (including cancellation rules: 5+ days gets 100% refund, 2-5 days gets 50% refund, < 48 hours is non-refundable).
                            </p>
                            
                            <div class="flex items-start space-x-3 pt-2">
                                <input type="checkbox" x-model="policy_accepted" id="policy_check" class="w-4 h-4 text-blue-900 border-slate-300 rounded focus:ring-blue-900 mt-0.5">
                                <label for="policy_check" class="text-[11px] text-slate-700 dark:text-slate-300 font-bold leading-normal">
                                    I agree to the <a href="{{ url('/booking-policy') }}" class="text-[#2B3192] dark:text-cyan-400 hover:underline">Booking Policy</a>, <a href="{{ url('/policies/cancellation-and-refund-policy') }}" class="text-[#2B3192] dark:text-cyan-400 hover:underline">Cancellation Policy</a>, <a href="{{ url('/payment-policy') }}" class="text-[#2B3192] dark:text-cyan-400 hover:underline">Payment Policy</a>, and general <a href="{{ url('/policies/house-rules') }}" class="text-[#2B3192] dark:text-cyan-400 hover:underline">House Rules</a>.
                                </label>
                            </div>
                        </div>

                        <!-- Choose Payment Method -->
                        <div>
                            <h3 class="text-xs font-bold text-slate-900 dark:text-white uppercase tracking-widest mb-4">Choose Payment / Enquiry Option</h3>
                            <div class="grid grid-cols-3 gap-3">
                                <button type="button" @click="payment_method = 'bank_transfer'" 
                                        :class="{'border-[#2B3192] text-[#2B3192] dark:border-cyan-400 dark:text-cyan-400 bg-blue-50/20': payment_method === 'bank_transfer', 'border-slate-200 dark:border-slate-800': payment_method !== 'bank_transfer'}" 
                                        class="border rounded p-4 text-center focus:outline-none transition-colors" style="border-radius: 0.1rem;">
                                    <span class="block font-bold text-xs mb-1">Bank Transfer</span>
                                    <span class="block text-[8px] text-slate-400 font-semibold">Verify deposit screenshot</span>
                                </button>
                                <button type="button" @click="payment_method = 'online_flutterwave'" 
                                        :class="{'border-[#2B3192] text-[#2B3192] dark:border-cyan-400 dark:text-cyan-400 bg-blue-50/20': payment_method === 'online_flutterwave', 'border-slate-200 dark:border-slate-800': payment_method !== 'online_flutterwave'}" 
                                        class="border rounded p-4 text-center focus:outline-none transition-colors" style="border-radius: 0.1rem;">
                                    <span class="block font-bold text-xs mb-1">Flutterwave checkout</span>
                                    <span class="block text-[8px] text-slate-400 font-semibold">Online card/bank payment</span>
                                </button>
                                <button type="button" @click="payment_method = 'enquiry'" 
                                        :class="{'border-[#2B3192] text-[#2B3192] dark:border-cyan-400 dark:text-cyan-400 bg-blue-50/20': payment_method === 'enquiry', 'border-slate-200 dark:border-slate-800': payment_method !== 'enquiry'}" 
                                        class="border rounded p-4 text-center focus:outline-none transition-colors" style="border-radius: 0.1rem;">
                                    <span class="block font-bold text-xs mb-1">Book Enquiry</span>
                                    <span class="block text-[8px] text-slate-400 font-semibold">Verify details & pay later</span>
                                </button>
                            </div>
                        </div>

                        <!-- Bank Transfer details & uploads -->
                        <div x-show="payment_method === 'bank_transfer'" class="p-6 bg-slate-50 dark:bg-slate-800/40 rounded border border-slate-100 dark:border-slate-800 space-y-4" style="border-radius: 0.1rem;">
                            <h4 class="text-xs font-bold text-slate-900 dark:text-white uppercase tracking-wider text-[#D6A84F]">Zenith Bank Account Details</h4>
                            
                            <div class="grid grid-cols-1 gap-4">
                                <!-- NGN Account -->
                                <div class="p-3 bg-white/5 dark:bg-slate-900/60 border border-slate-150 dark:border-slate-800 rounded text-left">
                                    <div class="flex justify-between items-center mb-1">
                                        <span class="text-[9px] font-extrabold uppercase tracking-widest text-[#D6A84F]">NGN Account</span>
                                        <span class="text-[8px] bg-slate-100 dark:bg-slate-800 text-slate-400 px-2 py-0.5 rounded font-bold">Nigeria</span>
                                    </div>
                                    <div class="space-y-1 text-xs font-semibold leading-relaxed">
                                        <div class="flex justify-between"><span class="text-slate-400">Account Number</span><span class="text-slate-800 dark:text-slate-200">1311514523</span></div>
                                        <div class="flex justify-between"><span class="text-slate-400">Account Name</span><span class="text-slate-800 dark:text-slate-200">Kevron Suites and Apartments</span></div>
                                    </div>
                                </div>

                                <!-- GBP Account -->
                                <div class="p-3 bg-white/5 dark:bg-slate-900/60 border border-slate-150 dark:border-slate-800 rounded text-left">
                                    <div class="flex justify-between items-center mb-1">
                                        <span class="text-[9px] font-extrabold uppercase tracking-widest text-[#D6A84F]">GBP Account</span>
                                        <span class="text-[8px] bg-slate-100 dark:bg-slate-800 text-slate-400 px-2 py-0.5 rounded font-bold">United Kingdom</span>
                                    </div>
                                    <div class="space-y-1 text-xs font-semibold leading-relaxed">
                                        <div class="flex justify-between"><span class="text-slate-400">Account Number</span><span class="text-slate-800 dark:text-slate-200">5061771108</span></div>
                                        <div class="flex justify-between"><span class="text-slate-400">Account Name</span><span class="text-slate-800 dark:text-slate-200">Kevron Suites and Apartments</span></div>
                                    </div>
                                </div>

                                <!-- USD Account -->
                                <div class="p-3 bg-white/5 dark:bg-slate-900/60 border border-slate-150 dark:border-slate-800 rounded text-left">
                                    <div class="flex justify-between items-center mb-1">
                                        <span class="text-[9px] font-extrabold uppercase tracking-widest text-[#D6A84F]">USD Account (Dollar)</span>
                                        <span class="text-[8px] bg-slate-100 dark:bg-slate-800 text-slate-400 px-2 py-0.5 rounded font-bold">United States</span>
                                    </div>
                                    <div class="space-y-1 text-xs font-semibold leading-relaxed">
                                        <div class="flex justify-between"><span class="text-slate-400">Account Number</span><span class="text-slate-800 dark:text-slate-200">5075906521</span></div>
                                        <div class="flex justify-between"><span class="text-slate-400">Account Name</span><span class="text-slate-800 dark:text-slate-200">Kevron Suites and Apartments</span></div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="pt-4 space-y-2">
                                <label class="block text-slate-400 uppercase tracking-widest mb-1">Upload Receipt Screenshot</label>
                                <input type="file" @change="handleFile" 
                                       class="w-full bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded p-2 text-slate-500 text-xs">
                                <p class="text-[9px] text-slate-400 font-semibold">Supported formats: JPG, PNG, PDF. Max size: 4MB.</p>
                            </div>
                        </div>

                        <!-- Flutterwave payment info -->
                        <div x-show="payment_method === 'online_flutterwave'" class="p-6 bg-slate-50 dark:bg-slate-800/40 rounded border border-slate-100 dark:border-slate-800 text-center py-8 space-y-2" style="border-radius: 0.1rem;">
                            <h4 class="text-xs font-bold text-slate-900 dark:text-white uppercase tracking-wider text-[#D6A84F]">Flutterwave Payment Portal</h4>
                            <p class="text-[11px] text-slate-500 dark:text-slate-400 font-medium">Clicking "Reserve Stay" will trigger a secure checkout portal provided by Flutterwave where you can pay by Card, Bank Transfer, or USSD.</p>
                        </div>

                        <!-- Enquiry info -->
                        <div x-show="payment_method === 'enquiry'" class="p-6 bg-slate-50 dark:bg-slate-800/40 rounded border border-slate-100 dark:border-slate-800 text-center py-8 space-y-2" style="border-radius: 0.1rem;">
                            <h4 class="text-xs font-bold text-slate-900 dark:text-white uppercase tracking-wider">Booking Enquiry Only</h4>
                            <p class="text-[11px] text-slate-500 dark:text-slate-400 font-medium">Your stay parameters will be verified and held. Our concierge desks will contact you to coordinate payments.</p>
                        </div>

                    </div>

                    <!-- Right: Pricing Panel -->
                    <div class="bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded p-5 h-fit space-y-4" style="border-radius: 0.1rem; box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;">
                        <h4 class="text-xs font-bold text-slate-900 dark:text-white uppercase tracking-wider pb-2 border-b border-slate-100 dark:border-slate-800">Stay Price Summary</h4>
                        
                        <div x-show="pricing" class="space-y-2.5 text-xs font-semibold leading-relaxed">
                            <div class="flex justify-between text-slate-400">
                                <span>Base Stay (<span x-text="pricing ? pricing.nights : 1"></span> nights)</span>
                                <span class="text-slate-800 dark:text-slate-200 font-bold">₦<span x-text="pricing ? pricing.room_total_before_discount.toLocaleString() : 0"></span></span>
                            </div>
                            <div x-show="pricing && pricing.long_stay_discount > 0" class="flex justify-between text-emerald-500 font-bold">
                                <span>Long Stay Discount (15%)</span>
                                <span>-₦<span x-text="pricing ? pricing.long_stay_discount.toLocaleString() : 0"></span></span>
                            </div>
                            <div class="flex justify-between text-slate-400">
                                <span>Add-On Services</span>
                                <span class="text-slate-800 dark:text-slate-200 font-bold">₦<span x-text="pricing ? pricing.add_ons_total.toLocaleString() : 0"></span></span>
                            </div>
                            <div class="flex justify-between text-slate-400">
                                <span>Service Charge (<span x-text="pricing ? pricing.service_charge_rate : 5"></span>%)</span>
                                <span class="text-slate-800 dark:text-slate-200 font-bold">₦<span x-text="pricing ? pricing.service_charge.toLocaleString() : 0"></span></span>
                            </div>
                            <div class="flex justify-between text-slate-400">
                                <span>VAT (<span x-text="pricing ? pricing.tax_rate : 7.5"></span>%)</span>
                                <span class="text-slate-800 dark:text-slate-200 font-bold">₦<span x-text="pricing ? pricing.tax_amount.toLocaleString() : 0"></span></span>
                            </div>
                            <div class="flex justify-between text-slate-400">
                                <span>Refundable Security Deposit</span>
                                <span class="text-slate-800 dark:text-slate-200 font-bold">₦<span x-text="pricing ? pricing.security_deposit.toLocaleString() : 0"></span></span>
                            </div>
                            
                            <!-- Promo code field -->
                            <div class="pt-2 border-t border-slate-100 dark:border-slate-800/80 space-y-2">
                                <label class="block text-[10px] text-slate-400 uppercase tracking-widest font-bold">Promo Code</label>
                                <div class="flex gap-2">
                                    <input type="text" x-model="promo_code" placeholder="e.g. KEVRONWELCOME"
                                           class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded px-2.5 py-1 text-xs focus:outline-none focus:border-blue-900 dark:focus:border-cyan-400 w-full uppercase">
                                    <button type="button" @click="calculatePrice" class="btn-pill btn-outline-gold text-[9px] py-1 px-3">Apply</button>
                                </div>
                                <div x-show="pricing && pricing.applied_promo" class="text-[9px] text-emerald-500 font-bold">
                                    Promo code '<span x-text="pricing ? pricing.applied_promo : ''"></span>' applied successfully! (-₦<span x-text="pricing ? pricing.promo_discount.toLocaleString() : '0'"></span>)
                                </div>
                                <div x-show="pricing && pricing.promo_error" class="text-[9px] text-red-500 font-bold" x-text="pricing ? pricing.promo_error : ''"></div>
                            </div>

                            <hr class="border-slate-100 dark:border-slate-800 my-2">
                            
                            <div class="flex justify-between text-slate-900 dark:text-white font-bold text-sm">
                                <span>Grand Total</span>
                                <span class="text-amber-500">₦<span x-text="pricing ? pricing.total_payable.toLocaleString() : 0"></span></span>
                            </div>
                            
                            <div class="bg-blue-50/20 dark:bg-slate-950/40 p-2.5 text-[9px] text-slate-500 font-semibold border border-slate-150 dark:border-slate-800 leading-normal" style="border-radius: 0.1rem;">
                                <div class="flex justify-between font-bold text-slate-800 dark:text-slate-200">
                                    <span>Due Deposit Now:</span>
                                    <span>₦<span x-text="pricing ? pricing.deposit_required.toLocaleString() : 0"></span></span>
                                </div>
                                <span class="block mt-1 font-medium italic text-[8px] text-slate-400">* Consists of refundable security deposit, add-ons, and 50% base rooms + service charges.</span>
                            </div>
                        </div>

                        <!-- Skeleton Loader during pricing check -->
                        <div x-show="!pricing" class="space-y-3 py-6 text-center text-slate-400 font-semibold leading-relaxed">
                            <div class="animate-pulse flex space-y-4 flex-col items-center">
                                <div class="h-4 bg-slate-200 dark:bg-slate-800 rounded w-3/4"></div>
                                <div class="h-4 bg-slate-200 dark:bg-slate-800 rounded w-1/2"></div>
                                <div class="h-4 bg-slate-200 dark:bg-slate-800 rounded w-2/3"></div>
                            </div>
                            <p class="text-[10px] uppercase tracking-widest pt-2">Loading pricing breakdown...</p>
                        </div>

                        <!-- Submit and back actions -->
                        <div class="pt-6 space-y-3">
                            <button type="button" @click="submitBooking()" 
                                    :disabled="loading || (payment_method === 'bank_transfer' && !receipt_uploaded)"
                                    :class="{'opacity-50 cursor-not-allowed': loading || (payment_method === 'bank_transfer' && !receipt_uploaded)}"
                                    class="btn-pill btn-primary w-full py-3 text-center text-xs uppercase tracking-wider font-bold">
                                <span x-show="!loading">Reserve Stay</span>
                                <span x-show="loading" class="flex items-center justify-center gap-1.5">
                                    <div class="w-3.5 h-3.5 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
                                    Processing...
                                </span>
                            </button>
                            <button type="button" @click="step = 3" class="btn-pill btn-outline-gold w-full py-3 text-center text-xs font-bold uppercase tracking-wider">
                                Back
                            </button>
                        </div>
                    </div>

                </div>

            </div>

         </div>
    </div>
</section>
@endsection

@push('scripts')
<script>
    async function updateBookingBookedDates(apartmentTypeId, checkInPicker, checkOutPicker, alpineContext, checkInKey, checkOutKey) {
        if (!apartmentTypeId) return;
        try {
            const url = "{{ route('api.apartments.booked-dates', ['id' => '__ID__']) }}".replace('__ID__', apartmentTypeId);
            const response = await fetch(url);
            const data = await response.json();
            const bookedDates = data.booked_dates || [];
            
            if (checkInPicker) {
                checkInPicker.set('disable', bookedDates);
            }
            if (checkOutPicker) {
                checkOutPicker.set('disable', bookedDates);
            }

            // If currently selected check-in date is booked, clear it
            if (alpineContext && checkInKey && alpineContext[checkInKey]) {
                if (bookedDates.includes(alpineContext[checkInKey])) {
                    alpineContext[checkInKey] = '';
                    if (checkInPicker) checkInPicker.clear();
                }
            }
            // If currently selected check-out date is booked, clear it
            if (alpineContext && checkOutKey && alpineContext[checkOutKey]) {
                if (bookedDates.includes(alpineContext[checkOutKey])) {
                    alpineContext[checkOutKey] = '';
                    if (checkOutPicker) checkOutPicker.clear();
                }
            }
        } catch (e) {
            console.error('Failed to fetch booked dates:', e);
        }
    }

    document.addEventListener('DOMContentLoaded', () => {
        const checkInEl = document.getElementById('booking_check_in');
        const checkOutEl = document.getElementById('booking_check_out');
        
        if (checkInEl && checkOutEl) {
            window.bookingCheckInPicker = flatpickr(checkInEl, {
                dateFormat: "Y-m-d",
                minDate: "today",
                theme: "dark",
                onChange: function(selectedDates, dateStr, instance) {
                    // Update Alpine.js model manually
                    instance.element.dispatchEvent(new Event('input', { bubbles: true }));
                    instance.element.dispatchEvent(new Event('change', { bubbles: true }));
                    
                    if (window.bookingCheckOutPicker) {
                        if (selectedDates.length > 0) {
                            const minOut = new Date(selectedDates[0]);
                            minOut.setDate(minOut.getDate() + 1);
                            window.bookingCheckOutPicker.set('minDate', minOut);
                        } else {
                            window.bookingCheckOutPicker.set('minDate', 'today');
                        }
                    }
                }
            });

            window.bookingCheckOutPicker = flatpickr(checkOutEl, {
                dateFormat: "Y-m-d",
                minDate: "today",
                theme: "dark",
                onChange: function(selectedDates, dateStr, instance) {
                    instance.element.dispatchEvent(new Event('input', { bubbles: true }));
                    instance.element.dispatchEvent(new Event('change', { bubbles: true }));
                }
            });
        }
    });
</script>
@endpush