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

@section('title', 'إضافة دور جديد')
@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">
                    إنشاء دور جديد
                </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.store') }}" method="POST" class="p-6 space-y-6">
            @csrf
            
            <!-- معلومات الدور الأساسية -->
            <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') }}"
                           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" 
                           required>
                    <p class="text-xs text-gray-500 mt-1">يجب أن يكون باللغة الإنجليزية ويحتوي على أحرف وشرطات فقط</p>
                    @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') }}"
                           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') }}</textarea>
                @error('description')
                    <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                @enderror
            </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('هل أنت متأكد من إعادة تعيين جميع البيانات؟')) {
        document.querySelector('form').reset();
        unselectAllPermissions();
    }
}

// توليد اسم الدور من الاسم المعروض
document.getElementById('display_name').addEventListener('input', function() {
    const displayName = this.value.trim();
    const nameField = document.getElementById('name');
    
    if (displayName && !nameField.value) {
        // تحويل النص العربي إلى اسم انجليزي
        const roleName = displayName
            .replace(/\s+/g, '-')
            .replace(/[^a-zA-Z0-9\-]/g, '')
            .toLowerCase();
        
        nameField.value = roleName || 'custom-role';
    }
});

// تحديث حالة تحديد الكل عند تغيير صلاحية فردية
document.addEventListener('DOMContentLoaded', function() {
    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