@extends('layouts.master')

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

@section('page-header')
<div class="page-title mb-6">
    <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
        <div>
            <div class="flex items-center gap-2 mb-1">
                <span class="inline-flex items-center justify-center p-2 rounded-xl bg-brand-500/10 text-brand-600 dark:text-brand-400">
                    <i class="fas fa-palette text-lg"></i>
                </span>
                <h1 class="text-xl font-bold text-gray-900 dark:text-white">
                    إعدادات النظام والمظهر <span class="text-xs font-normal text-gray-500 dark:text-gray-400">(System & Appearance Settings)</span>
                </h1>
            </div>
            <p class="text-xs text-gray-500 dark:text-gray-400">
                تخصيص شعارات النظام، الألوان الأساسية، أسماء المؤسسة والجامعة، والنصوص التذييلية ديناميكياً
            </p>
        </div>
        <div>
            <button type="submit" form="systemSettingsForm" class="px-5 py-2.5 bg-brand-600 hover:bg-brand-700 text-white rounded-xl text-xs font-bold transition flex items-center gap-2 shadow-md shadow-brand-500/20 active:scale-95">
                <i class="fas fa-save"></i> حفظ جميع التعديلات
            </button>
        </div>
    </div>
</div>
@stop

@section('content')
<div class="space-y-6">

    @if(session('success'))
        <div class="p-4 rounded-2xl bg-emerald-50 dark:bg-emerald-950/40 border border-emerald-200 dark:border-emerald-800 text-emerald-800 dark:text-emerald-300 text-xs flex items-center justify-between shadow-sm">
            <div class="flex items-center gap-2">
                <i class="fas fa-check-circle text-base text-emerald-500"></i>
                <span class="font-semibold">{{ session('success') }}</span>
            </div>
            <button type="button" onclick="this.parentElement.remove()" class="text-emerald-500 hover:text-emerald-700">
                <i class="fas fa-times"></i>
            </button>
        </div>
    @endif

    @if($errors->any())
        <div class="p-4 rounded-2xl bg-rose-50 dark:bg-rose-950/40 border border-rose-200 dark:border-rose-800 text-rose-800 dark:text-rose-300 text-xs shadow-sm">
            <div class="flex items-center gap-2 font-bold mb-2">
                <i class="fas fa-exclamation-triangle text-base text-rose-500"></i>
                <span>يرجى تصحيح الأخطاء التالية:</span>
            </div>
            <ul class="list-disc list-inside space-y-1 pr-2">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form method="POST" action="{{ route('settings.system.update') }}" id="systemSettingsForm" enctype="multipart/form-data" class="space-y-6">
        @csrf

        <!-- 1. General Identity & Institution Names -->
        <div class="bg-white dark:bg-gray-800 rounded-2xl p-6 shadow-sm border border-gray-100 dark:border-gray-700 space-y-5">
            <div class="flex items-center gap-2.5 pb-4 border-b border-gray-100 dark:border-gray-700">
                <span class="flex h-8 w-8 items-center justify-center rounded-xl bg-blue-50 text-blue-600 dark:bg-blue-500/10 dark:text-blue-400 text-sm">
                    <i class="fas fa-university"></i>
                </span>
                <div>
                    <h3 class="text-sm font-bold text-gray-900 dark:text-white">الهوية والأسماء الرسمية</h3>
                    <p class="text-[11px] text-gray-500 dark:text-gray-400">اسم النظام والجامعة أو المؤسسة المعروض في الترويسات والتقارير</p>
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                <!-- System Name AR -->
                <div class="space-y-1.5">
                    <label class="block text-xs font-bold text-gray-700 dark:text-gray-300">
                        اسم النظام (بالعربية) <span class="text-rose-500">*</span>
                    </label>
                    <input type="text" name="system_name" value="{{ old('system_name', $setting->system_name) }}" required
                           class="w-full text-xs rounded-xl border border-gray-200 dark:border-gray-700 bg-gray-50/60 dark:bg-gray-900/60 text-gray-800 dark:text-gray-200 focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 py-2.5 px-3 transition shadow-sm">
                </div>

                <!-- System Name EN -->
                <div class="space-y-1.5">
                    <label class="block text-xs font-bold text-gray-700 dark:text-gray-300">
                        System Name (English)
                    </label>
                    <input type="text" name="system_name_en" dir="ltr" value="{{ old('system_name_en', $setting->system_name_en) }}"
                           class="w-full text-xs rounded-xl border border-gray-200 dark:border-gray-700 bg-gray-50/60 dark:bg-gray-900/60 text-gray-800 dark:text-gray-200 focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 py-2.5 px-3 transition shadow-sm">
                </div>

                <!-- Institution Name AR -->
                <div class="space-y-1.5">
                    <label class="block text-xs font-bold text-gray-700 dark:text-gray-300">
                        اسم الجامعة / المؤسسة (بالعربية) <span class="text-rose-500">*</span>
                    </label>
                    <input type="text" name="institution_name" value="{{ old('institution_name', $setting->institution_name) }}" required
                           class="w-full text-xs rounded-xl border border-gray-200 dark:border-gray-700 bg-gray-50/60 dark:bg-gray-900/60 text-gray-800 dark:text-gray-200 focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 py-2.5 px-3 transition shadow-sm">
                </div>

                <!-- Institution Name EN -->
                <div class="space-y-1.5">
                    <label class="block text-xs font-bold text-gray-700 dark:text-gray-300">
                        University / Institution Name (English)
                    </label>
                    <input type="text" name="institution_name_en" dir="ltr" value="{{ old('institution_name_en', $setting->institution_name_en) }}"
                           class="w-full text-xs rounded-xl border border-gray-200 dark:border-gray-700 bg-gray-50/60 dark:bg-gray-900/60 text-gray-800 dark:text-gray-200 focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 py-2.5 px-3 transition shadow-sm">
                </div>
            </div>
        </div>

        <!-- 2. System Logos & Favicon -->
        <div class="bg-white dark:bg-gray-800 rounded-2xl p-6 shadow-sm border border-gray-100 dark:border-gray-700 space-y-5">
            <div class="flex items-center gap-2.5 pb-4 border-b border-gray-100 dark:border-gray-700">
                <span class="flex h-8 w-8 items-center justify-center rounded-xl bg-purple-50 text-purple-600 dark:bg-purple-500/10 dark:text-purple-400 text-sm">
                    <i class="fas fa-images"></i>
                </span>
                <div>
                    <h3 class="text-sm font-bold text-gray-900 dark:text-white">الشعارات والوسائط</h3>
                    <p class="text-[11px] text-gray-500 dark:text-gray-400">تخصيص شعار تسجيل الدخول، القائمة الجانبية، الشاشات الصغيرة والأيقونة المفضلة</p>
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5">
                
                <!-- Login Page Logo -->
                <div class="space-y-3 p-4 rounded-xl border border-gray-200 dark:border-gray-700 bg-gray-50/40 dark:bg-gray-900/30 flex flex-col justify-between">
                    <div>
                        <span class="block text-xs font-bold text-gray-800 dark:text-white mb-1">شعار صفحة الدخول (Login Logo)</span>
                        <p class="text-[10px] text-gray-400 mb-3">يعرض في البانر الجانبي لصفحة تسجيل الدخول</p>
                        
                        <div class="h-28 rounded-xl bg-gray-100 dark:bg-gray-800/80 p-2 flex items-center justify-center border border-dashed border-gray-300 dark:border-gray-600 mb-3 overflow-hidden">
                            <img src="{{ $setting->login_logo_url }}" id="preview_login_logo" alt="Login Logo" class="max-h-24 max-w-full object-contain">
                        </div>
                    </div>

                    <div>
                        <input type="file" name="login_logo" id="input_login_logo" accept="image/*" class="text-[11px] w-full text-gray-500 file:mr-0 file:ml-2 file:py-1.5 file:px-3 file:rounded-lg file:border-0 file:text-[11px] file:font-semibold file:bg-brand-50 file:text-brand-700 hover:file:bg-brand-100">
                    </div>
                </div>

                <!-- Sidebar Logo -->
                <div class="space-y-3 p-4 rounded-xl border border-gray-200 dark:border-gray-700 bg-gray-50/40 dark:bg-gray-900/30 flex flex-col justify-between">
                    <div>
                        <span class="block text-xs font-bold text-gray-800 dark:text-white mb-1">شعار القائمة الجانبية (Sidebar Logo)</span>
                        <p class="text-[10px] text-gray-400 mb-3">أعلى القائمة الجانبية في الشاشات الكبيرة</p>
                        
                        <div class="h-28 rounded-xl bg-gray-100 dark:bg-gray-800/80 p-2 flex items-center justify-center border border-dashed border-gray-300 dark:border-gray-600 mb-3 overflow-hidden">
                            <img src="{{ $setting->sidebar_logo_url }}" id="preview_sidebar_logo" alt="Sidebar Logo" class="max-h-24 max-w-full object-contain">
                        </div>
                    </div>

                    <div>
                        <input type="file" name="sidebar_logo" id="input_sidebar_logo" accept="image/*" class="text-[11px] w-full text-gray-500 file:mr-0 file:ml-2 file:py-1.5 file:px-3 file:rounded-lg file:border-0 file:text-[11px] file:font-semibold file:bg-brand-50 file:text-brand-700 hover:file:bg-brand-100">
                    </div>
                </div>

                <!-- Small Screen / Mobile Logo -->
                <div class="space-y-3 p-4 rounded-xl border border-gray-200 dark:border-gray-700 bg-gray-50/40 dark:bg-gray-900/30 flex flex-col justify-between">
                    <div>
                        <span class="block text-xs font-bold text-gray-800 dark:text-white mb-1">شعار الشاشات الصغيرة (Mobile Logo)</span>
                        <p class="text-[10px] text-gray-400 mb-3">يعرض في الترويسة العلوية للجوال والتابلت</p>
                        
                        <div class="h-28 rounded-xl bg-gray-100 dark:bg-gray-800/80 p-2 flex items-center justify-center border border-dashed border-gray-300 dark:border-gray-600 mb-3 overflow-hidden">
                            <img src="{{ $setting->small_screen_logo_url }}" id="preview_small_screen_logo" alt="Mobile Logo" class="max-h-24 max-w-full object-contain">
                        </div>
                    </div>

                    <div>
                        <input type="file" name="small_screen_logo" id="input_small_screen_logo" accept="image/*" class="text-[11px] w-full text-gray-500 file:mr-0 file:ml-2 file:py-1.5 file:px-3 file:rounded-lg file:border-0 file:text-[11px] file:font-semibold file:bg-brand-50 file:text-brand-700 hover:file:bg-brand-100">
                    </div>
                </div>

                <!-- Favicon Icon -->
                <div class="space-y-3 p-4 rounded-xl border border-gray-200 dark:border-gray-700 bg-gray-50/40 dark:bg-gray-900/30 flex flex-col justify-between">
                    <div>
                        <span class="block text-xs font-bold text-gray-800 dark:text-white mb-1">أيقونة المتصفح (Favicon)</span>
                        <p class="text-[10px] text-gray-400 mb-3">أيقونة تبويب المتصفح (PNG أو ICO)</p>
                        
                        <div class="h-28 rounded-xl bg-gray-100 dark:bg-gray-800/80 p-2 flex items-center justify-center border border-dashed border-gray-300 dark:border-gray-600 mb-3 overflow-hidden">
                            <img src="{{ $setting->favicon_url }}" id="preview_favicon" alt="Favicon" class="h-12 w-12 object-contain">
                        </div>
                    </div>

                    <div>
                        <input type="file" name="favicon" id="input_favicon" accept="image/*,.ico" class="text-[11px] w-full text-gray-500 file:mr-0 file:ml-2 file:py-1.5 file:px-3 file:rounded-lg file:border-0 file:text-[11px] file:font-semibold file:bg-brand-50 file:text-brand-700 hover:file:bg-brand-100">
                    </div>
                </div>

            </div>
        </div>

        <!-- 3. Theme Colors & Appearance -->
        <div class="bg-white dark:bg-gray-800 rounded-2xl p-6 shadow-sm border border-gray-100 dark:border-gray-700 space-y-5">
            <div class="flex items-center gap-2.5 pb-4 border-b border-gray-100 dark:border-gray-700">
                <span class="flex h-8 w-8 items-center justify-center rounded-xl bg-emerald-50 text-emerald-600 dark:bg-emerald-500/10 dark:text-emerald-400 text-sm">
                    <i class="fas fa-brush"></i>
                </span>
                <div>
                    <h3 class="text-sm font-bold text-gray-900 dark:text-white">ألوان وهوية النظام (Theme Colors)</h3>
                    <p class="text-[11px] text-gray-500 dark:text-gray-400">تعديل الألوان الرئيسية لتحديث الأزرار والروابط والعناصر النشطة فوراً</p>
                </div>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-3 gap-5">
                <!-- Primary Color -->
                <div class="space-y-2 p-4 rounded-xl border border-gray-200 dark:border-gray-700 bg-gray-50/40 dark:bg-gray-900/30">
                    <label class="block text-xs font-bold text-gray-700 dark:text-gray-300">
                        اللون الأساسي (Primary Color)
                    </label>
                    <div class="flex items-center gap-3">
                        <input type="color" id="primary_color_picker" value="{{ old('primary_color', $setting->primary_color) }}"
                               class="h-10 w-12 rounded-lg cursor-pointer border border-gray-200 dark:border-gray-700 bg-transparent p-0.5">
                        <input type="text" name="primary_color" id="primary_color" value="{{ old('primary_color', $setting->primary_color) }}" required
                               class="w-full text-xs font-mono rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200 py-2.5 px-3">
                    </div>
                </div>

                <!-- Primary Hover Color -->
                <div class="space-y-2 p-4 rounded-xl border border-gray-200 dark:border-gray-700 bg-gray-50/40 dark:bg-gray-900/30">
                    <label class="block text-xs font-bold text-gray-700 dark:text-gray-300">
                        لون التمرير (Primary Hover)
                    </label>
                    <div class="flex items-center gap-3">
                        <input type="color" id="primary_hover_picker" value="{{ old('primary_color_hover', $setting->primary_color_hover) }}"
                               class="h-10 w-12 rounded-lg cursor-pointer border border-gray-200 dark:border-gray-700 bg-transparent p-0.5">
                        <input type="text" name="primary_color_hover" id="primary_color_hover" value="{{ old('primary_color_hover', $setting->primary_color_hover) }}"
                               class="w-full text-xs font-mono rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200 py-2.5 px-3">
                    </div>
                </div>

                <!-- Secondary Color -->
                <div class="space-y-2 p-4 rounded-xl border border-gray-200 dark:border-gray-700 bg-gray-50/40 dark:bg-gray-900/30">
                    <label class="block text-xs font-bold text-gray-700 dark:text-gray-300">
                        اللون الثانوي (Secondary Color)
                    </label>
                    <div class="flex items-center gap-3">
                        <input type="color" id="secondary_color_picker" value="{{ old('secondary_color', $setting->secondary_color) }}"
                               class="h-10 w-12 rounded-lg cursor-pointer border border-gray-200 dark:border-gray-700 bg-transparent p-0.5">
                        <input type="text" name="secondary_color" id="secondary_color" value="{{ old('secondary_color', $setting->secondary_color) }}"
                               class="w-full text-xs font-mono rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200 py-2.5 px-3">
                    </div>
                </div>
            </div>

            <!-- Live Button Preview -->
            <div class="pt-4 border-t border-gray-100 dark:border-gray-700">
                <span class="text-xs font-bold text-gray-500 block mb-2">معاينة حية لشكل الأزرار والعناصر:</span>
                <div class="flex flex-wrap items-center gap-3">
                    <button type="button" id="demo_btn_primary" class="px-4 py-2 text-white rounded-xl text-xs font-bold shadow transition" style="background-color: {{ $setting->primary_color }}">
                        زر رئيسي تجريبي
                    </button>
                    <span id="demo_badge_primary" class="px-3 py-1.5 rounded-lg text-xs font-bold" style="background-color: {{ $setting->primary_color }}15; color: {{ $setting->primary_color }}">
                        شارة نشطة تجريبية
                    </span>
                </div>
            </div>
        </div>

        <!-- 4. Footer & Copyright Text -->
        <div class="bg-white dark:bg-gray-800 rounded-2xl p-6 shadow-sm border border-gray-100 dark:border-gray-700 space-y-5">
            <div class="flex items-center gap-2.5 pb-4 border-b border-gray-100 dark:border-gray-700">
                <span class="flex h-8 w-8 items-center justify-center rounded-xl bg-amber-50 text-amber-600 dark:bg-amber-500/10 dark:text-amber-400 text-sm">
                    <i class="fas fa-copyright"></i>
                </span>
                <div>
                    <h3 class="text-sm font-bold text-gray-900 dark:text-white">التذييل وحقوق النشر (Footer Text)</h3>
                    <p class="text-[11px] text-gray-500 dark:text-gray-400">النص الظاهر في أسفل صفحات النظام</p>
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                <!-- Footer Text AR -->
                <div class="space-y-1.5">
                    <label class="block text-xs font-bold text-gray-700 dark:text-gray-300">
                        نص التذييل (بالعربية)
                    </label>
                    <textarea name="footer_text" rows="3"
                              class="w-full text-xs rounded-xl border border-gray-200 dark:border-gray-700 bg-gray-50/60 dark:bg-gray-900/60 text-gray-800 dark:text-gray-200 focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 py-2 px-3 transition shadow-sm">{{ old('footer_text', $setting->footer_text) }}</textarea>
                </div>

                <!-- Footer Text EN -->
                <div class="space-y-1.5">
                    <label class="block text-xs font-bold text-gray-700 dark:text-gray-300">
                        Footer Text (English)
                    </label>
                    <textarea name="footer_text_en" dir="ltr" rows="3"
                              class="w-full text-xs rounded-xl border border-gray-200 dark:border-gray-700 bg-gray-50/60 dark:bg-gray-900/60 text-gray-800 dark:text-gray-200 focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 py-2 px-3 transition shadow-sm">{{ old('footer_text_en', $setting->footer_text_en) }}</textarea>
                </div>
            </div>
        </div>

        <!-- Submit Button Footer -->
        <div class="flex items-center justify-end gap-3 pt-2">
            <button type="submit" class="px-7 py-3 bg-brand-600 hover:bg-brand-700 text-white rounded-xl text-xs font-bold transition flex items-center gap-2 shadow-lg shadow-brand-500/25 active:scale-95">
                <i class="fas fa-save"></i> حفظ وتطبيق الإعدادات
            </button>
        </div>
    </form>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    // ── Real-time Image Previews ─────────────────────────────────────────────
    function setupImagePreview(inputId, imgId) {
        const input = document.getElementById(inputId);
        const img = document.getElementById(imgId);
        if (input && img) {
            input.addEventListener('change', function () {
                const file = this.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function (e) {
                        img.src = e.target.result;
                    };
                    reader.readAsDataURL(file);
                }
            });
        }
    }

    setupImagePreview('input_login_logo', 'preview_login_logo');
    setupImagePreview('input_sidebar_logo', 'preview_sidebar_logo');
    setupImagePreview('input_small_screen_logo', 'preview_small_screen_logo');
    setupImagePreview('input_favicon', 'preview_favicon');

    // ── Color Pickers Synchronization & Live Preview ─────────────────────────
    function syncColor(pickerId, textId, callback) {
        const picker = document.getElementById(pickerId);
        const text = document.getElementById(textId);
        if (picker && text) {
            picker.addEventListener('input', function () {
                text.value = this.value;
                if (callback) callback(this.value);
            });
            text.addEventListener('input', function () {
                if (/^#[0-9A-Fa-f]{6}$/.test(this.value)) {
                    picker.value = this.value;
                    if (callback) callback(this.value);
                }
            });
        }
    }

    const demoBtn = document.getElementById('demo_btn_primary');
    const demoBadge = document.getElementById('demo_badge_primary');

    syncColor('primary_color_picker', 'primary_color', function (color) {
        if (demoBtn) demoBtn.style.backgroundColor = color;
        if (demoBadge) {
            demoBadge.style.color = color;
            demoBadge.style.backgroundColor = color + '15';
        }
    });

    syncColor('primary_hover_picker', 'primary_color_hover');
    syncColor('secondary_color_picker', 'secondary_color');
});
</script>
@endpush
@endsection