<x-app-layout>
    <x-slot name="header">
        <div class="flex justify-between items-center">
            <h2 class="font-semibold text-l text-gray-800 leading-tight">
                {{ __('تعديل الدور') }}: {{ $role->name }}
            </h2>
            <a href="{{ route('roles.index') }}" class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 p-4 rounded">
                العودة للقائمة
            </a>
        </div>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7l m-auto sm:p-6 lg:p-8">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 bg-white border-b border-gray-200">
                    <form action="{{ route('roles.update', $role) }}" method="POST">
                        @csrf
                        @method('PUT')

                        <div class="mb-4">
                            <label for="name" class="block text-gray-700 text-sm font-bold mb-2">اسم الدور:</label>
                            <input type="text" name="name" id="name" class="shadow appearance-none border rounded w-full py-2 p-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline @error('name') border-red-500 @enderror" value="{{ old('name', $role->name) }}" required>
                            @error('name')
                                <p class="text-red-500 text-s mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <div class="mb-4">
                            <label for="description" class="block text-gray-700 text-sm font-bold mb-2">وصف الدور:</label>
                            <textarea name="description" id="description" rows="3" class="shadow appearance-none border rounded w-full py-2 p-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">{{ old('description', $role->description) }}</textarea>
                        </div>

                        <div class="mb-4">
                            <label for="is_active" class="block text-gray-700 text-sm font-bold mb-2">الحالة:</label>
                            <select name="is_active" id="is_active" class="shadow appearance-none border rounded w-full py-2 p-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
                                <option value="1" {{ old('is_active', $role->is_active) ? 'selected' : '' }}>نشط</option>
                                <option value="0" {{ old('is_active', $role->is_active) ? '' : 'selected' }}>غير نشط</option>
                            </select>
                        </div>

                        <div class="mb-6">
                            <div class="flex justify-between items-center mb-4">
                                <label class="block text-gray-700 text-lg font-bold">الصلاحيات:</label>
                                <div class="flex space-y-2 space-y-reverse">
                                    @role('super_admin')
                                    <a href="{{ route('module-visibility.index') }}" class="bg-purple-500 hover:bg-purple-700 text-white text-sm py-1 p-3 rounded focus:outline-none focus:shadow-outline flex items-center">
                                        <i class="fas fa-cog ml-2"></i>
                                        إدارة الوحدات
                                    </a>
                                    @endrole
                                    <button type="button" id="selectAll" class="bg-blue-500 hover:bg-blue-700 text-white text-sm py-1 p-3 rounded focus:outline-none focus:shadow-outline">
                                        تحديد الكل
                                    </button>
                                    <button type="button" id="deselectAll" class="bg-gray-500 hover:bg-gray-700 text-white text-sm py-1 p-3 rounded focus:outline-none focus:shadow-outline">
                                        إلغاء تحديد الكل
                                    </button>
                                </div>
                            </div>

                            @error('permissions')
                                <p class="text-red-500 text-s mt-1 mb-2">{{ $message }}</p>
                            @enderror

                            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                                @foreach($permissions as $module => $modulePermissions)
                                    <div class="border rounded p-4 bg-gray-50 hover:bg-gray-100 transition-all">
                                        <div class="flex justify-between items-center mb-3">
                                            <h3 class="font-bold text-lg text-primary-800">{{ $module }}</h3>
                                            <button type="button" class="select-module text-s bg-primary-100 hover:bg-primary-200 text-primary-800 py-1 p-2 rounded">
                                                تحديد المجموعة
                                            </button>
                                        </div>
                                        <div class="border-t pt-2">
                                            @foreach($modulePermissions as $permission)
                                                <div class="mb-2">
                                                    <label class="inline-flex items-center hover:bg-white p-1 rounded w-full">
                                                        <input type="checkbox" name="permissions[]" value="{{ $permission->id }}" class="permission-checkbox form-checkbox h-5 w-5 text-primary-600" {{ in_array($permission->id, old('permissions', $rolePermissions)) ? 'checked' : '' }}>
                                                        <span class="mr-2">{{ $permission->display_name }}</span>
                                                    </label>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>

                        <div class="flex items-center justify-between mt-8 mb-8 border-t pt-6">
                            <a href="{{ route('roles.index') }}" class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 p-4 rounded focus:outline-none focus:shadow-outline">
                                إلغاء
                            </a>
                            <button type="submit" class="bg-primary-600 hover:bg-primary-700 text-white font-bold py-2 p-4 rounded focus:outline-none focus:shadow-outline">
                                تحديث الدور
                            </button>
                                              </div>
                    </form>

                    <div class="mt-8 p-6 border-t border-gray-200">
                        <div class="flex items-center justify-between mb-4">
                            <h3 class="text-lg font-bold text-gray-900">
                                <i class="fas fa-language ml-2 text-primary-600"></i>
                                الترجمات
                            </h3>
                            <a href="{{ route('localization.translations.index') }}" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded inline-flex items-center transition-colors duration-200">
                                <i class="fas fa-link ml-2"></i>
                                <span>إدارة الترجمات</span>
                            </a>
                        </div>
                        <p class="text-gray-600 text-sm">
                            <i class="fas fa-info-circle ml-1"></i>
                            يمكنك إدارة ترجمات نصوص النظام من خلال صفحة إدارة الترجمات لتوفير تجربة متعددة اللغات.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>


        document.addEventListener('DOMContentLoaded', function() {
            document.getElementById('selectAll').addEventListener('click', function(e) {
                e.preventDefault();
                document.querySelectorAll('.permission-checkbox').forEach(function(checkbox) {
                    checkbox.checked = true;
                });
            });

            document.getElementById('deselectAll').addEventListener('click', function(e) {
                e.preventDefault();
                document.querySelectorAll('.permission-checkbox').forEach(function(checkbox) {
                    checkbox.checked = false;
                });
            });

            document.querySelectorAll('.select-module').forEach(function(button) {
                button.addEventListener('click', function(e) {
                    e.preventDefault();
                    const moduleDiv = this.closest('div.border');
                    const checkboxes = moduleDiv.querySelectorAll('.permission-checkbox');
                    const allChecked = Array.from(checkboxes).every(checkbox => checkbox.checked);
                    checkboxes.forEach(function(checkbox) {
                        checkbox.checked = !allChecked;
                    });
                });
            });
        });
    </script>
</x-app-layout>
