<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">
                {{ __('إضافة دور جديد') }}
            </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.store') }}" method="POST">
                        @csrf

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <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') }}" 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') }}</textarea>
                            </div>
                        </div>

                        <div class="mb-6 mt-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

                            @php
                                $dentalLabModule = 'معمل الأسنان';
                                $dentalLabPermissions = $permissions->pull($dentalLabModule) ?: collect();
                            @endphp

                            @if($dentalLabPermissions->isNotEmpty())
                                <div class="border rounded p-4 bg-white shadow-sm mb-6">
                                    <div class="flex justify-between items-start mb-3 gap-4">
                                        <div>
                                            <h3 class="font-bold text-lg text-primary-800">شاشات معمل الأسنان</h3>
                                            <p class="text-sm text-gray-600">تحكم بالصلاحيات الخاصة بشاشات وحدة معمل الأسنان.</p>
                                        </div>
                                        <button type="button" class="select-module text-s bg-primary-100 hover:bg-primary-200 text-primary-800 py-1 px-3 rounded">
                                            تحديد المجموعة
                                        </button>
                                    </div>
                                    <div class="border-t pt-3 grid grid-cols-1 md:grid-cols-2 gap-2">
                                        @foreach($dentalLabPermissions as $permission)
                                            <div>
                                                <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', [])) ? 'checked' : '' }}>
                                                    <span class="mr-2 text-sm">{{ $permission->display_name }}</span>
                                                </label>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            @endif

                            <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', [])) ? '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">
                            <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>
            </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>
