@extends('layouts.portal')

@section('title', $sectionTitle . ' — Settings — Abu Dhabi Auto Care')

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

    <!-- Top Header -->
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div>
            <div class="flex items-center space-x-2 text-xs text-sky-400 font-bold mb-1">
                <a href="{{ route('admin.dashboard') }}" class="hover:underline">Dashboard</a>
                <span>/</span>
                <span>Dedicated Settings</span>
                <span>/</span>
                <span class="text-white">{{ $sectionTitle }}</span>
            </div>
            <h1 class="text-2xl font-black text-white tracking-tight">{{ $sectionTitle }}</h1>
            <p class="text-xs text-slate-400 mt-1">
                Customize operational parameters, workshop rules, front-end video player, and SEO metadata.
            </p>
        </div>
        <div class="flex items-center space-x-2">
            <span class="px-3 py-1.5 rounded-xl bg-slate-800 text-slate-300 text-xs font-mono border border-slate-700">
                Module: {{ $dbModule }}
            </span>
        </div>
    </div>

    <!-- Navigation Tabs for All 7 Dedicated Settings Sub-Pages -->
    <div class="flex items-center gap-2 overflow-x-auto pb-2 scrollbar-none border-b border-slate-800">
        @foreach($allSections as $secKey => $secName)
            <a href="{{ route('admin.settings', $secKey) }}"
               class="px-4 py-2.5 rounded-xl text-xs font-bold whitespace-nowrap transition flex items-center space-x-2 {{ $currentSection === $secKey ? 'bg-sky-600 text-white shadow-lg shadow-sky-600/30' : 'bg-slate-900 text-slate-300 hover:bg-slate-800 hover:text-white border border-slate-800' }}">
                @if($secKey === 'general')
                    <svg class="w-4 h-4 {{ $currentSection === $secKey ? 'text-white' : 'text-sky-400' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg>
                @elseif($secKey === 'services-video')
                    <svg class="w-4 h-4 {{ $currentSection === $secKey ? 'text-white' : 'text-purple-400' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
                @elseif($secKey === 'orders')
                    <svg class="w-4 h-4 {{ $currentSection === $secKey ? 'text-white' : 'text-emerald-400' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17a2 2 0 11-4 0 2 2 0 014 0zM19 17a2 2 0 11-4 0 2 2 0 014 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16V6a1 1 0 00-1-1H4a1 1 0 00-1 1v10a1 1 0 001 1h1m8-1a1 1 0 01-1 1H9m4-1V8a1 1 0 011-1h2.586a1 1 0 01.707.293l3.414 3.414a1 1 0 01.293.707V16a1 1 0 01-1 1h-1m-6-1a1 1 0 001 1h1M5 17a2 2 0 104 0m-4 0a2 2 0 114 0m6 0a2 2 0 104 0m-4 0a2 2 0 114 0"/></svg>
                @elseif($secKey === 'seo')
                    <svg class="w-4 h-4 {{ $currentSection === $secKey ? 'text-white' : 'text-cyan-400' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
                @elseif($secKey === 'notifications')
                    <svg class="w-4 h-4 {{ $currentSection === $secKey ? 'text-white' : 'text-amber-400' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/></svg>
                @elseif($secKey === 'working-hours')
                    <svg class="w-4 h-4 {{ $currentSection === $secKey ? 'text-white' : 'text-rose-400' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                @elseif($secKey === 'pricing')
                    <svg class="w-4 h-4 {{ $currentSection === $secKey ? 'text-white' : 'text-emerald-400' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"/></svg>
                @else
                    <svg class="w-4 h-4 {{ $currentSection === $secKey ? 'text-white' : 'text-slate-400' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                @endif
                <span>{{ $secName }}</span>
            </a>
        @endforeach
    </div>

    <!-- Main Content Grid -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

        <!-- Left / Main Form (Span 2) -->
        <div class="lg:col-span-2">
            <div class="p-6 sm:p-8 rounded-3xl bg-slate-900 border border-slate-800 shadow-2xl space-y-6">
                <div class="flex items-center justify-between pb-4 border-b border-slate-800">
                    <div>
                        <h2 class="text-base font-bold text-white flex items-center">
                            {{ $sectionTitle }} Form
                        </h2>
                        <p class="text-xs text-slate-400">All updates are persisted directly to the active system cache.</p>
                    </div>
                    <span class="px-2.5 py-1 rounded bg-emerald-500/10 text-emerald-400 text-[11px] font-bold border border-emerald-500/20">
                        Live Auto-Sync
                    </span>
                </div>

                <form action="{{ route('admin.settings.update', $currentSection) }}" method="POST" enctype="multipart/form-data" class="space-y-6 text-xs">
                    @csrf

                    <div class="space-y-4">
                        @forelse($settings as $setting)
                            <div class="p-4 rounded-2xl bg-slate-950/80 border border-slate-800/80 hover:border-slate-700 transition">
                                <div class="flex flex-col sm:flex-row sm:items-start justify-between gap-4">
                                    <div class="sm:w-2/5">
                                        <label for="{{ $setting->key }}" class="block font-bold text-white text-xs mb-1">
                                            {{ $setting->label ?: ucwords(str_replace('_', ' ', $setting->key)) }}
                                        </label>
                                        @if($setting->description)
                                            <p class="text-[11px] text-slate-400 mb-1 leading-relaxed">{{ $setting->description }}</p>
                                        @endif
                                        <span class="text-[10px] text-slate-600 font-mono">key: {{ $setting->key }}</span>
                                    </div>

                                    <div class="sm:w-3/5">
                                        @if($setting->type === 'boolean')
                                            <label class="relative inline-flex items-center cursor-pointer">
                                                <input type="checkbox" name="{{ $setting->key }}" id="{{ $setting->key }}" value="1" {{ $setting->value == '1' ? 'checked' : '' }} class="sr-only peer">
                                                <div class="w-11 h-6 bg-slate-800 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-slate-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-sky-600"></div>
                                                <span class="ml-3 text-xs font-semibold text-slate-300 peer-checked:text-sky-400">
                                                    {{ $setting->value == '1' ? 'Enabled' : 'Disabled' }}
                                                </span>
                                            </label>
                                        @elseif($setting->type === 'textarea')
                                            <textarea name="{{ $setting->key }}" id="{{ $setting->key }}" rows="3" class="w-full px-3.5 py-2.5 rounded-xl bg-slate-900 border border-slate-800 text-white text-xs focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500">{{ $setting->value }}</textarea>
                                        @elseif($setting->type === 'number')
                                            <input type="number" step="any" name="{{ $setting->key }}" id="{{ $setting->key }}" value="{{ $setting->value }}" class="w-full px-3.5 py-2.5 rounded-xl bg-slate-900 border border-slate-800 text-white text-xs font-mono focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500">
                                        @elseif($setting->key === 'default_theme')
                                            <select name="{{ $setting->key }}" id="{{ $setting->key }}" class="w-full px-3.5 py-2.5 rounded-xl bg-slate-900 border border-slate-800 text-white text-xs focus:outline-none focus:border-sky-500">
                                                <option value="dark" {{ $setting->value === 'dark' ? 'selected' : '' }}>Dark Theme (Midnight Carbon Titanium - Default)</option>
                                                <option value="light" {{ $setting->value === 'light' ? 'selected' : '' }}>Light Theme (Crisp High-Contrast White)</option>
                                            </select>
                                        @elseif($setting->key === 'site_logo')
                                            <div class="space-y-2">
                                                <input type="text" name="{{ $setting->key }}" id="{{ $setting->key }}" value="{{ $setting->value }}" placeholder="https://... or uploaded image path" class="w-full px-3.5 py-2.5 rounded-xl bg-slate-900 border border-slate-800 text-white text-xs font-mono focus:outline-none focus:border-sky-500">
                                                <div class="pt-1">
                                                    <span class="text-[10px] text-slate-400 block mb-1">Or upload new logo file:</span>
                                                    <input type="file" name="site_logo_file" accept="image/*,.svg,.png,.jpg,.webp" class="text-xs text-slate-400 file:mr-2 file:py-1 file:px-3 file:rounded-lg file:border-0 file:text-xs file:font-semibold file:bg-sky-600 file:text-white hover:file:bg-sky-500 cursor-pointer">
                                                </div>
                                                @if($setting->value)
                                                    <div class="mt-2 p-2 bg-slate-900 rounded-lg inline-block border border-slate-800">
                                                        <img src="{{ $setting->value }}" alt="Logo preview" class="h-8 max-w-[160px] object-contain">
                                                    </div>
                                                @endif
                                            </div>
                                        @elseif($setting->key === 'site_favicon')
                                            <div class="space-y-2">
                                                <input type="text" name="{{ $setting->key }}" id="{{ $setting->key }}" value="{{ $setting->value }}" placeholder="Favicon URL or path" class="w-full px-3.5 py-2.5 rounded-xl bg-slate-900 border border-slate-800 text-white text-xs font-mono focus:outline-none focus:border-sky-500">
                                                <div class="pt-1">
                                                    <span class="text-[10px] text-slate-400 block mb-1">Or upload new favicon file:</span>
                                                    <input type="file" name="site_favicon_file" accept="image/*,.png,.ico,.svg" class="text-xs text-slate-400 file:mr-2 file:py-1 file:px-3 file:rounded-lg file:border-0 file:text-xs file:font-semibold file:bg-sky-600 file:text-white hover:file:bg-sky-500 cursor-pointer">
                                                </div>
                                                @if($setting->value)
                                                    <div class="mt-1 p-1 bg-slate-900 rounded inline-block border border-slate-800">
                                                        <img src="{{ $setting->value }}" alt="Favicon preview" class="w-6 h-6 object-contain">
                                                    </div>
                                                @endif
                                            </div>
                                        @elseif($setting->key === 'service_video_ratio')
                                            <select name="{{ $setting->key }}" id="{{ $setting->key }}" class="w-full px-3.5 py-2.5 rounded-xl bg-slate-900 border border-slate-800 text-white text-xs focus:outline-none focus:border-sky-500">
                                                <option value="16/9" {{ $setting->value === '16/9' ? 'selected' : '' }}>16:9 Standard Widescreen (Recommended)</option>
                                                <option value="21/9" {{ $setting->value === '21/9' ? 'selected' : '' }}>21:9 Ultra-Wide Cinematic Cinema</option>
                                                <option value="4/3" {{ $setting->value === '4/3' ? 'selected' : '' }}>4:3 Classic Workshop Aspect</option>
                                            </select>
                                        @elseif($setting->key === 'service_video_speed')
                                            <select name="{{ $setting->key }}" id="{{ $setting->key }}" class="w-full px-3.5 py-2.5 rounded-xl bg-slate-900 border border-slate-800 text-white text-xs focus:outline-none focus:border-sky-500">
                                                <option value="0.75" {{ $setting->value === '0.75' ? 'selected' : '' }}>0.75x Slow Motion Paint Flow</option>
                                                <option value="1.0" {{ $setting->value === '1.0' ? 'selected' : '' }}>1.0x Normal Realistic Speed</option>
                                                <option value="1.25" {{ $setting->value === '1.25' ? 'selected' : '' }}>1.25x Dynamic Showcase</option>
                                                <option value="1.5" {{ $setting->value === '1.5' ? 'selected' : '' }}>1.5x Fast Workshop Workflow</option>
                                            </select>
                                        @else
                                            <input type="text" name="{{ $setting->key }}" id="{{ $setting->key }}" value="{{ $setting->value }}" class="w-full px-3.5 py-2.5 rounded-xl bg-slate-900 border border-slate-800 text-white text-xs focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500">
                                        @endif
                                    </div>
                                </div>
                            </div>
                        @empty
                            <div class="p-6 text-center text-slate-500 text-xs">
                                No custom parameters found for this module.
                            </div>
                        @endforelse
                    </div>

                    <div class="pt-4 border-t border-slate-800 flex items-center justify-between">
                        <span class="text-[11px] text-slate-500">Target Module: <strong class="text-slate-300 font-mono">{{ $dbModule }}</strong></span>
                        <button type="submit" class="px-6 py-3 rounded-xl bg-sky-600 hover:bg-sky-500 text-white font-bold text-xs shadow-xl shadow-sky-600/30 transition flex items-center">
                            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                            Save {{ $sectionTitle }} Changes
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- Right Side: Live Previews & Contextual Tips (Module-Specific) -->
        <div class="space-y-6">

            @if($currentSection === 'general')
                <!-- Connected Modules Control Cards -->
                <div class="p-6 rounded-3xl bg-slate-900 border border-slate-800 shadow-xl space-y-4">
                    <h3 class="text-xs font-bold text-white uppercase tracking-wider flex items-center">
                        <svg class="w-4 h-4 mr-2 text-cyan-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"/></svg>
                        Hero & Theme Appearance
                    </h3>
                    <p class="text-[11px] text-slate-400">
                        Customize front-end hero photography, image position, overlay opacity, and default site themes.
                    </p>
                    <a href="{{ route('admin.appearance.edit') }}" class="p-3.5 rounded-2xl bg-slate-950 border border-slate-800 hover:border-cyan-500/50 transition flex items-center justify-between group">
                        <div>
                            <span class="text-xs font-bold text-white group-hover:text-cyan-300 block">Appearance & Hero Section</span>
                            <span class="text-[10px] text-slate-500">Hero titles, CTA links & overlay styling</span>
                        </div>
                        <span class="text-cyan-400 text-sm font-mono">➔</span>
                    </a>
                </div>

                @if(auth()->user()->isSuperAdmin())
                    <!-- Team Roles Quick Link Card -->
                    <div class="p-6 rounded-3xl bg-slate-900 border border-slate-800 shadow-xl space-y-4">
                        <div class="flex items-center justify-between">
                            <h3 class="text-xs font-bold text-white uppercase tracking-wider flex items-center">
                                <svg class="w-4 h-4 mr-2 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
                                Team Roles & Super Admin
                            </h3>
                            <span class="px-2 py-0.5 rounded text-[9px] font-bold bg-amber-500/20 text-amber-400">Super</span>
                        </div>
                        <p class="text-[11px] text-slate-400">
                            Assign workshop technician credentials, staff access, and administrative privileges.
                        </p>
                        <a href="{{ route('admin.users') }}" class="p-3.5 rounded-2xl bg-slate-950 border border-slate-800 hover:border-amber-500/50 transition flex items-center justify-between group">
                            <div>
                                <span class="text-xs font-bold text-white group-hover:text-amber-300 block">Manage Team & Roles</span>
                                <span class="text-[10px] text-slate-500">Technicians, workshop admins & clients</span>
                            </div>
                            <span class="text-amber-400 text-sm font-mono">➔</span>
                        </a>
                    </div>
                @endif

                <!-- Branding & Logo Status -->
                <div class="p-6 rounded-3xl bg-slate-900 border border-slate-800 shadow-xl space-y-4">
                    <h3 class="text-xs font-bold text-white uppercase tracking-wider">Logo Variations & Branding</h3>
                    <div class="p-4 rounded-2xl bg-slate-950 border border-slate-800 space-y-3 text-xs">
                        <div class="flex items-center justify-between pb-2 border-b border-slate-800/80">
                            <span class="text-slate-400">Main Logo:</span>
                            @if(\App\Models\Setting::get('site_logo'))
                                <span class="text-emerald-400 font-bold">Custom Uploaded</span>
                            @else
                                <span class="text-slate-500 font-mono">Default SVG Mark</span>
                            @endif
                        </div>
                        <div class="flex items-center justify-between pb-2 border-b border-slate-800/80">
                            <span class="text-slate-400">Favicon:</span>
                            @if(\App\Models\Setting::get('site_favicon'))
                                <span class="text-emerald-400 font-bold">Configured</span>
                            @else
                                <span class="text-slate-500 font-mono">Default Icon</span>
                            @endif
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="text-slate-400">Default Theme:</span>
                            <span class="text-sky-400 font-bold uppercase">{{ \App\Models\Setting::get('default_theme', 'dark') }}</span>
                        </div>
                    </div>
                </div>

                <!-- Footer Summary Preview -->
                <div class="p-6 rounded-3xl bg-slate-900 border border-slate-800 shadow-xl space-y-4">
                    <h3 class="text-xs font-bold text-white uppercase tracking-wider">Footer & CTA Status</h3>
                    <div class="p-4 rounded-2xl bg-slate-950 border border-slate-800 space-y-2 text-xs">
                        <div>
                            <span class="text-slate-500 text-[10px] block">Primary CTA:</span>
                            <span class="text-white font-bold">{{ \App\Models\Setting::get('footer_cta_title', 'Book Workshop Visit Now') }}</span>
                            <span class="text-sky-400 font-mono text-[10px] block">➔ {{ \App\Models\Setting::get('footer_cta_url', '/book-service') }}</span>
                        </div>
                        <div class="pt-2 border-t border-slate-800/80">
                            <span class="text-slate-500 text-[10px] block">Footer Tagline:</span>
                            <p class="text-slate-300 text-[11px] mt-0.5">{{ \App\Models\Setting::get('footer_tagline', 'Care in every detail. Your automotive workshop in Abu Dhabi.') }}</p>
                        </div>
                    </div>
                </div>

            @elseif($currentSection === 'services-video')
                <!-- Video Player Controller Simulation Preview -->
                <div class="p-6 rounded-3xl bg-slate-900 border border-slate-800 shadow-xl space-y-4">
                    <div class="flex items-center justify-between">
                        <h3 class="text-xs font-bold text-white uppercase tracking-wider">Video Showcase Live Engine</h3>
                        <span class="px-2 py-0.5 rounded text-[10px] font-bold bg-purple-500/20 text-purple-400">Services Player</span>
                    </div>
                    <p class="text-[11px] text-slate-400">
                        This controller engine governs the video showcase displayed on the public <a href="{{ route('services.index') }}" class="text-sky-400 hover:underline">/services</a> catalog.
                    </p>
                    <div class="p-4 rounded-2xl bg-slate-950 border border-slate-800 space-y-3">
                        <div class="text-[11px] flex justify-between text-slate-400">
                            <span>Managed Aspect Ratio:</span>
                            <span class="text-white font-mono font-bold">{{ \App\Models\Setting::get('service_video_ratio', '16/9') }}</span>
                        </div>
                        <div class="text-[11px] flex justify-between text-slate-400">
                            <span>Playback Speed:</span>
                            <span class="text-white font-mono font-bold">{{ \App\Models\Setting::get('service_video_speed', '1.0') }}x</span>
                        </div>
                        <div class="text-[11px] flex justify-between text-slate-400">
                            <span>Muted Autoplay:</span>
                            <span class="text-emerald-400 font-bold">{{ \App\Models\Setting::get('service_video_muted', '1') == '1' ? 'Muted (Browsers Allow Autoplay)' : 'Unmuted' }}</span>
                        </div>
                        <div class="text-[11px] flex justify-between text-slate-400">
                            <span>Poster Preview:</span>
                            <span class="text-sky-400 font-bold truncate max-w-[150px]">German Booth Spec</span>
                        </div>
                    </div>
                </div>

            @elseif($currentSection === 'seo')
                <!-- Google Search Result Simulation Preview -->
                <div class="p-6 rounded-3xl bg-slate-900 border border-slate-800 shadow-xl space-y-4">
                    <div class="flex items-center justify-between">
                        <h3 class="text-xs font-bold text-white uppercase tracking-wider">Google Snippet Simulator</h3>
                        <span class="px-2 py-0.5 rounded text-[10px] font-bold bg-emerald-500/20 text-emerald-400">SERP Preview</span>
                    </div>
                    <p class="text-[11px] text-slate-400">
                        Live rendering of how Abu Dhabi Auto Care appears in Google UAE search results:
                    </p>
                    <div class="p-4 rounded-2xl bg-white text-slate-900 space-y-1 shadow-md">
                        <div class="flex items-center space-x-2 text-[11px] text-slate-600">
                            <span class="w-4 h-4 rounded-full bg-slate-200 flex items-center justify-center font-bold text-[9px] text-sky-700">AD</span>
                            <span>https://abudhabiautocare.ae</span>
                        </div>
                        <div class="text-sm font-semibold text-blue-800 hover:underline cursor-pointer">
                            {{ \App\Models\Setting::get('meta_title_default', 'Car Painting & Auto Repair Abu Dhabi | Abu Dhabi Auto Care') }}
                        </div>
                        <div class="text-[11px] text-slate-700 leading-snug">
                            {{ \App\Models\Setting::get('meta_description_default', 'Professional car painting, body repair, mechanical repair, AC service, detailing and free car pickup and drop in Abu Dhabi. WhatsApp +971 54 514 3060 for a free quote.') }}
                        </div>
                        <div class="flex items-center space-x-2 pt-1 text-[10px] text-amber-600 font-bold">
                            <span>★★★★★ Rating: {{ \App\Models\Setting::get('google_rating_value', '4.9') }}</span>
                            <span class="text-slate-500 font-normal">({{ \App\Models\Setting::get('google_review_count', '184') }} verified reviews)</span>
                        </div>
                    </div>
                </div>

            @elseif($currentSection === 'notifications')
                <!-- WhatsApp Live Dispatch Preview -->
                <div class="p-6 rounded-3xl bg-slate-900 border border-slate-800 shadow-xl space-y-4">
                    <div class="flex items-center justify-between">
                        <h3 class="text-xs font-bold text-white uppercase tracking-wider">WhatsApp Dispatch Hub</h3>
                        <span class="px-2 py-0.5 rounded text-[10px] font-bold bg-emerald-500/20 text-emerald-400">Live API Link</span>
                    </div>
                    <p class="text-[11px] text-slate-400">
                        When status changes or bookings arrive, preformatted messages trigger for clients with order details.
                    </p>
                    <div class="p-4 rounded-2xl bg-emerald-950/40 border border-emerald-500/30 text-emerald-200 text-xs space-y-2">
                        <div class="font-bold flex items-center text-emerald-400">
                            <span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse mr-2"></span>
                            Target WhatsApp Hotline:
                        </div>
                        <div class="font-mono text-white text-sm font-bold">{{ \App\Models\Setting::get('whatsapp', '+971 54 514 3060') }}</div>
                        <p class="text-[11px] text-emerald-300/80">
                            Direct click-to-chat links with prefilled vehicle plate and order code are embedded in confirmation pages and admin status changers.
                        </p>
                    </div>
                </div>

            @elseif($currentSection === 'orders')
                <!-- Free Pickup Coverage Box -->
                <div class="p-6 rounded-3xl bg-slate-900 border border-slate-800 shadow-xl space-y-4">
                    <div class="flex items-center justify-between">
                        <h3 class="text-xs font-bold text-white uppercase tracking-wider">Pickup Logistics</h3>
                        <span class="px-2 py-0.5 rounded text-[10px] font-bold bg-amber-500/20 text-amber-400">Free Recovery</span>
                    </div>
                    <div class="p-4 rounded-2xl bg-slate-950 border border-slate-800 space-y-2 text-xs">
                        <div class="flex items-center justify-between">
                            <span class="text-slate-400">Free Pickup Across UAE:</span>
                            <span class="text-emerald-400 font-bold">Active</span>
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="text-slate-400">Designated Coverage:</span>
                            <span class="text-white font-semibold">Mussafah M11 & Abu Dhabi</span>
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="text-slate-400">Default Deposit:</span>
                            <span class="text-amber-400 font-mono font-bold">{{ \App\Models\Setting::get('default_deposit_percent', '25') }}%</span>
                        </div>
                    </div>
                </div>

            @elseif($currentSection === 'pricing')
                <!-- Pricing Rules Summary -->
                <div class="p-6 rounded-3xl bg-slate-900 border border-slate-800 shadow-xl space-y-4">
                    <div class="flex items-center justify-between">
                        <h3 class="text-xs font-bold text-white uppercase tracking-wider">Pricing Compliance</h3>
                        <span class="px-2 py-0.5 rounded text-[10px] font-bold bg-sky-500/20 text-sky-400">UAE Tax Laws</span>
                    </div>
                    <div class="p-4 rounded-2xl bg-slate-950 border border-slate-800 space-y-2 text-xs">
                        <div class="flex items-center justify-between">
                            <span class="text-slate-400">Standard UAE VAT:</span>
                            <span class="text-white font-mono font-bold">{{ \App\Models\Setting::get('vat_percent', '5') }}%</span>
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="text-slate-400">Max Discount Limit:</span>
                            <span class="text-amber-400 font-mono font-bold">{{ \App\Models\Setting::get('max_discount_percent', '10') }}%</span>
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="text-slate-400">Sedan Promo Campaign:</span>
                            <span class="text-emerald-400 font-bold">AED 1,299 Starting</span>
                        </div>
                    </div>
                </div>

            @elseif($currentSection === 'working-hours')
                <!-- Operating Hours Matrix -->
                <div class="p-6 rounded-3xl bg-slate-900 border border-slate-800 shadow-xl space-y-4">
                    <div class="flex items-center justify-between">
                        <h3 class="text-xs font-bold text-white uppercase tracking-wider">Workshop Operation Matrix</h3>
                        <span class="px-2 py-0.5 rounded text-[10px] font-bold bg-cyan-500/20 text-cyan-400">Mussafah Bay</span>
                    </div>
                    <div class="p-4 rounded-2xl bg-slate-950 border border-slate-800 space-y-2.5 text-xs">
                        <div class="flex items-center justify-between">
                            <span class="text-slate-400">Active Days:</span>
                            <span class="text-white font-semibold">{{ \App\Models\Setting::get('work_days', 'Saturday – Thursday') }}</span>
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="text-slate-400">Shift Timings:</span>
                            <span class="text-amber-400 font-mono font-bold">{{ \App\Models\Setting::get('opening_time', '08:00 AM') }} – {{ \App\Models\Setting::get('closing_time', '08:00 PM') }}</span>
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="text-slate-400">Friday Protocol:</span>
                            <span class="text-rose-400 font-semibold">{{ \App\Models\Setting::get('friday_status', 'Closed / Emergency on Request') }}</span>
                        </div>
                    </div>
                </div>

            @else
                <!-- General Identity Information -->
                <div class="p-6 rounded-3xl bg-slate-900 border border-slate-800 shadow-xl space-y-4">
                    <div class="flex items-center justify-between">
                        <h3 class="text-xs font-bold text-white uppercase tracking-wider">Mussafah M11 Facility</h3>
                        <span class="px-2 py-0.5 rounded text-[10px] font-bold bg-sky-500/20 text-sky-400">Verified Workshop</span>
                    </div>
                    <p class="text-[11px] text-slate-400">
                        Facility coordinates and direct hotline info synchronized across website header, footer, booking forms, and invoices.
                    </p>
                    <div class="p-4 rounded-2xl bg-slate-950 border border-slate-800 space-y-2 text-xs">
                        <div class="text-slate-400">Physical Facility:</div>
                        <div class="text-white font-semibold">Mussafah M11, Abu Dhabi, UAE</div>
                        <div class="text-slate-400 pt-2">Direct WhatsApp Hotline:</div>
                        <div class="text-emerald-400 font-mono font-bold">+971 54 514 3060</div>
                    </div>
                </div>
            @endif

            <!-- Quick Navigation to Other Sub-Pages -->
            <div class="p-6 rounded-3xl bg-slate-900 border border-slate-800 shadow-xl space-y-3">
                <h4 class="text-xs font-bold text-slate-300 uppercase tracking-wider">Other Dedicated Settings</h4>
                <div class="space-y-1.5 text-xs">
                    @foreach($allSections as $key => $title)
                        @if($key !== $currentSection)
                            <a href="{{ route('admin.settings', $key) }}" class="flex items-center justify-between p-2 rounded-xl text-slate-400 hover:text-white hover:bg-slate-800/80 transition">
                                <span class="flex items-center">
                                    <svg class="w-3.5 h-3.5 mr-2 text-sky-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                                    <span>{{ $title }}</span>
                                </span>
                                <span class="text-slate-600 font-mono">➔</span>
                            </a>
                        @endif
                    @endforeach
                </div>
            </div>

        </div>

    </div>

</div>
@endsection