@extends('layouts.app')

@section('title', 'Website CMS')
@section('nav_website', 'bg-teal-50 text-teal-700 font-semibold')

@section('content')
<div class="p-6 max-w-5xl mx-auto">

    {{-- Header --}}
    <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between mb-6">
        <div>
            <h1 class="text-xl font-bold text-gray-900">Website Content</h1>
            <p class="text-gray-400 text-sm mt-0.5">Manage what guests see on the public-facing website.</p>
        </div>
        <div class="flex items-center gap-2 flex-wrap">
            @if(auth()->user()->canWebsiteAny())
            <div x-data="{ open: false }" class="relative">
                <button @click="open = !open" type="button"
                        class="inline-flex items-center gap-1.5 text-sm text-gray-500 hover:text-gray-800 font-medium border-[0.5px] border-gray-200 hover:border-gray-400 px-3 py-2 rounded-lg transition-colors">
                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129"/>
                    </svg>
                    Translate
                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
                </button>
                <div x-show="open" x-cloak @click.outside="open = false"
                     class="absolute left-0 mt-1 w-44 bg-white border-[0.5px] border-gray-200 rounded-lg shadow-lg py-1 z-30">
                    @foreach(\App\Models\WebsiteContent::LOCALES as $code => $name)
                        @if($code !== 'en')
                        <a href="{{ route('website.index', ['locale' => $code]) }}"
                           class="block px-3 py-2 text-sm text-gray-600 hover:bg-gray-50">Translate to {{ $name }}</a>
                        @endif
                    @endforeach
                </div>
            </div>
            @endif
            <a href="{{ route('website.history') }}"
               class="inline-flex items-center gap-1.5 text-sm text-gray-500 hover:text-gray-800 font-medium border-[0.5px] border-gray-200 hover:border-gray-400 px-3 py-2 rounded-lg transition-colors">
                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M3 3v5h5M3.05 13A9 9 0 106 5.3L3 8m9 0v5l4 2"/>
                </svg>
                History
            </a>
            <a href="{{ route('website.health') }}"
               class="inline-flex items-center gap-1.5 text-sm text-gray-500 hover:text-gray-800 font-medium border-[0.5px] border-gray-200 hover:border-gray-400 px-3 py-2 rounded-lg transition-colors">
                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
                </svg>
                Site Health
            </a>
            <a href="{{ route('public.home') }}" target="_blank"
               class="inline-flex items-center gap-1.5 text-sm text-teal-600 hover:text-teal-800 font-medium border-[0.5px] border-teal-200 hover:border-teal-400 px-3 py-2 rounded-lg transition-colors">
                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
                </svg>
                Preview Site
            </a>
        </div>
    </div>

    @if(session('success'))
    <div class="mb-5 px-4 py-3 bg-teal-50 border-[0.5px] border-teal-200 rounded-xl text-sm text-teal-700">
        {{ session('success') }}
    </div>
    @endif
    @if($errors->any())
    <div class="mb-5 px-4 py-3 bg-red-50 border-[0.5px] border-red-200 rounded-xl text-sm text-red-700">
        {{ $errors->first() }}
    </div>
    @endif

    {{-- Maintenance Mode Toggle --}}
    <div class="{{ $maintenanceOn ? 'bg-red-50 border-red-200' : 'bg-white border-gray-200' }} border-[0.5px] rounded-xl p-4 mb-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <div class="flex items-center gap-3">
            <div class="flex-shrink-0 w-9 h-9 rounded-full flex items-center justify-center {{ $maintenanceOn ? 'bg-red-100' : 'bg-gray-100' }}">
                <svg class="w-4.5 h-4.5 {{ $maintenanceOn ? 'text-red-600' : 'text-gray-500' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M11.42 15.17L17.25 21A2.652 2.652 0 0021 17.25l-5.877-5.877M11.42 15.17l2.496-3.03c.317-.384.74-.626 1.208-.766M11.42 15.17l-4.655 5.653a2.548 2.548 0 11-3.586-3.586l6.837-5.63m5.108-.233c.55-.164 1.163-.188 1.743-.14a4.5 4.5 0 004.486-6.336l-3.276 3.277a3.004 3.004 0 01-2.25-2.25l3.276-3.276a4.5 4.5 0 00-6.336 4.486c.091 1.076-.071 2.264-.904 2.95l-.102.085m-1.745 1.437L5.909 7.5H4.5L2.25 3.75l1.5-1.5L7.5 4.5v1.409l4.26 4.26m-1.745 1.437l1.745-1.437m6.615 8.206L15.75 15.75M4.867 19.125h.008v.008h-.008v-.008z"/>
                </svg>
            </div>
            <div>
                <div class="flex flex-wrap items-center gap-2">
                    <span class="text-sm font-semibold {{ $maintenanceOn ? 'text-red-800' : 'text-gray-800' }}">Website Maintenance Mode</span>
                    @if($maintenanceOn)
                    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[11px] font-semibold bg-red-100 text-red-700 border border-red-200">ON — Guests see maintenance page</span>
                    @else
                    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[11px] font-semibold bg-green-100 text-green-700 border border-green-200">LIVE</span>
                    @endif
                </div>
                <p class="text-xs text-{{ $maintenanceOn ? 'red' : 'gray' }}-500 mt-0.5">
                    {{ $maintenanceOn
                        ? 'Public website is hidden. Logged-in staff can still browse normally.'
                        : 'Public website is visible to all visitors.' }}
                </p>
            </div>
        </div>
        <form action="{{ route('website.maintenance.toggle') }}" method="POST">
            @csrf
            <button type="submit"
                    class="flex-shrink-0 px-4 py-2 rounded-lg text-sm font-medium transition-colors
                           {{ $maintenanceOn
                               ? 'bg-green-600 hover:bg-green-700 text-white'
                               : 'bg-red-600 hover:bg-red-700 text-white' }}">
                {{ $maintenanceOn ? 'Disable Maintenance' : 'Enable Maintenance' }}
            </button>
        </form>
    </div>

    {{-- Tabs --}}
    @php
        $u = auth()->user();
        $tabAreas = [
            'homepage' => 'content', 'about' => 'content', 'contact' => 'content', 'social' => 'content',
            'gallery' => 'content', 'rooms' => 'content', 'policies' => 'content', 'appearance' => 'content',
            'booking' => 'booking', 'payment' => 'booking', 'promo' => 'booking',
            'seo' => 'seo',
        ];
        $tabLabels = [
            'homepage' => 'Homepage', 'about' => 'About', 'contact' => 'Contact', 'social' => 'Social & Chat',
            'gallery' => 'Gallery', 'rooms' => 'Room Photos', 'appearance' => 'Appearance', 'booking' => 'Booking Settings',
            'payment' => 'How to Pay', 'promo' => 'Promo Bar', 'seo' => 'SEO', 'policies' => 'Policies',
        ];
        $firstTab = collect($tabLabels)->keys()->first(fn ($k) => $u->canWebsite($tabAreas[$k])) ?? 'homepage';
    @endphp
    <div x-data="{ tab: '{{ request('tab', $firstTab) }}' }">

        <div class="flex gap-1 flex-wrap mb-6 border-b border-gray-200 pb-0">
            @foreach($tabLabels as $key => $label)
            @if($u->canWebsite($tabAreas[$key]))
            <button @click="tab = '{{ $key }}'" data-tab="{{ $key }}"
                    :class="tab === '{{ $key }}' ? 'border-teal-600 text-teal-700 font-semibold' : 'border-transparent text-gray-500 hover:text-gray-700'"
                    class="px-4 py-2.5 text-sm border-b-2 transition-colors -mb-px inline-flex items-center gap-1.5">
                {{ $label }}
                <span class="unsaved-dot hidden w-1.5 h-1.5 rounded-full bg-amber-500" title="Unsaved changes"></span>
            </button>
            @endif
            @endforeach
        </div>

        {{-- ── HOMEPAGE ─────────────────────────────────── --}}
        <div x-show="tab === 'homepage'" x-cloak>
            <form action="{{ route('website.update') }}" method="POST" enctype="multipart/form-data" class="cms-form" data-tab="homepage">
                @csrf
                <input type="hidden" name="section" value="homepage">

                <div class="space-y-6">
                    {{-- Hero Slider --}}
                    <div class="bg-white rounded-xl border-[0.5px] border-gray-200 p-5">
                        <div class="flex items-center justify-between gap-4">
                            <div>
                                <h3 class="font-semibold text-gray-800 text-sm">Hero Slider</h3>
                                <p class="text-xs text-gray-400 mt-0.5">The rotating homepage banner is managed as individual slides — add, remove, reorder or hide any number.</p>
                            </div>
                            <a href="{{ route('hero-slides.index') }}"
                               class="flex-shrink-0 inline-flex items-center gap-1.5 text-sm font-medium text-teal-600 hover:text-teal-800 border-[0.5px] border-teal-200 hover:border-teal-400 px-3 py-2 rounded-lg transition-colors">
                                Manage Slides
                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                            </a>
                        </div>
                    </div>

                    {{-- About snippet --}}
                    <div class="bg-white rounded-xl border-[0.5px] border-gray-200 p-5">
                        <h3 class="font-semibold text-gray-800 text-sm mb-4">About Snippet (Homepage)</h3>
                        <div class="space-y-4">
                            <div>
                                <label class="block text-xs font-medium text-gray-600 mb-1.5">Section Title</label>
                                <input type="text" name="about_title" value="{{ $homepage['about_title'] ?? '' }}"
                                       class="w-full border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                            </div>
                            <div>
                                <label class="block text-xs font-medium text-gray-600 mb-1.5">About Text</label>
                                <textarea name="about_text" rows="4"
                                          class="w-full border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400 resize-none">{{ $homepage['about_text'] ?? '' }}</textarea>
                            </div>
                            <div>
                                <x-media-image-field name="about_image" label="About Image" :current="$homepage['about_image'] ?? ''" previewClass="w-40 h-24" />
                            </div>
                        </div>
                    </div>

                    {{-- Amenities --}}
                    <div class="bg-white rounded-xl border-[0.5px] border-gray-200 p-5">
                        <h3 class="font-semibold text-gray-800 text-sm mb-4">Amenities Section</h3>
                        <div class="space-y-4">
                            <div>
                                <label class="block text-xs font-medium text-gray-600 mb-1.5">Section Title</label>
                                <input type="text" name="amenities_title" value="{{ $homepage['amenities_title'] ?? '' }}"
                                       class="w-full border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                            </div>
                            <div>
                                <label class="block text-xs font-medium text-gray-600 mb-1.5">Amenities List <span class="text-gray-400">(one per line)</span></label>
                                <textarea name="amenities_list" rows="8"
                                          class="w-full border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400 resize-none">{{ $homepage['amenities_list'] ?? '' }}</textarea>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="mt-5 flex justify-end">
                    <button type="submit" class="bg-teal-600 hover:bg-teal-700 text-white font-semibold text-sm px-5 py-2.5 rounded-lg transition-colors">
                        Save Homepage Content
                    </button>
                </div>
            </form>
        </div>

        {{-- ── ABOUT ─────────────────────────────────── --}}
        <div x-show="tab === 'about'" x-cloak>
            <form action="{{ route('website.update') }}" method="POST" enctype="multipart/form-data" class="cms-form" data-tab="about">
                @csrf
                <input type="hidden" name="section" value="about">

                <div class="bg-white rounded-xl border-[0.5px] border-gray-200 p-5 space-y-4">
                    <div>
                        <label class="block text-xs font-medium text-gray-600 mb-1.5">Page Title</label>
                        <input type="text" name="title" value="{{ $about['title'] ?? '' }}"
                               class="w-full border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-gray-600 mb-1.5">Main Content</label>
                        <textarea name="content" rows="8"
                                  class="w-full border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400 resize-none">{{ $about['content'] ?? '' }}</textarea>
                    </div>
                    <div>
                        <x-media-image-field name="image" label="About Page Image" :current="$about['image'] ?? ''" previewClass="w-40 h-24" />
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-gray-600 mb-1.5">Vision</label>
                        <textarea name="vision" rows="3"
                                  class="w-full border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400 resize-none">{{ $about['vision'] ?? '' }}</textarea>
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-gray-600 mb-1.5">Mission</label>
                        <textarea name="mission" rows="3"
                                  class="w-full border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400 resize-none">{{ $about['mission'] ?? '' }}</textarea>
                    </div>
                </div>

                <div class="mt-5 flex justify-end">
                    <button type="submit" class="bg-teal-600 hover:bg-teal-700 text-white font-semibold text-sm px-5 py-2.5 rounded-lg transition-colors">
                        Save About Content
                    </button>
                </div>
            </form>
        </div>

        {{-- ── CONTACT ─────────────────────────────────── --}}
        <div x-show="tab === 'contact'" x-cloak>
            <form action="{{ route('website.update') }}" method="POST" class="cms-form" data-tab="contact">
                @csrf
                <input type="hidden" name="section" value="contact">

                <div class="bg-white rounded-xl border-[0.5px] border-gray-200 p-5 space-y-4">
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1.5">Phone Number</label>
                            <input type="text" name="phone" value="{{ $contact['phone'] ?? '' }}"
                                   class="w-full border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1.5">Email Address</label>
                            <input type="email" name="email" value="{{ $contact['email'] ?? '' }}"
                                   class="w-full border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                        </div>
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-gray-600 mb-1.5">Address</label>
                        <textarea name="address" rows="2"
                                  class="w-full border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400 resize-none">{{ $contact['address'] ?? '' }}</textarea>
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-gray-600 mb-1.5">Business Hours</label>
                        <input type="text" name="hours" value="{{ $contact['hours'] ?? '' }}"
                               class="w-full border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-gray-600 mb-1.5">
                            Google Maps Embed Code
                            <span class="text-gray-400 font-normal ml-1">— paste the full &lt;iframe&gt; from Google Maps → Share → Embed</span>
                        </label>
                        <textarea name="map_embed" rows="4"
                                  class="w-full border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400 resize-none">{{ $contact['map_embed'] ?? '' }}</textarea>
                    </div>
                </div>

                <div class="mt-5 flex justify-end">
                    <button type="submit" class="bg-teal-600 hover:bg-teal-700 text-white font-semibold text-sm px-5 py-2.5 rounded-lg transition-colors">
                        Save Contact Info
                    </button>
                </div>
            </form>
        </div>

        {{-- ── SOCIAL & CHAT ───────────────────────────── --}}
        <div x-show="tab === 'social'" x-cloak>
            <form action="{{ route('website.update') }}" method="POST" class="cms-form" data-tab="social">
                @csrf
                <input type="hidden" name="section" value="contact">

                <div class="bg-white rounded-xl border-[0.5px] border-gray-200 p-5 space-y-4">
                    <div>
                        <h3 class="font-semibold text-gray-800 text-sm">Social Media Links</h3>
                        <p class="text-xs text-gray-400 mt-0.5">Shown as icons in the website footer. Leave blank to hide.</p>
                    </div>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1.5">Facebook Page URL</label>
                            <input type="url" name="facebook_url" value="{{ $contact['facebook_url'] ?? '' }}" placeholder="https://facebook.com/yourpage"
                                   class="w-full border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1.5">Instagram URL</label>
                            <input type="url" name="instagram_url" value="{{ $contact['instagram_url'] ?? '' }}" placeholder="https://instagram.com/yourpage"
                                   class="w-full border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1.5">TikTok URL</label>
                            <input type="url" name="tiktok_url" value="{{ $contact['tiktok_url'] ?? '' }}" placeholder="https://tiktok.com/@yourpage"
                                   class="w-full border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                        </div>
                    </div>

                    <div class="pt-4 border-t border-gray-100 flex items-center justify-between">
                        <div>
                            <h3 class="font-semibold text-gray-800 text-sm">Floating Chat Button</h3>
                            <p class="text-xs text-gray-400 mt-0.5">A tap-to-chat button in the bottom-right corner of every page.</p>
                        </div>
                        <label class="relative inline-flex items-center cursor-pointer flex-shrink-0">
                            <input type="hidden" name="chat_enabled" value="0">
                            <input type="checkbox" name="chat_enabled" value="1" {{ ($contact['chat_enabled'] ?? '0') === '1' ? 'checked' : '' }}
                                   class="sr-only peer">
                            <div class="w-10 h-5 bg-gray-200 peer-focus:ring-2 peer-focus:ring-teal-500/20 rounded-full peer peer-checked:bg-teal-500 transition-colors"></div>
                            <div class="absolute left-0.5 top-0.5 w-4 h-4 bg-white rounded-full shadow transition-transform peer-checked:translate-x-5"></div>
                        </label>
                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1.5">Messenger</label>
                            <input type="text" name="messenger_url" value="{{ $contact['messenger_url'] ?? '' }}" placeholder="username or m.me link"
                                   class="w-full border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1.5">Viber Number</label>
                            <input type="text" name="viber_number" value="{{ $contact['viber_number'] ?? '' }}" placeholder="+639171234567"
                                   class="w-full border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1.5">WhatsApp Number</label>
                            <input type="text" name="whatsapp_number" value="{{ $contact['whatsapp_number'] ?? '' }}" placeholder="639171234567"
                                   class="w-full border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                        </div>
                    </div>
                    <p class="text-xs text-gray-400">The phone number under the <strong>Contact</strong> tab is used for the "Call" option automatically.</p>
                </div>

                <div class="mt-5 flex justify-end">
                    <button type="submit" class="bg-teal-600 hover:bg-teal-700 text-white font-semibold text-sm px-5 py-2.5 rounded-lg transition-colors">
                        Save Social &amp; Chat
                    </button>
                </div>
            </form>
        </div>

        {{-- ── GALLERY ─────────────────────────────────── --}}
        <div x-show="tab === 'gallery'" x-cloak>
            {{-- Upload form --}}
            <div class="bg-white rounded-xl border-[0.5px] border-gray-200 p-5 mb-5">
                <h3 class="font-semibold text-gray-800 text-sm mb-4">Upload Gallery Photo</h3>
                <form action="{{ route('website.gallery.store') }}" method="POST" enctype="multipart/form-data" class="flex flex-col sm:flex-row gap-3 items-end">
                    @csrf
                    <div class="flex-1">
                        <label class="block text-xs font-medium text-gray-600 mb-1.5">Photo</label>
                        <input type="file" name="photo" accept="image/*" required
                               class="block text-sm text-gray-500 file:mr-3 file:py-1.5 file:px-3 file:rounded-lg file:border-0 file:text-xs file:font-medium file:bg-teal-50 file:text-teal-700 hover:file:bg-teal-100">
                    </div>
                    <div class="flex-1">
                        <label class="block text-xs font-medium text-gray-600 mb-1.5">Caption (optional)</label>
                        <input type="text" name="caption" placeholder="e.g. Hotel lobby"
                               class="w-full border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                    </div>
                    <button type="submit" class="flex-none bg-teal-600 hover:bg-teal-700 text-white font-semibold text-sm px-4 py-2 rounded-lg transition-colors">
                        Upload
                    </button>
                </form>
            </div>

            {{-- Gallery grid --}}
            @if($galleryPhotos->count())
            <p class="text-xs text-gray-400 mb-2">Drag photos to reorder — the first is used as the gallery cover.</p>
            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3 js-photo-sortable" data-reorder-url="{{ route('website.photos.reorder') }}">
                @foreach($galleryPhotos as $photo)
                <div class="relative group rounded-xl overflow-hidden border-[0.5px] border-gray-200" data-id="{{ $photo->id }}">
                    <img src="{{ \Illuminate\Support\Facades\Storage::url($photo->path) }}"
                         alt="{{ $photo->caption }}" class="w-full aspect-square object-cover pointer-events-none">
                    @if($photo->caption)
                    <div class="absolute bottom-0 inset-x-0 bg-black/50 px-2 py-1 text-white text-[10px] truncate">{{ $photo->caption }}</div>
                    @endif
                    <form action="{{ route('website.gallery.destroy', $photo->id) }}" method="POST"
                          data-confirm="Remove this photo from the gallery?" data-danger="true"
                          class="absolute top-1.5 right-1.5 opacity-0 group-hover:opacity-100 transition-opacity">
                        @csrf @method('DELETE')
                        <button type="submit" class="w-7 h-7 bg-red-500 hover:bg-red-600 text-white rounded-lg flex items-center justify-center">
                            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                            </svg>
                        </button>
                    </form>
                </div>
                @endforeach
            </div>
            @else
            <div class="text-center py-12 text-gray-400 text-sm">No gallery photos yet. Upload one above.</div>
            @endif
        </div>

        {{-- ── ROOM PHOTOS ─────────────────────────────── --}}
        <div x-show="tab === 'rooms'" x-cloak>
            <div class="space-y-4">
                @foreach($roomTypes as $roomType)
                @php
                    $typeRoomNos = \App\Models\Room::where('type', $roomType)->pluck('no')->all();
                    $typePhotos  = collect($typeRoomNos)->flatMap(fn($no) => $roomPhotos->get($no, collect())->all());
                    $firstRoomNo = $typeRoomNos[0] ?? null;
                @endphp
                <div class="bg-white rounded-xl border-[0.5px] border-gray-200 p-5">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="font-semibold text-gray-800 text-sm">{{ $roomType }}</h3>
                        <span class="text-xs text-gray-400">{{ $typePhotos->count() }} photo{{ $typePhotos->count() !== 1 ? 's' : '' }}</span>
                    </div>

                    {{-- Upload for first room of this type --}}
                    @if($firstRoomNo)
                    <form action="{{ route('website.rooms.photos.store', $firstRoomNo) }}" method="POST" enctype="multipart/form-data"
                          class="flex flex-col sm:flex-row gap-2 items-end mb-4">
                        @csrf
                        <div class="flex-1">
                            <input type="file" name="photo" accept="image/*" required
                                   class="block text-xs text-gray-500 file:mr-2 file:py-1 file:px-2.5 file:rounded-lg file:border-0 file:text-xs file:font-medium file:bg-teal-50 file:text-teal-700 hover:file:bg-teal-100">
                        </div>
                        <div class="flex-1">
                            <input type="text" name="caption" placeholder="Caption (optional)"
                                   class="w-full border-[0.5px] border-gray-200 rounded-lg px-2.5 py-1.5 text-xs focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                        </div>
                        <button type="submit" class="flex-none bg-teal-600 hover:bg-teal-700 text-white text-xs font-semibold px-3 py-1.5 rounded-lg transition-colors whitespace-nowrap">
                            Add Photo
                        </button>
                    </form>
                    @endif

                    {{-- Photos grid --}}
                    @if($typePhotos->count())
                    <div class="grid grid-cols-3 sm:grid-cols-5 gap-2 js-photo-sortable" data-reorder-url="{{ route('website.photos.reorder') }}">
                        @foreach($typePhotos as $photo)
                        <div class="relative group rounded-lg overflow-hidden border-[0.5px] border-gray-200" data-id="{{ $photo->id }}">
                            <img src="{{ \Illuminate\Support\Facades\Storage::url($photo->path) }}"
                                 alt="" class="w-full aspect-square object-cover pointer-events-none">
                            <form action="{{ route('website.rooms.photos.destroy', $photo->id) }}" method="POST"
                                  data-confirm="Remove this photo?" data-danger="true"
                                  class="absolute top-1 right-1 opacity-0 group-hover:opacity-100 transition-opacity">
                                @csrf @method('DELETE')
                                <button type="submit" class="w-5 h-5 bg-red-500 hover:bg-red-600 text-white rounded flex items-center justify-center">
                                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                                    </svg>
                                </button>
                            </form>
                        </div>
                        @endforeach
                    </div>
                    @else
                    <p class="text-xs text-gray-400">No photos yet for this room type.</p>
                    @endif
                </div>
                @endforeach
            </div>
        </div>

        {{-- ── BOOKING SETTINGS ─────────────────────────── --}}
        <div x-show="tab === 'booking'" x-cloak>
            <form action="{{ route('website.update') }}" method="POST" class="cms-form" data-tab="booking">
                @csrf
                <input type="hidden" name="section" value="booking">

                <div class="bg-white rounded-xl border-[0.5px] border-gray-200 p-5 space-y-4">
                    <div class="flex items-center justify-between py-3 border-b border-gray-100">
                        <div>
                            <p class="text-sm font-semibold text-gray-800">Enable Online Booking</p>
                            <p class="text-xs text-gray-400 mt-0.5">Allow guests to submit booking requests from the website.</p>
                        </div>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="hidden" name="enabled" value="0">
                            <input type="checkbox" name="enabled" value="1" {{ ($booking['enabled'] ?? '1') === '1' ? 'checked' : '' }}
                                   class="sr-only peer">
                            <div class="w-10 h-5 bg-gray-200 peer-focus:ring-2 peer-focus:ring-teal-500/20 rounded-full peer peer-checked:bg-teal-500 transition-colors"></div>
                            <div class="absolute left-0.5 top-0.5 w-4 h-4 bg-white rounded-full shadow transition-transform peer-checked:translate-x-5"></div>
                        </label>
                    </div>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1.5">Minimum Advance Notice (hours)</label>
                            <input type="number" name="min_advance_hours" value="{{ $booking['min_advance_hours'] ?? '24' }}" min="0"
                                   class="w-full border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1.5">Maximum Advance Booking (days)</label>
                            <input type="number" name="max_advance_days" value="{{ $booking['max_advance_days'] ?? '365' }}" min="1"
                                   class="w-full border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1.5">Standard Check-in Time</label>
                            <input type="text" name="check_in_time" value="{{ $booking['check_in_time'] ?? '2:00 PM' }}"
                                   class="w-full border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1.5">Standard Check-out Time</label>
                            <input type="text" name="check_out_time" value="{{ $booking['check_out_time'] ?? '12:00 NN' }}"
                                   class="w-full border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                        </div>
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-gray-600 mb-1.5">Payment / Deposit Message <span class="text-gray-400">(shown before booking form)</span></label>
                        <textarea name="deposit_message" rows="3"
                                  class="w-full border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400 resize-none">{{ $booking['deposit_message'] ?? '' }}</textarea>
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-gray-600 mb-1.5">Booking Confirmation Message <span class="text-gray-400">(shown after booking is submitted)</span></label>
                        <textarea name="confirmation_message" rows="3"
                                  class="w-full border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400 resize-none">{{ $booking['confirmation_message'] ?? '' }}</textarea>
                    </div>
                    <div class="pt-4 border-t border-gray-100">
                        <label class="block text-xs font-medium text-gray-600 mb-1.5">Promo Code Hint <span class="text-gray-400">(shown above the promo field on the booking form)</span></label>
                        <input type="text" name="promo_hint" value="{{ $booking['promo_hint'] ?? '' }}" maxlength="120"
                               placeholder="e.g. Use code DIRECT10 for 10% off when you book direct!"
                               class="w-full border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                        <p class="text-xs text-gray-400 mt-1">Codes are validated against your Rate Plans. Leave blank to hide the hint.</p>
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-gray-600 mb-1.5">"Why Book Direct" Perks <span class="text-gray-400">(one per line — shown on the search results page)</span></label>
                        <textarea name="perks" rows="4"
                                  class="w-full border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400 resize-none">{{ $booking['perks'] ?? '' }}</textarea>
                    </div>
                </div>

                <div class="mt-5 flex justify-end">
                    <button type="submit" class="bg-teal-600 hover:bg-teal-700 text-white font-semibold text-sm px-5 py-2.5 rounded-lg transition-colors">
                        Save Booking Settings
                    </button>
                </div>
            </form>
        </div>

        {{-- ── HOW TO PAY ──────────────────────────────── --}}
        <div x-show="tab === 'payment'" x-cloak>
            <form action="{{ route('website.update') }}" method="POST" enctype="multipart/form-data" class="cms-form" data-tab="payment">
                @csrf
                <input type="hidden" name="section" value="payment">

                <div class="bg-white rounded-xl border-[0.5px] border-gray-200 p-5 space-y-5">
                    <p class="text-xs text-gray-400">Shown on the public <strong>/how-to-pay</strong> page and linked from the booking confirmation. Leave a channel blank to hide it.</p>

                    @foreach([
                        ['label' => 'GCash', 'fields' => [['gcash_name','Account Name'],['gcash_number','Number']], 'qr' => 'gcash_qr'],
                        ['label' => 'Maya',  'fields' => [['maya_name','Account Name'],['maya_number','Number']],   'qr' => 'maya_qr'],
                    ] as $ch)
                    <div class="border-[0.5px] border-gray-200 rounded-xl p-4 space-y-3">
                        <h3 class="text-sm font-semibold text-gray-700">{{ $ch['label'] }}</h3>
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                            @foreach($ch['fields'] as [$name, $lbl])
                            <div>
                                <label class="block text-xs font-medium text-gray-600 mb-1.5">{{ $lbl }}</label>
                                <input type="text" name="{{ $name }}" value="{{ $payment[$name] ?? '' }}"
                                       class="w-full border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                            </div>
                            @endforeach
                        </div>
                        <div>
                            <x-media-image-field :name="$ch['qr']" label="QR Code" :current="$payment[$ch['qr']] ?? ''" previewClass="w-28 h-28" />
                        </div>
                    </div>
                    @endforeach

                    {{-- Bank transfer --}}
                    <div class="border-[0.5px] border-gray-200 rounded-xl p-4 space-y-3">
                        <h3 class="text-sm font-semibold text-gray-700">Bank Transfer</h3>
                        <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
                            <div>
                                <label class="block text-xs font-medium text-gray-600 mb-1.5">Bank Name</label>
                                <input type="text" name="bank_name" value="{{ $payment['bank_name'] ?? '' }}" placeholder="e.g. BDO"
                                       class="w-full border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                            </div>
                            <div>
                                <label class="block text-xs font-medium text-gray-600 mb-1.5">Account Name</label>
                                <input type="text" name="bank_account_name" value="{{ $payment['bank_account_name'] ?? '' }}"
                                       class="w-full border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                            </div>
                            <div>
                                <label class="block text-xs font-medium text-gray-600 mb-1.5">Account Number</label>
                                <input type="text" name="bank_account_number" value="{{ $payment['bank_account_number'] ?? '' }}"
                                       class="w-full border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                            </div>
                        </div>
                        <div>
                            <x-media-image-field name="bank_qr" label="QR Code" :current="$payment['bank_qr'] ?? ''" previewClass="w-28 h-28" />
                        </div>
                    </div>

                    <div>
                        <label class="block text-xs font-medium text-gray-600 mb-1.5">Payment Instructions / Note</label>
                        <textarea name="payment_note" rows="3"
                                  class="w-full border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400 resize-none">{{ $payment['payment_note'] ?? '' }}</textarea>
                        <p class="text-xs text-gray-400 mt-1">e.g. "Send your deposit within 24 hours and message us the reference number to confirm your booking."</p>
                    </div>
                </div>

                <div class="mt-5 flex justify-end">
                    <button type="submit" class="bg-teal-600 hover:bg-teal-700 text-white font-semibold text-sm px-5 py-2.5 rounded-lg transition-colors">
                        Save Payment Details
                    </button>
                </div>
            </form>
        </div>

        {{-- ── PROMO BAR ───────────────────────────────── --}}
        <div x-show="tab === 'promo'" x-cloak>
            <form action="{{ route('website.update') }}" method="POST" class="cms-form" data-tab="promo">
                @csrf
                <input type="hidden" name="section" value="promo">

                <div class="bg-white rounded-xl border-[0.5px] border-gray-200 p-5 space-y-4">
                    <div class="flex items-center justify-between py-2 border-b border-gray-100">
                        <div>
                            <p class="text-sm font-semibold text-gray-800">Show Announcement Bar</p>
                            <p class="text-xs text-gray-400 mt-0.5">A slim banner across the top of every public page.</p>
                        </div>
                        <label class="relative inline-flex items-center cursor-pointer flex-shrink-0">
                            <input type="hidden" name="promo_enabled" value="0">
                            <input type="checkbox" name="promo_enabled" value="1" {{ ($promo['promo_enabled'] ?? '0') === '1' ? 'checked' : '' }}
                                   class="sr-only peer">
                            <div class="w-10 h-5 bg-gray-200 peer-focus:ring-2 peer-focus:ring-teal-500/20 rounded-full peer peer-checked:bg-teal-500 transition-colors"></div>
                            <div class="absolute left-0.5 top-0.5 w-4 h-4 bg-white rounded-full shadow transition-transform peer-checked:translate-x-5"></div>
                        </label>
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-gray-600 mb-1.5">Announcement Text</label>
                        <input type="text" name="promo_text" value="{{ $promo['promo_text'] ?? '' }}" maxlength="160"
                               placeholder="e.g. Kagay-an Fiesta Special — 15% off direct bookings!"
                               class="w-full border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                    </div>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1.5">Button Label <span class="text-gray-400">(optional)</span></label>
                            <input type="text" name="promo_cta_label" value="{{ $promo['promo_cta_label'] ?? '' }}" maxlength="40" placeholder="Book Now"
                                   class="w-full border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1.5">Button Link <span class="text-gray-400">(optional)</span></label>
                            <input type="text" name="promo_cta_url" value="{{ $promo['promo_cta_url'] ?? '' }}" placeholder="/book"
                                   class="w-full border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                        </div>
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-gray-600 mb-1.5">Countdown To <span class="text-gray-400">(optional — shows a live timer)</span></label>
                        <input type="datetime-local" name="promo_countdown_to" value="{{ $promo['promo_countdown_to'] ?? '' }}"
                               class="w-full sm:w-64 border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                        <p class="text-xs text-gray-400 mt-1">Leave empty for no timer. The timer auto-hides once it reaches zero.</p>
                    </div>
                </div>

                <div class="mt-5 flex justify-end">
                    <button type="submit" class="bg-teal-600 hover:bg-teal-700 text-white font-semibold text-sm px-5 py-2.5 rounded-lg transition-colors">
                        Save Promo Bar
                    </button>
                </div>
            </form>
        </div>

        {{-- ── SEO ─────────────────────────────────── --}}
        <div x-show="tab === 'seo'" x-cloak>
            <form action="{{ route('website.update') }}" method="POST" enctype="multipart/form-data" class="cms-form" data-tab="seo">
                @csrf
                <input type="hidden" name="section" value="seo">

                <div class="bg-white rounded-xl border-[0.5px] border-gray-200 p-5 space-y-4">
                    <div>
                        <label class="block text-xs font-medium text-gray-600 mb-1.5">Meta Title <span class="text-gray-400">(shown in browser tab & search results)</span></label>
                        <input type="text" name="meta_title" value="{{ $seo['meta_title'] ?? '' }}" maxlength="70"
                               class="w-full border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                        <p class="text-xs text-gray-400 mt-1">Recommended: 50–70 characters.</p>
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-gray-600 mb-1.5">Meta Description <span class="text-gray-400">(shown in Google search results)</span></label>
                        <textarea name="meta_description" rows="3" maxlength="160"
                                  class="w-full border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400 resize-none">{{ $seo['meta_description'] ?? '' }}</textarea>
                        <p class="text-xs text-gray-400 mt-1">Recommended: 120–160 characters.</p>
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-gray-600 mb-1.5">Keywords <span class="text-gray-400">(comma-separated)</span></label>
                        <input type="text" name="meta_keywords" value="{{ $seo['meta_keywords'] ?? '' }}"
                               class="w-full border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                    </div>
                    <div class="pt-4 border-t border-gray-100">
                        <x-media-image-field name="og_image"
                            label="Social Share Image — shown when a link is shared on Facebook / Messenger / Viber"
                            :current="$seo['og_image'] ?? ''" previewClass="w-56 h-28"
                            hint="Recommended: 1200×630px. Used across all pages unless a page sets its own." />
                    </div>
                </div>

                <div class="mt-5 flex justify-end">
                    <button type="submit" class="bg-teal-600 hover:bg-teal-700 text-white font-semibold text-sm px-5 py-2.5 rounded-lg transition-colors">
                        Save SEO Settings
                    </button>
                </div>
            </form>
        </div>

        {{-- ── POLICIES ────────────────────────────────── --}}
        <div x-show="tab === 'policies'" x-cloak>
            <form action="{{ route('website.update') }}" method="POST" class="cms-form" data-tab="policies">
                @csrf
                <input type="hidden" name="section" value="policies">
                <div class="bg-white rounded-xl border-[0.5px] border-gray-200 p-5 space-y-4">
                    <p class="text-xs text-gray-400">Shown on the public <strong>/policies</strong> page. Leave a field blank to hide that section.</p>
                    @foreach([
                        ['senior_pwd', 'Senior Citizen & PWD Discounts', 'e.g. Senior Citizens and PWDs enjoy a 20% discount and VAT exemption per RA 9994 / RA 10754. Present a valid ID upon check-in.'],
                        ['check_in_out', 'Check-in & Check-out', 'e.g. Check-in from 2:00 PM, check-out until 12:00 NN. Early check-in / late check-out subject to availability and fees.'],
                        ['cancellation', 'Cancellation Policy', 'e.g. Free cancellation up to 48 hours before check-in.'],
                        ['house_rules', 'House Rules', 'e.g. No smoking inside rooms. Valid ID required. Quiet hours 10 PM to 7 AM.'],
                    ] as [$pkey, $plabel, $pph])
                    <div>
                        <label class="block text-xs font-medium text-gray-600 mb-1.5">{{ $plabel }}</label>
                        <textarea name="{{ $pkey }}" rows="4" placeholder="{{ $pph }}"
                                  class="w-full border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400 resize-none">{{ $policies[$pkey] ?? '' }}</textarea>
                    </div>
                    @endforeach
                </div>
                <div class="mt-5 flex justify-end">
                    <button type="submit" class="bg-teal-600 hover:bg-teal-700 text-white font-semibold text-sm px-5 py-2.5 rounded-lg transition-colors">Save Policies</button>
                </div>
            </form>
        </div>

        {{-- ── APPEARANCE ──────────────────────────────── --}}
        <div x-show="tab === 'appearance'" x-cloak>
            <form action="{{ route('website.appearance') }}" method="POST" enctype="multipart/form-data" class="cms-form" data-tab="appearance"
                  x-data="{ picked: @js($siteAccent), scales: @js($accentScales),
                            logoPreview: @js($siteLogo ? \Illuminate\Support\Facades\Storage::url($siteLogo) : ''),
                            removeLogo: false }">
                @csrf

                {{-- Hotel Logo --}}
                <div class="bg-white rounded-xl border-[0.5px] border-gray-200 p-5 md:p-6 mb-4">
                    <h2 class="font-semibold text-gray-800 mb-1">Hotel Logo</h2>
                    <p class="text-gray-400 text-sm mb-4 max-w-2xl">Upload a logo to replace the icon and hotel name in your public website's header and footer. A vertical (stacked) logo works best; a transparent PNG is recommended. Leave empty to keep the icon + name.</p>

                    {{-- current / live preview --}}
                    <template x-if="logoPreview && !removeLogo">
                        <div class="inline-flex items-center justify-center bg-gray-50 border-[0.5px] border-gray-200 rounded-lg p-3 mb-3">
                            <img :src="logoPreview" alt="Logo preview" class="h-14 w-auto max-w-[240px] object-contain">
                        </div>
                    </template>

                    <input type="file" name="logo" accept="image/png,image/jpeg,image/webp" x-ref="logoInput"
                           @change="const f = $event.target.files[0]; if (f) { logoPreview = URL.createObjectURL(f); removeLogo = false; }"
                           class="block text-sm text-gray-500 file:mr-3 file:py-1.5 file:px-3 file:rounded-lg file:border-0 file:text-xs file:font-medium file:bg-teal-50 file:text-teal-700 hover:file:bg-teal-100">
                    @error('logo')<p class="text-red-500 text-xs mt-1.5">{{ $message }}</p>@enderror

                    @if($siteLogo)
                    <label class="flex items-center gap-2 mt-3 text-xs text-gray-600 cursor-pointer">
                        {{-- Ticking remove clears any staged file so the POST can't carry both (upload would win). --}}
                        <input type="checkbox" name="remove_logo" value="1" x-model="removeLogo"
                               @change="if ($event.target.checked) { $refs.logoInput.value = ''; logoPreview = ''; }"
                               class="rounded border-gray-300 text-teal-600 focus:ring-teal-500/30">
                        Remove logo and go back to the icon + hotel name
                    </label>
                    @endif
                </div>

                <div class="bg-white rounded-xl border-[0.5px] border-gray-200 p-5 md:p-6">
                    <h2 class="font-semibold text-gray-800 mb-1">Website Accent Color</h2>
                    <p class="text-gray-400 text-sm mb-5 max-w-2xl">Sets the main color used across your <strong>public website</strong> — buttons, links, prices, and highlights. Your staff back-office stays teal.</p>

                    <div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
                        @foreach($accentPalette as $slug => $preset)
                        <label class="cursor-pointer">
                            <input type="radio" name="accent" value="{{ $slug }}" x-model="picked" class="sr-only">
                            <div class="rounded-xl border-[0.5px] p-3 transition-all"
                                 :class="picked === '{{ $slug }}' ? 'border-gray-800 ring-2 ring-gray-800/10' : 'border-gray-200 hover:border-gray-300'">
                                {{-- shade strip --}}
                                <div class="flex rounded-md overflow-hidden mb-2 h-8">
                                    <span class="flex-1" style="background: {{ $preset['scale'][200] }}"></span>
                                    <span class="flex-1" style="background: {{ $preset['scale'][400] }}"></span>
                                    <span class="flex-1" style="background: {{ $preset['scale'][600] }}"></span>
                                    <span class="flex-1" style="background: {{ $preset['scale'][800] }}"></span>
                                </div>
                                <div class="flex items-center justify-between gap-1.5">
                                    <span class="text-xs font-medium text-gray-700 truncate">{{ $preset['label'] }}</span>
                                    <svg x-show="picked === '{{ $slug }}'" x-cloak class="w-4 h-4 text-gray-800 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M16.704 5.29a1 1 0 010 1.42l-7.5 7.5a1 1 0 01-1.42 0l-3.5-3.5a1 1 0 011.42-1.42l2.79 2.79 6.79-6.79a1 1 0 011.42 0z" clip-rule="evenodd"/>
                                    </svg>
                                </div>
                            </div>
                        </label>
                        @endforeach
                    </div>

                    {{-- Live preview --}}
                    <div class="mt-6 rounded-xl border-[0.5px] border-gray-200 p-5" :style="`background: ${scales[picked][50]}`">
                        <p class="text-[10px] font-bold uppercase tracking-widest mb-2" :style="`color: ${scales[picked][700]}`">Preview</p>
                        <p class="text-sm text-gray-600 mb-4">This is how a highlighted section, button, and link look on your site.</p>
                        <div class="flex items-center gap-4 flex-wrap">
                            <span class="inline-flex px-4 py-2 rounded-lg text-white text-sm font-semibold" :style="`background: ${scales[picked][600]}`">Book Now</span>
                            <a href="#" @click.prevent class="text-sm font-semibold" :style="`color: ${scales[picked][700]}`">View rooms &rarr;</a>
                            <span class="text-lg font-bold" :style="`color: ${scales[picked][600]}`">&#8369;1,499</span>
                        </div>
                    </div>
                </div>
                <div class="mt-5 flex justify-end">
                    <button type="submit" class="bg-teal-600 hover:bg-teal-700 text-white font-semibold text-sm px-5 py-2.5 rounded-lg transition-colors">Save Appearance</button>
                </div>
            </form>
        </div>

    </div>{{-- /x-data tabs --}}
</div>

{{-- Unsaved-changes guard: per-tab dirty tracking + beforeunload + cross-form save warning --}}
<script>
document.addEventListener('DOMContentLoaded', function () {
    var forms = document.querySelectorAll('form.cms-form');
    var dirty = {};

    function setDot(tab, on) {
        var dot = document.querySelector('[data-tab="' + tab + '"] .unsaved-dot');
        if (dot) dot.classList.toggle('hidden', !on);
    }

    forms.forEach(function (f) {
        var tab = f.dataset.tab;
        function mark() {
            if (!dirty[tab]) { dirty[tab] = true; setDot(tab, true); }
        }
        f.querySelectorAll('input, textarea, select').forEach(function (el) {
            el.addEventListener('input', mark);
            el.addEventListener('change', mark);
        });
        f.addEventListener('submit', function (e) {
            // This form's own data is about to be saved — clear its dirty flag.
            dirty[tab] = false; setDot(tab, false);
            var others = Object.keys(dirty).filter(function (k) { return dirty[k]; });
            if (others.length) {
                var ok = window.confirm(
                    'You have unsaved changes in other tab(s): ' + others.join(', ') + '.\n' +
                    'Saving now reloads the page and will discard them. Continue?'
                );
                if (!ok) { e.preventDefault(); dirty[tab] = true; setDot(tab, true); return; }
            }
            window._cmsSaving = true;
        });
    });

    window.addEventListener('beforeunload', function (e) {
        if (window._cmsSaving) return;
        var hasDirty = Object.keys(dirty).some(function (k) { return dirty[k]; });
        if (hasDirty) { e.preventDefault(); e.returnValue = ''; return ''; }
    });
});
</script>

{{-- Drag-to-reorder for gallery & room photos (persists sort_order; first = cover) --}}
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.6/Sortable.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    if (typeof Sortable === 'undefined') return;
    var csrf = '{{ csrf_token() }}';

    function markCover(grid) {
        grid.querySelectorAll('.cover-badge').forEach(function (b) { b.remove(); });
        var first = grid.querySelector('[data-id]');
        if (first) {
            var b = document.createElement('span');
            b.className = 'cover-badge';
            b.textContent = 'COVER';
            first.appendChild(b);
        }
    }

    document.querySelectorAll('.js-photo-sortable').forEach(function (grid) {
        markCover(grid);
        Sortable.create(grid, {
            animation: 150,
            filter: 'form, button, a',      // don't start a drag from the delete control
            ghostClass: 'photo-drag-ghost',
            onEnd: function () {
                markCover(grid);
                var ids = Array.from(grid.querySelectorAll('[data-id]')).map(function (el) { return el.dataset.id; });
                fetch(grid.dataset.reorderUrl, {
                    method: 'POST',
                    headers: { 'X-CSRF-TOKEN': csrf, 'Content-Type': 'application/json', 'Accept': 'application/json' },
                    body: JSON.stringify({ ids: ids })
                }).catch(function () {});
            }
        });
    });
});
</script>

<x-media-picker-modal />

@endsection