<div>
    <div class="flex items-center justify-between 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>
        <a href="{{ route('website.manage.sections') }}" 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>
    </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

    <form wire:submit="save" class="space-y-6">

        {{-- Template Presets --}}
        <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">القالب</h3>
            <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">اختر قالبًا جاهزًا كنقطة بداية — يمكنك تعديل الألوان بعدها</p>
            <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
                @foreach($templatePresets as $key => $preset)
                    <button type="button" wire:click="applyTemplate('{{ $key }}')"
                            class="relative group rounded-xl border-2 transition-all text-start overflow-hidden {{ $template === $key ? 'border-blue-500 ring-2 ring-blue-200 dark:ring-blue-800' : 'border-gray-200 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500' }}">
                        {{-- Mini Mockup --}}
                        <div class="h-16 p-2 relative" style="background-color: {{ $preset['bg'] }}">
                            <div class="h-2 w-full rounded-sm mb-1.5" style="background-color: {{ $preset['primary'] }}"></div>
                            <div class="flex gap-1">
                                <div class="h-6 flex-1 rounded-sm" style="background-color: {{ $preset['surface'] }}; border: 1px solid {{ $preset['border'] }}"></div>
                                <div class="h-6 w-4 rounded-sm" style="background-color: {{ $preset['accent'] }}"></div>
                            </div>
                        </div>
                        <div class="p-2.5 border-t border-gray-100 dark:border-gray-700">
                            <div class="flex items-center gap-1.5">
                                <span class="w-3 h-3 rounded-full shrink-0" style="background-color: {{ $preset['accent'] }}"></span>
                                <span class="text-xs font-medium text-gray-700 dark:text-gray-300 truncate">{{ $preset['label'] }}</span>
                            </div>
                        </div>
                        @if($template === $key)
                            <span class="absolute top-1.5 end-1.5 w-5 h-5 bg-blue-500 rounded-full flex items-center justify-center shadow-sm">
                                <svg class="w-3 h-3 text-white" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
                            </span>
                        @endif
                    </button>
                @endforeach
            </div>
        </div>

        {{-- Colors --}}
        <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-4">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white">الألوان</h3>
                <button type="button" wire:click="generatePaletteFromAccent" class="text-xs px-3 py-1.5 bg-gray-100 dark:bg-gray-700 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors text-gray-700 dark:text-gray-300">
                    توليد تلقائي من اللون المميز
                </button>
            </div>
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                @foreach([
                    ['primary_color', 'اللون الرئيسي'],
                    ['secondary_color', 'اللون الثانوي'],
                    ['accent_color', 'اللون المميز'],
                    ['text_color', 'لون النص'],
                    ['background_color', 'لون الخلفية'],
                    ['surface_color', 'لون السطح'],
                    ['border_color', 'لون الحدود'],
                    ['muted_text_color', 'نص خافت'],
                ] as [$field, $label])
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{{ $label }}</label>
                        <div class="flex items-center gap-2">
                            <input type="color" wire:model.live="{{ $field }}" class="w-10 h-10 rounded cursor-pointer border-0 p-0">
                            <input type="text" wire:model.live="{{ $field }}" dir="ltr" class="flex-1 text-sm rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                        </div>
                    </div>
                @endforeach
            </div>

            {{-- Color Preview --}}
            <div class="mt-4 rounded-xl overflow-hidden border" style="border-color: {{ $border_color }}">
                <div class="p-4" style="background-color: {{ $background_color }}">
                    <div class="flex items-center gap-3 flex-wrap">
                        <span class="px-3 py-1.5 rounded-lg text-sm font-medium" style="background-color: {{ $primary_color }}; color: {{ $background_color }}">رئيسي</span>
                        <span class="px-3 py-1.5 rounded-lg text-sm font-medium" style="background-color: {{ $secondary_color }}; color: {{ $background_color }}">ثانوي</span>
                        <span class="px-3 py-1.5 rounded-lg text-sm font-medium" style="background-color: {{ $accent_color }}; color: #fff">مميز</span>
                        <span class="px-3 py-1.5 rounded-lg text-sm font-medium" style="background-color: {{ $surface_color }}; color: {{ $muted_text_color }}; border: 1px solid {{ $border_color }}">سطح</span>
                    </div>
                    <div class="mt-3 flex items-center gap-4">
                        <span class="text-lg font-bold" style="color: {{ $text_color }}">عنوان تجريبي</span>
                        <span class="text-sm" style="color: {{ $muted_text_color }}">نص خافت ثانوي</span>
                    </div>
                </div>
                <div class="h-1 flex">
                    <div class="flex-1" style="background-color: {{ $primary_color }}"></div>
                    <div class="flex-1" style="background-color: {{ $secondary_color }}"></div>
                    <div class="flex-1" style="background-color: {{ $accent_color }}"></div>
                </div>
            </div>
        </div>

        {{-- Typography --}}
        <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">الخطوط والنصوص</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">خط العناوين</label>
                    <select wire:model="heading_font" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                        @foreach($availableFonts as $font)
                            <option value="{{ $font }}">{{ $font }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">خط النصوص</label>
                    <select wire:model="body_font" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                        @foreach($availableFonts as $font)
                            <option value="{{ $font }}">{{ $font }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">حجم الخط</label>
                    <select wire:model="font_size_scale" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                        <option value="small">صغير</option>
                        <option value="medium">متوسط</option>
                        <option value="large">كبير</option>
                        <option value="xlarge">كبير جدًا</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">وزن العنوان</label>
                    <select wire:model="heading_weight" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                        <option value="400">عادي (400)</option>
                        <option value="500">متوسط (500)</option>
                        <option value="600">شبه عريض (600)</option>
                        <option value="700">عريض (700)</option>
                        <option value="800">أعرض (800)</option>
                        <option value="900">أسود (900)</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">ارتفاع السطر</label>
                    <select wire:model="line_height" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                        <option value="tight">ضيق</option>
                        <option value="normal">عادي</option>
                        <option value="relaxed">مريح</option>
                        <option value="loose">واسع</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">تباعد الحروف</label>
                    <select wire:model="letter_spacing" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                        <option value="tight">ضيق</option>
                        <option value="normal">عادي</option>
                        <option value="wide">واسع</option>
                    </select>
                </div>
            </div>
        </div>

        {{-- Spacing & Density --}}
        <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">المسافات والكثافة</h3>
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">كثافة المحتوى</label>
                <div class="grid grid-cols-3 gap-3">
                    @foreach([
                        ['compact', 'مضغوط', 'عناصر متقاربة', 'gap-0.5'],
                        ['comfortable', 'مريح', 'التوازن الافتراضي', 'gap-1.5'],
                        ['spacious', 'واسع', 'مساحات كبيرة', 'gap-3'],
                    ] as [$val, $label, $desc, $gapClass])
                        <label class="relative cursor-pointer">
                            <input type="radio" wire:model="density" value="{{ $val }}" class="sr-only peer">
                            <div class="p-4 rounded-lg border-2 peer-checked:border-blue-500 peer-checked:bg-blue-50 dark:peer-checked:bg-blue-900/20 border-gray-200 dark:border-gray-600 text-center transition-all hover:border-gray-300">
                                <div class="flex flex-col items-center {{ $gapClass }} mb-2">
                                    <div class="w-8 h-1.5 rounded-full bg-gray-300 dark:bg-gray-500"></div>
                                    <div class="w-6 h-1.5 rounded-full bg-gray-200 dark:bg-gray-600"></div>
                                    <div class="w-8 h-1.5 rounded-full bg-gray-300 dark:bg-gray-500"></div>
                                </div>
                                <span class="text-sm font-medium block text-gray-700 dark:text-gray-300">{{ $label }}</span>
                                <span class="text-xs text-gray-400 dark:text-gray-500">{{ $desc }}</span>
                            </div>
                        </label>
                    @endforeach
                </div>
            </div>
        </div>

        {{-- Shapes & Borders --}}
        <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">الأشكال والحدود</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">زوايا العناصر</label>
                    <div class="grid grid-cols-4 gap-2">
                        @foreach([
                            ['sharp', 'حاد', 'rounded-none'],
                            ['subtle', 'خفيف', 'rounded-sm'],
                            ['rounded', 'دائري', 'rounded-xl'],
                            ['pill', 'كبسولة', 'rounded-full'],
                        ] as [$val, $label, $class])
                            <label class="cursor-pointer">
                                <input type="radio" wire:model="border_radius_preset" value="{{ $val }}" class="sr-only peer">
                                <div class="p-3 rounded-lg border-2 peer-checked:border-blue-500 peer-checked:bg-blue-50 dark:peer-checked:bg-blue-900/20 border-gray-200 dark:border-gray-600 text-center transition-all hover:border-gray-300">
                                    <div class="w-10 h-7 mx-auto bg-gradient-to-br from-blue-200 to-blue-300 dark:from-blue-700 dark:to-blue-800 {{ $class }} mb-1.5"></div>
                                    <span class="text-xs font-medium block text-gray-600 dark:text-gray-400">{{ $label }}</span>
                                </div>
                            </label>
                        @endforeach
                    </div>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">نمط البطاقات</label>
                    <div class="grid grid-cols-4 gap-2">
                        @foreach([
                            ['flat', 'مسطح', 'bg-gray-50 dark:bg-gray-700'],
                            ['raised', 'مرتفع', 'bg-white dark:bg-gray-700 shadow-md'],
                            ['bordered', 'محدد', 'bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-500'],
                            ['glass', 'زجاجي', 'bg-white/50 dark:bg-gray-700/50 backdrop-blur-sm border border-white/30'],
                        ] as [$val, $label, $cardClass])
                            <label class="cursor-pointer">
                                <input type="radio" wire:model="card_style" value="{{ $val }}" class="sr-only peer">
                                <div class="p-3 rounded-lg border-2 peer-checked:border-blue-500 peer-checked:bg-blue-50 dark:peer-checked:bg-blue-900/20 border-gray-200 dark:border-gray-600 text-center transition-all hover:border-gray-300">
                                    <div class="w-10 h-7 mx-auto rounded {{ $cardClass }} mb-1.5"></div>
                                    <span class="text-xs font-medium block text-gray-600 dark:text-gray-400">{{ $label }}</span>
                                </div>
                            </label>
                        @endforeach
                    </div>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">الفاصل بين الأقسام</label>
                    <select wire:model="section_divider" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                        <option value="none">بدون</option>
                        <option value="line">خط</option>
                        <option value="wave">موجة</option>
                        <option value="angle">زاوية</option>
                        <option value="curve">منحنى</option>
                    </select>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">شكل الصور</label>
                    <select wire:model="image_shape" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                        <option value="square">مربع</option>
                        <option value="rounded">مستدير</option>
                        <option value="circle">دائري</option>
                        <option value="blob">عضوي</option>
                    </select>
                </div>
            </div>
        </div>

        {{-- Animations --}}
        <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">الحركة والتأثيرات</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="flex items-center gap-3 cursor-pointer">
                        <input type="checkbox" wire:model="animations_enabled" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">تفعيل الرسوم المتحركة</span>
                    </label>
                    <p class="text-xs text-gray-400 mt-1 ms-8">تأثيرات الظهور عند التمرير</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">سرعة التأثيرات</label>
                    <select wire:model="animation_speed" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white" @if(!$animations_enabled) disabled @endif>
                        <option value="slow">بطيء</option>
                        <option value="normal">عادي</option>
                        <option value="fast">سريع</option>
                    </select>
                </div>
            </div>
        </div>

        {{-- Navbar Style --}}
        <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">شريط التنقل</h3>

            {{-- Navbar Style Picker --}}
            <div class="grid grid-cols-5 gap-3 mb-6">
                @foreach([
                    ['transparent', 'شفاف', 'bg-transparent border border-dashed border-gray-300 dark:border-gray-500'],
                    ['solid', 'معتم', 'bg-gray-800 dark:bg-gray-900'],
                    ['floating', 'عائم', 'bg-gray-800/70 dark:bg-gray-900/70 rounded-lg mx-1 backdrop-blur-sm'],
                    ['centered', 'مركزي', 'bg-gray-800 dark:bg-gray-900 flex items-center justify-center'],
                    ['minimal', 'بسيط', 'bg-transparent border-b border-gray-200 dark:border-gray-600'],
                ] as [$val, $label, $navClass])
                    <label class="relative cursor-pointer">
                        <input type="radio" wire:model="navbar_style" value="{{ $val }}" class="sr-only peer">
                        <div class="p-3 rounded-lg border-2 peer-checked:border-blue-500 peer-checked:bg-blue-50 dark:peer-checked:bg-blue-900/20 border-gray-200 dark:border-gray-600 text-center transition-all hover:border-gray-300">
                            <div class="w-full h-10 bg-gradient-to-b from-gray-200 to-gray-100 dark:from-gray-700 dark:to-gray-800 rounded relative mb-1.5 overflow-hidden">
                                <div class="absolute top-0 inset-x-0 h-2.5 {{ $navClass }}"></div>
                            </div>
                            <span class="text-[10px] font-medium text-gray-600 dark:text-gray-400">{{ $label }}</span>
                        </div>
                    </label>
                @endforeach
            </div>

            {{-- Navbar Extra Options --}}
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 pt-4 border-t border-gray-100 dark:border-gray-700">
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">نص زر CTA</label>
                    <input type="text" wire:model="navbar_cta_text" placeholder="سجّل الآن" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white text-sm">
                    <p class="text-xs text-gray-400 mt-1">اتركه فارغًا لإخفاء الزر</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">رابط زر CTA</label>
                    <input type="text" wire:model="navbar_cta_link" dir="ltr" placeholder="#section-contact" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white text-sm">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">موضع الشعار</label>
                    <select wire:model="navbar_logo_position" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white text-sm">
                        <option value="start">البداية (الافتراضي)</option>
                        <option value="center">المنتصف</option>
                        <option value="end">النهاية</option>
                    </select>
                </div>
                <div class="flex items-center">
                    <label class="flex items-center gap-3 cursor-pointer">
                        <input type="checkbox" wire:model="navbar_show_social" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">عرض أيقونات التواصل في الشريط</span>
                    </label>
                </div>
            </div>
        </div>

        {{-- Footer Builder --}}
        <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6" x-data="footerBuilder(@js($footer_blocks))">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">تذييل الصفحة</h3>

            {{-- Footer Style --}}
            <div class="grid grid-cols-4 gap-3 mb-6">
                @foreach([
                    ['dark', 'داكن', 'bg-gray-900'],
                    ['light', 'فاتح', 'bg-gray-100 border border-gray-200'],
                    ['accent', 'ملون', 'bg-blue-900'],
                    ['transparent', 'شفاف', 'bg-transparent border border-dashed border-gray-300'],
                ] as [$val, $label, $ftClass])
                    <label class="cursor-pointer">
                        <input type="radio" wire:model="footer_style" value="{{ $val }}" class="sr-only peer">
                        <div class="p-3 rounded-lg border-2 peer-checked:border-blue-500 peer-checked:bg-blue-50 dark:peer-checked:bg-blue-900/20 border-gray-200 dark:border-gray-600 text-center transition-all hover:border-gray-300">
                            <div class="w-full h-8 rounded {{ $ftClass }} mb-1.5 flex items-end justify-center p-1">
                                <div class="flex gap-0.5">
                                    <div class="w-2 h-1 bg-gray-400 rounded-sm"></div>
                                    <div class="w-2 h-1 bg-gray-400 rounded-sm"></div>
                                    <div class="w-2 h-1 bg-gray-400 rounded-sm"></div>
                                </div>
                            </div>
                            <span class="text-[10px] font-medium text-gray-600 dark:text-gray-400">{{ $label }}</span>
                        </div>
                    </label>
                @endforeach
            </div>

            {{-- Footer Columns --}}
            <div class="mb-6">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">عدد الأعمدة</label>
                <div class="flex items-center gap-4">
                    @foreach([2, 3, 4] as $cols)
                        <label class="cursor-pointer">
                            <input type="radio" wire:model="footer_columns" value="{{ $cols }}" class="sr-only peer">
                            <div class="px-5 py-2.5 rounded-lg border-2 peer-checked:border-blue-500 peer-checked:bg-blue-50 dark:peer-checked:bg-blue-900/20 border-gray-200 dark:border-gray-600 transition-all hover:border-gray-300">
                                <div class="flex gap-1 mb-1">
                                    @for($i = 0; $i < $cols; $i++)
                                        <div class="w-3 h-4 bg-gray-300 dark:bg-gray-500 rounded-sm"></div>
                                    @endfor
                                </div>
                                <span class="text-[10px] font-medium text-gray-500">{{ $cols }} أعمدة</span>
                            </div>
                        </label>
                    @endforeach
                </div>
            </div>

            {{-- Footer Blocks Builder --}}
            <div class="mb-6">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">أقسام التذييل</label>
                <p class="text-xs text-gray-400 mb-3">أضف وأعِد ترتيب الأقسام التي تظهر في التذييل</p>

                <div class="space-y-2 mb-3">
                    <template x-for="(block, index) in blocks" :key="index">
                        <div class="flex items-center gap-2 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg border border-gray-200 dark:border-gray-600">
                            <svg class="w-4 h-4 text-gray-400 cursor-grab shrink-0" 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>
                            <span class="flex-1 text-sm font-medium text-gray-700 dark:text-gray-300" x-text="blockLabels[block.type] || block.type"></span>
                            <button type="button" @click="removeBlock(index)" class="text-red-400 hover:text-red-600 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 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>
                            <button type="button" @click="moveUp(index)" :disabled="index === 0" class="text-gray-400 hover:text-gray-600 disabled:opacity-30">
                                <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 15l7-7 7 7"/></svg>
                            </button>
                            <button type="button" @click="moveDown(index)" :disabled="index === blocks.length - 1" class="text-gray-400 hover:text-gray-600 disabled:opacity-30">
                                <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 9l-7 7-7-7"/></svg>
                            </button>
                        </div>
                    </template>
                </div>

                <div class="flex flex-wrap gap-2">
                    @foreach([
                        ['about', 'نبذة عنا'],
                        ['links', 'روابط سريعة'],
                        ['contact', 'تواصل معنا'],
                        ['social', 'التواصل الاجتماعي'],
                        ['hours', 'ساعات العمل'],
                    ] as [$type, $label])
                        <button type="button" @click="addBlock('{{ $type }}')"
                                class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 text-xs font-medium transition-colors">
                            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                            {{ $label }}
                        </button>
                    @endforeach
                </div>

                <input type="hidden" x-ref="blocksInput" wire:model="footer_blocks" :value="JSON.stringify(blocks)">
            </div>

            {{-- Footer Bottom Text --}}
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">نص أسفل التذييل</label>
                <input type="text" wire:model="footer_bottom_text" placeholder="جميع الحقوق محفوظة © 2026 اسم الأكاديمية" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white text-sm">
                <p class="text-xs text-gray-400 mt-1">اتركه فارغًا لاستخدام النص الافتراضي</p>
            </div>
        </div>

        {{-- Social Links --}}
        <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">روابط التواصل الاجتماعي</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                @foreach([
                    ['facebook', 'Facebook', 'https://facebook.com/...'],
                    ['instagram', 'Instagram', 'https://instagram.com/...'],
                    ['twitter', 'Twitter / X', 'https://x.com/...'],
                    ['youtube', 'YouTube', 'https://youtube.com/@...'],
                    ['tiktok', 'TikTok', 'https://tiktok.com/@...'],
                ] as [$key, $label, $placeholder])
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{{ $label }}</label>
                        <input type="url" wire:model="social_links.{{ $key }}" dir="ltr" placeholder="{{ $placeholder }}" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                    </div>
                @endforeach
            </div>
        </div>

        {{-- WhatsApp & Site Info --}}
        <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">معلومات الموقع</h3>
            <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="whatsapp_number" dir="ltr" placeholder="+201012345678" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                    <p class="text-xs text-gray-500 mt-1">سيظهر زر واتساب عائم في الموقع</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">عنوان الموقع</label>
                    <input type="text" wire:model="site_title" placeholder="اسم الأكاديمية" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                </div>
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">وصف الموقع</label>
                    <textarea wire:model="site_description" rows="2" placeholder="وصف قصير للموقع..." class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white"></textarea>
                </div>
            </div>
        </div>

        {{-- Announcement Bar --}}
        <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
                <svg class="w-5 h-5 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z"/></svg>
                شريط الإعلانات
            </h3>
            <div class="space-y-4">
                <label class="flex items-center gap-2 cursor-pointer">
                    <input type="checkbox" wire:model="announcement_bar.enabled" 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 class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">نص الإعلان</label>
                        <input type="text" wire:model="announcement_bar.text" placeholder="عرض خاص — خصم 20% على التسجيل!" 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 font-medium text-gray-600 dark:text-gray-400 mb-1">رابط (اختياري)</label>
                        <input type="url" wire:model="announcement_bar.link" dir="ltr" placeholder="https://..." 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 md:grid-cols-4 gap-4">
                    <div>
                        <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="announcement_bar.bg_color" class="w-7 h-7 rounded cursor-pointer border-0 p-0">
                            <input type="text" wire:model="announcement_bar.bg_color" 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-2">
                            <input type="color" wire:model="announcement_bar.text_color" class="w-7 h-7 rounded cursor-pointer border-0 p-0">
                            <input type="text" wire:model="announcement_bar.text_color" 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="date" wire:model="announcement_bar.show_until" dir="ltr" class="w-full text-sm rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                    </div>
                    <div class="flex items-end">
                        <label class="flex items-center gap-2 cursor-pointer">
                            <input type="checkbox" wire:model="announcement_bar.dismissible" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                            <span class="text-xs text-gray-700 dark:text-gray-300">قابل للإغلاق</span>
                        </label>
                    </div>
                </div>
            </div>
        </div>

        {{-- Floating Elements --}}
        <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
                <svg class="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"/></svg>
                العناصر العائمة
            </h3>
            <div class="space-y-5">
                {{-- WhatsApp --}}
                <div class="p-4 rounded-lg border border-gray-100 dark:border-gray-700 bg-gray-50 dark:bg-gray-750">
                    <label class="flex items-center gap-2 cursor-pointer mb-3">
                        <input type="checkbox" wire:model="floating_elements.whatsapp.enabled" class="rounded border-gray-300 text-green-600 focus:ring-green-500">
                        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">زر واتساب</span>
                    </label>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                        <div>
                            <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">رقم واتساب (إن مختلف عن الرئيسي)</label>
                            <input type="text" wire:model="floating_elements.whatsapp.number" dir="ltr" placeholder="01XXXXXXXXX" 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 font-medium text-gray-600 dark:text-gray-400 mb-1">رسالة ترحيبية</label>
                            <input type="text" wire:model="floating_elements.whatsapp.message" placeholder="مرحبا، أريد الاستفسار عن..." class="w-full text-sm rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                        </div>
                    </div>
                </div>

                {{-- Scroll to Top --}}
                <label class="flex items-center gap-2 cursor-pointer">
                    <input type="checkbox" wire:model="floating_elements.scroll_to_top.enabled" 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>

                {{-- Custom Button --}}
                <div class="p-4 rounded-lg border border-gray-100 dark:border-gray-700 bg-gray-50 dark:bg-gray-750">
                    <label class="flex items-center gap-2 cursor-pointer mb-3">
                        <input type="checkbox" wire:model="floating_elements.custom_button.enabled" class="rounded border-gray-300 text-purple-600 focus:ring-purple-500">
                        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">زر مخصص</span>
                    </label>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
                        <div>
                            <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">النص</label>
                            <input type="text" wire:model="floating_elements.custom_button.text" 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 font-medium text-gray-600 dark:text-gray-400 mb-1">الرابط</label>
                            <input type="url" wire:model="floating_elements.custom_button.url" dir="ltr" placeholder="tel:+20..." 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 font-medium text-gray-600 dark:text-gray-400 mb-1">اللون</label>
                            <div class="flex items-center gap-2">
                                <input type="color" wire:model="floating_elements.custom_button.color" class="w-7 h-7 rounded cursor-pointer border-0 p-0">
                                <input type="text" wire:model="floating_elements.custom_button.color" 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>
                </div>
            </div>
        </div>

        {{-- Popup Modal --}}
        <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
                <svg class="w-5 h-5 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/></svg>
                النافذة المنبثقة (Popup)
            </h3>
            <div class="space-y-4">
                <label class="flex items-center gap-2 cursor-pointer">
                    <input type="checkbox" wire:model="popup_config.enabled" class="rounded border-gray-300 text-purple-600 focus:ring-purple-500">
                    <span class="text-sm text-gray-700 dark:text-gray-300">تفعيل النافذة المنبثقة</span>
                </label>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">العنوان</label>
                        <input type="text" wire:model="popup_config.title" 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 font-medium text-gray-600 dark:text-gray-400 mb-1">رابط الصورة (اختياري)</label>
                        <input type="url" wire:model="popup_config.image_url" dir="ltr" placeholder="https://..." class="w-full text-sm rounded-lg 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>
                    <textarea wire:model="popup_config.body" rows="2" placeholder="سجّل الآن واحصل على..." class="w-full text-sm rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white"></textarea>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div>
                        <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">نص الزر</label>
                        <input type="text" wire:model="popup_config.cta_text" 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 font-medium text-gray-600 dark:text-gray-400 mb-1">رابط الزر</label>
                        <input type="url" wire:model="popup_config.cta_url" dir="ltr" placeholder="https://..." 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 font-medium text-gray-600 dark:text-gray-400 mb-1">لون الزر</label>
                        <div class="flex items-center gap-2">
                            <input type="color" wire:model="popup_config.cta_color" class="w-7 h-7 rounded cursor-pointer border-0 p-0">
                            <input type="text" wire:model="popup_config.cta_color" 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>
                <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
                    <div>
                        <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">تأخير الظهور (ثوانٍ)</label>
                        <input type="number" wire:model="popup_config.delay_seconds" min="1" max="30" dir="ltr" class="w-full text-sm rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white" placeholder="3">
                    </div>
                    <div class="flex items-end">
                        <label class="flex items-center gap-2 cursor-pointer">
                            <input type="checkbox" wire:model="popup_config.show_once" class="rounded border-gray-300 text-purple-600 focus:ring-purple-500">
                            <span class="text-xs text-gray-700 dark:text-gray-300">مرة واحدة فقط</span>
                        </label>
                    </div>
                </div>
            </div>
        </div>

        {{-- Analytics --}}
        <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">التحليلات</h3>
            <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">Google Analytics ID</label>
                    <input type="text" wire:model="google_analytics_id" dir="ltr" placeholder="G-XXXXXXXXXX" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Facebook Pixel ID</label>
                    <input type="text" wire:model="facebook_pixel_id" dir="ltr" placeholder="123456789" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                </div>
            </div>
        </div>

        {{-- Custom CSS --}}
        <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">CSS مخصص</h3>
            <textarea wire:model="custom_css" dir="ltr" rows="6" placeholder="/* أضف تنسيقاتك هنا */" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white font-mono text-sm"></textarea>
            <p class="text-xs text-gray-500 mt-1">سيتم حقن هذا الكود مباشرة في صفحة الموقع</p>
        </div>

        {{-- Save Button --}}
        <div class="flex items-center justify-between sticky bottom-4 bg-white dark:bg-gray-800 p-4 rounded-xl border border-gray-200 dark:border-gray-700 shadow-xl">
            <div class="flex items-center gap-3">
                <button type="submit" class="inline-flex items-center gap-2 px-8 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 font-medium transition-all shadow-sm hover:shadow-md"
                        wire:loading.attr="disabled" wire:loading.class="opacity-70 cursor-wait" wire:target="save">
                    <span wire:loading wire:target="save">
                        <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="save">حفظ الإعدادات</span>
                    <span wire:loading wire:target="save">جارٍ الحفظ...</span>
                </button>
                <a href="{{ route('website.manage.preview') }}" target="_blank" class="inline-flex items-center gap-1.5 px-4 py-3 text-sm font-medium text-gray-700 dark:text-gray-300 rounded-lg border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700 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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
                    معاينة
                </a>
            </div>
            <span class="text-xs text-gray-400 dark:text-gray-500 hidden sm:block">التغييرات تظهر مباشرة بعد الحفظ</span>
        </div>
    </form>
</div>

@script
<script>
Alpine.data('footerBuilder', (initialBlocks) => ({
    blocks: initialBlocks || [],
    blockLabels: {
        about: 'نبذة عنا',
        links: 'روابط سريعة',
        contact: 'تواصل معنا',
        social: 'التواصل الاجتماعي',
        hours: 'ساعات العمل',
    },
    addBlock(type) {
        this.blocks.push({ type, title: '' });
        this.sync();
    },
    removeBlock(index) {
        this.blocks.splice(index, 1);
        this.sync();
    },
    moveUp(index) {
        if (index === 0) return;
        [this.blocks[index - 1], this.blocks[index]] = [this.blocks[index], this.blocks[index - 1]];
        this.sync();
    },
    moveDown(index) {
        if (index === this.blocks.length - 1) return;
        [this.blocks[index], this.blocks[index + 1]] = [this.blocks[index + 1], this.blocks[index]];
        this.sync();
    },
    sync() {
        this.$wire.set('footer_blocks', JSON.parse(JSON.stringify(this.blocks)));
    },
}));
</script>
@endscript
