{{-- 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 {
        // ✅ للأعضاء استخدمي member layout
        $layout = 'layouts.member';
    }
@endphp


@extends($layout)

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

@section('content')
<div class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 py-8">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
        
        <!-- Header Section -->
        <div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-8 mb-8">
            <div class="flex flex-col md:flex-row md:items-center md:justify-between">
                <div>
                    <h1 class="text-3xl font-bold text-gray-900 mb-2">الملف الشخصي</h1>
                    <p class="text-gray-600">قم بتحديث معلوماتك الشخصية وإعدادات الحساب</p>
                </div>
                <div class="mt-4 md:mt-0 flex items-center space-x-4 space-x-reverse">
                    <div class="text-right">
                        <p class="text-sm text-gray-600">البريد الإلكتروني</p>
                        <p class="text-lg font-semibold text-gray-900">{{ $user->email }}</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            
            <!-- Right Sidebar - User Info Card -->
            <div class="lg:col-span-1">
                <div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-6 sticky top-8">
                    <!-- Profile Picture -->
                    <div class="text-center mb-6">
                        <div class="relative inline-block">
                            <div id="avatar-container" class="w-32 h-32 mx-auto mb-4">
                                @if($user->avatar)
                                    <img id="avatar-display" src="{{ asset('storage/avatars/' . $user->avatar) }}" alt="{{ $user->name }}" class="w-32 h-32 rounded-full border-4 border-blue-500 object-cover shadow-lg">
                                @else
                                    <div id="avatar-display" class="w-32 h-32 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-white font-bold text-5xl shadow-lg">
                                        {{ strtoupper(substr($user->name, 0, 1)) }}
                                    </div>
                                @endif
                            </div>
                            <button type="button" onclick="deleteAvatar()" class="absolute bottom-0 right-0 bg-red-500 hover:bg-red-600 text-white p-2 rounded-full shadow-lg transition-all duration-200 transform hover:scale-110">
                                <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>
                        <h3 id="user-name-display" class="text-xl font-bold text-gray-900 mb-1">{{ $user->name }}</h3>
                        <p class="text-sm text-gray-600 mb-4">{{ $user->email }}</p>
                    </div>

                    <!-- User Stats -->
                    <div class="space-y-4 border-t border-gray-200 pt-6">
                        <div class="flex items-center justify-between">
                            <span class="text-sm text-gray-600">الدور</span>
                            <span class="px-3 py-1 bg-blue-100 text-blue-800 text-xs font-semibold rounded-full">
                                {{ $user->roles->first()->name ?? 'عضو' }}
                            </span>
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="text-sm text-gray-600">تاريخ التسجيل</span>
                            <span class="text-sm font-semibold text-gray-900">{{ $user->created_at->format('d/m/Y') }}</span>
                        </div>
                        @if($user->password_changed_at)
                        <div class="flex items-center justify-between">
                            <span class="text-sm text-gray-600">آخر تغيير للكلمة</span>
                            <span class="text-sm font-semibold text-gray-900">{{ $user->password_changed_at->diffForHumans() }}</span>
                        </div>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Main Content Area -->
            <div class="lg:col-span-2 space-y-8">
                
                <!-- تحديث المعلومات الشخصية -->
                <div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-8">
                    <div class="flex items-center mb-6">
                        <div class="p-3 bg-blue-100 rounded-xl ml-4">
                            <svg class="w-6 h-6 text-blue-600" 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>
                        </div>
                        <div>
                            <h2 class="text-xl font-bold text-gray-900">المعلومات الشخصية</h2>
                            <p class="text-sm text-gray-600">قم بتحديث اسمك والصورة الشخصية</p>
                        </div>
                    </div>

                    <form id="profileForm" class="space-y-6">
                        @csrf
                        
                        <!-- Name Input -->
                        <div>
                            <label for="name" class="block text-sm font-semibold text-gray-700 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 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200"
                                   placeholder="أدخل اسمك">
                        </div>

                        <!-- Avatar Upload -->
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">الصورة الشخصية</label>
                            <div class="flex items-center space-x-4 space-x-reverse">
                                <label for="avatar" class="flex-1 cursor-pointer">
                                    <div class="border-2 border-dashed border-gray-300 rounded-xl p-6 text-center hover:border-blue-500 transition-all duration-200 hover:bg-blue-50">
                                        <svg class="w-12 h-12 mx-auto text-gray-400 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                                        </svg>
                                        <p class="text-sm text-gray-600 mb-1">انقر لرفع صورة جديدة</p>
                                        <p class="text-xs text-gray-500">JPG, PNG (بحد أقصى 2MB)</p>
                                    </div>
                                    <input type="file" name="avatar" id="avatar" accept="image/jpeg,image/png,image/jpg" class="hidden">
                                </label>
                            </div>
                            <p id="avatar-filename" class="text-sm text-gray-600 mt-2"></p>
                        </div>

                        <!-- Submit Button -->
                        <div class="flex justify-end">
                            <button type="submit" id="saveProfileBtn"
                                    class="px-6 py-3 bg-gradient-to-r from-blue-600 to-blue-700 text-white font-semibold rounded-xl hover:from-blue-700 hover:to-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all duration-200 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5">
                                <span class="flex items-center">
                                    <svg class="w-5 h-5 ml-2" 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>
                                    حفظ التغييرات
                                </span>
                            </button>
                        </div>
                    </form>
                </div>

                <!-- تغيير كلمة المرور -->
                <div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-8">
                    <div class="flex items-center mb-6">
                        <div class="p-3 bg-purple-100 rounded-xl ml-4">
                            <svg class="w-6 h-6 text-purple-600" 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>
                            <h2 class="text-xl font-bold text-gray-900">تغيير كلمة المرور</h2>
                            <p class="text-sm text-gray-600">قم بتحديث كلمة المرور الخاصة بك</p>
                        </div>
                    </div>

                    <form id="passwordForm" class="space-y-6">
                        @csrf
                        
                        <!-- Current Password -->
                        <div>
                            <label for="current_password" class="block text-sm font-semibold text-gray-700 mb-2">كلمة المرور الحالية</label>
                            <div class="relative">
                                <input type="password" name="current_password" id="current_password" required
                                       class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all duration-200 pr-12"
                                       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>

                        <!-- New Password -->
                        <div>
                            <label for="password" class="block text-sm font-semibold text-gray-700 mb-2">كلمة المرور الجديدة</label>
                            <div class="relative">
                                <input type="password" name="password" id="password" required minlength="6"
                                       class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all duration-200 pr-12"
                                       placeholder="أدخل كلمة المرور الجديدة (6 أحرف على الأقل)">
                                <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>

                        <!-- Confirm Password -->
                        <div>
                            <label for="password_confirmation" class="block text-sm font-semibold text-gray-700 mb-2">تأكيد كلمة المرور</label>
                            <div class="relative">
                                <input type="password" name="password_confirmation" id="password_confirmation" required minlength="6"
                                       class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all duration-200 pr-12"
                                       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>
                        </div>

                        <!-- Submit Button -->
                        <div class="flex justify-end">
                            <button type="submit" id="changePasswordBtn"
                                    class="px-6 py-3 bg-gradient-to-r from-purple-600 to-purple-700 text-white font-semibold rounded-xl hover:from-purple-700 hover:to-purple-800 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 transition-all duration-200 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5">
                                <span class="flex items-center">
                                    <svg class="w-5 h-5 ml-2" 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>
                                    تحديث كلمة المرور
                                </span>
                            </button>
                        </div>
                    </form>
                </div>

            </div>
        </div>
    </div>
</div>

<script>
// Toggle Password Visibility
function togglePassword(fieldId) {
    const field = document.getElementById(fieldId);
    field.type = field.type === 'password' ? 'text' : 'password';
}

// Show Avatar Filename
document.getElementById('avatar').addEventListener('change', function(e) {
    const filename = e.target.files[0]?.name;
    const filenameDisplay = document.getElementById('avatar-filename');
    if (filename) {
        filenameDisplay.textContent = `تم اختيار: ${filename}`;
        filenameDisplay.classList.add('text-blue-600', 'font-semibold');
    }
});

// Update Profile
document.getElementById('profileForm').addEventListener('submit', async function(e) {
    e.preventDefault();
    
    const button = document.getElementById('saveProfileBtn');
    const originalText = button.innerHTML;
    
    button.disabled = true;
    button.innerHTML = `
        <svg class="animate-spin w-5 h-5 mx-auto" 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(this);
    
    try {
        const response = await fetch('{{ route("profile.update") }}', {
            method: 'POST',
            body: formData,
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
            }
        });
        
        const data = await response.json();
        
        if (data.success) {
            // Update UI
            if (data.user.name) {
                document.getElementById('user-name-display').textContent = data.user.name;
            }
            if (data.user.avatar) {
                const avatarContainer = document.getElementById('avatar-display');
                avatarContainer.outerHTML = `<img id="avatar-display" src="${data.user.avatar}" alt="${data.user.name}" class="w-32 h-32 rounded-full border-4 border-blue-500 object-cover shadow-lg">`;
            }
            
            Swal.fire({
                icon: 'success',
                title: 'نجح!',
                text: data.message,
                confirmButtonColor: '#3b82f6'
            });
        } else {
            throw new Error(data.message);
        }
    } catch (error) {
        Swal.fire({
            icon: 'error',
            title: 'خطأ!',
            text: error.message || 'حدث خطأ أثناء تحديث البروفايل',
            confirmButtonColor: '#ef4444'
        });
    } finally {
        button.disabled = false;
        button.innerHTML = originalText;
    }
});

// Change Password
document.getElementById('passwordForm').addEventListener('submit', async function(e) {
    e.preventDefault();
    
    const button = document.getElementById('changePasswordBtn');
    const originalText = button.innerHTML;
    
    button.disabled = true;
    button.innerHTML = `
        <svg class="animate-spin w-5 h-5 mx-auto" 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(this);
    
    try {
        const response = await fetch('{{ route("profile.updatePassword") }}', {
            method: 'POST',
            body: formData,
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
            }
        });
        
        const data = await response.json();
        
        if (data.success) {
            Swal.fire({
                icon: 'success',
                title: 'نجح!',
                text: data.message,
                confirmButtonColor: '#9333ea'
            });
            this.reset();
        } else {
            throw new Error(data.message);
        }
    } catch (error) {
        Swal.fire({
            icon: 'error',
            title: 'خطأ!',
            text: error.message || 'حدث خطأ أثناء تغيير كلمة المرور',
            confirmButtonColor: '#ef4444'
        });
    } finally {
        button.disabled = false;
        button.innerHTML = originalText;
    }
});

// Delete Avatar
async function deleteAvatar() {
    const result = await Swal.fire({
        title: 'هل أنت متأكد؟',
        text: 'سيتم حذف الصورة الشخصية',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#ef4444',
        cancelButtonColor: '#6b7280',
        confirmButtonText: 'نعم، احذف',
        cancelButtonText: 'إلغاء'
    });
    
    if (result.isConfirmed) {
        try {
            const response = await fetch('{{ route("profile.deleteAvatar") }}', {
                method: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                    'Content-Type': 'application/json'
                }
            });
            
            const data = await response.json();
            
            if (data.success) {
                const userName = document.getElementById('user-name-display').textContent;
                const firstLetter = userName.charAt(0).toUpperCase();
                
                const avatarContainer = document.getElementById('avatar-display');
                avatarContainer.outerHTML = `
                    <div id="avatar-display" class="w-32 h-32 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-white font-bold text-5xl shadow-lg">
                        ${firstLetter}
                    </div>
                `;
                
                Swal.fire({
                    icon: 'success',
                    title: 'تم الحذف!',
                    text: data.message,
                    confirmButtonColor: '#3b82f6'
                });
            }
        } catch (error) {
            Swal.fire({
                icon: 'error',
                title: 'خطأ!',
                text: 'حدث خطأ أثناء حذف الصورة',
                confirmButtonColor: '#ef4444'
            });
        }
    }
}
</script>

<!-- SweetAlert2 CDN -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
@endsection