<div>
    {{-- Header --}}
    <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-6">
        <div>
            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">إدارة الموقع الإلكتروني</h1>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">تحكم بأقسام ومحتوى موقع الأكاديمية</p>
        </div>
        <div class="flex items-center gap-3">
            <a href="{{ route('website.manage.theme') }}" class="px-4 py-2 text-sm font-medium rounded-lg border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
                تصميم الموقع
            </a>

            @if($isPublished)
                <a href="{{ route('website.show', app('current_academy')->slug) }}" target="_blank" class="px-4 py-2 text-sm font-medium rounded-lg bg-green-50 text-green-700 border border-green-200 hover:bg-green-100 transition-colors">
                    عرض الموقع ↗
                </a>
                <button wire:click="unpublish" class="px-4 py-2 text-sm font-medium rounded-lg bg-amber-50 text-amber-700 border border-amber-200 hover:bg-amber-100 transition-colors">
                    إلغاء النشر
                </button>
            @else
                <button wire:click="publish" class="px-4 py-2 text-sm font-medium rounded-lg bg-blue-600 text-white hover:bg-blue-700 transition-colors">
                    نشر الموقع
                </button>
            @endif
        </div>
    </div>

    @if(session('success'))
        <div x-data="{ show: true }" x-show="show" x-init="setTimeout(() => show = false, 3000)"
             x-transition:enter="transition ease-out duration-300"
             x-transition:enter-start="opacity-0 -translate-y-2"
             x-transition:enter-end="opacity-100 translate-y-0"
             x-transition:leave="transition ease-in duration-200"
             x-transition:leave-start="opacity-100 translate-y-0"
             x-transition:leave-end="opacity-0 -translate-y-2"
             class="mb-4 p-3 rounded-lg bg-green-50 border border-green-200 text-green-700 text-sm flex items-center gap-2">
            <svg class="w-4 h-4 shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>
            {{ session('success') }}
        </div>
    @endif

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {{-- Sections List --}}
        <div class="lg:col-span-1">
            <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
                <div class="p-4 border-b border-gray-200 dark:border-gray-700">
                    <h3 class="font-semibold text-gray-900 dark:text-white">أقسام الموقع</h3>
                    <p class="text-xs text-gray-500 mt-1">استخدم الأسهم لإعادة الترتيب</p>
                </div>
                <div class="divide-y divide-gray-100 dark:divide-gray-700">
                    @foreach($sections as $index => $section)
                        <div class="flex items-center gap-2 p-3 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors cursor-pointer {{ $editingSection === $section['key'] ? 'bg-blue-50 dark:bg-blue-900/20 border-s-4 border-blue-500' : '' }}"
                             wire:click="editSection('{{ $section['key'] }}')"
                             wire:key="section-{{ $section['id'] }}">
                            {{-- Reorder Arrows --}}
                            <div class="flex flex-col gap-0.5 shrink-0">
                                @if($index > 0)
                                    <button wire:click.stop="moveSection({{ $section['id'] }}, 'up')" class="p-0.5 text-gray-400 hover:text-blue-500 transition-colors" title="تحريك لأعلى">
                                        <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="M5 15l7-7 7 7"/></svg>
                                    </button>
                                @else
                                    <span class="w-3.5 h-3.5 p-0.5"></span>
                                @endif
                                @if($index < count($sections) - 1)
                                    <button wire:click.stop="moveSection({{ $section['id'] }}, 'down')" class="p-0.5 text-gray-400 hover:text-blue-500 transition-colors" title="تحريك لأسفل">
                                        <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="M19 9l-7 7-7-7"/></svg>
                                    </button>
                                @else
                                    <span class="w-3.5 h-3.5 p-0.5"></span>
                                @endif
                            </div>

                            {{-- Section Info --}}
                            <div class="flex-1 min-w-0">
                                <span class="text-sm font-medium text-gray-900 dark:text-white">{{ $section['label'] }}</span>
                            </div>

                            {{-- Toggle --}}
                            <button wire:click.stop="toggleSection({{ $section['id'] }})"
                                    class="relative shrink-0 w-9 h-5 rounded-full transition-colors {{ $section['is_enabled'] ? 'bg-green-500' : 'bg-gray-300 dark:bg-gray-600' }}">
                                <span class="absolute top-0.5 block w-4 h-4 rounded-full bg-white shadow transition-all {{ $section['is_enabled'] ? 'inset-inline-start-4' : 'inset-inline-start-0.5' }}"></span>
                            </button>
                        </div>
                    @endforeach
                </div>
            </div>

            {{-- Quick Links --}}
            <div class="mt-4 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-4 space-y-2">
                <a href="{{ route('website.manage.gallery') }}" class="flex items-center gap-2 p-2 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 text-sm text-gray-700 dark:text-gray-300 transition-colors">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                    معرض الصور
                </a>
                <a href="{{ route('website.manage.testimonials') }}" class="flex items-center gap-2 p-2 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 text-sm text-gray-700 dark:text-gray-300 transition-colors">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/></svg>
                    آراء العملاء
                </a>
                <a href="{{ route('website.manage.faqs') }}" class="flex items-center gap-2 p-2 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 text-sm text-gray-700 dark:text-gray-300 transition-colors">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                    الأسئلة الشائعة
                </a>
                <a href="{{ route('website.manage.news') }}" class="flex items-center gap-2 p-2 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 text-sm text-gray-700 dark:text-gray-300 transition-colors">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"/></svg>
                    الأخبار
                </a>
                <a href="{{ route('website.manage.partners') }}" class="flex items-center gap-2 p-2 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 text-sm text-gray-700 dark:text-gray-300 transition-colors">
                    <svg class="w-4 h-4" 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>
                    الشركاء
                </a>
                <a href="{{ route('website.manage.contacts') }}" class="flex items-center gap-2 p-2 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 text-sm text-gray-700 dark:text-gray-300 transition-colors">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
                    رسائل التواصل
                </a>
            </div>
        </div>

        {{-- Section Editor --}}
        <div class="lg:col-span-2">
            @if($editingSection)
                <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
                    <div class="flex items-center justify-between mb-6">
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
                            تعديل: {{ \App\Domain\Website\Enums\SectionKey::from($editingSection)->label() }}
                        </h3>
                        <button wire:click="cancelEdit" class="text-gray-400 hover:text-gray-600">
                            <svg class="w-5 h-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>
                    </div>

                    <form wire:submit="saveSection" class="space-y-5">
                        {{-- Title --}}
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">العنوان (عربي)</label>
                                <input type="text" wire:model="sectionTitle" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white focus:ring-blue-500 focus:border-blue-500">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">العنوان (إنجليزي)</label>
                                <input type="text" wire:model="sectionTitleEn" dir="ltr" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white focus:ring-blue-500 focus:border-blue-500">
                            </div>
                        </div>

                        {{-- Subtitle --}}
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">العنوان الفرعي (عربي)</label>
                                <input type="text" wire:model="sectionSubtitle" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white focus:ring-blue-500 focus:border-blue-500">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">العنوان الفرعي (إنجليزي)</label>
                                <input type="text" wire:model="sectionSubtitleEn" dir="ltr" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white focus:ring-blue-500 focus:border-blue-500">
                            </div>
                        </div>

                        {{-- Content --}}
                        @if(in_array($editingSection, ['about', 'schedule']))
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">المحتوى (عربي)</label>
                                <textarea wire:model="sectionContent" rows="5" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white focus:ring-blue-500 focus:border-blue-500"></textarea>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">المحتوى (إنجليزي)</label>
                                <textarea wire:model="sectionContentEn" rows="5" dir="ltr" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white focus:ring-blue-500 focus:border-blue-500"></textarea>
                            </div>
                        @endif

                        {{-- Section-Specific Settings --}}
                        @if($editingSection === 'hero')
                            {{-- Hero Variant Picker --}}
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">نمط القسم الرئيسي</label>
                                <div class="grid grid-cols-2 sm:grid-cols-3 gap-3">
                                    @foreach([
                                        'fullscreen' => ['label' => 'ملء الشاشة', 'desc' => 'صورة كاملة مع نص فوقها', 'icon' => 'M4 5h16v14H4z'],
                                        'split_right' => ['label' => 'منقسم (صورة يمين)', 'desc' => 'نص يسار وصورة يمين', 'icon' => 'M4 5h8v14H4zM12 5h8v14h-8z'],
                                        'split_left' => ['label' => 'منقسم (صورة يسار)', 'desc' => 'صورة يسار ونص يمين', 'icon' => 'M4 5h8v14H4zM12 5h8v14h-8z'],
                                        'centered_minimal' => ['label' => 'مركزي بسيط', 'desc' => 'نص كبير مركزي بدون صورة', 'icon' => 'M7 9h10M9 12h6M8 15h8'],
                                        'video_bg' => ['label' => 'خلفية فيديو', 'desc' => 'فيديو خلفي مع محتوى', 'icon' => 'M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664zM21 12a9 9 0 11-18 0 9 9 0 0118 0z'],
                                        'slideshow' => ['label' => 'عرض شرائح', 'desc' => 'صور متعاقبة تلقائياً', 'icon' => 'M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z'],
                                    ] as $variant => $info)
                                        <label class="relative cursor-pointer group">
                                            <input type="radio" wire:model="heroVariant" value="{{ $variant }}" class="peer sr-only">
                                            <div class="p-3 rounded-xl border-2 transition-all
                                                        peer-checked:border-blue-500 peer-checked:bg-blue-50 dark:peer-checked:bg-blue-900/20
                                                        border-gray-200 dark:border-gray-600 hover:border-gray-300 dark:hover:border-gray-500">
                                                <div class="w-full aspect-[16/9] mb-2 rounded-lg bg-gray-100 dark:bg-gray-700 flex items-center justify-center overflow-hidden">
                                                    <svg class="w-10 h-10 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="{{ $info['icon'] }}"/>
                                                    </svg>
                                                </div>
                                                <p class="text-xs font-semibold text-gray-800 dark:text-gray-200 text-center">{{ $info['label'] }}</p>
                                                <p class="text-[10px] text-gray-500 dark:text-gray-400 text-center mt-0.5 leading-tight">{{ $info['desc'] }}</p>
                                            </div>
                                            <div class="absolute top-2 end-2 w-5 h-5 rounded-full bg-blue-500 text-white items-center justify-center hidden peer-checked:flex">
                                                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg>
                                            </div>
                                        </label>
                                    @endforeach
                                </div>
                            </div>

                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">نص الزر</label>
                                    <input type="text" wire:model="sectionSettings.cta_text" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white" placeholder="سجّل الآن">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">رابط الزر</label>
                                    <input type="text" wire:model="sectionSettings.cta_link" dir="ltr" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white" placeholder="#section-contact">
                                </div>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">شفافية الطبقة المظلمة ({{ $sectionSettings['overlay_opacity'] ?? 70 }}%)</label>
                                <input type="range" wire:model.live="sectionSettings.overlay_opacity" min="20" max="90" class="w-full">
                            </div>
                        @endif

                        {{-- Layout Picker for multi-column sections --}}
                        @if(in_array($editingSection, ['activities', 'programs', 'trainers', 'news', 'branches', 'testimonials']))
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">تخطيط العرض</label>
                                <div class="grid grid-cols-5 gap-2">
                                    @foreach([
                                        'grid_2' => ['label' => 'عمودين', 'cols' => 2],
                                        'grid_3' => ['label' => '3 أعمدة', 'cols' => 3],
                                        'grid_4' => ['label' => '4 أعمدة', 'cols' => 4],
                                        'list' => ['label' => 'قائمة', 'cols' => 0],
                                        'carousel' => ['label' => 'تمرير', 'cols' => -1],
                                    ] as $layoutKey => $layoutInfo)
                                        <label class="cursor-pointer group">
                                            <input type="radio" wire:model="sectionLayout" value="{{ $layoutKey }}" class="peer sr-only">
                                            <div class="p-2 rounded-lg border-2 transition-all text-center
                                                        peer-checked:border-blue-500 peer-checked:bg-blue-50 dark:peer-checked:bg-blue-900/20
                                                        border-gray-200 dark:border-gray-600 hover:border-gray-300">
                                                <div class="flex items-center justify-center gap-0.5 h-8 mb-1">
                                                    @if($layoutInfo['cols'] > 0)
                                                        @for($i = 0; $i < $layoutInfo['cols']; $i++)
                                                            <div class="w-3 h-6 bg-gray-300 dark:bg-gray-500 rounded-sm peer-checked:bg-blue-300"></div>
                                                        @endfor
                                                    @elseif($layoutInfo['cols'] === 0)
                                                        <div class="w-full space-y-1">
                                                            <div class="h-2 bg-gray-300 dark:bg-gray-500 rounded-sm"></div>
                                                            <div class="h-2 bg-gray-300 dark:bg-gray-500 rounded-sm"></div>
                                                            <div class="h-2 bg-gray-300 dark:bg-gray-500 rounded-sm"></div>
                                                        </div>
                                                    @else
                                                        <div class="flex items-center gap-0.5">
                                                            <div class="w-3 h-6 bg-gray-300 dark:bg-gray-500 rounded-sm"></div>
                                                            <div class="w-3 h-6 bg-gray-300 dark:bg-gray-500 rounded-sm"></div>
                                                            <svg class="w-3 h-3 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                                                        </div>
                                                    @endif
                                                </div>
                                                <span class="text-[10px] font-medium text-gray-600 dark:text-gray-400">{{ $layoutInfo['label'] }}</span>
                                            </div>
                                        </label>
                                    @endforeach
                                </div>
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">عدد العناصر المعروضة</label>
                                <input type="number" wire:model="sectionSettings.max_items" min="3" max="12" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white" placeholder="6">
                            </div>
                        @endif

                        {{-- Testimonials Layout Options --}}
                        @if($editingSection === 'testimonials')
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">نمط عرض الشهادات</label>
                                <div class="grid grid-cols-2 sm:grid-cols-4 gap-2">
                                    @foreach([
                                        'carousel' => 'عرض متحرك',
                                        'grid' => 'شبكة',
                                        'wall_of_love' => 'جدار التقييمات',
                                        'featured_quote' => 'اقتباس مميز',
                                    ] as $lk => $ll)
                                        <label class="cursor-pointer">
                                            <input type="radio" wire:model="sectionLayout" value="{{ $lk }}" class="peer sr-only">
                                            <div class="p-2.5 rounded-lg border-2 text-center text-xs font-medium transition-all
                                                        peer-checked:border-blue-500 peer-checked:bg-blue-50 dark:peer-checked:bg-blue-900/20
                                                        border-gray-200 dark:border-gray-600 hover:border-gray-300 text-gray-700 dark:text-gray-300">
                                                {{ $ll }}
                                            </div>
                                        </label>
                                    @endforeach
                                </div>
                            </div>
                            <div class="grid grid-cols-3 gap-3">
                                <label class="flex items-center gap-2 cursor-pointer">
                                    <input type="checkbox" wire:model="sectionSettings.show_rating" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500" checked>
                                    <span class="text-sm text-gray-700 dark:text-gray-300">إظهار التقييم</span>
                                </label>
                                <label class="flex items-center gap-2 cursor-pointer">
                                    <input type="checkbox" wire:model="sectionSettings.auto_rotate" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500" checked>
                                    <span class="text-sm text-gray-700 dark:text-gray-300">تدوير تلقائي</span>
                                </label>
                                <div>
                                    <input type="number" wire:model="sectionSettings.rotate_speed" min="2000" max="10000" step="1000" class="w-full text-sm rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white" placeholder="5000ms">
                                </div>
                            </div>
                        @endif

                        {{-- FAQ Settings --}}
                        @if($editingSection === 'faq')
                            <div class="grid grid-cols-3 gap-3">
                                <label class="flex items-center gap-2 cursor-pointer">
                                    <input type="checkbox" wire:model="sectionSettings.show_categories" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                                    <span class="text-sm text-gray-700 dark:text-gray-300">عرض التصنيفات</span>
                                </label>
                                <label class="flex items-center gap-2 cursor-pointer">
                                    <input type="checkbox" wire:model="sectionSettings.show_search" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                                    <span class="text-sm text-gray-700 dark:text-gray-300">حقل البحث</span>
                                </label>
                                <label class="flex items-center gap-2 cursor-pointer">
                                    <input type="checkbox" wire:model="sectionSettings.expand_first" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                                    <span class="text-sm text-gray-700 dark:text-gray-300">فتح أول سؤال</span>
                                </label>
                            </div>
                        @endif

                        {{-- Gallery Settings --}}
                        @if($editingSection === 'gallery')
                            <div class="grid grid-cols-2 gap-3">
                                <label class="flex items-center gap-2 cursor-pointer">
                                    <input type="checkbox" wire:model="sectionSettings.show_categories" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                                    <span class="text-sm text-gray-700 dark:text-gray-300">عرض فلتر التصنيفات</span>
                                </label>
                                <div>
                                    <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">نمط العرض</label>
                                    <select wire:model="sectionSettings.layout" class="w-full text-sm rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                                        <option value="grid">شبكة</option>
                                        <option value="masonry">بناء حر (Masonry)</option>
                                    </select>
                                </div>
                            </div>
                        @endif

                        {{-- Stats Settings --}}
                        @if($editingSection === 'stats')
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">نمط العرض</label>
                                <div class="grid grid-cols-3 gap-2">
                                    @foreach(['default' => 'افتراضي', 'cards' => 'بطاقات', 'minimal' => 'بسيط'] as $sk => $sl)
                                        <label class="cursor-pointer">
                                            <input type="radio" wire:model="sectionSettings.layout" value="{{ $sk }}" class="peer sr-only">
                                            <div class="p-2.5 rounded-lg border-2 text-center text-xs font-medium transition-all
                                                        peer-checked:border-blue-500 peer-checked:bg-blue-50 dark:peer-checked:bg-blue-900/20
                                                        border-gray-200 dark:border-gray-600 hover:border-gray-300 text-gray-700 dark:text-gray-300">
                                                {{ $sl }}
                                            </div>
                                        </label>
                                    @endforeach
                                </div>
                            </div>
                            {{-- Custom Stats Editor --}}
                            <div x-data="{
                                stats: @js($sectionSettings['custom_stats'] ?? []),
                                addStat() { this.stats.push({ label: '', value: '', suffix: '+', icon: '' }) },
                                removeStat(i) { this.stats.splice(i, 1) },
                                sync() { $wire.set('sectionSettings.custom_stats', this.stats) }
                            }">
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">إحصائيات مخصصة</label>
                                <p class="text-xs text-gray-500 mb-3">أضف أرقام إضافية بجانب الإحصائيات التلقائية</p>
                                <template x-for="(stat, i) in stats" :key="i">
                                    <div class="flex items-center gap-2 mb-2">
                                        <input type="text" x-model="stat.label" @change="sync()" placeholder="الاسم (مثل: سنة خبرة)" class="flex-1 text-sm rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                                        <input type="number" x-model="stat.value" @change="sync()" placeholder="القيمة" class="w-20 text-sm rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white" dir="ltr">
                                        <input type="text" x-model="stat.suffix" @change="sync()" placeholder="+" class="w-12 text-sm rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white text-center" dir="ltr">
                                        <button type="button" @click="removeStat(i)" class="p-1.5 text-red-500 hover:bg-red-50 rounded">
                                            <svg class="w-4 h-4" 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>
                                    </div>
                                </template>
                                <button type="button" @click="addStat()" class="text-sm text-blue-600 hover:text-blue-700 font-medium flex items-center gap-1 mt-1">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                                    إضافة إحصائية
                                </button>
                            </div>
                        @endif

                        {{-- News Settings --}}
                        @if($editingSection === 'news')
                            <label class="flex items-center gap-2 cursor-pointer">
                                <input type="checkbox" wire:model="sectionSettings.show_categories" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                                <span class="text-sm text-gray-700 dark:text-gray-300">عرض فلتر التصنيفات</span>
                            </label>
                        @endif

                        {{-- Contact Settings --}}
                        @if($editingSection === 'contact')
                            <div class="grid grid-cols-2 gap-3">
                                <label class="flex items-center gap-2 cursor-pointer">
                                    <input type="checkbox" wire:model="sectionSettings.show_map" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                                    <span class="text-sm text-gray-700 dark:text-gray-300">عرض الخريطة</span>
                                </label>
                                <div>
                                    <input type="url" wire:model="sectionSettings.map_embed_url" dir="ltr" placeholder="رابط تضمين خرائط جوجل" class="w-full text-sm rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                                </div>
                            </div>
                            {{-- Contact Subjects --}}
                            <div x-data="{
                                subjects: @js($sectionSettings['subjects'] ?? []),
                                newSubject: '',
                                add() { if(this.newSubject.trim()) { this.subjects.push(this.newSubject.trim()); this.newSubject = ''; this.sync(); } },
                                remove(i) { this.subjects.splice(i, 1); this.sync(); },
                                sync() { $wire.set('sectionSettings.subjects', this.subjects) }
                            }">
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">مواضيع التواصل</label>
                                <div class="flex flex-wrap gap-2 mb-2">
                                    <template x-for="(s, i) in subjects" :key="i">
                                        <span class="inline-flex items-center gap-1 px-2.5 py-1 bg-blue-50 text-blue-700 text-xs rounded-full font-medium">
                                            <span x-text="s"></span>
                                            <button type="button" @click="remove(i)" class="hover:text-red-500">&times;</button>
                                        </span>
                                    </template>
                                </div>
                                <div class="flex gap-2">
                                    <input type="text" x-model="newSubject" @keydown.enter.prevent="add()" placeholder="أضف موضوع (مثل: استفسار عام)" class="flex-1 text-sm rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                                    <button type="button" @click="add()" class="px-3 py-1.5 text-sm bg-blue-50 text-blue-600 rounded-lg hover:bg-blue-100 font-medium">إضافة</button>
                                </div>
                            </div>
                        @endif

                        {{-- Video Section Settings --}}
                        @if($editingSection === 'video')
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">نمط العرض</label>
                                <div class="grid grid-cols-2 sm:grid-cols-4 gap-2">
                                    @foreach(['featured' => 'مميز', 'single' => 'فيديو واحد', 'grid' => 'شبكة', 'carousel' => 'تمرير'] as $vk => $vl)
                                        <label class="cursor-pointer">
                                            <input type="radio" wire:model="sectionSettings.layout" value="{{ $vk }}" class="peer sr-only">
                                            <div class="p-2.5 rounded-lg border-2 text-center text-xs font-medium transition-all
                                                        peer-checked:border-blue-500 peer-checked:bg-blue-50 dark:peer-checked:bg-blue-900/20
                                                        border-gray-200 dark:border-gray-600 hover:border-gray-300 text-gray-700 dark:text-gray-300">
                                                {{ $vl }}
                                            </div>
                                        </label>
                                    @endforeach
                                </div>
                            </div>
                            {{-- Video URL Manager --}}
                            <div x-data="{
                                videos: @js($sectionSettings['videos'] ?? []),
                                addVideo() {
                                    this.videos.push({ url: '', title: '' });
                                    this.sync();
                                },
                                removeVideo(i) {
                                    this.videos.splice(i, 1);
                                    this.sync();
                                },
                                sync() {
                                    $wire.set('sectionSettings.videos', this.videos);
                                }
                            }">
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">الفيديوهات</label>
                                <p class="text-xs text-gray-500 mb-3">أضف روابط يوتيوب أو فيميو — سيتم تضمينها تلقائياً</p>
                                <div class="space-y-2 mb-3">
                                    <template x-for="(video, i) in videos" :key="i">
                                        <div class="flex items-start gap-2 p-3 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
                                            <div class="flex-1 space-y-2">
                                                <input type="url" x-model="video.url" @change="sync()" dir="ltr"
                                                       placeholder="https://www.youtube.com/watch?v=..."
                                                       class="w-full text-sm rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white font-mono">
                                                <input type="text" x-model="video.title" @change="sync()"
                                                       placeholder="عنوان الفيديو (اختياري)"
                                                       class="w-full text-sm rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                                            </div>
                                            <button type="button" @click="removeVideo(i)" class="p-1.5 text-red-400 hover:text-red-600 hover:bg-red-50 rounded mt-1">
                                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                                            </button>
                                        </div>
                                    </template>
                                </div>
                                <button type="button" @click="addVideo()" class="w-full p-2.5 border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg text-sm text-gray-500 hover:border-blue-400 hover:text-blue-500 transition-colors flex items-center justify-center gap-2">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                                    إضافة فيديو
                                </button>
                            </div>
                            <label class="flex items-center gap-2 cursor-pointer">
                                <input type="checkbox" wire:model="sectionSettings.show_titles" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                                <span class="text-sm text-gray-700 dark:text-gray-300">إظهار عناوين الفيديوهات</span>
                            </label>
                        @endif

                        {{-- Trainers Editor --}}
                        @if($editingSection === 'trainers')
                            <div x-data="{
                                trainers: @js(json_decode($sectionSettings['trainers'] ?? '[]', true) ?? []),
                                editingTrainer: null,
                                addTrainer() {
                                    this.trainers.push({ name: '', role: '', bio: '' });
                                    this.editingTrainer = this.trainers.length - 1;
                                    this.sync();
                                },
                                removeTrainer(i) {
                                    this.trainers.splice(i, 1);
                                    if (this.editingTrainer === i) this.editingTrainer = null;
                                    this.sync();
                                },
                                moveUp(i) {
                                    if (i > 0) { [this.trainers[i-1], this.trainers[i]] = [this.trainers[i], this.trainers[i-1]]; this.sync(); }
                                },
                                moveDown(i) {
                                    if (i < this.trainers.length - 1) { [this.trainers[i], this.trainers[i+1]] = [this.trainers[i+1], this.trainers[i]]; this.sync(); }
                                },
                                sync() {
                                    $wire.set('sectionSettings.trainers', JSON.stringify(this.trainers));
                                }
                            }">
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">فريق المدربين</label>
                                <p class="text-xs text-gray-500 mb-3">أضف المدربين بالترتيب المطلوب — الصور تُرفع من <a href="{{ route('website.manage.gallery') }}" class="text-blue-500 underline">معرض الصور</a> (مجموعة team_photo)</p>

                                <div class="space-y-2 mb-3">
                                    <template x-for="(trainer, i) in trainers" :key="i">
                                        <div class="border rounded-lg overflow-hidden transition-all"
                                             :class="editingTrainer === i ? 'border-blue-300 dark:border-blue-600 bg-blue-50/50 dark:bg-blue-900/10' : 'border-gray-200 dark:border-gray-700'">
                                            <div class="flex items-center gap-2 p-3 cursor-pointer" @click="editingTrainer = editingTrainer === i ? null : i">
                                                <div class="flex flex-col gap-0.5">
                                                    <button type="button" @click.stop="moveUp(i)" class="p-0.5 text-gray-400 hover:text-gray-600 disabled:opacity-30" :disabled="i === 0">
                                                        <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="M5 15l7-7 7 7"/></svg>
                                                    </button>
                                                    <button type="button" @click.stop="moveDown(i)" class="p-0.5 text-gray-400 hover:text-gray-600 disabled:opacity-30" :disabled="i === trainers.length - 1">
                                                        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
                                                    </button>
                                                </div>
                                                <div class="w-8 h-8 rounded-full bg-gray-200 dark:bg-gray-600 flex items-center justify-center text-xs font-bold text-gray-500" x-text="i + 1"></div>
                                                <div class="flex-1 min-w-0">
                                                    <span class="text-sm font-medium text-gray-800 dark:text-gray-200" x-text="trainer.name || 'مدرب جديد'"></span>
                                                    <span class="text-xs text-gray-400 ms-2" x-text="trainer.role || ''"></span>
                                                </div>
                                                <button type="button" @click.stop="removeTrainer(i)" class="p-1 text-red-400 hover:text-red-600 hover:bg-red-50 rounded">
                                                    <svg class="w-4 h-4" 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>
                                                <svg class="w-4 h-4 text-gray-400 transition-transform" :class="editingTrainer === i ? 'rotate-180' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
                                            </div>
                                            <div x-show="editingTrainer === i" x-collapse class="p-3 pt-0 space-y-3 border-t border-gray-100 dark:border-gray-700">
                                                <div>
                                                    <label class="block text-xs text-gray-500 mb-0.5">الاسم</label>
                                                    <input type="text" x-model="trainer.name" @change="sync()" placeholder="كابتن أحمد" class="w-full text-sm rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                                                </div>
                                                <div>
                                                    <label class="block text-xs text-gray-500 mb-0.5">المسمى الوظيفي</label>
                                                    <input type="text" x-model="trainer.role" @change="sync()" placeholder="مدرب كرة قدم — فئة الناشئين" class="w-full text-sm rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                                                </div>
                                                <div>
                                                    <label class="block text-xs text-gray-500 mb-0.5">نبذة مختصرة</label>
                                                    <textarea x-model="trainer.bio" @change="sync()" rows="2" placeholder="خبرة 10 سنوات في..." class="w-full text-sm rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white"></textarea>
                                                </div>
                                            </div>
                                        </div>
                                    </template>
                                </div>

                                <button type="button" @click="addTrainer()" class="w-full p-2.5 border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg text-sm text-gray-500 hover:border-blue-400 hover:text-blue-500 transition-colors flex items-center justify-center gap-2">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                                    إضافة مدرب
                                </button>
                            </div>
                        @endif

                        {{-- Schedule Editor --}}
                        @if($editingSection === 'schedule')
                            <div x-data="{
                                rows: JSON.parse(@js($sectionSettings['schedule_data'] ?? '[]')),
                                days: ['السبت', 'الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة'],
                                addRow() {
                                    this.rows.push({ day: 'السبت', activity: '', time: '', branch: '' });
                                    this.sync();
                                },
                                removeRow(i) {
                                    this.rows.splice(i, 1);
                                    this.sync();
                                },
                                duplicateRow(i) {
                                    this.rows.splice(i + 1, 0, {...this.rows[i]});
                                    this.sync();
                                },
                                sync() {
                                    $wire.set('sectionSettings.schedule_data', JSON.stringify(this.rows));
                                }
                            }">
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">جدول المواعيد</label>
                                <p class="text-xs text-gray-500 mb-3">أضف صفوف الجدول — سيعرض على الموقع كجدول مرتب حسب اليوم</p>

                                <div class="space-y-2 mb-3 max-h-[400px] overflow-y-auto">
                                    <template x-for="(row, i) in rows" :key="i">
                                        <div class="flex items-center gap-2 p-2.5 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
                                            <select x-model="row.day" @change="sync()" class="w-24 text-xs rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                                                <template x-for="d in days"><option :value="d" x-text="d"></option></template>
                                            </select>
                                            <input type="text" x-model="row.activity" @change="sync()" placeholder="النشاط" class="flex-1 text-sm rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                                            <input type="text" x-model="row.time" @change="sync()" placeholder="4:00 - 5:30 م" dir="ltr" class="w-28 text-sm rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white text-center">
                                            <input type="text" x-model="row.branch" @change="sync()" placeholder="الفرع" class="w-24 text-sm rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                                            <button type="button" @click="duplicateRow(i)" class="p-1 text-gray-400 hover:text-blue-500" title="نسخ">
                                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
                                            </button>
                                            <button type="button" @click="removeRow(i)" class="p-1 text-red-400 hover:text-red-600">
                                                <svg class="w-4 h-4" 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>
                                        </div>
                                    </template>
                                </div>

                                <button type="button" @click="addRow()" class="w-full p-2.5 border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg text-sm text-gray-500 hover:border-blue-400 hover:text-blue-500 transition-colors flex items-center justify-center gap-2">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                                    إضافة صف جديد
                                </button>
                            </div>
                        @endif

                        {{-- Custom HTML --}}
                        @if($editingSection === 'custom_html')
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">كود HTML</label>
                                <textarea wire:model="sectionContent" rows="8" dir="ltr" class="w-full font-mono text-sm rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white focus:ring-blue-500 focus:border-blue-500" placeholder="<div>...</div>"></textarea>
                                <p class="text-xs text-amber-600 mt-1">تحذير: تأكد من أمان الكود المضاف — يُعرض كما هو</p>
                            </div>
                        @endif

                        {{-- Pricing Plan Builder --}}
                        @if($editingSection === 'pricing')
                            <div x-data="{
                                plans: JSON.parse(@js($sectionSettings['plans'] ?? '[]')),
                                editingPlan: null,
                                newFeature: '',
                                addPlan() {
                                    this.plans.push({ name: '', price: '', period: '/شهر', features: [], highlighted: false, cta: 'اشترك الآن' });
                                    this.editingPlan = this.plans.length - 1;
                                    this.sync();
                                },
                                removePlan(i) {
                                    this.plans.splice(i, 1);
                                    if (this.editingPlan === i) this.editingPlan = null;
                                    this.sync();
                                },
                                addFeature(planIdx) {
                                    if (this.newFeature.trim()) {
                                        this.plans[planIdx].features.push(this.newFeature.trim());
                                        this.newFeature = '';
                                        this.sync();
                                    }
                                },
                                removeFeature(planIdx, fIdx) {
                                    this.plans[planIdx].features.splice(fIdx, 1);
                                    this.sync();
                                },
                                sync() {
                                    $wire.set('sectionSettings.plans', JSON.stringify(this.plans));
                                }
                            }">
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">باقات الأسعار</label>

                                {{-- Plans List --}}
                                <div class="space-y-2 mb-3">
                                    <template x-for="(plan, i) in plans" :key="i">
                                        <div class="border rounded-lg overflow-hidden transition-all"
                                             :class="editingPlan === i ? 'border-blue-300 dark:border-blue-600 bg-blue-50/50 dark:bg-blue-900/10' : 'border-gray-200 dark:border-gray-700'">
                                            {{-- Plan Header --}}
                                            <div class="flex items-center gap-3 p-3 cursor-pointer" @click="editingPlan = editingPlan === i ? null : i">
                                                <div class="flex-1 min-w-0">
                                                    <span class="text-sm font-medium text-gray-800 dark:text-gray-200" x-text="plan.name || 'باقة جديدة'"></span>
                                                    <span class="text-xs text-gray-400 ms-2" x-text="plan.price ? plan.price + ' ' + plan.period : ''"></span>
                                                </div>
                                                <template x-if="plan.highlighted">
                                                    <span class="px-2 py-0.5 bg-amber-100 text-amber-700 text-[10px] font-bold rounded">مميزة</span>
                                                </template>
                                                <button type="button" @click.stop="removePlan(i)" class="p-1 text-red-400 hover:text-red-600 hover:bg-red-50 rounded">
                                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                                                </button>
                                                <svg class="w-4 h-4 text-gray-400 transition-transform" :class="editingPlan === i ? 'rotate-180' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
                                            </div>

                                            {{-- Plan Edit Form --}}
                                            <div x-show="editingPlan === i" x-collapse class="p-3 pt-0 space-y-3 border-t border-gray-100 dark:border-gray-700">
                                                <div class="grid grid-cols-2 gap-3">
                                                    <div>
                                                        <label class="block text-xs text-gray-500 mb-0.5">اسم الباقة</label>
                                                        <input type="text" x-model="plan.name" @change="sync()" placeholder="الباقة الأساسية" class="w-full text-sm rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                                                    </div>
                                                    <div>
                                                        <label class="block text-xs text-gray-500 mb-0.5">السعر</label>
                                                        <input type="text" x-model="plan.price" @change="sync()" placeholder="500 ج.م" class="w-full text-sm rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                                                    </div>
                                                </div>
                                                <div class="grid grid-cols-2 gap-3">
                                                    <div>
                                                        <label class="block text-xs text-gray-500 mb-0.5">الفترة</label>
                                                        <select x-model="plan.period" @change="sync()" class="w-full text-sm rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                                                            <option value="/شهر">/شهر</option>
                                                            <option value="/3 أشهر">/3 أشهر</option>
                                                            <option value="/6 أشهر">/6 أشهر</option>
                                                            <option value="/سنة">/سنة</option>
                                                            <option value="/حصة">/حصة</option>
                                                            <option value="">بدون فترة</option>
                                                        </select>
                                                    </div>
                                                    <div>
                                                        <label class="block text-xs text-gray-500 mb-0.5">نص الزر</label>
                                                        <input type="text" x-model="plan.cta" @change="sync()" placeholder="اشترك الآن" class="w-full text-sm rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                                                    </div>
                                                </div>
                                                <label class="flex items-center gap-2 cursor-pointer">
                                                    <input type="checkbox" x-model="plan.highlighted" @change="sync()" class="rounded border-gray-300 text-amber-600 focus:ring-amber-500">
                                                    <span class="text-xs text-gray-700 dark:text-gray-300">باقة مميزة (أكبر حجمًا)</span>
                                                </label>

                                                {{-- Features --}}
                                                <div>
                                                    <label class="block text-xs text-gray-500 mb-1">المميزات</label>
                                                    <div class="space-y-1 mb-2">
                                                        <template x-for="(feat, fi) in plan.features" :key="fi">
                                                            <div class="flex items-center gap-2">
                                                                <svg class="w-3.5 h-3.5 text-green-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                                                                <span class="flex-1 text-xs text-gray-700 dark:text-gray-300" x-text="feat"></span>
                                                                <button type="button" @click="removeFeature(i, fi)" class="text-red-400 hover:text-red-600">
                                                                    <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>
                                                            </div>
                                                        </template>
                                                    </div>
                                                    <div class="flex gap-2">
                                                        <input type="text" x-model="newFeature" @keydown.enter.prevent="addFeature(i)" placeholder="أضف ميزة..." class="flex-1 text-xs rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                                                        <button type="button" @click="addFeature(i)" class="px-2 py-1 text-xs bg-green-50 text-green-600 rounded-lg hover:bg-green-100 font-medium">+</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </template>
                                </div>

                                <button type="button" @click="addPlan()" class="w-full p-2.5 border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg text-sm text-gray-500 hover:border-blue-400 hover:text-blue-500 transition-colors flex items-center justify-center gap-2">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                                    إضافة باقة جديدة
                                </button>
                            </div>
                        @endif

                        {{-- Events Section Settings --}}
                        @if($editingSection === 'events')
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">تخطيط العرض</label>
                                <div class="grid grid-cols-5 gap-2">
                                    @foreach([
                                        'grid_2' => ['label' => 'عمودين', 'cols' => 2],
                                        'grid_3' => ['label' => '3 أعمدة', 'cols' => 3],
                                        'grid_4' => ['label' => '4 أعمدة', 'cols' => 4],
                                        'list' => ['label' => 'قائمة', 'cols' => 0],
                                        'carousel' => ['label' => 'تمرير', 'cols' => -1],
                                    ] as $layoutKey => $layoutInfo)
                                        <label class="cursor-pointer group">
                                            <input type="radio" wire:model="sectionLayout" value="{{ $layoutKey }}" class="peer sr-only">
                                            <div class="p-2 rounded-lg border-2 transition-all text-center
                                                        peer-checked:border-blue-500 peer-checked:bg-blue-50 dark:peer-checked:bg-blue-900/20
                                                        border-gray-200 dark:border-gray-600 hover:border-gray-300">
                                                <span class="text-[10px] font-medium text-gray-600 dark:text-gray-400">{{ $layoutInfo['label'] }}</span>
                                            </div>
                                        </label>
                                    @endforeach
                                </div>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">عدد الإيفنتات المعروضة</label>
                                <input type="number" wire:model="sectionSettings.max_items" min="3" max="12" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white" placeholder="6">
                            </div>
                        @endif

                        {{-- Visual Controls --}}
                        <div class="border-t border-gray-200 dark:border-gray-700 pt-5 mt-5">
                            <h4 class="flex items-center gap-2 text-sm font-semibold text-gray-700 dark:text-gray-300 mb-4">
                                <svg class="w-4 h-4 text-blue-500" 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>
                                الإعدادات المرئية
                            </h4>

                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                {{-- Background Type --}}
                                <div>
                                    <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">نوع الخلفية</label>
                                    <select wire:model.live="sectionBgType" class="w-full text-sm rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                                        <option value="inherit">افتراضي</option>
                                        <option value="solid">لون واحد</option>
                                        <option value="gradient">تدرج</option>
                                        <option value="image">صورة</option>
                                        <option value="video">فيديو</option>
                                    </select>
                                </div>

                                {{-- Animation --}}
                                <div>
                                    <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">تأثير الدخول</label>
                                    <select wire:model="sectionAnimation" class="w-full text-sm rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                                        <option value="none">بدون</option>
                                        <option value="fade-up">ظهور من الأسفل</option>
                                        <option value="fade-down">ظهور من الأعلى</option>
                                        <option value="fade-left">ظهور من اليسار</option>
                                        <option value="fade-right">ظهور من اليمين</option>
                                        <option value="zoom-in">تكبير</option>
                                        <option value="flip">انقلاب</option>
                                        <option value="bounce">ارتداد</option>
                                    </select>
                                </div>

                                {{-- Padding --}}
                                <div>
                                    <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">المسافة الداخلية</label>
                                    <select wire:model="sectionPaddingY" class="w-full text-sm rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                                        <option value="inherit">افتراضي</option>
                                        <option value="none">بدون</option>
                                        <option value="small">صغيرة</option>
                                        <option value="medium">متوسطة</option>
                                        <option value="large">كبيرة</option>
                                        <option value="xlarge">كبيرة جدًا</option>
                                    </select>
                                </div>
                            </div>

                            {{-- Background Color/Gradient Controls --}}
                            @if($sectionBgType === 'solid')
                                <div class="mt-3">
                                    <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">لون الخلفية</label>
                                    <div class="flex items-center gap-2">
                                        <input type="color" wire:model="sectionBgColor" class="w-8 h-8 rounded cursor-pointer border-0 p-0">
                                        <input type="text" wire:model="sectionBgColor" dir="ltr" class="w-28 text-sm rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                                    </div>
                                </div>
                            @endif

                            @if($sectionBgType === 'gradient')
                                <div class="mt-3 grid grid-cols-3 gap-3">
                                    <div>
                                        <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">من</label>
                                        <div class="flex items-center gap-1">
                                            <input type="color" wire:model="sectionBgGradientFrom" class="w-7 h-7 rounded cursor-pointer border-0 p-0">
                                            <input type="text" wire:model="sectionBgGradientFrom" dir="ltr" class="flex-1 text-xs rounded border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                                        </div>
                                    </div>
                                    <div>
                                        <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">إلى</label>
                                        <div class="flex items-center gap-1">
                                            <input type="color" wire:model="sectionBgGradientTo" class="w-7 h-7 rounded cursor-pointer border-0 p-0">
                                            <input type="text" wire:model="sectionBgGradientTo" dir="ltr" class="flex-1 text-xs rounded border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                                        </div>
                                    </div>
                                    <div>
                                        <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">الزاوية</label>
                                        <input type="number" wire:model="sectionBgGradientAngle" min="0" max="360" step="45" class="w-full text-sm rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                                    </div>
                                </div>
                            @endif

                            @if(in_array($sectionBgType, ['image', 'video']))
                                <div class="mt-3">
                                    <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">شفافية الطبقة المظلمة ({{ $sectionBgOverlayOpacity }}%)</label>
                                    <input type="range" wire:model.live="sectionBgOverlayOpacity" min="0" max="95" step="5" class="w-full">
                                </div>
                            @endif

                            {{-- Mobile Visibility --}}
                            <div class="mt-4">
                                <label class="flex items-center gap-2 cursor-pointer">
                                    <input type="checkbox" wire:model="sectionHiddenOnMobile" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                                    <span class="text-sm text-gray-700 dark:text-gray-300">إخفاء على الجوال</span>
                                </label>
                            </div>
                        </div>

                        {{-- Actions --}}
                        <div class="flex items-center gap-3 pt-5 mt-5 border-t border-gray-200 dark:border-gray-700">
                            <button type="submit" class="inline-flex items-center gap-2 px-6 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 font-medium text-sm transition-all shadow-sm hover:shadow-md"
                                    wire:loading.attr="disabled" wire:loading.class="opacity-70 cursor-wait" wire:target="saveSection">
                                <span wire:loading.remove wire:target="saveSection">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                                </span>
                                <span wire:loading wire:target="saveSection">
                                    <svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
                                </span>
                                <span wire:loading.remove wire:target="saveSection">حفظ التغييرات</span>
                                <span wire:loading wire:target="saveSection">جارٍ الحفظ...</span>
                            </button>
                            <button type="button" wire:click="cancelEdit" class="px-4 py-2.5 text-gray-600 dark:text-gray-400 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 text-sm transition-colors">
                                إلغاء
                            </button>
                        </div>
                    </form>
                </div>
            @else
                {{-- Empty State --}}
                <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-12 text-center">
                    <svg class="w-16 h-16 mx-auto text-gray-300 dark:text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                    </svg>
                    <h3 class="mt-4 text-lg font-medium text-gray-900 dark:text-white">اختر قسماً للتعديل</h3>
                    <p class="mt-2 text-gray-500 dark:text-gray-400 text-sm">اضغط على أي قسم من القائمة لتعديل محتواه</p>
                </div>
            @endif
        </div>
    </div>
</div>
