@extends('guest.layouts.auth')

@section('title', 'Protected Guest Stays Manual | Kevron Suites')

@section('dashboard_content')
<div class="space-y-6" x-data="{ activeTab: 'wifi', logged: {} }">
    <div class="border-b border-slate-200 dark:border-slate-800 pb-4">
        <h1 class="text-slate-900 dark:text-white text-lg font-serif uppercase tracking-wider">Protected Guest Stays Manual</h1>
        <p class="text-xs text-slate-400 font-semibold mt-0.5">Explore en-suite appliance guidelines, smart lock operations, and emergency hotlines.</p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
        
        <!-- Left Side: Manual Categories Tabs -->
        <div class="md:col-span-1">
            <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-[0.1rem] p-3 shadow-2xs divide-y divide-slate-100 dark:divide-slate-850 text-xs font-semibold">
                
                <button @click="activeTab = 'wifi'; logAccess('Wi-Fi & smart Lock')" 
                        :class="{'bg-[#F4F8FF] text-[#2B3192] dark:bg-slate-800 dark:text-cyan-400': activeTab === 'wifi'}"
                        class="w-full text-left px-4 py-3 rounded-[0.1rem] hover:bg-slate-50 transition-colors focus:outline-none flex items-center space-x-3">
                    <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg>
                    <span>Smart Lock & Wi-Fi</span>
                </button>

                <button @click="activeTab = 'appliances'; logAccess('Appliance Instructions')" 
                        :class="{'bg-[#F4F8FF] text-[#2B3192] dark:bg-slate-800 dark:text-cyan-400': activeTab === 'appliances'}"
                        class="w-full text-left px-4 py-3 rounded-[0.1rem] hover:bg-slate-50 transition-colors focus:outline-none flex items-center space-x-3 pt-3">
                    <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"/></svg>
                    <span>Appliance Manuals</span>
                </button>

                <button @click="activeTab = 'rules'; logAccess('House Rules & Guidelines')" 
                        :class="{'bg-[#F4F8FF] text-[#2B3192] dark:bg-slate-800 dark:text-cyan-400': activeTab === 'rules'}"
                        class="w-full text-left px-4 py-3 rounded-[0.1rem] hover:bg-slate-50 transition-colors focus:outline-none flex items-center space-x-3 pt-3">
                    <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/></svg>
                    <span>House Rules</span>
                </button>

                <button @click="activeTab = 'emergency'; logAccess('Emergency Contacts')" 
                        :class="{'bg-[#F4F8FF] text-[#2B3192] dark:bg-slate-800 dark:text-cyan-400': activeTab === 'emergency'}"
                        class="w-full text-left px-4 py-3 rounded-[0.1rem] hover:bg-slate-50 transition-colors focus:outline-none flex items-center space-x-3 pt-3">
                    <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>
                    <span>Emergency contacts</span>
                </button>

            </div>
        </div>

        <!-- Right Side: Content Area Gated based on check-in state -->
        <div class="md:col-span-3">
            <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]">
                
                <!-- wifi / smart Lock TAB -->
                <div x-show="activeTab === 'wifi'" class="space-y-6">
                    <h2 class="text-xs font-bold text-slate-900 dark:text-white uppercase tracking-widest font-serif border-b border-slate-100 dark:border-slate-850 pb-3">Smart Lock & Wi-Fi Configuration</h2>
                    
                    @if($isCheckedIn)
                        <div class="space-y-6 text-xs font-semibold leading-relaxed">
                            <p class="text-slate-500">Welcome checked-in guest! Use the secure credentials below to connect to your en-suite appliances.</p>
                            
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 pt-2">
                                <div class="p-4 bg-slate-50 rounded-[0.1rem] border border-slate-200/60 shadow-2xs text-center">
                                    <span class="text-[9px] uppercase tracking-widest text-slate-400 font-bold block mb-1">Wi-Fi NETWORK SSID</span>
                                    <span class="text-[#2B3192] font-bold text-sm">Kevron Executive</span>
                                </div>
                                <div class="p-4 bg-slate-50 rounded-[0.1rem] border border-slate-200/60 shadow-2xs text-center">
                                    <span class="text-[9px] uppercase tracking-widest text-slate-400 font-bold block mb-1">Wi-Fi PASSCODE</span>
                                    <span class="text-[#2B3192] font-mono font-bold text-sm">StayKevronGold2026</span>
                                </div>
                                <div class="p-4 bg-slate-50 rounded-[0.1rem] border border-slate-200/60 shadow-2xs text-center">
                                    <span class="text-[9px] uppercase tracking-widest text-slate-400 font-bold block mb-1">Smart Lock entry PIN</span>
                                    <span class="text-[#2B3192] font-mono font-bold text-sm tracking-widest">7829#</span>
                                </div>
                                <div class="p-4 bg-slate-50 rounded-[0.1rem] border border-slate-200/60 shadow-2xs text-center">
                                    <span class="text-[9px] uppercase tracking-widest text-slate-400 font-bold block mb-1">Intercom Extensions</span>
                                    <span class="text-slate-800 font-bold text-sm">Dial 104 (Security Gate)</span>
                                </div>
                            </div>
                        </div>
                    @else
                        <div class="space-y-4 text-center py-8 font-semibold">
                            <div class="w-12 h-12 bg-amber-50 text-amber-600 border border-amber-200 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="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>
                            </div>
                            <h3 class="text-xs font-bold text-slate-900 dark:text-white uppercase tracking-wider font-serif">Credentials Gated</h3>
                            <p class="text-xs text-slate-400 max-w-xs mx-auto leading-relaxed">
                                Wi-Fi passwords and en-suite smart door access codes are gated for security. They unlock automatically once stay status is updated to <span class="text-emerald-600 font-bold">Checked In</span> by our reception desk.
                            </p>
                        </div>
                    @endif
                </div>

                <!-- appliances TAB -->
                <div x-show="activeTab === 'appliances'" class="space-y-6">
                    <h2 class="text-xs font-bold text-slate-900 dark:text-white uppercase tracking-widest font-serif border-b border-slate-100 dark:border-slate-850 pb-3">Appliance Operations Instructions</h2>
                    <div class="space-y-4 text-xs font-semibold leading-relaxed text-slate-500">
                        <div class="p-4 bg-slate-50 rounded-[0.1rem] border border-slate-200/60 shadow-2xs space-y-2">
                            <h4 class="text-slate-800 font-bold block uppercase tracking-wider text-[10px]">Smart Inverter AC Controls</h4>
                            <p>To preserve local smart filters, set the remote temperature between 18°C and 22°C. Ensure all private balcony sliding glass doors are fully locked during cooling.</p>
                        </div>
                        <div class="p-4 bg-slate-50 rounded-[0.1rem] border border-slate-200/60 shadow-2xs space-y-2">
                            <h4 class="text-slate-800 font-bold block uppercase tracking-wider text-[10px]">Gourmet Extractor & Gas Hob</h4>
                            <p>Turn on the heat extractor filter first before starting hob ignition. Extractor fans must run for 2 mins after cooking completes to flush kitchen air.</p>
                        </div>
                        <div class="p-4 bg-slate-50 rounded-[0.1rem] border border-slate-200/60 shadow-2xs space-y-2">
                            <h4 class="text-slate-800 font-bold block uppercase tracking-wider text-[10px]">Washing Machine Heat Dryer</h4>
                            <p>Use eco-mode washes for standard clothing. Heat dryers are configured for standard cottons; do not load delicate wools to avoid shrinking en-suite linens.</p>
                        </div>
                    </div>
                </div>

                <!-- rules TAB -->
                <div x-show="activeTab === 'rules'" class="space-y-6">
                    <h2 class="text-xs font-bold text-slate-900 dark:text-white uppercase tracking-widest font-serif border-b border-slate-100 dark:border-slate-850 pb-3">En-Suite House Rules</h2>
                    <div class="space-y-4 text-xs font-semibold leading-relaxed text-slate-500">
                        <ul class="list-disc pl-5 space-y-2.5">
                            <li><strong>Smoking Prohibited</strong>: Strict non-smoking rules inside en-suite spaces. A corporate violation fine of ₦100,000 applies. Smoking is allowed strictly on the private terrace balcony.</li>
                            <li><strong>Quiet Stays Hours</strong>: Respect neighboring executive suites. Quiet stay hours are observed from 10:00 PM to 7:00 AM.</li>
                            <li><strong>Visitor Registration</strong>: Registered visitors are allowed until 10:00 PM. All overnight stays must be validated by the reception desk.</li>
                            <li><strong>Trash disposal</strong>: Housekeepers clear trash daily. If additional clearing is needed, submit a housekeeper ticket from your stays panel.</li>
                        </ul>
                        <div class="pt-4 border-t border-slate-100 dark:border-slate-800">
                            <a href="{{ url('/house-rules') }}" class="inline-flex items-center text-xs font-bold text-[#2B3192] dark:text-cyan-400 hover:text-cyan-600 transition-colors gap-1 underline">
                                <span>Read Complete House Rules & Stay Regulations</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="M14 5l7 7m0 0l-7 7m7-7H3"/></svg>
                            </a>
                        </div>
                    </div>
                </div>

                <!-- emergency TAB -->
                <div x-show="activeTab === 'emergency'" class="space-y-6">
                    <h2 class="text-xs font-bold text-red-600 uppercase tracking-widest font-serif border-b border-slate-100 dark:border-slate-850 pb-3">Emergency Assurances & Hotlines</h2>
                    <div class="space-y-4 text-xs font-semibold leading-relaxed text-slate-500">
                        <p>Kevron Suites operates under highly secure physical environments with active Memabod patrol networks. Reach host control instantly in case of emergencies.</p>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 pt-2">
                            <div class="p-4 bg-red-50/50 border border-red-100 rounded-[0.1rem] space-y-2">
                                <h4 class="text-red-700 font-bold uppercase text-[10px]">Concierge Emergency Host</h4>
                                <a href="tel:{{ str_replace(' ', '', \App\Models\SiteSetting::getVal('contact_phone', '+234 813 163 2926')) }}" class="text-red-600 hover:underline font-bold text-sm block">{{ \App\Models\SiteSetting::getVal('contact_phone', '+234 813 163 2926') }}</a>
                            </div>
                            <div class="p-4 bg-red-50/50 border border-red-100 rounded-[0.1rem] space-y-2">
                                <h4 class="text-red-700 font-bold uppercase text-[10px]">Host Desk Control Intercom</h4>
                                <span class="text-red-800 font-bold text-sm block">Dial 100 from Suite Intercom</span>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>

    </div>
</div>

<script>
    function logAccess(section) {
        fetch('{{ route("guest.manual.log") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({ section_title: section })
        }).then(res => res.json())
          .then(data => console.log('logged access to: ' + section))
          .catch(err => console.log(err));
    }
    
    // Log initial access
    window.addEventListener('DOMContentLoaded', () => {
        logAccess('Wi-Fi & smart Lock');
    });
</script>
@endsection