@php
    $selectedPermissions = collect(old('permissions', $role->permissions->pluck('id')->all()));
    $grouped = $permissions->groupBy('group');
    $actions = collect(['view', 'create', 'update']);
@endphp

<div class="card mb-4">
    <div class="card-body">
        <div class="row g-3">
            <div class="col-md-6">
                <label class="form-label">Role Name <span class="text-danger">*</span></label>
                <input type="text" name="name" class="form-control"
                       value="{{ old('name', $role->name) }}" required>
            </div>
            <div class="col-md-6">
                <label class="form-label">Description</label>
                <textarea name="description" rows="1" class="form-control"
                          placeholder="Brief summary of this role">{{ old('description', $role->description) }}</textarea>
            </div>
        </div>
    </div>
</div>

@foreach($grouped as $group => $items)
    @php
        $itemByAction = $items->keyBy(fn($permission) => \Illuminate\Support\Str::afterLast($permission->slug, '.'));
    @endphp
    <div class="card mb-3">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="mb-0">{{ $group ?? 'General' }}</h5>
            <div class="btn-group btn-group-sm" role="group" aria-label="Toggle permissions for {{ $group ?? 'General' }}">
                @foreach($actions as $action)
                    @php
                        $allChecked = $items->filter(fn($permission) => \Illuminate\Support\Str::endsWith($permission->slug, '.' . $action))
                            ->pluck('id')
                            ->every(fn($id) => $selectedPermissions->contains($id));
                    @endphp
                    <button type="button" class="btn btn-outline-secondary js-toggle-action"
                            data-action="{{ $action }}"
                            data-group="{{ $group }}"
                            data-checked="{{ $allChecked ? 'true' : 'false' }}">
                        {{ ucfirst($action) }}
                    </button>
                @endforeach
            </div>
        </div>
        <div class="card-body">
            <div class="row row-cols-1 row-cols-md-2 g-3">
                @foreach($items->groupBy(function($permission) {
                    // For permissions like "issues.history.view", extract "issues.history"
                    // For permissions like "issues.view", extract "issues"
                    $parts = explode('.', $permission->slug);
                    // Remove the last part (action) and join the rest
                    array_pop($parts);
                    return implode('.', $parts);
                }) as $moduleSlug => $modulePermissions)
                    <div class="col">
                        <div class="border rounded h-100 p-3">
                            <p class="fw-semibold mb-3 text-uppercase small text-muted">
                                {{ \Illuminate\Support\Str::headline($moduleSlug ?? ($group ?? 'General')) }}
                            </p>
                            @foreach($actions as $action)
                                @php($permission = $modulePermissions->first(fn($p) => \Illuminate\Support\Str::endsWith($p->slug, '.' . $action)))
                                <div class="form-check mb-2">
                                    @if($permission)
                                        <input class="form-check-input js-permission-checkbox"
                                               type="checkbox"
                                               id="permission-{{ $permission->id }}"
                                               name="permissions[]"
                                               value="{{ $permission->id }}"
                                               data-action="{{ $action }}"
                                               data-group="{{ $group }}"
                                               @checked($selectedPermissions->contains($permission->id))>
                                        <label class="form-check-label" for="permission-{{ $permission->id }}">
                                            {{ ucfirst($action) }}
                                        </label>
                                        @if($permission->description)
                                            <small class="d-block text-muted">{{ $permission->description }}</small>
                                        @endif
                                    @else
                                        <span class="text-muted">{{ ucfirst($action) }} not applicable</span>
                                    @endif
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
@endforeach

<div class="d-flex gap-2">
    <button class="btn btn-primary" type="submit">{{ $role->exists ? 'Update Role' : 'Create Role' }}</button>
    <a href="{{ route('roles.index') }}" class="btn btn-outline-secondary">Cancel</a>
</div>

@push('scripts')
    <script>
        document.querySelectorAll('.js-toggle-action').forEach(button => {
            button.addEventListener('click', () => {
                const action = button.dataset.action;
                const group = button.dataset.group;
                const checkboxes = document.querySelectorAll(`.js-permission-checkbox[data-action="${action}"][data-group="${group}"]`);
                const shouldCheck = button.dataset.checked !== 'true';

                checkboxes.forEach(checkbox => {
                    checkbox.checked = shouldCheck;
                });

                button.dataset.checked = shouldCheck ? 'true' : 'false';
            });
        });
    </script>
@endpush