{{-- resources/views/superadmin/settings/index.blade.php --}}
@extends('layouts.superadmin')

@section('title', 'إعدادات النظام')

@section('content')
<div class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800 px-3 sm:px-4 lg:px-8 py-4 sm:py-6" dir="rtl">
    <div class="max-w-6xl mx-auto">
        <!-- رأس الصفحة -->
        <div class="mb-6 sm:mb-8">
            <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 sm:gap-4">
                <div>
                    <h1 class="text-2xl sm:text-3xl lg:text-4xl font-bold mb-2">
                        <span class="bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 bg-clip-text text-transparent">
                            إعدادات النظام
                        </span>
                    </h1>
                    <p class="text-sm sm:text-base text-gray-600 dark:text-gray-400">
                        التحكم في إعدادات وخصائص المنصة
                    </p>
                </div>
                <div class="hidden sm:flex items-center gap-2 px-3 py-2 bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
                    <svg class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                    <span class="text-xs text-gray-600 dark:text-gray-400">آخر تحديث: {{ now()->format('d/m/Y H:i') }}</span>
                </div>
            </div>
        </div>

        @if(session('success'))
            <div class="mb-4 bg-green-50 dark:bg-green-900/20 border-r-4 border-green-500 text-green-900 dark:text-green-200 p-3 sm:p-4 rounded-lg flex items-start gap-3 shadow-lg animate-slide-down">
                <svg class="w-5 h-5 flex-shrink-0 mt-0.5" 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>
                <span class="font-medium text-sm sm:text-base flex-1">{{ session('success') }}</span>
            </div>
        @endif

        @if(session('error'))
            <div class="mb-4 bg-red-50 dark:bg-red-900/20 border-r-4 border-red-500 text-red-900 dark:text-red-200 p-3 sm:p-4 rounded-lg flex items-start gap-3 shadow-lg animate-slide-down">
                <svg class="w-5 h-5 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
                </svg>
                <span class="font-medium text-sm sm:text-base flex-1">{{ session('error') }}</span>
            </div>
        @endif

        <form action="{{ route('superadmin.settings.update') }}" method="POST" enctype="multipart/form-data" class="space-y-4 sm:space-y-6">
            @csrf
{{-- 🧠 مساعد الكتابة و فحص الإملاء (تجريبي) --}}
<div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl border border-gray-200 dark:border-gray-700 overflow-hidden transform transition-all duration-300 hover:shadow-2xl">
    <div class="bg-gradient-to-r from-indigo-600 via-purple-600 to-sky-600 p-4 sm:p-5">
        <h2 class="text-lg sm:text-xl font-bold text-white flex items-center gap-2">
            <svg class="w-5 h-5 sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M12 20l9-16H3l9 16zm0 0v-8"/>
            </svg>
            مساعد الكتابة و فحص الإملاء (تجريبي)
        </h2>
        <p class="mt-1 text-xs sm:text-sm text-indigo-100 max-w-2xl">
            أداة مساعدة داخلية لفحص الأخطاء الإملائية الشائعة في النصوص العربية، واقتراح تصحيحاتها، مع درجة تقريبية لجودة الإملاء.
        </p>
    </div>

    <div class="p-4 sm:p-6 space-y-4">
        {{-- حقل الإدخال --}}
        <div>
            <label for="ai-spell-text" class="block text-sm font-semibold text-gray-800 dark:text-gray-200 mb-1">
                نص للتجربة / الصياغة
            </label>
            <textarea id="ai-spell-text"
                      rows="4"
                      class="w-full rounded-xl border-2 border-gray-200 dark:border-gray-700 dark:bg-gray-900 px-3 py-2 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all"
                      placeholder="اكتب هنا جملة أو فقرة لتجربة فحص الإملاء واقتراحات التصحيح..."></textarea>
            <p class="mt-1 text-[11px] text-gray-500 dark:text-gray-400">
                لن يتم حفظ هذا النص في قاعدة البيانات؛ هذه الأداة للاستخدام السريع فقط.
            </p>
        </div>

        {{-- زر الفحص + الدرجة --}}
        <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-2">
            <button type="button"
                    onclick="paAIspellCheck()"
                    class="inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-indigo-600 hover:bg-indigo-700 text-white text-xs sm:text-sm font-semibold shadow-md hover:shadow-lg transition-all">
                <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 10l4.553-2.276A1 1 0 0121 8.618V15.5a1 1 0 01-.553.894L15 18M4 6h9M4 10h9M4 14h5"/>
                </svg>
                فحص الأخطاء الإملائية الآن
            </button>

            <div class="text-xs sm:text-sm text-gray-700 dark:text-gray-200">
                درجة الإملاء:
                <span id="ai-spell-score" class="font-semibold text-indigo-600 dark:text-indigo-300">—</span>
            </div>
        </div>

        {{-- النتائج / الاقتراحات --}}
        <div id="ai-spell-result"
             class="hidden mt-2 rounded-xl border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/60 p-3 text-xs sm:text-sm text-gray-800 dark:text-gray-100 space-y-2">
        </div>

        {{-- تلميح صغير عن المنطق --}}
        <div class="mt-2 text-[11px] text-gray-500 dark:text-gray-400 flex items-start gap-2">
            <svg class="w-4 h-4 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M13 16h-1v-4h-1m1-4h.01M12 2a10 10 0 100 20 10 10 0 000-20z"/>
            </svg>
            <span>
                حالياً يعتمد الفحص على قائمة أخطاء شائعة معدّة يدويًا (يمكن تطويرها لاحقاً أو ربطها بمحرك ذكاء اصطناعي خارجي لتحليل أعمق للنحو والأسلوب).
            </span>
        </div>
    </div>
</div>

            <!-- إعدادات المظهر -->
            <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl border border-gray-200 dark:border-gray-700 overflow-hidden transform transition-all duration-300 hover:shadow-2xl">
                <div class="bg-gradient-to-r from-blue-500 via-blue-600 to-purple-600 p-4 sm:p-5">
                    <h2 class="text-lg sm:text-xl font-bold text-white flex items-center gap-2">
                        <svg class="w-5 h-5 sm:w-6 sm:h-6" 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>
                        إعدادات المظهر
                    </h2>
                </div>

                <div class="p-4 sm:p-6 space-y-5">
                    <!-- اسم الموقع -->
                    <div>
                        <label class="block text-sm font-bold text-gray-700 dark:text-gray-300 mb-2">
                            اسم الموقع
                        </label>
                        <input type="text" name="site_name" 
                            value="{{ old('site_name', isset($settings['appearance']) ? $settings['appearance']->where('key', 'site_name')->first()->value ?? '' : '') }}"
                            class="w-full px-4 py-3 border-2 border-gray-300 dark:border-gray-600 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white transition-all text-sm sm:text-base"
                            placeholder="نظام  فريق الوفاء الذهبي">
                    </div>

                    <!-- شعار الموقع -->
                  <div>
                        <label class="block text-sm font-bold text-gray-700 dark:text-gray-300 mb-3">
                            شعار الموقع
                        </label>
                        
                        @php
                            $currentLogo = isset($settings['appearance']) ? $settings['appearance']->where('key', 'site_logo')->first()->value ?? null : null;
                        @endphp

                        @if($currentLogo)
                            <div class="mb-4 flex flex-col sm:flex-row items-start sm:items-center gap-4 p-4 bg-gradient-to-r from-gray-50 to-blue-50 dark:from-gray-700/50 dark:to-blue-900/20 rounded-xl border-2 border-gray-200 dark:border-gray-600">
                                <img src="{{ asset('storage/' . $currentLogo) }}" 
                                    alt="Site Logo" 
                                    class="h-16 w-16 sm:h-20 sm:w-20 object-contain rounded-xl border-2 border-white dark:border-gray-700 shadow-lg">
                                <div class="flex-1">
                                    <p class="text-sm font-medium text-gray-700 dark:text-gray-300">الشعار الحالي</p>
                                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">الشعار المستخدم حالياً في النظام</p>
                                </div>
                                <button type="button" 
                                        onclick="deleteLogo()"
                                        class="w-full sm:w-auto px-4 py-2 bg-red-500 hover:bg-red-600 text-white rounded-lg transition-all flex items-center justify-center gap-2 text-sm font-medium shadow-md hover:shadow-lg">
                                    <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>
                        @endif

                        <input type="file" name="site_logo" accept="image/*" id="logo-upload" class="hidden">
                        <button type="button" 
                                onclick="document.getElementById('logo-upload').click()"
                                class="w-full px-4 py-4 border-3 border-dashed border-gray-300 dark:border-gray-600 rounded-xl hover:border-blue-500 dark:hover:border-blue-500 hover:bg-blue-50 dark:hover:bg-blue-900/20 transition-all text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 flex flex-col sm:flex-row items-center justify-center gap-3 text-sm sm:text-base group">
                            <svg class="w-8 h-8 sm:w-10 sm:h-10 group-hover:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/>
                            </svg>
                            <div class="text-center sm:text-right">
                                <span id="logo-text" class="font-medium block">اختر شعار جديد</span>
                                <span class="text-xs opacity-75">PNG, JPG, SVG - حد أقصى 2 ميجابايت</span>
                            </div>
                        </button>
                    </div> 
                </div>
            </div>
            {{-- في أي مكان مناسب في صفحة الإعدادات --}}
<div class="bg-white rounded-2xl shadow-lg overflow-hidden border border-gray-200">
    <div class="bg-gradient-to-r from-indigo-500 to-indigo-600 p-6">
        <div class="flex items-center gap-3">
            <div class="bg-white/20 p-3 rounded-xl">
                <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
                </svg>
            </div>
            <div class="text-white">
                <h3 class="text-xl font-bold">أمان تسجيل الدخول</h3>
                <p class="text-sm text-indigo-100">إدارة محاولات تسجيل الدخول وطلبات إعادة التعيين</p>
            </div>
        </div>
    </div>

    <div class="p-6">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <a href="{{ route('superadmin.settings.login-security') }}" 
               class="flex items-center justify-between p-4 bg-gradient-to-r from-blue-50 to-blue-100 rounded-xl hover:from-blue-100 hover:to-blue-200 transition-all group">
                <div class="flex items-center gap-3">
                    <div class="bg-blue-600 p-2 rounded-lg group-hover:scale-110 transition-transform">
                        <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                        </svg>
                    </div>
                    <div>
                        <p class="font-semibold text-gray-900">إعدادات الأمان</p>
                        <p class="text-sm text-gray-600">تخصيص عدد المحاولات والرسائل</p>
                    </div>
                </div>
                <svg class="w-5 h-5 text-blue-600 group-hover:translate-x-1 transition-transform" 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>
            </a>

            <a href="{{ route('superadmin.password-reset-requests.index') }}" 
               class="flex items-center justify-between p-4 bg-gradient-to-r from-purple-50 to-purple-100 rounded-xl hover:from-purple-100 hover:to-purple-200 transition-all group">
                <div class="flex items-center gap-3">
                    <div class="bg-purple-600 p-2 rounded-lg group-hover:scale-110 transition-transform">
                        <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                        </svg>
                    </div>
                    <div>
                        <p class="font-semibold text-gray-900">طلبات إعادة التعيين</p>
                        <p class="text-sm text-gray-600">عرض ومعالجة الطلبات</p>
                    </div>
                </div>
                <svg class="w-5 h-5 text-purple-600 group-hover:translate-x-1 transition-transform" 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>
            </a>
        </div>
    </div>
</div>


            <!-- وضع الصيانة -->
            <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl border border-gray-200 dark:border-gray-700 overflow-hidden transform transition-all duration-300 hover:shadow-2xl">
                <div class="bg-gradient-to-r from-orange-500 via-red-500 to-red-600 p-4 sm:p-5">
                    <h2 class="text-lg sm:text-xl font-bold text-white flex items-center gap-2">
                        <svg class="w-5 h-5 sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                        </svg>
                        وضع الصيانة
                    </h2>
                </div>

                <div class="p-4 sm:p-6 space-y-5">
                    <!-- زر التفعيل/الإلغاء المحسّن -->
                    <div class="p-5 bg-gradient-to-br from-orange-50 to-red-50 dark:from-orange-900/20 dark:to-red-900/20 rounded-2xl border-2 border-orange-200 dark:border-orange-700">
                        <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
                            <div class="flex-1">
                                <div class="flex items-center gap-2 mb-2">
                                    <svg class="w-5 h-5 text-orange-600 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                                    </svg>
                                    <h3 class="text-base sm:text-lg font-bold text-gray-900 dark:text-white">تفعيل وضع الصيانة</h3>
                                </div>
                                <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400 leading-relaxed">
                                    منع جميع المستخدمين من الدخول باستثناء السوبر أدمن
                                </p>
                            </div>
                            <label class="relative inline-flex items-center cursor-pointer group">
                                <input type="checkbox" name="maintenance_mode" value="1"
                                       {{ old('maintenance_mode', isset($settings['maintenance']) ? $settings['maintenance']->where('key', 'maintenance_mode')->first()->value ?? '0' : '0') == '1' ? 'checked' : '' }}
                                       class="sr-only peer">
                                <div class="w-14 h-7 bg-gray-300 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-orange-300 dark:peer-focus:ring-orange-800 rounded-full peer dark:bg-gray-600 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:start-[4px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-6 after:w-6 after:transition-all dark:border-gray-600 peer-checked:bg-gradient-to-r peer-checked:from-orange-500 peer-checked:to-red-600 shadow-lg group-hover:shadow-xl"></div>
                            </label>
                        </div>
                    </div>

                    <!-- رسالة الصيانة -->
                    <div>
                        <label class="block text-sm font-bold text-gray-700 dark:text-gray-300 mb-3 flex items-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="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>
                            رسالة الصيانة
                        </label>
                        <textarea name="maintenance_message" rows="4"
                                  class="w-full px-4 py-3 border-2 border-gray-300 dark:border-gray-600 rounded-xl focus:ring-2 focus:ring-orange-500 focus:border-orange-500 dark:bg-gray-700 dark:text-white transition-all text-sm sm:text-base resize-none"
                                  placeholder="مثال: النظام تحت الصيانة حالياً. سيتم العودة خلال ساعة واحدة.">{{ old('maintenance_message', isset($settings['maintenance']) ? $settings['maintenance']->where('key', 'maintenance_message')->first()->value ?? '' : '') }}</textarea>
                        <p class="mt-2 text-xs text-gray-500 dark:text-gray-400 flex items-start gap-2">
                            <svg class="w-4 h-4 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                            </svg>
                            <span>اكتب رسالة واضحة توضح سبب الصيانة والوقت المتوقع لانتهائها</span>
                        </p>
                    </div>
                </div>
            </div>

            <!-- أزرار الحفظ -->
            <div class="sticky bottom-4 bg-white dark:bg-gray-800 p-4 rounded-2xl shadow-2xl border-2 border-gray-200 dark:border-gray-700 backdrop-blur-sm">
                <div class="flex flex-col sm:flex-row items-center justify-end gap-3">
                    <a href="{{ route('superadmin.dashboard') }}" 
                       class="w-full sm:w-auto px-6 py-3 bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 rounded-xl transition-all text-sm sm:text-base font-medium text-center shadow-md hover:shadow-lg">
                        إلغاء
                    </a>
                    <button type="submit" 
                            class="w-full sm:w-auto px-8 py-3 bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 hover:from-blue-700 hover:via-purple-700 hover:to-pink-700 text-white font-bold rounded-xl shadow-lg hover:shadow-2xl transform hover:scale-105 transition-all duration-200 flex items-center justify-center gap-2 text-sm sm:text-base">
                        <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="M5 13l4 4L19 7"/>
                        </svg>
                        حفظ التغييرات
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

<style>
@keyframes slide-down {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-slide-down {
    animation: slide-down 0.3s ease-out;
}

@media (max-width: 640px) {
    .sticky {
        position: relative;
    }
}
</style>

<script>
// عرض اسم الملف المختار
document.getElementById('logo-upload')?.addEventListener('change', function(e) {
    if (e.target.files.length > 0) {
        const fileName = e.target.files[0].name;
        const logoText = document.getElementById('logo-text');
        logoText.textContent = 'تم اختيار: ' + (fileName.length > 30 ? fileName.substring(0, 30) + '...' : fileName);
    }
});

// حذف الشعار
function deleteLogo() {
    if (confirm('هل أنت متأكد من حذف الشعار؟')) {
        fetch('{{ route("superadmin.settings.delete-logo") }}', {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                'Accept': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showAlert('تم حذف الشعار بنجاح', 'success');
                setTimeout(() => location.reload(), 1500);
            } else {
                showAlert(data.message || 'حدث خطأ أثناء حذف الشعار', 'error');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showAlert('حدث خطأ أثناء حذف الشعار', 'error');
        });
    }
}

// رسائل التنبيه
function showAlert(message, type) {
    const alertDiv = document.createElement('div');
    const bgColor = type === 'success' ? 'bg-green-50 border-green-500 text-green-800 dark:bg-green-900/20 dark:text-green-200' : 
                    'bg-red-50 border-red-500 text-red-800 dark:bg-red-900/20 dark:text-red-200';
    
    alertDiv.className = `fixed top-4 left-4 right-4 sm:left-auto sm:right-6 sm:w-96 z-50 ${bgColor} border-r-4 p-4 rounded-xl shadow-2xl animate-slide-down`;
    alertDiv.innerHTML = `
        <div class="flex items-start gap-3">
            <svg class="w-5 h-5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                ${type === 'success' ? 
                    '<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"/>' :
                    '<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>'
                }
            </svg>
            <p class="font-medium text-sm flex-1">${message}</p>
            <button onclick="this.parentNode.parentNode.remove()" class="text-gray-500 hover:text-gray-700">
                <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>
    `;
    
    document.body.appendChild(alertDiv);
    setTimeout(() => alertDiv.remove(), 5000);
}

// التحقق قبل الإرسال
document.querySelector('form')?.addEventListener('submit', function(e) {
    if (this.querySelector('[name="maintenance_mode"]')?.checked) {
        if (!confirm('⚠️ تحذير هام!\n\nتفعيل وضع الصيانة سيمنع جميع المستخدمين من الدخول إلى النظام باستثناء السوبر أدمن.\n\nهل أنت متأكد من المتابعة؟')) {
            e.preventDefault();
            return;
        }
    }
    
    const submitBtn = this.querySelector('button[type="submit"]');
    if (submitBtn) {
        submitBtn.disabled = true;
        submitBtn.innerHTML = `
            <svg class="animate-spin w-5 h-5 mr-2" fill="none" viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
            </svg>
            جاري الحفظ...
        `;
    }
});
</script>
<script>
function paAIspellCheck() {
    const input  = document.getElementById('ai-spell-text');
    const result = document.getElementById('ai-spell-result');
    const scoreEl = document.getElementById('ai-spell-score');

    if (!input || !result || !scoreEl) return;

    const original = (input.value || '').trim();

    if (!original) {
        result.classList.remove('hidden');
        result.innerHTML = '<span class="text-rose-600 font-semibold">اكتب نصًا أولاً ثم اضغط على زر الفحص.</span>';
        scoreEl.textContent = '—';
        return;
    }

    // قاموس أخطاء شائعة -> تصحيح مقترح
    const corrections = {
        'انشاالله': 'إن شاء الله',
        'انشالله': 'إن شاء الله',
        'ان شاءالله': 'إن شاء الله',
        'لاذلك': 'لذلك',
        'هاذا': 'هذا',
        'هده': 'هذه',
        'زهب': 'ذهب',
        'رجعوا': 'رجعوا (بدون مد غير ضروري)',
        'انتي': 'أنتِ',
        'مشئ': 'مشى',
        'تئخر': 'تأخر',
        'لانو': 'لأنه',
        'عشان': 'لأجل / لأن',
        'كتير': 'كثير',
        'هيك': 'هكذا'
    };

    let processed = original;
    let errorCount = 0;

    // نبني نسخة ملوّنة لعرض الأخطاء + التصحيح
    Object.entries(corrections).forEach(([wrong, right]) => {
        const regex = new RegExp('\\b' + wrong + '\\b', 'gi');
        if (regex.test(processed)) {
            errorCount++;
            processed = processed.replace(
                regex,
                `<span class="bg-rose-100 text-rose-700 dark:bg-rose-900/40 dark:text-rose-200 px-1 rounded line-through">${wrong}</span>` +
                ` <span class="text-gray-500">→</span> ` +
                `<span class="bg-emerald-50 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-200 px-1 rounded font-semibold">${right}</span>`
            );
        }
    });

    // حساب درجة تقريبية (كلما قل عدد الأخطاء / عدد الكلمات، ارتفعت الدرجة)
    const words = original.split(/\s+/).filter(Boolean).length || 1;
    let score = 100 - ((errorCount / words) * 100);
    score = Math.max(0, Math.min(100, score));
    scoreEl.textContent = score.toFixed(1) + ' / 100';

    // نص مفسّر حسب النتيجة
    let levelText = '';
    if (score >= 90) {
        levelText = 'مستوى الإملاء ممتاز 👑';
    } else if (score >= 75) {
        levelText = 'إملاء جيد جدًا، مع بعض اللمسات البسيطة الممكن تحسينها ✨';
    } else if (score >= 60) {
        levelText = 'إملاء مقبول، لكن يوجد عدد ملحوظ من الكلمات التي تحتاج تصحيح 🛠️';
    } else {
        levelText = 'النص يحتاج عناية إملائية أكبر — يُفضّل مراجعته بالكامل قبل اعتماده 🚑';
    }

    // عرض النتيجة
    result.classList.remove('hidden');
    result.innerHTML = `
        <div class="flex items-start gap-2">
            <span class="mt-0.5 text-indigo-500">
                <i class="fa-solid fa-wand-magic-sparkles"></i>
            </span>
            <div class="space-y-1">
                <div class="font-semibold text-gray-900 dark:text-gray-50">
                    ${levelText}
                </div>
                <div class="text-[11px] text-gray-500 dark:text-gray-400">
                    عدد الكلمات المكتوبة: <b>${words}</b> — عدد الكلمات التي تم رصدها في القاموس: <b>${errorCount}</b>.
                </div>
            </div>
        </div>

        <hr class="my-2 border-gray-200 dark:border-gray-700">

        <div class="space-y-1">
            <div class="text-[11px] font-semibold text-gray-600 dark:text-gray-300 mb-1">
                النص مع إبراز الكلمات التي تحتاج انتباه:
            </div>
            <div class="text-sm leading-relaxed">
                ${processed}
            </div>
        </div>
    `;
}
</script>

@endsection