@extends('layouts.superadmin')
@section('title', 'تعديل بيانات العضو: ' . $user->name)

@section('content')
<div class="container mx-auto px-4 py-6 rtl">
    <!-- Header -->
    <div class="mb-6">
        <!-- Breadcrumb -->
        <nav class="flex mb-4" aria-label="Breadcrumb">
            <ol class="inline-flex items-center space-x-1 md:space-x-3 space-x-reverse">
                <li class="inline-flex items-center">
                    <a href="{{ route('superadmin.users.index') }}" 
                       class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-blue-600 dark:text-gray-400 dark:hover:text-white">
                        إدارة الأعضاء
                    </a>
                </li>
                <li>
                    <div class="flex items-center">
                        <svg class="w-6 h-6 text-gray-400 rotate-180" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
                        </svg>
                        <span class="mr-1 text-sm font-medium text-gray-500 md:mr-2 dark:text-gray-400">تعديل العضو</span>
                    </div>
                </li>
            </ol>
        </nav>

        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
            <div>
                <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">تعديل بيانات {{ $user->name }}</h1>
                <p class="text-gray-600 dark:text-gray-400">تحديث معلومات الحساب والصلاحيات</p>
            </div>
            <div class="flex gap-2">
                <a href="{{ route('superadmin.users.show', $user) }}" 
                   class="inline-flex items-center px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white font-medium rounded-lg transition duration-200">
                    <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="M10 19l-7-7m0 0l7-7m-7 7h18"/>
                    </svg>
                    العودة للتفاصيل
                </a>
            </div>
        </div>
    </div>

    <!-- نموذج تعديل العضو -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
        <div class="px-6 py-4 bg-gradient-to-r from-orange-50 to-yellow-50 dark:from-orange-900/20 dark:to-yellow-900/20 border-b border-gray-200 dark:border-gray-700 rounded-t-lg">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white flex items-center">
                <svg class="w-6 h-6 text-orange-600 dark:text-orange-400 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                </svg>
                تعديل بيانات {{ $user->name }}
            </h3>
        </div>

        <form action="{{ route('superadmin.users.update', $user) }}" method="POST" enctype="multipart/form-data" class="px-6 py-6 space-y-6">
            @csrf
            @method('PUT')
            
            <!-- المعلومات الأساسية -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- الاسم -->
                <div>
                    <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        الاسم الكامل *
                    </label>
                    <input type="text" name="name" id="name" required value="{{ old('name', $user->name) }}"
                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-orange-500 dark:bg-gray-700 dark:text-white">
                    @error('name')
                        <div class="text-red-500 text-sm mt-1">{{ $message }}</div>
                    @enderror
                </div>

                <!-- اسم المستخدم -->
                <div>
                    <label for="username" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        اسم المستخدم *
                    </label>
                    <input type="text" name="username" id="username" required value="{{ old('username', $user->username) }}"
                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-orange-500 dark:bg-gray-700 dark:text-white">
                    <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                        يجب أن يكون فريداً، يمكن استخدامه لتسجيل الدخول
                    </div>
                    @error('username')
                        <div class="text-red-500 text-sm mt-1">{{ $message }}</div>
                    @enderror
                </div>

                <!-- البريد الإلكتروني -->
                <div>
                    <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        البريد الإلكتروني *
                    </label>
                    <input type="email" name="email" id="email" required value="{{ old('email', $user->email) }}"
                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-orange-500 dark:bg-gray-700 dark:text-white">
                    @error('email')
                        <div class="text-red-500 text-sm mt-1">{{ $message }}</div>
                    @enderror
                </div>

                <!-- رقم الهاتف -->
                <div>
                    <label for="phone" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        رقم الهاتف
                    </label>
                    <input type="text" name="phone" id="phone" value="{{ old('phone', $user->phone) }}"
                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-orange-500 dark:bg-gray-700 dark:text-white"
                           placeholder="أدخل رقم الهاتف (اختياري)">
                    @error('phone')
                        <div class="text-red-500 text-sm mt-1">{{ $message }}</div>
                    @enderror
                </div>

                <!-- كلمة المرور (اختياري في التعديل) -->
                <div>
                    <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        كلمة المرور الجديدة
                    </label>
                    <input type="password" name="password" id="password"
                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-orange-500 dark:bg-gray-700 dark:text-white"
                           placeholder="اتركه فارغاً إذا لم ترغب في التغيير...">
                    <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                        يجب أن تكون ٦ أحرف على الأقل
                    </div>
                    @error('password')
                        <div class="text-red-500 text-sm mt-1">{{ $message }}</div>
                    @enderror
                </div>

                <!-- تأكيد كلمة المرور -->
                <div>
                    <label for="password_confirmation" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        تأكيد كلمة المرور
                    </label>
                    <input type="password" name="password_confirmation" id="password_confirmation"
                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-orange-500 dark:bg-gray-700 dark:text-white"
                           placeholder="أعد إدخال كلمة المرور الجديدة...">
                    @error('password_confirmation')
                        <div class="text-red-500 text-sm mt-1">{{ $message }}</div>
                    @enderror
                </div>
            </div>

            <!-- المعلومات الإضافية -->
            <div class="border-t border-gray-200 dark:border-gray-700 pt-6">
                <h4 class="text-lg font-medium text-gray-900 dark:text-white mb-4">معلومات إضافية</h4>
                
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <!-- الجنس -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            الجنس *
                        </label>
                        <div class="flex gap-4">
                            <label class="flex items-center">
                                <input type="radio" name="gender" value="male" {{ old('gender', $user->gender) == 'male' ? 'checked' : '' }} required
                                    class="rounded-full border-gray-300 text-orange-600 shadow-sm focus:border-orange-300 focus:ring focus:ring-orange-200 focus:ring-opacity-50 ml-2">
                                <span class="text-sm text-gray-700 dark:text-gray-300">ذكر</span>
                            </label>
                            <label class="flex items-center">
                                <input type="radio" name="gender" value="female" {{ old('gender', $user->gender) == 'female' ? 'checked' : '' }} required
                                    class="rounded-full border-gray-300 text-pink-600 shadow-sm focus:border-pink-300 focus:ring focus:ring-pink-200 focus:ring-opacity-50 ml-2">
                                <span class="text-sm text-gray-700 dark:text-gray-300">أنثى</span>
                            </label>
                        </div>
                        @error('gender')
                            <div class="text-red-500 text-sm mt-1">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- حالة العضوية -->
                    <div>
                        <label for="membership_status" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            حالة العضوية *
                        </label>
                        <select name="membership_status" id="membership_status" required
                                class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-orange-500 dark:bg-gray-700 dark:text-white">
                            <option value="beta" {{ old('membership_status', $user->membership_status) == 'beta' ? 'selected' : '' }}>عضو بيتا</option>
                            <option value="official" {{ old('membership_status', $user->membership_status) == 'official' ? 'selected' : '' }}>عضو رسمي</option>
                            <option value="moderator" {{ old('membership_status', $user->membership_status) == 'moderator' ? 'selected' : '' }}>مشرف</option>
                            <option value="advisor" {{ old('membership_status', $user->membership_status) == 'advisor' ? 'selected' : '' }}>مستشار</option>
                            <option value="super-admin" {{ old('membership_status', $user->membership_status) == 'super-admin' ? 'selected' : '' }}>مدير عام</option>
                        </select>
                        @error('membership_status')
                            <div class="text-red-500 text-sm mt-1">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- حالة الحساب -->
                    <div>
                        <label for="account_status" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            حالة الحساب *
                        </label>
                        <select name="account_status" id="account_status" required
                                class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-orange-500 dark:bg-gray-700 dark:text-white">
                            <option value="active" {{ old('account_status', $user->account_status) == 'active' ? 'selected' : '' }}>نشط</option>
                            <option value="suspended" {{ old('account_status', $user->account_status) == 'suspended' ? 'selected' : '' }}>موقوف</option>
                            <option value="banned" {{ old('account_status', $user->account_status) == 'banned' ? 'selected' : '' }}>محظور</option>
                        </select>
                        @error('account_status')
                            <div class="text-red-500 text-sm mt-1">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- الصلاحيات والأدوار -->
            <div class="border-t border-gray-200 dark:border-gray-700 pt-6">
                <h4 class="text-lg font-medium text-gray-900 dark:text-white mb-4">الصلاحيات والأدوار</h4>
                
<!-- الأدوار -->
<div>
    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
        الأدوار *
    </label>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
        @foreach($roles as $role)
            <div class="bg-white dark:bg-gray-700 rounded-lg border border-gray-200 dark:border-gray-600 p-3 transition hover:shadow-md">
                <label class="flex items-center cursor-pointer">
                    <input type="checkbox" name="roles[]" value="{{ $role->name }}" 
                           {{ in_array($role->id, $userRoles) ? 'checked' : '' }}
                           class="rounded border-gray-300 text-orange-600 shadow-sm focus:border-orange-300 focus:ring focus:ring-orange-200 focus:ring-opacity-50 ml-2">
                    <div>
                        <span class="block text-sm font-medium text-gray-900 dark:text-white">{{ $role->display_name ?? $role->name }}</span>
                    </div>
                </label>
            </div>
        @endforeach
    </div>
    @error('roles')
        <div class="text-red-500 text-sm mt-1">{{ $message }}</div>
    @enderror
</div>
           
            </div>

            <!-- السيرة الذاتية والصورة -->
            <div class="border-t border-gray-200 dark:border-gray-700 pt-6">
                <h4 class="text-lg font-medium text-gray-900 dark:text-white mb-4">المعلومات الشخصية</h4>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- السيرة الذاتية -->
                    <div>
                        <label for="bio" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            نبذة تعريفية
                        </label>
                        <textarea name="bio" id="bio" rows="4" 
                                  class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-orange-500 dark:bg-gray-700 dark:text-white"
                                  placeholder="نبذة قصيرة عن العضو (اختياري)...">{{ old('bio', $user->bio) }}</textarea>
                        @error('bio')
                            <div class="text-red-500 text-sm mt-1">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- الصورة الشخصية -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            الصورة الشخصية
                        </label>
                        
                        @if($user->avatar)
                            <div class="mb-4 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
                                <div class="flex items-center">
                                    <img src="{{ $user->avatar_url }}" alt="{{ $user->name }}" class="w-16 h-16 object-cover rounded-full border border-gray-300 dark:border-gray-600">
                                    <div class="mr-3">
                                        <p class="text-sm text-blue-800 dark:text-blue-200">الصورة الحالية</p>
                                    </div>
                                </div>
                            </div>
                        @endif
                        
                        <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md dark:border-gray-600">
                            <div class="space-y-1 text-center">
                                <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48">
                                    <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                                <div class="flex text-sm text-gray-600 dark:text-gray-400">
                                    <label for="avatar" class="relative cursor-pointer bg-white dark:bg-gray-700 rounded-md font-medium text-orange-600 dark:text-orange-400 hover:text-orange-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-orange-500">
                                        <span>{{ $user->avatar ? 'تغيير الصورة' : 'رفع صورة' }}</span>
                                        <input id="avatar" name="avatar" type="file" class="sr-only" accept="image/*">
                                    </label>
                                    <p class="pr-1">أو سحب وإفلات</p>
                                </div>
                                <p class="text-xs text-gray-500 dark:text-gray-400">
                                    PNG, JPG حتى 2MB
                                </p>
                            </div>
                        </div>
                        @error('avatar')
                            <div class="text-red-500 text-sm mt-1">{{ $message }}</div>
                        @enderror
                        <div id="avatarPreview" class="mt-2 text-sm text-gray-600 dark:text-gray-400"></div>
                    </div>
                </div>
            </div>

            <!-- ملاحظات إدارية -->
            <div class="border-t border-gray-200 dark:border-gray-700 pt-6">
                <h4 class="text-lg font-medium text-gray-900 dark:text-white mb-4">ملاحظات إدارية</h4>
                
                <div>
                    <label for="admin_notes" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        ملاحظات إدارية (مرئية للمديرين فقط)
                    </label>
                    <textarea name="admin_notes" id="admin_notes" rows="3" 
                              class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-orange-500 dark:bg-gray-700 dark:text-white"
                              placeholder="أي ملاحظات خاصة بالإدارة حول هذا العضو...">{{ old('admin_notes', $user->admin_notes) }}</textarea>
                    @error('admin_notes')
                        <div class="text-red-500 text-sm mt-1">{{ $message }}</div>
                    @enderror
                </div>
            </div>

            <!-- أزرار الحفظ والإلغاء -->
            <div class="flex flex-col sm:flex-row-reverse gap-3 pt-6 border-t border-gray-200 dark:border-gray-700">
                <button type="submit"
                        class="inline-flex justify-center items-center px-6 py-2 bg-orange-600 hover:bg-orange-700 text-white font-medium rounded-lg transition duration-200">
                    <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>
                    حفظ التغييرات
                </button>
                <a href="{{ route('superadmin.users.show', $user) }}" 
                   class="inline-flex justify-center items-center px-6 py-2 bg-gray-600 hover:bg-gray-700 text-white font-medium rounded-lg transition duration-200">
                    إلغاء
                </a>
            </div>
        </form>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // عرض معاينة الصورة المختارة
    const avatarInput = document.getElementById('avatar');
    const avatarPreview = document.getElementById('avatarPreview');
    
    if (avatarInput && avatarPreview) {
        avatarInput.addEventListener('change', function() {
            if (this.files[0]) {
                const fileName = this.files[0].name;
                
                // عرض معاينة الصورة
                const reader = new FileReader();
                reader.onload = function(e) {
                    avatarPreview.innerHTML = `
                        <div class="mt-2 flex items-center">
                            <img src="${e.target.result}" class="w-16 h-16 object-cover rounded-full border border-gray-300 dark:border-gray-600">
                            <span class="mr-3">${fileName}</span>
                        </div>
                    `;
                }
                reader.readAsDataURL(this.files[0]);
            } else {
                avatarPreview.innerHTML = '';
            }
        });
    }

    // ربط حالة العضوية بالأدوار المناسبة
    const membershipStatus = document.getElementById('membership_status');
    const roleInputs = document.querySelectorAll('input[name="roles[]"]');
    
    if (membershipStatus && roleInputs.length > 0) {
        membershipStatus.addEventListener('change', function() {
            const selectedStatus = this.value;
            
            // إلغاء تحديد جميع الأدوار أولاً
            roleInputs.forEach(input => {
                input.checked = false;
            });
            
            // تحديد الدور المناسب حسب حالة العضوية
            switch (selectedStatus) {
                case 'beta':
                    selectRoleByName('member');
                    break;
                case 'official':
                    selectRoleByName('official-member');
                    break;
                case 'moderator':
                    selectRoleByName('moderator');
                    break;
                case 'advisor':
                    selectRoleByName('advisor');
                    break;
                case 'super-admin':
                    selectRoleByName('super-admin');
                    break;
            }
        });
        
        function selectRoleByName(roleName) {
            roleInputs.forEach(input => {
                if (input.value === roleName) {
                    input.checked = true;
                }
            });
        }
    }
});
</script>
@endsection