{{-- resources/views/general/profile.blade.php --}}

@php
    $user = auth()->user();
    
    // تحديد الـ layout بناءً على الـ role
    if ($user->hasRole('super-admin')) {
        $layout = 'layouts.superadmin';
    } elseif ($user->hasRole('advisor')) {
        $layout = 'layouts.advisor';
    } elseif ($user->hasRole('moderator')) {
        $layout = 'layouts.moderator';
    } else {
        $layout = 'layouts.app'; // للأعضاء العاديين
    }
@endphp

@extends($layout)

@section('title', 'الملف الشخصي')

@section('content')
<div class="container mx-auto px-4 py-6" dir="rtl">
    <!-- رأس الصفحة -->
    <div class="mb-6">
        <h1 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-2 bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
            الملف الشخصي
        </h1>
        <p class="text-gray-600 dark:text-gray-400 text-sm md:text-base">
            قم بتحديث معلوماتك الشخصية وإعدادات الحساب
        </p>
    </div>

    <!-- Success/Error Messages -->
    <div id="alert-container"></div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        
        <!-- الصورة الشخصية والمعلومات الأساسية -->
        <div class="lg:col-span-1">
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md border border-gray-200 dark:border-gray-700 overflow-hidden">
                <div class="bg-gradient-to-r from-blue-500 to-purple-600 p-6 text-center">
                    <div class="relative inline-block">
                        @if($user->avatar)
                            <img id="profile-image" 
                                 src="{{ asset('storage/avatars/' . $user->avatar) }}" 
                                 alt="Profile Picture" 
                                 class="w-32 h-32 rounded-full border-4 border-white shadow-lg object-cover">
                        @else
                            <div id="profile-image" class="w-32 h-32 rounded-full border-4 border-white shadow-lg bg-gradient-to-br from-gray-300 to-gray-400 flex items-center justify-center">
                                <span class="text-4xl font-bold text-white">
                                    {{ substr($user->name, 0, 2) }}
                                </span>
                            </div>
                        @endif
                        
                        <button type="button" 
                                onclick="document.getElementById('avatar-input').click()"
                                class="absolute bottom-0 right-0 bg-white dark:bg-gray-700 rounded-full p-2 shadow-lg hover:shadow-xl transition-all">
                            <svg class="w-5 h-5 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"/>
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"/>
                            </svg>
                        </button>
                    </div>
                    
                    <input type="file" 
                           id="avatar-input" 
                           accept="image/*" 
                           class="hidden" 
                           onchange="uploadAvatar(this)">
                    
                    <h2 class="text-xl font-bold text-white mt-4">{{ $user->name }}</h2>
                    <p class="text-blue-100 text-sm">{{ $user->email }}</p>
                    
                    @if($user->avatar)
                        <button type="button" 
                                onclick="deleteAvatar()"
                                class="mt-3 px-4 py-2 bg-red-500 hover:bg-red-600 text-white text-sm rounded-lg transition-all">
                            حذف الصورة
                        </button>
                    @endif
                </div>
                
                <div class="p-6 space-y-4">
                    <div class="flex items-center justify-between py-3 border-b border-gray-200 dark:border-gray-700">
                        <span class="text-gray-600 dark:text-gray-400 text-sm">الدور</span>
                        <span class="px-3 py-1 bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300 rounded-full text-sm font-semibold">
                            {{ $user->roles->first()->name ?? 'عضو' }}
                        </span>
                    </div>
                    <div class="p-6 space-y-4">
                    <div class="flex items-center justify-between py-3 border-b border-gray-200 dark:border-gray-700">
                        <span class="text-gray-600 dark:text-gray-400 text-sm">الدور</span>
                        <span class="px-3 py-1 bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300 rounded-full text-sm font-semibold">
                            {{ $user->roles->first()->name ?? 'عضو' }}
                        </span>
                    </div>

                    <div class="flex items-center justify-between py-3 border-b border-gray-200 dark:border-gray-700">
                        <span class="text-gray-600 dark:text-gray-400 text-sm">تاريخ التسجيل</span>
                        <span class="text-gray-900 dark:text-white text-sm font-medium">
                            {{ $user->created_at->format('d/m/Y') }}
                        </span>
                    </div>
                    
                    @if($user->password_changed_at)
                        <div class="flex items-center justify-between py-3">
                            <span class="text-gray-600 dark:text-gray-400 text-sm">آخر تغيير للكلمة</span>
                            <span class="text-gray-900 dark:text-white text-sm font-medium">
                                {{ $user->password_changed_at->diffForHumans() }}
                            </span>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <!-- المعلومات الشخصية وكلمة المرور -->
        <div class="lg:col-span-2 space-y-6">
            
            <!-- تحديث المعلومات الشخصية -->
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md border border-gray-200 dark:border-gray-700 overflow-hidden">
                <div class="bg-gradient-to-r from-blue-500 to-indigo-600 p-4">
                    <h3 class="text-lg font-bold text-white flex items-center">
                        <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                        </svg>
                        المعلومات الشخصية
                    </h3>
                </div>
                
                <form id="profile-form" class="p-6">
                    @csrf
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                                الاسم الكامل
                            </label>
                            <input type="text" 
                                   name="name" 
                                   id="name"
                                   value="{{ $user->name }}"
                                   required
                                   class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-xl focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white transition-all">
                        </div>
                        
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                                البريد الإلكتروني
                            </label>
                            <input type="email" 
                                   value="{{ $user->email }}"
                                   disabled
                                   class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-xl bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 cursor-not-allowed">
                            <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">لا يمكن تعديل البريد الإلكتروني</p>
                        </div>
                        
                        <button type="submit" 
                                class="w-full px-6 py-3 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white font-semibold rounded-xl shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-200 flex items-center justify-center gap-2">
                            <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>
                </form>
            </div>

            <!-- تغيير كلمة المرور -->
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md border border-gray-200 dark:border-gray-700 overflow-hidden">
                <div class="bg-gradient-to-r from-purple-500 to-pink-600 p-4">
                    <h3 class="text-lg font-bold text-white flex items-center">
                        <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"/>
                        </svg>
                        تغيير كلمة المرور
                    </h3>
                </div>
                
                @if(!$canChangePassword)
                    <div class="m-6 bg-red-50 dark:bg-red-900/20 border-r-4 border-red-500 p-4 rounded-lg">
                        <div class="flex items-start">
                            <svg class="w-5 h-5 text-red-500 ml-2 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>
                            <div>
                                <p class="text-red-800 dark:text-red-300 font-semibold text-sm">
                                    لقد استنفذت محاولات تغيير كلمة المرور
                                </p>
                                <p class="text-red-700 dark:text-red-400 text-xs mt-1">
                                    الحد الأقصى: {{ $limit }} مرات كل {{ $period }}. يرجى المحاولة لاحقاً.
                                </p>
                            </div>
                        </div>
                    </div>
                @else
                    <form id="password-form" class="p-6 space-y-4">
                        @csrf
                        
                        <!-- كلمة المرور الحالية -->
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                                كلمة المرور الحالية
                            </label>
                            <div class="relative">
                                <input type="password" 
                                       id="current_password" 
                                       name="current_password" 
                                       required
                                       class="w-full px-4 py-3 pr-12 border border-gray-300 dark:border-gray-600 rounded-xl focus:ring-2 focus:ring-purple-500 dark:bg-gray-700 dark:text-white transition-all"
                                       placeholder="أدخل كلمة المرور الحالية">
                                <button type="button" 
                                        onclick="togglePassword('current_password')"
                                        class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600">
                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="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>
                                </button>
                            </div>
                        </div>

                        <!-- كلمة المرور الجديدة -->
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                                كلمة المرور الجديدة
                            </label>
                            <div class="relative">
                                <input type="password" 
                                       id="password" 
                                       name="password" 
                                       required
                                       class="w-full px-4 py-3 pr-12 border border-gray-300 dark:border-gray-600 rounded-xl focus:ring-2 focus:ring-purple-500 dark:bg-gray-700 dark:text-white transition-all"
                                       placeholder="أدخل كلمة المرور الجديدة">
                                <button type="button" 
                                        onclick="togglePassword('password')"
                                        class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600">
                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="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>
                                </button>
                            </div>
                            <div class="mt-2 space-y-1">
                                <div class="flex items-center text-xs" id="length-check">
                                    <svg class="w-4 h-4 ml-1 text-gray-400" 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="text-gray-600 dark:text-gray-400">8 أحرف على الأقل</span>
                                </div>
                                <div class="flex items-center text-xs" id="uppercase-check">
                                    <svg class="w-4 h-4 ml-1 text-gray-400" 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="text-gray-600 dark:text-gray-400">حرف كبير وصغير</span>
                                </div>
                                <div class="flex items-center text-xs" id="number-check">
                                    <svg class="w-4 h-4 ml-1 text-gray-400" 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="text-gray-600 dark:text-gray-400">رقم واحد على الأقل</span>
                                </div>
                                <div class="flex items-center text-xs" id="symbol-check">
                                    <svg class="w-4 h-4 ml-1 text-gray-400" 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="text-gray-600 dark:text-gray-400">رمز خاص (!@#$%...)</span>
                                </div>
                            </div>
                        </div>

                        <!-- تأكيد كلمة المرور -->
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                                تأكيد كلمة المرور الجديدة
                            </label>
                            <div class="relative">
                                <input type="password" 
                                       id="password_confirmation" 
                                       name="password_confirmation" 
                                       required
                                       class="w-full px-4 py-3 pr-12 border border-gray-300 dark:border-gray-600 rounded-xl focus:ring-2 focus:ring-purple-500 dark:bg-gray-700 dark:text-white transition-all"
                                       placeholder="أعد إدخال كلمة المرور">
                                <button type="button" 
                                        onclick="togglePassword('password_confirmation')"
                                        class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600">
                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="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>
                                </button>
                            </div>
                            <p class="mt-2 text-xs text-gray-500 dark:text-gray-400" id="match-message"></p>
                        </div><button type="submit" 
                                class="w-full px-6 py-3 bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white font-semibold rounded-xl shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-200 flex items-center justify-center gap-2">
                            <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>
                    </form>
                @endif
            </div>
        </div>
    </div>
</div>
<style>
@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fade-in 0.3s ease-out;
}
</style>
<script>
// تحديث المعلومات الشخصية
document.getElementById('profile-form')?.addEventListener('submit', function(e) {
    e.preventDefault();
    
    const submitBtn = this.querySelector('button[type="submit"]');
    const originalContent = submitBtn.innerHTML;
    
    submitBtn.disabled = true;
    submitBtn.innerHTML = `
        <svg class="animate-spin w-5 h-5" fill="none" stroke="currentColor" 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>
        جاري الحفظ...
    `;
    
    const formData = new FormData();
    formData.append('name', document.getElementById('name').value);
    formData.append('_token', document.querySelector('meta[name="csrf-token"]').content);
    
    fetch('{{ route("profile.update") }}', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
            'Accept': 'application/json'
        },
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showAlert('نجح', data.message, 'success');
            setTimeout(() => location.reload(), 1500);
        } else {
            showAlert('خطأ', data.message, 'error');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showAlert('خطأ', 'حدث خطأ أثناء تحديث البروفايل', 'error');
    })
    .finally(() => {
        submitBtn.disabled = false;
        submitBtn.innerHTML = originalContent;
    });
});

// رفع الصورة الشخصية
function uploadAvatar(input) {
    if (input.files && input.files[0]) {
        const formData = new FormData();
        formData.append('avatar', input.files[0]);
        formData.append('name', document.getElementById('name').value);
        formData.append('_token', document.querySelector('meta[name="csrf-token"]').content);
        
        fetch('{{ route("profile.update") }}', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                'Accept': 'application/json'
            },
            body: formData
        })
        .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 deleteAvatar() {
    if (confirm('هل أنت متأكد من حذف الصورة الشخصية؟')) {
        fetch('{{ route("profile.picture.delete") }}', {
            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('نجح', data.message, 'success');
                setTimeout(() => location.reload(), 1500);
            } else {
                showAlert('خطأ', data.message, 'error');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showAlert('خطأ', 'حدث خطأ أثناء حذف الصورة', 'error');
        });
    }
}

// تغيير كلمة المرور
document.getElementById('password-form')?.addEventListener('submit', function(e) {
    e.preventDefault();
    
    const submitBtn = this.querySelector('button[type="submit"]');
    const originalContent = submitBtn.innerHTML;
    
    submitBtn.disabled = true;
    submitBtn.innerHTML = `
        <svg class="animate-spin w-5 h-5" fill="none" stroke="currentColor" 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>
        جاري التغيير...
    `;
    
    fetch('{{ route("profile.password") }}', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
            'Content-Type': 'application/json',
            'Accept': 'application/json'
        },
        body: JSON.stringify({
            current_password: document.getElementById('current_password').value,
            password: document.getElementById('password').value,
            password_confirmation: document.getElementById('password_confirmation').value
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showAlert('نجح', data.message, 'success');
            this.reset();
            setTimeout(() => location.reload(), 2000);
        } else {
            showAlert('خطأ', data.message, 'error');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showAlert('خطأ', 'حدث خطأ أثناء تغيير كلمة المرور', 'error');
    })
    .finally(() => {
        submitBtn.disabled = false;
        submitBtn.innerHTML = originalContent;
    });
});

// Password validation
const password = document.getElementById('password');
const passwordConfirm = document.getElementById('password_confirmation');

password?.addEventListener('input', function() {
    const value = this.value;
    
    // Length check
    updateCheck('length-check', value.length >= 8);
    
    // Uppercase and lowercase
    updateCheck('uppercase-check', /[a-z]/.test(value) && /[A-Z]/.test(value));
    
    // Number check
    updateCheck('number-check', /\d/.test(value));
    
    // Symbol check
    updateCheck('symbol-check', /[!@#$%^&*(),.?":{}|<>]/.test(value));
    
    checkMatch();
});

passwordConfirm?.addEventListener('input', checkMatch);

function updateCheck(id, isValid) {
    const element = document.getElementById(id);
    if (!element) return;
    
    const svg = element.querySelector('svg');
    const span = element.querySelector('span');
    
    if (isValid) {
        svg.classList.remove('text-gray-400');
        svg.classList.add('text-green-500');
        span.classList.remove('text-gray-600', 'dark:text-gray-400');
        span.classList.add('text-green-600', 'dark:text-green-400');
    } else {
        svg.classList.remove('text-green-500');
        svg.classList.add('text-gray-400');
        span.classList.remove('text-green-600', 'dark:text-green-400');
        span.classList.add('text-gray-600', 'dark:text-gray-400');
    }
}

function checkMatch() {
    const matchMsg = document.getElementById('match-message');
    if (!matchMsg || !password || !passwordConfirm) return;
    
    if (passwordConfirm.value.length === 0) {
        matchMsg.textContent = '';
        return;
    }
    
    if (password.value === passwordConfirm.value) {
        matchMsg.textContent = '✓ كلمات المرور متطابقة';
        matchMsg.className = 'mt-2 text-xs text-green-600 dark:text-green-400';
    } else {
        matchMsg.textContent = '✗ كلمات المرور غير متطابقة';
        matchMsg.className = 'mt-2 text-xs text-red-600 dark:text-red-400';
    }
}

function togglePassword(id) {
    const input = document.getElementById(id);
    if (!input) return;
    
    input.type = input.type === 'password' ? 'text' : 'password';
}

function showAlert(title, 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 = `mb-4 ${bgColor} border-r-4 p-4 rounded-lg shadow-lg animate-fade-in`;
    alertDiv.innerHTML = `
        <div class="flex items-start">
            <svg class="w-5 h-5 ml-2 flex-shrink-0 mt-0.5" 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>
            <div class="flex-1">
                <p class="font-bold text-sm">${title}</p>
                <p class="text-sm mt-1">${message}</p>
            </div>
            <button onclick="this.parentNode.parentNode.remove()" class="mr-2 text-gray-500 hover:text-gray-700 flex-shrink-0">
                <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="M6 18L18 6M6 6l12 12" />
                </svg>
            </button>
        </div>
    `;
    
    const container = document.getElementById('alert-container');
    container.innerHTML = '';
    container.appendChild(alertDiv);
    
    setTimeout(() => {
        if (alertDiv.parentNode) {
            alertDiv.style.opacity = '0';
            alertDiv.style.transform = 'translateY(-20px)';
            setTimeout(() => alertDiv.remove(), 300);
        }
    }, 5000);
}
</script>

@if(auth()->check() && !auth()->user()->has_seen_ai_updates_modal)
<div x-data="aiUpdatesModal()" 
     x-init="open = true" 
     x-show="open" 
     x-cloak
     class="fixed inset-0 z-[9999] flex items-center justify-center bg-slate-900/80 backdrop-blur">

  <div class="relative w-full max-w-3xl mx-3 md:mx-0 rounded-2xl bg-white dark:bg-slate-900 shadow-2xl overflow-hidden">

    {{-- شريط علوي --}}
    <div class="px-5 py-3 border-b border-slate-200 dark:border-slate-700 flex items-center justify-between bg-gradient-to-l from-indigo-500 via-sky-500 to-emerald-400 text-white">
      <div>
        <h2 class="text-base md:text-lg font-bold">تحديثات النظام & سياسة الاستخدام</h2>
        <p class="text-xs md:text-sm opacity-90">
          هذا النظام يعمل بالكامل عبر الذكاء الاصطناعي وتحليل التفاعل الحقيقي داخل التيم.
        </p>
      </div>
      <span class="hidden md:inline-flex px-3 py-1 text-[11px] rounded-full bg-white/10 border border-white/30">
        Golden Loyalty Army · Amir-OS
      </span>
    </div>

    {{-- محتوى المودال --}}
    <div class="max-h-[70vh] overflow-y-auto px-4 md:px-6 py-4 space-y-5 text-sm">

      {{-- آخر التحديثات --}}
      <section class="space-y-2">
        <h3 class="font-semibold text-slate-900 dark:text-slate-50 flex items-center gap-2">
          <span class="inline-flex h-6 w-6 rounded-full bg-sky-500/10 text-sky-500 items-center justify-center text-xs">i</span>
          آخر التحديثات في البوابة
        </h3>
        <p class="text-xs text-slate-500 dark:text-slate-400">
          ملخص لأهم التحسينات الأخيرة (آخر ١٠ نقاط سريعة):
        </p>
        <ul class="mt-1 space-y-1.5 text-[13px] text-slate-700 dark:text-slate-200 list-disc pr-5">
          <li>إطلاق غرفة تحليلات العضو الجديدة وربطها بمؤشرات التفاعل والانضباط.</li>
          <li>إضافة نظام الاجتماعات وتقارير حضور الأعضاء مع حساب مدة الجلسة تلقائياً.</li>
          <li>تحديث مؤشر التفاعل العام وربطه بالساعات، اللايفات، والالتزام في الواتساب والتيك توك.</li>
          <li>تطوير نظام متابعات الأعضاء (MemberCare) مع ملاحظات المشرفين وتقييم مستوى الخطورة.</li>
          <li>دمج سجلات النقاط والساعات في جدول ScoreRecord لقراءة أوضح وأدق لتأثير كل نشاط.</li>
          <li>تحسين غرفة الصقر والتحليلات اللوجستية لتُظهر المؤشرات بشكل واضح على الهاتف والكمبيوتر.</li>
          <li>إضافة رأي الذكاء الاصطناعي في كل عضو معتمِد على النقاط، الساعات، المخالفات، والترتيب.</li>
          <li>تقوية نظام الصلاحيات بين الأعضاء، المشرفين، المستشارين، والإدارة العليا.</li>
          <li>تحسين أداء تتبع التواجد الحي للأعضاء داخل البوابة (online sessions & usage).</li>
          <li>تحديث تصميم البطاقات والمؤشرات لتكون أكثر وضوحاً على الشاشات الصغيرة.</li>
        </ul>
      </section>

      {{-- ملاحظة عن الذكاء الاصطناعي --}}
      <section class="rounded-xl border border-emerald-200/60 dark:border-emerald-700/70 bg-emerald-50/70 dark:bg-emerald-900/30 px-4 py-3 flex gap-3">
        <div class="mt-0.5">
          <span class="inline-flex h-8 w-8 rounded-full bg-emerald-500 text-white items-center justify-center text-sm">🤖</span>
        </div>
        <div class="space-y-1">
          <h3 class="font-semibold text-emerald-900 dark:text-emerald-100 text-sm">كيف يعمل النظام؟</h3>
          <p class="text-[13px] leading-relaxed text-emerald-900/90 dark:text-emerald-50">
            المؤشرات، النقاط، والمتابعات يتم احتسابها تلقائياً عبر خوارزميات مبنية على
            البيانات الحقيقية: التواجد، التفاعل، اللايفات، المخالفات، والإنجازات.  
            لا يمكن التلاعب بالنظام أو “الغش”، وجميع القرارات تعتمد على بيانات فعلية مسجّلة داخل البوابة.
          </p>
        </div>
      </section>

      {{-- سياسات يجب الموافقة عليها --}}
      <section class="space-y-2">
        <h3 class="font-semibold text-slate-900 dark:text-slate-50 text-sm">الموافقة على السياسات</h3>
        <p class="text-[12px] text-slate-500 dark:text-slate-400">
          للاستمرار في استخدام النظام يجب الموافقة على جميع البنود التالية:
        </p>

        <div class="space-y-2.5 text-[13px]">
          <label class="flex items-start gap-2">
            <input type="checkbox" class="mt-1 rounded border-slate-300" x-model="policies.team">
            <span>أوافق على <strong>سياسة التيم الداخلية</strong> وقوانين جيش الوفاء الذهبي.</span>
          </label>

          <label class="flex items-start gap-2">
            <input type="checkbox" class="mt-1 rounded border-slate-300" x-model="policies.app">
            <span>أوافق على <strong>شروط استخدام التطبيق والبوابة</strong> وعدم إساءة استخدام الخدمات.</span>
          </label>

          <label class="flex items-start gap-2">
            <input type="checkbox" class="mt-1 rounded border-slate-300" x-model="policies.stores">
            <span>أوافق أن النظام يلتزم قدر الإمكان بسياسة <strong>Google Play و Apple App Store</strong> من ناحية الأمان والمحتوى.</span>
          </label>

          <label class="flex items-start gap-2">
            <input type="checkbox" class="mt-1 rounded border-slate-300" x-model="policies.privacy">
            <span>أوافق على <strong>سياسة الخصوصية</strong> واستخدام بياناتي الإحصائية لتحسين التجربة داخل التيم.</span>
          </label>

          <label class="flex items-start gap-2">
            <input type="checkbox" class="mt-1 rounded border-slate-300" x-model="policies.commitment">
            <span>
              أوافق على <strong>سياسة الالتزام والغياب المبرر</strong>، وأفهم أن الغياب المتكرر بدون عذر واضح
              قد يؤدي لإجراءات من الإدارة.
            </span>
          </label>
        </div>
      </section>

      {{-- رسالة خطأ بسيطة --}}
      <template x-if="error">
        <p class="text-xs text-rose-600 dark:text-rose-400" x-text="error"></p>
      </template>
    </div>

    {{-- الأزرار --}}
    <div class="px-4 md:px-6 py-3 border-t border-slate-200 dark:border-slate-700 bg-slate-50/80 dark:bg-slate-900/80 flex flex-col md:flex-row gap-3 md:gap-2 md:items-center md:justify-between">
      <p class="text-[11px] text-slate-500 dark:text-slate-400">
        بالضغط على (موافق) أنت تقرّ بأنك قرأت وفهمت التحديثات السابقة وكل السياسات المذكورة أعلاه.
      </p>

      <div class="flex items-center gap-2 justify-end">
        <button type="button"
                class="px-3 py-1.5 rounded-lg text-xs md:text-sm border border-slate-300 dark:border-slate-600 text-slate-600 dark:text-slate-200"
                @click="open = false">
          إغلاق مؤقتاً
        </button>

        <button type="button"
                class="px-4 py-1.5 rounded-lg text-xs md:text-sm font-semibold text-white
                       bg-emerald-600 hover:bg-emerald-700 disabled:opacity-50 disabled:cursor-not-allowed"
                :disabled="!canSubmit() || loading"
                @click="submit()">
          <span x-show="!loading">✅ موافق على التحديثات والسياسات</span>
          <span x-show="loading">... جاري الحفظ</span>
        </button>
      </div>
    </div>

  </div>
</div>

<script>
function aiUpdatesModal() {
  return {
    open: false,
    loading: false,
    error: null,
    policies: {
      team: false,
      app: false,
      stores: false,
      privacy: false,
      commitment: false,
    },
    canSubmit() {
      return this.policies.team &&
             this.policies.app &&
             this.policies.stores &&
             this.policies.privacy &&
             this.policies.commitment;
    },
    async submit() {
      if (!this.canSubmit()) {
        this.error = 'يجب الموافقة على جميع السياسات أولاً.';
        return;
      }
      this.loading = true;
      this.error = null;
      try {
        const res = await fetch('{{ route('app.updates.accept') }}', {
          method: 'POST',
          headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Accept': 'application/json',
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({}),
        });
        const data = await res.json();
        if (!res.ok || !data.success) {
          throw new Error(data.message || 'حدث خطأ أثناء الحفظ');
        }
        this.open = false;
      } catch (e) {
        this.error = e.message || 'تعذر الحفظ، حاول مرة أخرى.';
      } finally {
        this.loading = false;
      }
    }
  }
}
</script>
@endif

@endsection