@php
    $groupPrefix = $groupPrefix ?? 'permissions';
    $selectedPermissions = collect($selectedPermissions ?? [])
        ->map(fn ($permissionId) => (int) $permissionId)
        ->all();
@endphp

<div class="permission-modules">
    @foreach ($permissionModules as $moduleKey => $module)
        @php
            $moduleId = $groupPrefix . '-permission-module-' . md5($moduleKey);
            $moduleTotal = $module['groups']->sum(fn ($group) => $group['permissions']->count());
        @endphp

        <div class="card border border-primary border-dashed mb-6 permission-module-card" data-permission-module>
            <div class="card-header min-h-50px py-4 bg-light-primary">
                <div class="form-check form-check-custom form-check-solid w-100">
                    <input class="form-check-input permission-module-toggle" type="checkbox" id="{{ $moduleId }}"/>
                    <label class="form-check-label d-flex flex-column flex-grow-1" for="{{ $moduleId }}">
                        <span class="fw-bolder text-gray-900 fs-5">{{ $module['label'] }}</span>
                        <span class="text-muted fs-8">
                            <span data-permission-module-count>0</span>/{{ $moduleTotal }}
                            {{ trans('roles.permissions') }}
                        </span>
                    </label>
                </div>
            </div>
            <div class="card-body pt-4">
                @foreach ($module['groups'] as $groupKey => $group)
                    @php
                        $groupId = $groupPrefix . '-permission-group-' . md5($groupKey);
                    @endphp

                    <div class="card border border-dashed mb-4 permission-group-card" data-permission-group>
                        <div class="card-header min-h-50px py-4 bg-light">
                            <div class="form-check form-check-custom form-check-solid w-100">
                                <input class="form-check-input permission-group-toggle" type="checkbox" id="{{ $groupId }}"/>
                                <label class="form-check-label d-flex flex-column flex-grow-1" for="{{ $groupId }}">
                                    <span class="fw-bold text-gray-800">{{ $group['label'] }}</span>
                                    <span class="text-muted fs-8">
                                        <span data-permission-group-count>0</span>/{{ $group['permissions']->count() }}
                                        {{ trans('roles.permissions') }}
                                    </span>
                                </label>
                            </div>
                        </div>
                        <div class="card-body pt-0">
                            <div class="row g-3">
                                @foreach ($group['permissions'] as $permission)
                                    @php
                                        $permissionInputId = $groupPrefix . '-permission-' . $permission->id . '-' . md5($groupKey);
                                    @endphp

                                    <div class="col-md-6 col-xl-4" data-permission-item-wrap>
                                        <label class="permission-option d-flex align-items-start h-100 rounded border border-gray-300 p-3 cursor-pointer" for="{{ $permissionInputId }}">
                                            <input
                                                class="form-check-input permission-item mt-1 me-3"
                                                name="permissions[]"
                                                type="checkbox"
                                                value="{{ $permission->id }}"
                                                id="{{ $permissionInputId }}"
                                                @checked(in_array($permission->id, $selectedPermissions, true))
                                            />
                                            <span class="d-flex flex-column">
                                                <span class="fw-semibold text-gray-800">{{ $permission->title ?: $permission->name }}</span>
                                                <span class="text-muted fs-8">{{ $permission->name }}</span>
                                            </span>
                                        </label>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    @endforeach
</div>

@once
    <style>
        .permission-option {
            transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
        }

        .permission-option:has(.permission-item:checked) {
            background-color: var(--bs-primary-light);
            border-color: var(--bs-primary) !important;
            box-shadow: 0 0 0 1px rgba(var(--bs-primary-rgb), .08);
        }
    </style>
@endonce