@extends('guest.layouts.auth')

@section('title', 'Guest Account Dashboard | Kevron Suites & Apartments')

@section('dashboard_content')
<div class="space-y-8">
    
    <!-- Welcome Banner Card -->
    <div class="bg-gradient-to-r from-[#080D2B] to-[#2B3192] rounded-[0.1rem] p-8 text-white shadow-[rgba(0,0,0,0.05)_0px_0px_0px_1px] flex flex-col md:flex-row items-center justify-between border border-slate-800">
        <div class="space-y-2 text-center md:text-left">
            <span class="text-[9px] uppercase tracking-[0.25em] text-amber-400 font-bold block">Executive Residence Portal</span>
            <h1 class="text-white text-xl font-serif">Welcome Back, {{ Auth::user()->name }}</h1>
            <p class="text-xs text-slate-300 max-w-md font-medium leading-relaxed">
                Manage your active en-suite stays, download invoice receipts, coordinate airport transits, and submit housekeeper requests.
            </p>
        </div>
        <div class="mt-6 md:mt-0 flex items-center space-x-3">
            <span class="text-xs font-semibold text-slate-300 bg-slate-800/80 px-4 py-2.5 rounded-[0.1rem] border border-slate-700">
                Security Patrol: <span class="text-amber-400 font-mono font-bold">Memabod Secured</span>
            </span>
        </div>
    </div>

    <!-- Main Grid: Active stays, Linking stay, and Actions -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        
        <!-- Left 2 Cols: Stays and Tickets -->
        <div class="lg:col-span-2 space-y-8">
            
            <!-- SECTION A: ACTIVE / CHECKED-IN STAY DETAILS -->
            @if($activeStay)
                <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">
                    <div class="flex items-center justify-between border-b border-slate-100 dark:border-slate-800 pb-4">
                        <div>
                            <h3 class="text-xs font-bold text-slate-900 dark:text-white uppercase tracking-wider font-serif">Active Stay: {{ $activeStay->apartmentType->name }}</h3>
                            <p class="text-[10px] text-slate-400 font-semibold mt-0.5">Reference: <span class="text-blue-900 dark:text-cyan-400">{{ $activeStay->booking_reference }}</span></p>
                        </div>
                        <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">
                            Checked In
                        </span>
                    </div>

                    <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-[10px]">Check-In</span>
                            <span class="text-slate-800 dark:text-slate-200 font-bold">{{ Carbon\Carbon::parse($activeStay->check_in_date)->format('M d, Y') }}</span>
                        </div>
                        <div>
                            <span class="text-slate-400 block mb-1 uppercase tracking-wider text-[10px]">Check-Out</span>
                            <span class="text-slate-800 dark:text-slate-200 font-bold">{{ Carbon\Carbon::parse($activeStay->check_out_date)->format('M d, Y') }}</span>
                        </div>
                        <div>
                            <span class="text-slate-400 block mb-1 uppercase tracking-wider text-[10px]">Allocated Unit</span>
                            <span class="text-slate-800 dark:text-slate-200 font-bold">{{ $activeStay->unit->unit_number ?? 'Suite 302' }}</span>
                        </div>
                        <div>
                            <span class="text-slate-400 block mb-1 uppercase tracking-wider text-[10px]">Lodgers</span>
                            <span class="text-slate-800 dark:text-slate-200 font-bold">{{ $activeStay->guests_count }} Guests</span>
                        </div>
                    </div>

                    <!-- Smart Features Active Portal -->
                    <div class="p-5 bg-[#F4F8FF] dark:bg-slate-800/40 rounded-[0.1rem] border border-slate-100 dark:border-slate-800 space-y-4">
                        <h4 class="text-[10px] font-bold text-slate-900 dark:text-white uppercase tracking-wider">En-Suite Smart Access (Gated)</h4>
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-xs font-semibold">
                            
                            <!-- Keyless PIN -->
                            <div class="bg-white dark:bg-slate-900 border border-slate-200/60 dark:border-slate-800 p-4 rounded-[0.1rem] text-center shadow-2xs">
                                <span class="text-[9px] uppercase tracking-widest text-slate-400 font-bold block mb-1">Smart Door PIN</span>
                                <span class="text-[#2B3192] dark:text-cyan-400 font-mono font-bold text-sm tracking-wider">{{ $smartLockPin ?? 'Verify ID to Unlock' }}</span>
                            </div>

                            <!-- Wi-Fi Pass -->
                            <div class="bg-white dark:bg-slate-900 border border-slate-200/60 dark:border-slate-800 p-4 rounded-[0.1rem] text-center shadow-2xs">
                                <span class="text-[9px] uppercase tracking-widest text-slate-400 font-bold block mb-1">Wi-Fi Password</span>
                                <span class="text-slate-800 dark:text-slate-200 font-mono font-bold text-sm">KevronLuxe2026</span>
                            </div>

                            <!-- Intercom Ext -->
                            <div class="bg-white dark:bg-slate-900 border border-slate-200/60 dark:border-slate-800 p-4 rounded-[0.1rem] text-center shadow-2xs">
                                <span class="text-[9px] uppercase tracking-widest text-slate-400 font-bold block mb-1">Front Gate Ext</span>
                                <span class="text-slate-800 dark:text-slate-200 font-mono font-bold text-sm">Dial 104</span>
                            </div>

                        </div>
                    </div>

                    <div class="flex flex-wrap gap-3">
                        <a href="{{ route('guest.bookings.show', $activeStay->booking_reference) }}" class="btn-pill btn-primary text-[10px] px-6 py-2.5">
                            Manage Stays Requests
                        </a>
                        <a href="{{ route('guest.manual') }}" class="btn-pill btn-outline-gold text-[10px] px-6 py-2.5">
                            View Stays Manual
                        </a>
                    </div>
                </div>
            @endif

            <!-- SECTION B: UPCOMING / CONFIRMED STAY DETAILS -->
            @if($upcomingStay)
                <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">
                    <div class="flex items-center justify-between border-b border-slate-100 dark:border-slate-800 pb-4">
                        <div>
                            <h3 class="text-xs font-bold text-slate-900 dark:text-white uppercase tracking-wider font-serif">Upcoming stay: {{ $upcomingStay->apartmentType->name }}</h3>
                            <p class="text-[10px] text-slate-400 font-semibold mt-0.5">Reference: <span class="text-blue-900 dark:text-cyan-400">{{ $upcomingStay->booking_reference }}</span></p>
                        </div>
                        <span class="bg-blue-50 border border-blue-200 text-blue-800 text-[9px] uppercase px-2.5 py-0.5 rounded-full font-bold tracking-wider">
                            Confirmed
                        </span>
                    </div>

                    <div class="grid grid-cols-2 md:grid-cols-3 gap-6 text-xs font-semibold">
                        <div>
                            <span class="text-slate-400 block mb-1 uppercase tracking-wider text-[10px]">Check-In</span>
                            <span class="text-slate-800 dark:text-slate-200 font-bold">{{ Carbon\Carbon::parse($upcomingStay->check_in_date)->format('M d, Y') }}</span>
                        </div>
                        <div>
                            <span class="text-slate-400 block mb-1 uppercase tracking-wider text-[10px]">Check-Out</span>
                            <span class="text-slate-800 dark:text-slate-200 font-bold">{{ Carbon\Carbon::parse($upcomingStay->check_out_date)->format('M d, Y') }}</span>
                        </div>
                        <div>
                            <span class="text-slate-400 block mb-1 uppercase tracking-wider text-[10px]">Expected Arrival</span>
                            <span class="text-slate-800 dark:text-slate-200 font-bold">14:00 PM (Standard)</span>
                        </div>
                    </div>

                    <div class="p-5 bg-amber-50/50 border border-amber-100 rounded-[0.1rem] text-xs font-semibold text-amber-800 flex items-center space-x-3">
                        <svg class="w-5 h-5 text-amber-600 flex-shrink-0" 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>Smart Lock Access PINs and Wi-Fi credentials will unlock here dynamically once you check in!</span>
                    </div>

                    <div class="flex flex-wrap gap-3">
                        <a href="{{ route('guest.bookings.show', $upcomingStay->booking_reference) }}" class="btn-pill btn-primary text-[10px] px-6 py-2.5">
                            Manage Booking & Request Airport Transit
                        </a>
                    </div>
                </div>
            @endif

            @if(!$activeStay && !$upcomingStay)
                <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-[0.1rem] p-8 text-center shadow-[rgba(0,0,0,0.05)_0px_0px_0px_1px] space-y-4">
                    <div class="w-12 h-12 bg-slate-100 dark:bg-slate-800 text-slate-400 rounded-full flex items-center justify-center mx-auto">
                        <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                    </div>
                    <h3 class="text-xs font-bold text-slate-900 dark:text-white uppercase tracking-wider font-serif">No Active Stays Found</h3>
                    <p class="text-xs text-slate-400 max-w-xs mx-auto font-semibold">
                        You do not have any active or confirmed stays linked to this executive guest account. Link an existing stay to begin!
                    </p>
                </div>
            @endif

        </div>

        <!-- Right 1 Col: Quick Links, Linking Stay & Ticket shortcut -->
        <div class="space-y-8">
            
            <!-- Link Existing Booking 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">Link Existing Stay</h4>
                <p class="text-[10px] text-slate-400 font-semibold leading-relaxed">
                    Have an existing reservation booked offline or before profile registration? Link it below instantly.
                </p>
                <form method="POST" action="{{ route('guest.bookings.link') }}" class="space-y-3 text-xs font-semibold">
                    @csrf
                    <div>
                        <label class="block text-slate-400 uppercase tracking-widest mb-1">Booking Reference</label>
                        <input type="text" name="booking_reference" placeholder="e.g. KEV-2026-ACTV" 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">Booker Email / Phone</label>
                        <input type="text" name="email_phone" placeholder="e.g. guest@kevron.com" 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>
                    <button type="submit" class="btn-pill btn-primary w-full py-2.5 text-[10px] uppercase font-bold tracking-wider shadow-sm">
                        Map Reference Stay
                    </button>
                </form>
            </div>

            <!-- In-App Notifications Feed -->
            <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">Recent Alerts</h4>
                @if($notifications->isEmpty())
                    <p class="text-[10px] text-slate-400 font-semibold">No new notifications.</p>
                @else
                    <div class="divide-y divide-slate-100 dark:divide-slate-850 space-y-3">
                        @foreach($notifications as $notif)
                            <div class="pt-3 first:pt-0 space-y-1">
                                <div class="flex justify-between items-center text-xs font-semibold">
                                    <span class="text-slate-800 dark:text-slate-200 font-bold block">{{ $notif->title }}</span>
                                    <form method="POST" action="{{ route('guest.notifications.read', $notif->id) }}">
                                        @csrf
                                        <button type="submit" class="text-[9px] text-[#2B3192] dark:text-cyan-400 hover:underline">Mark read</button>
                                    </form>
                                </div>
                                <p class="text-[10px] text-slate-400 font-semibold leading-relaxed">{{ $notif->message }}</p>
                                <span class="text-[9px] text-slate-400 block">{{ $notif->created_at->diffForHumans() }}</span>
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>

        </div>

    </div>

    <!-- SECTION C: CONCIERGE SUPPORT TICKETING threads -->
    <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">
        <div class="flex items-center justify-between border-b border-slate-100 dark:border-slate-800 pb-4">
            <div>
                <h3 class="text-xs font-bold text-slate-900 dark:text-white uppercase tracking-wider font-serif">Concierge B2B Support Tickets</h3>
                <p class="text-[10px] text-slate-400 font-semibold mt-0.5">Direct chat threads with our 24/7 en-suite hospitality host desk.</p>
            </div>
            
            <!-- Button to open ticket modal -->
            <button onclick="document.getElementById('ticket-modal').classList.remove('hidden')" 
                    class="btn-pill btn-outline-gold text-[10px] px-5 py-2">
                Open Support Ticket
            </button>
        </div>

        @if($tickets->isEmpty())
            <div class="text-center py-6 text-xs font-semibold text-slate-400">
                You do not have any open support tickets. Tap the button above to contact the host desk!
            </div>
        @else
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                @foreach($tickets as $ticket)
                    <div class="border border-slate-200/80 dark:border-slate-800 p-4 rounded-[0.1rem] bg-slate-50/50 dark:bg-slate-900/50 hover:bg-white dark:hover:bg-slate-900 transition-colors duration-300 shadow-2xs flex flex-col justify-between">
                        <div class="space-y-2 text-xs font-semibold">
                            <div class="flex justify-between items-center">
                                <span class="text-slate-400 font-mono tracking-wider font-bold">{{ $ticket->ticket_number }}</span>
                                <span class="bg-blue-50 border border-blue-200 text-blue-800 text-[9px] uppercase px-2 py-0.5 rounded-full tracking-wider">{{ $ticket->status }}</span>
                            </div>
                            <h4 class="text-slate-800 dark:text-slate-200 font-bold block">{{ $ticket->subject }}</h4>
                            <p class="text-[10px] text-slate-400 font-semibold line-clamp-2">
                                Last message: {{ $ticket->messages->last()->message ?? 'No messages yet.' }}
                            </p>
                        </div>
                        <div class="mt-4 border-t border-slate-100 dark:border-slate-800 pt-3">
                            <a href="{{ $ticket->booking ? route('guest.bookings.show', $ticket->booking->booking_reference) : route('guest.dashboard') }}" 
                               class="text-[10px] font-bold text-[#2B3192] dark:text-cyan-400 hover:underline flex items-center space-x-1 justify-end">
                                <span>Open Ticket Thread</span>
                                <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="M9 5l7 7-7 7"/></svg>
                            </a>
                        </div>
                    </div>
                @endforeach
            </div>
        @endif
    </div>

</div>

<!-- SUPPORT TICKET MODAL -->
<div id="ticket-modal" class="fixed inset-0 z-50 overflow-y-auto bg-slate-900/60 backdrop-blur-2xs flex items-center justify-center hidden">
    <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-[0.1rem] max-w-md w-full p-6 shadow-2xl relative mx-4">
        <button onclick="document.getElementById('ticket-modal').classList.add('hidden')" 
                class="absolute top-4 right-4 text-slate-400 hover:text-slate-600 focus:outline-none" aria-label="Close Modal">
            <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
        </button>

        <h3 class="text-xs font-bold text-slate-900 dark:text-white uppercase tracking-widest font-serif mb-4">Open Concierge Ticket</h3>
        
        <form method="POST" action="{{ route('guest.support.ticket') }}" class="space-y-4 text-xs font-semibold">
            @csrf
            
            @if($bookings->isNotEmpty())
                <div>
                    <label class="block text-slate-400 uppercase tracking-widest mb-1.5">Relate to Stay</label>
                    <select name="booking_id" 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="">General Support (No stay related)</option>
                        @foreach($bookings as $b)
                            <option value="{{ $b->id }}">{{ $b->apartmentType->name }} ({{ $b->booking_reference }})</option>
                        @endforeach
                    </select>
                </div>
            @endif

            <div>
                <label class="block text-slate-400 uppercase tracking-widest mb-1.5">Category</label>
                <select name="category" 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="booking">Booking & Payments</option>
                    <option value="airport">Airport Transit / Car Rental</option>
                    <option value="maintenance">Appliance Checkup / Smart Lock</option>
                    <option value="housekeeping">Extra Clean / Housekeeper visit</option>
                    <option value="complaint">Complaint</option>
                    <option value="general">General Support</option>
                </select>
            </div>

            <div>
                <label class="block text-slate-400 uppercase tracking-widest mb-1.5">Subject</label>
                <input type="text" name="subject" placeholder="e.g. Wi-Fi slow in Suite 302" 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">Message / Details</label>
                <textarea name="message" rows="4" placeholder="Describe your request in detail..." 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 w-full py-3 text-xs uppercase tracking-wider font-bold">
                Submit Support Ticket
            </button>
        </form>
    </div>
</div>
@endsection