@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 items-center 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>
        <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>

    @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 items-center justify-between gap-4">
        <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 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 --}}
    <div x-data="{ tab: '{{ request('tab', 'homepage') }}' }">

        <div class="flex gap-1 flex-wrap mb-6 border-b border-gray-200 pb-0">
            @foreach([
                'homepage' => 'Homepage',
                'about'    => 'About',
                'contact'  => 'Contact',
                'gallery'  => 'Gallery',
                'rooms'    => 'Room Photos',
                'booking'  => 'Booking Settings',
                'seo'      => 'SEO',
            ] as $key => $label)
            <button @click="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">
                {{ $label }}
            </button>
            @endforeach
        </div>

        {{-- ── HOMEPAGE ─────────────────────────────────── --}}
        <div x-show="tab === 'homepage'" x-cloak>
            <form action="{{ route('website.update') }}" method="POST" enctype="multipart/form-data">
                @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 mb-4">
                            <h3 class="font-semibold text-gray-800 text-sm">Hero Slider</h3>
                            <span class="text-xs text-gray-400">3 slides · auto-advances every 5 seconds</span>
                        </div>
                        <div class="space-y-5">
                            @foreach([1, 2, 3] as $n)
                            <div class="border-[0.5px] border-gray-200 rounded-xl p-4 space-y-3">
                                <div class="flex items-center gap-2 mb-1">
                                    <span class="w-5 h-5 rounded-full bg-teal-600 text-white text-[10px] font-bold flex items-center justify-center flex-shrink-0">{{ $n }}</span>
                                    <span class="text-xs font-semibold text-gray-700">Slide {{ $n }}</span>
                                    @if(!empty($homepage["slide_{$n}_image"]))
                                    <span class="ml-auto text-[10px] text-teal-600 font-medium">Image uploaded</span>
                                    @else
                                    <span class="ml-auto text-[10px] text-gray-400">Using gradient placeholder</span>
                                    @endif
                                </div>
                                <div>
                                    <label class="block text-xs font-medium text-gray-600 mb-1">Title</label>
                                    <input type="text" name="slide_{{ $n }}_title"
                                           value="{{ $homepage["slide_{$n}_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">Caption</label>
                                    <textarea name="slide_{{ $n }}_caption" 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">{{ $homepage["slide_{$n}_caption"] ?? '' }}</textarea>
                                </div>
                                <div>
                                    <label class="block text-xs font-medium text-gray-600 mb-1">Background Image</label>
                                    @if(!empty($homepage["slide_{$n}_image"]))
                                    <img src="{{ \Illuminate\Support\Facades\Storage::url($homepage["slide_{$n}_image"]) }}"
                                         class="w-48 h-24 object-cover rounded-lg mb-2 border-[0.5px] border-gray-200">
                                    @else
                                    <div class="w-48 h-24 rounded-lg mb-2 flex items-center justify-center text-xs text-gray-400"
                                         @php
                                            $placeholders = [
                                                'linear-gradient(135deg, #0f4c44, #0f766e, #1e3a5f)',
                                                'linear-gradient(135deg, #1e3a5f, #1d4ed8, #312e81)',
                                                'linear-gradient(135deg, #164e63, #0891b2, #0d9488)',
                                            ];
                                         @endphp
                                         style="background: {{ $placeholders[$n - 1] }}">
                                        <span class="text-white/70 font-medium">Gradient placeholder</span>
                                    </div>
                                    @endif
                                    <input type="file" name="slide_{{ $n }}_image" accept="image/*"
                                           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">
                                    <p class="text-xs text-gray-400 mt-1">Recommended: 1920×1080px. Leave empty to keep gradient.</p>
                                </div>
                            </div>
                            @endforeach
                        </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>
                                <label class="block text-xs font-medium text-gray-600 mb-1.5">About Image</label>
                                @if(!empty($homepage['about_image']))
                                <img src="{{ \Illuminate\Support\Facades\Storage::url($homepage['about_image']) }}"
                                     class="w-40 h-24 object-cover rounded-lg mb-2 border-[0.5px] border-gray-200">
                                @endif
                                <input type="file" name="about_image" accept="image/*"
                                       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>
                    </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">
                @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>
                        <label class="block text-xs font-medium text-gray-600 mb-1.5">About Page Image</label>
                        @if(!empty($about['image']))
                        <img src="{{ \Illuminate\Support\Facades\Storage::url($about['image']) }}"
                             class="w-40 h-24 object-cover rounded-lg mb-2 border-[0.5px] border-gray-200">
                        @endif
                        <input type="file" name="image" accept="image/*"
                               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>
                        <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">
                @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>

        {{-- ── 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())
            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3">
                @foreach($galleryPhotos as $photo)
                <div class="relative group rounded-xl overflow-hidden border-[0.5px] border-gray-200">
                    <img src="{{ \Illuminate\Support\Facades\Storage::url($photo->path) }}"
                         alt="{{ $photo->caption }}" class="w-full aspect-square object-cover">
                    @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">
                        @foreach($typePhotos as $photo)
                        <div class="relative group rounded-lg overflow-hidden border-[0.5px] border-gray-200">
                            <img src="{{ \Illuminate\Support\Facades\Storage::url($photo->path) }}"
                                 alt="" class="w-full aspect-square object-cover">
                            <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">
                @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="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>

                <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>

        {{-- ── SEO ─────────────────────────────────── --}}
        <div x-show="tab === 'seo'" x-cloak>
            <form action="{{ route('website.update') }}" method="POST">
                @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>

                <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>

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

@endsection