<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 class="mb-4 p-3 rounded-lg bg-green-50 border border-green-200 text-green-700 text-sm">
            {{ session('success') }}
        </div>
    @endif

    <form wire:submit="save" class="space-y-6">
        {{-- Colors --}}
        <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-2 md:grid-cols-4 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">اللون الرئيسي</label>
                    <div class="flex items-center gap-2">
                        <input type="color" wire:model="primary_color" class="w-10 h-10 rounded cursor-pointer border-0 p-0">
                        <input type="text" wire:model="primary_color" dir="ltr" class="flex-1 text-sm rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white" placeholder="#1e40af">
                    </div>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">اللون الثانوي</label>
                    <div class="flex items-center gap-2">
                        <input type="color" wire:model="secondary_color" class="w-10 h-10 rounded cursor-pointer border-0 p-0">
                        <input type="text" wire:model="secondary_color" dir="ltr" class="flex-1 text-sm rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white" placeholder="#f59e0b">
                    </div>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">اللون المميز</label>
                    <div class="flex items-center gap-2">
                        <input type="color" wire:model="accent_color" class="w-10 h-10 rounded cursor-pointer border-0 p-0">
                        <input type="text" wire:model="accent_color" dir="ltr" class="flex-1 text-sm rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white" placeholder="#10b981">
                    </div>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">لون النص</label>
                    <div class="flex items-center gap-2">
                        <input type="color" wire:model="text_color" class="w-10 h-10 rounded cursor-pointer border-0 p-0">
                        <input type="text" wire:model="text_color" dir="ltr" class="flex-1 text-sm rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white" placeholder="#ffffff">
                    </div>
                </div>
            </div>

            {{-- Color Preview --}}
            <div class="mt-4 p-4 rounded-lg border border-gray-200 dark:border-gray-600" style="background-color: {{ $secondary_color }}">
                <div class="flex items-center gap-3">
                    <span class="px-3 py-1 rounded text-sm font-medium" style="background-color: {{ $primary_color }}; color: {{ $text_color }}">رئيسي</span>
                    <span class="px-3 py-1 rounded text-sm font-medium" style="background-color: {{ $accent_color }}; color: {{ $text_color }}">مميز</span>
                    <span class="px-3 py-1 rounded text-sm font-medium" style="color: {{ $text_color }}; border: 1px solid {{ $text_color }}">نص</span>
                </div>
            </div>
        </div>

        {{-- Fonts --}}
        <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>
                    <select wire:model="heading_font" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                        <option value="Cairo">Cairo</option>
                        <option value="Tajawal">Tajawal</option>
                        <option value="IBM Plex Sans Arabic">IBM Plex Sans Arabic</option>
                        <option value="Noto Sans Arabic">Noto Sans Arabic</option>
                        <option value="Almarai">Almarai</option>
                        <option value="Changa">Changa</option>
                        <option value="El Messiri">El Messiri</option>
                    </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">
                        <option value="Cairo">Cairo</option>
                        <option value="Tajawal">Tajawal</option>
                        <option value="IBM Plex Sans Arabic">IBM Plex Sans Arabic</option>
                        <option value="Noto Sans Arabic">Noto Sans Arabic</option>
                        <option value="Almarai">Almarai</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>
            <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">
                    <label class="relative cursor-pointer">
                        <input type="radio" wire:model="navbar_style" value="transparent" class="sr-only peer">
                        <div class="p-3 rounded-lg border-2 peer-checked:border-blue-500 border-gray-200 dark:border-gray-600 text-center transition-colors">
                            <span class="text-sm">شفاف</span>
                        </div>
                    </label>
                    <label class="relative cursor-pointer">
                        <input type="radio" wire:model="navbar_style" value="solid" class="sr-only peer">
                        <div class="p-3 rounded-lg border-2 peer-checked:border-blue-500 border-gray-200 dark:border-gray-600 text-center transition-colors">
                            <span class="text-sm">معتم</span>
                        </div>
                    </label>
                    <label class="relative cursor-pointer">
                        <input type="radio" wire:model="navbar_style" value="floating" class="sr-only peer">
                        <div class="p-3 rounded-lg border-2 peer-checked:border-blue-500 border-gray-200 dark:border-gray-600 text-center transition-colors">
                            <span class="text-sm">عائم</span>
                        </div>
                    </label>
                </div>
            </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">
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Facebook</label>
                    <input type="url" wire:model="social_links.facebook" dir="ltr" placeholder="https://facebook.com/..." 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">Instagram</label>
                    <input type="url" wire:model="social_links.instagram" dir="ltr" placeholder="https://instagram.com/..." 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">Twitter / X</label>
                    <input type="url" wire:model="social_links.twitter" dir="ltr" placeholder="https://x.com/..." 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">YouTube</label>
                    <input type="url" wire:model="social_links.youtube" dir="ltr" placeholder="https://youtube.com/@..." 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">TikTok</label>
                    <input type="url" wire:model="social_links.tiktok" dir="ltr" placeholder="https://tiktok.com/@..." class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                </div>
            </div>
        </div>

        {{-- WhatsApp --}}
        <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>
        </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>

        {{-- Save Button --}}
        <div class="flex items-center gap-3">
            <button type="submit" class="px-8 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 font-medium transition-colors"
                    wire:loading.attr="disabled" wire:target="save">
                <span wire:loading.remove wire:target="save">حفظ الإعدادات</span>
                <span wire:loading wire:target="save">جارٍ الحفظ...</span>
            </button>
        </div>
    </form>
</div>
