<x-app-layout>
    <x-slot name="header">{{ __('Edit Role') }}: {{ $role->name }}</x-slot>

    <div class="card shadow-sm" style="max-width:700px;">
        <div class="card-body">
            <form method="POST" action="{{ route('roles.update', $role) }}">
                @csrf @method('PUT')
                <div class="mb-3">
                    <label class="form-label">{{ __('Role Name') }}</label>
                    <input type="text" name="name" class="form-control @error('name') is-invalid @enderror" value="{{ old('name', $role->name) }}" required>
                    @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>

                @if($permissions->count())
                <div class="mb-3">
                    <label class="form-label">{{ __('Permissions') }}</label>
                    @foreach($permissions as $group => $perms)
                    <div class="mb-2">
                        <div class="fw-semibold text-capitalize text-muted small mb-1">{{ $group }}</div>
                        <div class="row g-1">
                            @foreach($perms as $perm)
                            <div class="col-md-4 col-6">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="permissions[]" value="{{ $perm->id }}" id="perm_{{ $perm->id }}"
                                        {{ in_array($perm->id, old('permissions', $rolePermissions)) ? 'checked' : '' }}>
                                    <label class="form-check-label small" for="perm_{{ $perm->id }}">{{ $perm->name }}</label>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>
                    @endforeach
                </div>
                @endif

                <div class="d-flex gap-2">
                    <button type="submit" class="btn btn-primary">{{ __('Update Role') }}</button>
                    <a href="{{ route('roles.index') }}" class="btn btn-outline-secondary">{{ __('Cancel') }}</a>
                </div>
            </form>
        </div>
    </div>
</x-app-layout>
