@php
    $role = $role ?? null;
    $selected = old('permissions', $rolePermissions ?? []);
@endphp

<div class="row g-3 mb-4">
    <div class="col-md-6">
        <label class="form-label">اسم الدور <span class="req">*</span></label>
        <input type="text" name="name" value="{{ old('name', $role?->name) }}" class="form-control" dir="ltr"
               required @readonly($role?->name === 'super-admin')>
        <div class="form-text">يُفضَّل استخدام أحرف إنجليزية صغيرة، مثال: <code>branch-manager</code></div>
    </div>
</div>

<div class="form-section-title"><i class="fa-solid fa-shield-halved"></i>الصلاحيات</div>

<div class="mb-3">
    <button type="button" class="btn btn-sm btn-outline-primary" id="checkAll"><i class="fa-solid fa-check-double ms-1"></i>تحديد الكل</button>
    <button type="button" class="btn btn-sm btn-outline-secondary" id="uncheckAll"><i class="fa-solid fa-xmark ms-1"></i>إلغاء التحديد</button>
</div>

<div class="row g-3">
    @foreach ($permissionGroups as $module => $permissions)
        <div class="col-lg-4 col-md-6">
            <div class="border rounded p-3 h-100">
                <div class="d-flex justify-content-between align-items-center mb-2">
                    <span class="fw-bold small">{{ $moduleLabels[$module] ?? $module }}</span>
                    <button type="button" class="btn btn-sm btn-link p-0 toggle-group" data-module="{{ $module }}">تبديل</button>
                </div>
                @foreach ($permissions as $permission)
                    @php $action = explode('.', $permission->name)[1] ?? $permission->name; @endphp
                    <div class="form-check">
                        <input class="form-check-input perm-check" type="checkbox" name="permissions[]"
                               value="{{ $permission->name }}" id="perm-{{ $permission->id }}"
                               data-module="{{ $module }}"
                               @checked(in_array($permission->name, $selected, true))>
                        <label class="form-check-label small" for="perm-{{ $permission->id }}">
                            {{ $actionLabels[$action] ?? $action }}
                        </label>
                    </div>
                @endforeach
            </div>
        </div>
    @endforeach
</div>

<div class="d-flex gap-2 mt-4">
    <button type="submit" class="btn btn-primary"><i class="fa-solid fa-floppy-disk ms-2"></i>حفظ</button>
    <a href="{{ route('roles.index') }}" class="btn btn-light">إلغاء</a>
</div>

@push('scripts')
<script>
$(function () {
    $('#checkAll').on('click', () => $('.perm-check').prop('checked', true));
    $('#uncheckAll').on('click', () => $('.perm-check').prop('checked', false));

    $('.toggle-group').on('click', function () {
        const module = $(this).data('module');
        const boxes = $('.perm-check[data-module="' + module + '"]');
        const allChecked = boxes.filter(':checked').length === boxes.length;
        boxes.prop('checked', !allChecked);
    });
});
</script>
@endpush