<x-app-layout>
    <x-slot name="header">
        <h2 class="h4 mb-0">Hak Akses (Role &amp; Permission)</h2>
    </x-slot>

    @foreach ($roles as $role)
        <div class="card mb-3">
            <div class="card-header">{{ ucfirst(str_replace('_', ' ', $role->name)) }}</div>
            <div class="card-body">
                <form action="{{ route('super-admin.roles.update', $role) }}" method="POST">
                    @csrf @method('PUT')
                    <div class="row row-cols-2 row-cols-md-3 g-2 mb-3">
                        @foreach ($permissions as $permission)
                            <div class="col">
                                <div class="form-check">
                                    <input type="checkbox" class="form-check-input" name="permissions[]"
                                           id="perm-{{ $role->id }}-{{ $permission->id }}" value="{{ $permission->id }}"
                                           {{ $role->permissions->contains($permission->id) ? 'checked' : '' }}>
                                    <label class="form-check-label small" for="perm-{{ $role->id }}-{{ $permission->id }}">
                                        {{ $permission->name }}
                                    </label>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    <button class="btn btn-primary btn-sm">Simpan Hak Akses</button>
                </form>
            </div>
        </div>
    @endforeach
</x-app-layout>
