@extends('layouts.app')

@section('title', 'تعيين الصلاحيات للدور: ' . $role->name)

@section('content')
<div class="permissions-container">
    <div class="permissions-card">
        <div class="permissions-header bg-primary-600">
            <h1 class="permissions-title">تعيين الصلاحيات للدور: {{ $role->name }}</h1>
            <a href="{{ route('roles.index') }}" class="permissions-back-button">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-1" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd" />
                </svg>
                العودة إلى قائمة الأدوار
            </a>
        </div>

        <div class="p-6">
            @if(session('success'))
                <div class="bg-green-100 border-r-4 border-green-500 text-green-700 p-4 mb-6 rounded">
                    {{ session('success') }}
                </div>
            @endif

            @if(session('error'))
                <div class="bg-red-100 border-r-4 border-red-500 text-red-700 p-4 mb-6 rounded">
                    {{ session('error') }}
                </div>
            @endif

            <form action="{{ route('roles.permissions.update', $role) }}" method="POST">
                @csrf

                <div class="mb-6">
                    <div class="bg-blue-50 border-r-4 border-blue-400 text-blue-700 p-4 mb-4 rounded">
                        <p class="font-medium">معلومات الدور:</p>
                        <p><strong>الاسم:</strong> {{ $role->name }}</p>
                        <p><strong>الوصف:</strong> {{ $role->description ?? 'لا يوجد وصف' }}</p>
                    </div>
                </div>

                <div class="space-y-4" id="permissionsAccordion">
                    @forelse($permissions as $module => $modulePermissions)
                        <div class="border border-gray-200 rounded-md overflow-hidden shadow-sm" x-data="{ open: true }">
                            <div class="bg-gray-50 p-4 py-3 cursor-pointer hover:bg-gray-100" @click="open = !open" id="heading{{ Str::slug($module) }}">
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center text-black">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2 text-primary-600" viewBox="0 0 20 20" fill="currentColor">
                                            <path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
                                        </svg>
                                        <span class="font-medium">{{ $module }}</span>
                                        <span class="mr-2 text-sm text-black">({{ $modulePermissions->count() }})</span>
                                    </div>
                                    <div class="flex items-center">
                                        <button type="button" class="select-all-module text-s text-primary-600 hover:text-primary-800 ml-4" data-module="{{ Str::slug($module) }}">
                                            تحديد الكل
                                        </button>
                                        <button type="button" class="deselect-all-module text-s text-red-600 hover:text-red-800 ml-4" data-module="{{ Str::slug($module) }}">
                                            إلغاء تحديد الكل
                                        </button>
                                        <svg :class="{'rotate-180': open}" class="h-5 w-5 transform transition-transform duration-200 text-primary-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                                            <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
                                        </svg>
                                    </div>
                                </div>
                            </div>

                            <div x-show="open" x-transition class="border-t border-gray-200 bg-white">
                                <div class="p-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 permission-checkboxes" data-module="{{ Str::slug($module) }}">
                                    @foreach($modulePermissions as $permission)
                                        <div class="flex items-center">
                                            <input type="checkbox" name="permissions[]" id="permission_{{ $permission->id }}" value="{{ $permission->id }}" class="permission-checkbox h-5 w-5 text-primary-600 focus:ring-primary-500 border-gray-300 rounded ml-2"
                                                {{ in_array($permission->id, $rolePermissions) ? 'checked' : '' }}>
                                            <label for="permission_{{ $permission->id }}" class="text-sm text-black">
                                                {{ $permission->display_name }}
                                                <span class="block text-s text-black">{{ $permission->name }}</span>
                                            </label>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    @empty
                        <div class="bg-blue-50 border-r-4 border-blue-400 text-blue-700 p-4 rounded">
                            لا توجد صلاحيات مضافة
                        </div>
                    @endforelse
                </div>

                <div class="mt-6 flex justify-end">
                    <button type="submit" class="bg-primary-600 hover:bg-primary-700 text-white font-medium py-2 p-4 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
                        حفظ الصلاحيات
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // تحديد الكل لموديول معين
        document.querySelectorAll('.select-all-module').forEach(button => {
            button.addEventListener('click', function(e) {
                e.preventDefault();
                const moduleId = this.getAttribute('data-module');
                document.querySelectorAll(`.permission-checkboxes[data-module="${moduleId}"] .permission-checkbox`).forEach(checkbox => {
                    checkbox.checked = true;
                });
            });
        });

        // إلغاء تحديد الكل لموديول معين
        document.querySelectorAll('.deselect-all-module').forEach(button => {
            button.addEventListener('click', function(e) {
                e.preventDefault();
                const moduleId = this.getAttribute('data-module');
                document.querySelectorAll(`.permission-checkboxes[data-module="${moduleId}"] .permission-checkbox`).forEach(checkbox => {
                    checkbox.checked = false;
                });
            });
        });
    });
</script>
@endpush
@endsection