<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 class="mb-4 p-3 rounded-lg bg-green-50 border border-green-200 text-green-700 text-sm">
            {{ 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 $section)
                        <div class="flex items-center gap-3 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'] }}')">
                            {{-- Drag Handle --}}
                            <svg class="w-4 h-4 text-gray-400 cursor-grab" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M8 6a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm8-16a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"/>
                            </svg>

                            {{-- 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="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="block w-4 h-4 rounded-full bg-white shadow transform transition-transform {{ $section['is_enabled'] ? '-translate-x-4' : '-translate-x-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')
                            <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">شفافية الطبقة المظلمة (%)</label>
                                <input type="range" wire:model="sectionSettings.overlay_opacity" min="20" max="90" class="w-full">
                                <span class="text-xs text-gray-500">{{ $sectionSettings['overlay_opacity'] ?? 70 }}%</span>
                            </div>
                        @endif

                        @if($editingSection === 'activities' || $editingSection === 'programs')
                            <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="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-4">الإعدادات المرئية</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-4 border-t border-gray-200 dark:border-gray-700">
                            <button type="submit" class="px-6 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 font-medium text-sm transition-colors"
                                    wire:loading.attr="disabled" wire:target="saveSection">
                                <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-700 dark:text-gray-300 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>
