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

@section('title', 'تعديل الدور - ' . ($role->display_name ?? $role->name))
@section('page-title', 'تعديل الدور')

@section('content')
<div class="max-w-4xl mx-auto">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
            <div class="flex items-center justify-between">
                <h3 class="text-lg font-medium text-gray-900 dark:text-white">
                    تعديل الدور - {{ $role->display_name ?? $role->name }}
                </h3>
                <a href="{{ route('superadmin.roles.index') }}" 
                   class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
                    <svg class="w-6 h-6" 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"></path>
                    </svg>
                </a>
            </div>
        </div>

        <form action="{{ route('superadmin.roles.update', $role) }}" method="POST" class="p-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" 
                           value="{{ old('name', $role->name) }}"
                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent dark:bg-gray-700 dark:text-white"
                           placeholder="مثال: custom-role" 
                           {{ $role->name === 'super-admin' ? 'readonly' : 'required' }}>
                    @if($role->name === 'super-admin')
                        <p class="text-xs text-yellow-600 mt-1">لا يمكن تعديل اسم دور الإدارة العليا</p>
                    @else
                        <p class="text-xs text-gray-500 mt-1">يجب أن يكون باللغة الإنجليزية ويحتوي على أحرف وشرطات فقط</p>
                    @endif
                    @error('name')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <!-- الاسم المعروض -->
                <div>
                    <label for="display_name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        الاسم المعروض *
                    </label>
                    <input type="text" 
                           name="display_name" 
                           id="display_name" 
                           value="{{ old('display_name', $role->display_name) }}"
                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent dark:bg-gray-700 dark:text-white"
                           placeholder="مثال: دور مخصص" 
                           required>
                    @error('display_name')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            <!-- الوصف -->
            <div>
                <label for="description" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    وصف الدور
                </label>
                <textarea name="description" 
                          id="description" 
                          rows="3" 
                          class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent dark:bg-gray-700 dark:text-white"
                          placeholder="اكتب وصفاً مختصراً لهذا الدور...">{{ old('description', $role->description) }}</textarea>
                @error('description')
                    <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                @enderror
            </div>

      

            <!-- معلومات إضافية -->
            <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4">
                <h4 class="text-sm font-medium text-gray-900 dark:text-white mb-3">معلومات إضافية</h4>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
                    <div>
                        <span class="text-gray-500 dark:text-gray-400">تاريخ الإنشاء:</span>
                        <span class="text-gray-900 dark:text-white mr-1">{{ $role->created_at->format('Y/m/d') }}</span>
                    </div>
                    <div>
                        <span class="text-gray-500 dark:text-gray-400">عدد المستخدمين:</span>
                        <span class="text-gray-900 dark:text-white mr-1">{{ $role->users->count() }}</span>
                    </div>
                    <div>
                        <span class="text-gray-500 dark:text-gray-400">عدد الصلاحيات:</span>
                        <span class="text-gray-900 dark:text-white mr-1">{{ $role->permissions->count() }}</span>
                    </div>
                </div>
            </div>

            <!-- أزرار الحفظ -->
            <div class="flex items-center justify-between pt-6 border-t border-gray-200 dark:border-gray-700">
                    <a href="{{ route('superadmin.roles.index') }}" 
                   class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 px-6 py-2 rounded-lg transition-colors flex items-center space-x-2 space-x-reverse">
                    <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="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
                    </svg>
                    <span>العودة للقائمة</span>
                </a>
                <div class="flex space-x-3 space-x-reverse">
                    <button type="submit" 
                            class="bg-primary-600 hover:bg-primary-700 text-white px-6 py-2 rounded-lg transition-colors flex items-center space-x-2 space-x-reverse">
                        <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"></path>
                        </svg>
                        <span>تحديث الدور</span>
                    </button>
                    
                    <button type="button" 
                            onclick="resetForm()"
                            class="bg-gray-500 hover:bg-gray-600 text-white px-6 py-2 rounded-lg transition-colors flex items-center space-x-2 space-x-reverse">
                        <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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
                        </svg>
                        <span>إعادة تعيين</span>
                    </button>
                </div>
                
            
            </div>
        </form>
    </div>
</div>

<script>
// تحديد جميع الصلاحيات
function selectAllPermissions() {
    document.querySelectorAll('.permission-checkbox').forEach(checkbox => {
        checkbox.checked = true;
    });
    document.querySelectorAll('.category-checkbox').forEach(checkbox => {
        checkbox.checked = true;
    });
}

// إلغاء تحديد جميع الصلاحيات
function unselectAllPermissions() {
    document.querySelectorAll('.permission-checkbox').forEach(checkbox => {
        checkbox.checked = false;
    });
    document.querySelectorAll('.category-checkbox').forEach(checkbox => {
        checkbox.checked = false;
    });
}

// تحديد/إلغاء تحديد صلاحيات فئة معينة
function toggleCategoryPermissions(category) {
    const categoryCheckbox = event.target;
    const categoryPermissions = document.querySelectorAll('.category-' + category);
    
    categoryPermissions.forEach(checkbox => {
        checkbox.checked = categoryCheckbox.checked;
    });
}

// إعادة تعيين النموذج
function resetForm() {
    if (confirm('هل أنت متأكد من إعادة تعيين جميع البيانات إلى القيم الأصلية؟')) {
        location.reload();
    }
}

// تحديث حالة تحديد الكل عند تغيير صلاحية فردية
document.addEventListener('DOMContentLoaded', function() {
    // تحديث حالة checkboxes الفئات عند تحميل الصفحة
    document.querySelectorAll('.category-checkbox').forEach(categoryCheckbox => {
        const onchangeAttr = categoryCheckbox.getAttribute('onchange');
        if (onchangeAttr) {
            const categoryMatch = onchangeAttr.match(/toggleCategoryPermissions\('([^']+)'\)/);
            if (categoryMatch) {
                const category = categoryMatch[1];
                const categoryCheckboxes = document.querySelectorAll('.category-' + category);
                const checkedCount = Array.from(categoryCheckboxes).filter(cb => cb.checked).length;
                
                if (categoryCheckboxes.length > 0) {
                    categoryCheckbox.checked = checkedCount === categoryCheckboxes.length;
                    categoryCheckbox.indeterminate = checkedCount > 0 && checkedCount < categoryCheckboxes.length;
                }
            }
        }
    });
    
    // إضافة event listener للصلاحيات الفردية
    document.querySelectorAll('.permission-checkbox').forEach(checkbox => {
        checkbox.addEventListener('change', function() {
            // العثور على الفئة من الـ class
            const categoryClass = Array.from(this.classList).find(cls => cls.startsWith('category-'));
            if (categoryClass) {
                const category = categoryClass.replace('category-', '');
                const categoryCheckboxes = document.querySelectorAll('.category-' + category);
                const checkedCount = Array.from(categoryCheckboxes).filter(cb => cb.checked).length;
                
                // العثور على checkbox تحديد الكل للفئة
                const categoryCheckbox = document.querySelector(`input[onchange*="${category}"]`);
                if (categoryCheckbox) {
                    categoryCheckbox.checked = checkedCount === categoryCheckboxes.length;
                    categoryCheckbox.indeterminate = checkedCount > 0 && checkedCount < categoryCheckboxes.length;
                }
            }
        });
    });
});
</script>
@endsection