@extends('guest.layouts.auth')

@section('title', 'Stay Explorer: ' . $booking->booking_reference . ' | Kevron Suites')

@section('dashboard_content')
<div class="space-y-8" x-data="{ activeTab: 'overview' }">
    
    <!-- Header stays navigation -->
    <div class="flex flex-col md:flex-row md:items-center justify-between border-b border-slate-200 dark:border-slate-800 pb-4 gap-4">
        <div>
            <span class="text-[9px] text-slate-400 font-mono tracking-wider font-bold">STAYS DETAILS EXPLORER</span>
            <h1 class="text-slate-900 dark:text-white text-lg font-serif uppercase tracking-wider mt-0.5">Reference: {{ $booking->booking_reference }}</h1>
            <p class="text-xs text-slate-400 font-semibold mt-0.5">{{ $booking->apartmentType->name }} in Ikeja</p>
        </div>
        <div class="flex flex-wrap gap-2 text-xs font-semibold">
            @if($booking->invoices->isNotEmpty())
                <a href="{{ route('guest.invoices.download', $booking->invoices->first()->id) }}" class="btn-pill btn-outline-gold text-[10px] px-4 py-2 hover:shadow-2xs">
                    Download Invoice
                </a>
            @endif
            @if($booking->payments->isNotEmpty() && $booking->payments->first()->receipt_path)
                <a href="{{ route('guest.receipts.download', $booking->payments->first()->id) }}" class="btn-pill btn-outline-gold text-[10px] px-4 py-2 hover:shadow-2xs">
                    Download Receipt
                </a>
            @endif
        </div>
    </div>

    <!-- Inner Grid: Stays Metrics and Tab Control Panel -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        
        <!-- Left Side: Interactive Forms Switcher -->
        <div class="lg:col-span-2 space-y-8">
            
            <!-- Tab Headers -->
            <div class="flex border-b border-slate-200 dark:border-slate-800 space-x-6 text-xs font-bold uppercase tracking-widest text-slate-400 pb-3">
                <button @click="activeTab = 'overview'" 
                        :class="{'text-blue-900 dark:text-cyan-400 border-b-2 border-current pb-3 -mb-3.5': activeTab === 'overview'}"
                        class="focus:outline-none transition-colors">
                    Stay Details
                </button>
                <button @click="activeTab = 'transit'" 
                        :class="{'text-blue-900 dark:text-cyan-400 border-b-2 border-current pb-3 -mb-3.5': activeTab === 'transit'}"
                        class="focus:outline-none transition-colors">
                    Airport & Car
                </button>
                <button @click="activeTab = 'modify'" 
                        :class="{'text-blue-900 dark:text-cyan-400 border-b-2 border-current pb-3 -mb-3.5': activeTab === 'modify'}"
                        class="focus:outline-none transition-colors">
                    Extend / Cancel
                </button>
                <button @click="activeTab = 'reviews'" 
                        :class="{'text-blue-900 dark:text-cyan-400 border-b-2 border-current pb-3 -mb-3.5': activeTab === 'reviews'}"
                        class="focus:outline-none transition-colors">
                    Rate Stay
                </button>
            </div>

            <!-- TAB 1: OVERVIEW & STAYS BREAKDOWN -->
            <div x-show="activeTab === 'overview'" class="space-y-6">
                
                <!-- Room specs -->
                <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-[0.1rem] p-6 shadow-[rgba(0,0,0,0.05)_0px_0px_0px_1px] space-y-6">
                    <h3 class="text-xs font-bold text-slate-900 dark:text-white uppercase tracking-widest font-serif border-b border-slate-100 dark:border-slate-800 pb-3">Stay Timeline Metrics</h3>
                    <div class="grid grid-cols-2 md:grid-cols-4 gap-6 text-xs font-semibold">
                        <div>
                            <span class="text-slate-400 block mb-1 uppercase tracking-wider text-[9px]">Check-In</span>
                            <span class="text-slate-800 dark:text-slate-200 font-bold">{{ Carbon\Carbon::parse($booking->check_in_date)->format('M d, Y') }}</span>
                        </div>
                        <div>
                            <span class="text-slate-400 block mb-1 uppercase tracking-wider text-[9px]">Check-Out</span>
                            <span class="text-slate-800 dark:text-slate-200 font-bold">{{ Carbon\Carbon::parse($booking->check_out_date)->format('M d, Y') }}</span>
                        </div>
                        <div>
                            <span class="text-slate-400 block mb-1 uppercase tracking-wider text-[9px]">Stays Duration</span>
                            <span class="text-slate-800 dark:text-slate-200 font-bold">
                                {{ Carbon\Carbon::parse($booking->check_in_date)->diffInDays(Carbon\Carbon::parse($booking->check_out_date)) }} Nights
                            </span>
                        </div>
                        <div>
                            <span class="text-slate-400 block mb-1 uppercase tracking-wider text-[9px]">En-Suite status</span>
                            <span class="text-slate-800 dark:text-slate-200 font-bold uppercase">{{ str_replace('_', ' ', $booking->status) }}</span>
                        </div>
                    </div>
                </div>

                <!-- Special Requests Submit form inside details -->
                <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-[0.1rem] p-6 shadow-[rgba(0,0,0,0.05)_0px_0px_0px_1px] space-y-4">
                    <h3 class="text-xs font-bold text-slate-900 dark:text-white uppercase tracking-widest font-serif border-b border-slate-100 dark:border-slate-800 pb-3">En-Suite Special Requests</h3>
                    <form method="POST" action="{{ route('guest.bookings.special', $booking->booking_reference) }}" class="space-y-4 text-xs font-semibold">
                        @csrf
                        <div>
                            <label class="block text-slate-400 uppercase tracking-widest mb-1.5">Request Type</label>
                            <select name="request_type" required class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded px-3 py-2 text-slate-950 dark:text-white focus:outline-none focus:border-blue-900 font-medium">
                                <option value="housekeeping">Extra Housekeeper Cleaning (Refills / linen)</option>
                                <option value="towels">Extra Towels or Robes</option>
                                <option value="birthday">Birthday / Anniversary Decor</option>
                                <option value="business">Corporate / Business board support</option>
                                <option value="other">Other special requests</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-slate-400 uppercase tracking-widest mb-1.5 font-bold">Details</label>
                            <textarea name="details" rows="3" placeholder="Please bring additional towels and refill the en-suite coffee pods..." required
                                      class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded px-3 py-2 text-slate-950 dark:text-white focus:outline-none focus:border-blue-900 font-medium"></textarea>
                        </div>
                        <button type="submit" class="btn-pill btn-primary px-6 py-2.5 text-[10px] uppercase font-bold tracking-wider">
                            Submit En-Suite Ticket
                        </button>
                    </form>
                </div>

            </div>

            <!-- TAB 2: TRANSIT & TRANSPORT COORDINATION -->
            <div x-show="activeTab === 'transit'" class="space-y-6">
                
                <!-- Airport pickup coordination -->
                <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-[0.1rem] p-6 shadow-[rgba(0,0,0,0.05)_0px_0px_0px_1px] space-y-4">
                    <h3 class="text-xs font-bold text-slate-900 dark:text-white uppercase tracking-widest font-serif border-b border-slate-100 dark:border-slate-800 pb-3">Airport Pickup Request</h3>
                    <form method="POST" action="{{ route('guest.bookings.pickup', $booking->booking_reference) }}" class="space-y-4 text-xs font-semibold">
                        @csrf
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-slate-400 uppercase tracking-widest mb-1.5">Lagos Airport Terminal</label>
                                <select name="pickup_airport" required class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded px-3 py-2 text-slate-950 dark:text-white focus:outline-none focus:border-blue-900 font-medium">
                                    <option value="MM1">Murtala Muhammed Terminal 1 (MM1)</option>
                                    <option value="MM2">Murtala Muhammed Terminal 2 (MM2)</option>
                                    <option value="MMIA">International Airport (MMIA)</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-slate-400 uppercase tracking-widest mb-1.5">Flight Number & Airline</label>
                                <input type="text" name="flight_number" placeholder="e.g. EK789 (Emirates)" required
                                       class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded px-3 py-2 text-slate-950 dark:text-white focus:outline-none focus:border-blue-900 font-medium">
                            </div>
                            <div>
                                <label class="block text-slate-400 uppercase tracking-widest mb-1.5">Arrival Date & Time</label>
                                <input type="datetime-local" name="arrival_time" required
                                       class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded px-3 py-2 text-slate-950 dark:text-white focus:outline-none focus:border-blue-900 font-medium">
                            </div>
                            <div class="grid grid-cols-2 gap-4">
                                <div>
                                    <label class="block text-slate-400 uppercase tracking-widest mb-1.5">Passengers</label>
                                    <input type="number" name="guests_count" value="1" min="1" required
                                           class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded px-3 py-2 text-slate-950 dark:text-white focus:outline-none focus:border-blue-900 font-medium">
                                </div>
                                <div>
                                    <label class="block text-slate-400 uppercase tracking-widest mb-1.5">Luggages</label>
                                    <input type="number" name="luggage_count" value="2" min="0" required
                                           class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded px-3 py-2 text-slate-950 dark:text-white focus:outline-none focus:border-blue-900 font-medium">
                                </div>
                            </div>
                        </div>
                        <div>
                            <label class="block text-slate-400 uppercase tracking-widest mb-1.5 font-bold">Special Instructions</label>
                            <textarea name="special_instructions" rows="2" placeholder="Will require an executive SUV if available..."
                                      class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded px-3 py-2 text-slate-950 dark:text-white focus:outline-none focus:border-blue-900 font-medium"></textarea>
                        </div>
                        <button type="submit" class="btn-pill btn-primary px-6 py-2.5 text-[10px] uppercase font-bold tracking-wider">
                            Schedule Airport pickup
                        </button>
                    </form>
                </div>

                <!-- Car Hire Requests form -->
                <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-[0.1rem] p-6 shadow-[rgba(0,0,0,0.05)_0px_0px_0px_1px] space-y-4">
                    <h3 class="text-xs font-bold text-slate-900 dark:text-white uppercase tracking-widest font-serif border-b border-slate-100 dark:border-slate-800 pb-3">Car Rental Coordination</h3>
                    <form method="POST" action="{{ route('guest.bookings.rental', $booking->booking_reference) }}" class="space-y-4 text-xs font-semibold">
                        @csrf
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                            <div>
                                <label class="block text-slate-400 uppercase tracking-widest mb-1.5">Car Type Preferred</label>
                                <select name="car_type" required class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded px-3 py-2 text-slate-950 dark:text-white focus:outline-none focus:border-blue-900 font-medium">
                                    <option value="Executive Sedan">Executive Sedan (Toyota Camry)</option>
                                    <option value="Luxury SUV">Luxury SUV (Prado / Land Cruiser)</option>
                                    <option value="Coaster Bus">Coaster Group Bus (Toyota)</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-slate-400 uppercase tracking-widest mb-1.5">Rental Duration (Days)</label>
                                <input type="number" name="duration_days" value="1" min="1" required
                                       class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded px-3 py-2 text-slate-950 dark:text-white focus:outline-none focus:border-blue-900 font-medium">
                            </div>
                            <div>
                                <label class="block text-slate-400 uppercase tracking-widest mb-1.5">Rental Start Date</label>
                                <input type="date" name="start_date" required
                                       class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded px-3 py-2 text-slate-950 dark:text-white focus:outline-none focus:border-blue-900 font-medium">
                            </div>
                        </div>
                        <button type="submit" class="btn-pill btn-primary px-6 py-2.5 text-[10px] uppercase font-bold tracking-wider">
                            Request Car Rental
                        </button>
                    </form>
                </div>

            </div>

            <!-- TAB 3: EXTENSIONS & CANCELLATIONS REQUESTS -->
            <div x-show="activeTab === 'modify'" class="space-y-6">
                
                <!-- Extensions / upgrades form -->
                <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-[0.1rem] p-6 shadow-[rgba(0,0,0,0.05)_0px_0px_0px_1px] space-y-4">
                    <h3 class="text-xs font-bold text-slate-900 dark:text-white uppercase tracking-widest font-serif border-b border-slate-100 dark:border-slate-800 pb-3">Extend or Modify Stay</h3>
                    <form method="POST" action="{{ route('guest.bookings.modify', $booking->booking_reference) }}" class="space-y-4 text-xs font-semibold">
                        @csrf
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-slate-400 uppercase tracking-widest mb-1.5">Proposed Check-In Date</label>
                                <input type="date" name="proposed_check_in" value="{{ $booking->check_in_date->toDateString() }}" required
                                       class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded px-3 py-2 text-slate-950 dark:text-white focus:outline-none focus:border-blue-900 font-medium">
                            </div>
                            <div>
                                <label class="block text-slate-400 uppercase tracking-widest mb-1.5">Proposed Check-Out Date</label>
                                <input type="date" name="proposed_check_out" value="{{ $booking->check_out_date->toDateString() }}" required
                                       class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded px-3 py-2 text-slate-950 dark:text-white focus:outline-none focus:border-blue-900 font-medium">
                            </div>
                        </div>
                        <div>
                            <label class="block text-slate-400 uppercase tracking-widest mb-1.5 font-bold">Reason for Extension / Change</label>
                            <textarea name="reason" rows="3" placeholder="I would like to extend my stay for business meetings by 2 more nights..." required
                                      class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded px-3 py-2 text-slate-950 dark:text-white focus:outline-none focus:border-blue-900 font-medium"></textarea>
                        </div>
                        <button type="submit" class="btn-pill btn-primary px-6 py-2.5 text-[10px] uppercase font-bold tracking-wider">
                            Submit Stay Extension
                        </button>
                    </form>
                </div>

                <!-- Cancellation form -->
                <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-[0.1rem] p-6 shadow-[rgba(0,0,0,0.05)_0px_0px_0px_1px] space-y-4">
                    <h3 class="text-xs font-bold text-red-600 uppercase tracking-widest font-serif border-b border-slate-100 dark:border-slate-850 pb-3">Request Stay Cancellation</h3>
                    <form method="POST" action="{{ route('guest.bookings.cancel', $booking->booking_reference) }}" class="space-y-4 text-xs font-semibold">
                        @csrf
                        <div>
                            <label class="block text-slate-400 uppercase tracking-widest mb-1.5 font-bold">Reason for Cancellation</label>
                            <textarea name="reason" rows="3" placeholder="Flight cancellation or change of plans..." required
                                      class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded px-3 py-2 text-slate-950 dark:text-white focus:outline-none focus:border-blue-900 font-medium"></textarea>
                        </div>
                        <div class="flex items-start">
                            <input id="policy_ack" type="checkbox" name="cancellation_policy_acknowledgement" required class="w-4 h-4 rounded text-red-600 border-slate-300 focus:ring-red-500 mt-0.5">
                            <label for="policy_ack" class="ml-2.5 text-slate-500 dark:text-slate-400 leading-relaxed font-semibold">
                                I acknowledge that cancellations are processed manually by Kevron desk according to standard policy (up to 5 days before check-in).
                            </label>
                        </div>
                        <button type="submit" class="btn-pill bg-red-600 text-white px-6 py-2.5 text-[10px] uppercase font-bold tracking-wider hover:bg-red-700 transition-colors">
                            Process Stay Cancellation
                        </button>
                    </form>
                </div>

            </div>

            <!-- TAB 4: LEAVE VERIFIED REVIEW -->
            <div x-show="activeTab === 'reviews'" class="space-y-6">
                
                <!-- Ratings stay form -->
                <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-[0.1rem] p-6 shadow-[rgba(0,0,0,0.05)_0px_0px_0px_1px] space-y-4">
                    <h3 class="text-xs font-bold text-slate-900 dark:text-white uppercase tracking-widest font-serif border-b border-slate-100 dark:border-slate-800 pb-3">Submit Stay Star Rating</h3>
                    <form method="POST" action="{{ route('guest.bookings.review', $booking->booking_reference) }}" class="space-y-4 text-xs font-semibold">
                        @csrf
                        
                        <div>
                            <label class="block text-slate-500 uppercase tracking-widest mb-2 text-[10px]">Star Rating (1 - 5 Stars)</label>
                            <div class="flex items-center space-x-2 text-amber-400 text-lg">
                                <select name="rating" required class="bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded px-4 py-2 font-bold text-slate-900 focus:outline-none focus:border-blue-900">
                                    <option value="5">🌟🌟🌟🌟🌟 (5 - Excellent)</option>
                                    <option value="4">🌟🌟🌟🌟 (4 - Very Good)</option>
                                    <option value="3">🌟🌟🌟 (3 - Good)</option>
                                    <option value="2">🌟🌟 (2 - Fair)</option>
                                    <option value="1">🌟 (1 - Poor)</option>
                                </select>
                            </div>
                        </div>

                        <div>
                            <label class="block text-slate-500 uppercase tracking-widest mb-1.5 text-[10px] font-bold">Review Comment</label>
                            <textarea name="review_text" rows="4" placeholder="Excellent en-suite snooker, fully fitted kitchen, and extremely professional Memabod secure patrol..." required
                                      class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded px-3 py-2 text-slate-950 dark:text-white focus:outline-none focus:border-blue-900 font-medium"></textarea>
                        </div>

                        <button type="submit" class="btn-pill btn-primary px-6 py-2.5 text-[10px] uppercase font-bold tracking-wider shadow-sm">
                            Submit Stay Review
                        </button>
                    </form>
                </div>

            </div>

        </div>

        <!-- Right Column: Stay Pricing Summary & Billing details -->
        <div class="space-y-8">
            
            <!-- Stays Pricing Breakdown card -->
            <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-[0.1rem] p-6 shadow-[rgba(0,0,0,0.05)_0px_0px_0px_1px] space-y-4">
                <h4 class="text-xs font-bold text-slate-900 dark:text-white uppercase tracking-widest font-serif border-b border-slate-100 dark:border-slate-800 pb-3">Stays Bill summary</h4>
                
                <div class="divide-y divide-slate-100 dark:divide-slate-800 space-y-3 text-xs font-semibold">
                    <div class="flex justify-between items-center py-2 first:py-0">
                        <span class="text-slate-400">Nightly Charge</span>
                        <span class="text-slate-800 dark:text-slate-200 font-bold">₦{{ number_format($booking->base_price, 2) }}</span>
                    </div>
                    <div class="flex justify-between items-center py-2">
                        <span class="text-slate-400">Add-On Services</span>
                        <span class="text-slate-800 dark:text-slate-200 font-bold">₦{{ number_format($booking->add_ons_price, 2) }}</span>
                    </div>
                    <div class="flex justify-between items-center py-2">
                        <span class="text-slate-400">Service Charge ({{ \App\Models\Setting::getVal('service_charge_rate', '5.0') }}%)</span>
                        <span class="text-slate-800 dark:text-slate-200 font-bold">₦{{ number_format($booking->service_charge, 2) }}</span>
                    </div>
                    <div class="flex justify-between items-center py-2">
                        <span class="text-slate-400">VAT ({{ \App\Models\Setting::getVal('tax_rate', '7.5') }}%)</span>
                        <span class="text-slate-800 dark:text-slate-200 font-bold">₦{{ number_format($booking->tax_amount, 2) }}</span>
                    </div>
                    <div class="flex justify-between items-center py-2">
                        <span class="text-slate-400">Refundable Security Deposit</span>
                        <span class="text-slate-800 dark:text-slate-200 font-bold">₦{{ number_format(100000, 2) }}</span>
                    </div>
                    <div class="flex justify-between items-center py-2 bg-slate-50 dark:bg-slate-800/40 p-2 border-t border-slate-200">
                        <span class="text-slate-900 dark:text-white font-bold">Total Stay Cost</span>
                        <span class="text-slate-900 dark:text-white font-bold">₦{{ number_format($booking->total_price, 2) }}</span>
                    </div>
                </div>

                <div class="flex justify-between items-center border-t border-slate-100 dark:border-slate-800 pt-3 text-xs font-semibold">
                    <span class="text-slate-400 uppercase tracking-widest text-[9px]">Payment Status</span>
                    <span class="bg-emerald-50 border border-emerald-200 text-emerald-800 text-[9px] uppercase px-2.5 py-0.5 rounded-full font-bold tracking-wider">
                        {{ $booking->payment_status }}
                    </span>
                </div>
            </div>

            <!-- Host Desk emergency Contacts Card -->
            <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-[0.1rem] p-6 shadow-[rgba(0,0,0,0.05)_0px_0px_0px_1px] text-center space-y-4">
                <div class="relative w-16 h-16 mx-auto rounded-full overflow-hidden border border-slate-200 dark:border-slate-800">
                    <img src="{{ asset('pictures/outdoor.jpg') }}" alt="Kevron Host Desk" class="w-full h-full object-cover">
                </div>
                <div>
                    <h4 class="text-xs font-bold text-slate-900 dark:text-white uppercase tracking-wider font-serif">Kevron Concierge</h4>
                    <p class="text-[10px] text-slate-400 mt-0.5">24/7 En-Suite Dedicated Host Desk</p>
                </div>
                <div class="pt-2 space-y-2 text-xs font-semibold">
                    <a href="tel:{{ str_replace(' ', '', \App\Models\SiteSetting::getVal('contact_phone', '+234 813 163 2926')) }}" class="btn-pill btn-outline-gold py-2.5 w-full text-center inline-block">
                        Call Host Desk
                    </a>
                    <a href="{{ \App\Models\SiteSetting::getVal('whatsapp_url', 'https://wa.me/2348082131985') }}?text=Hi%20Kevron%20Suites,%20I%20would%20like%20to%20make%20an%20enquiry%20regarding%20stay%20{{ $booking->booking_reference }}" target="_blank" class="btn-pill btn-primary py-2.5 w-full text-center inline-block">
                        WhatsApp Chat
                    </a>
                </div>
            </div>

        </div>

    </div>

</div>
@endsection