@extends('backend.layout.app')

@section('content')
<div class="page-content">
    <div class="container-fluid">
        <h4 class="mb-4">Edit Role: {{ ucfirst($role->name) }}</h4>

        <form action="{{route("admin.role-permission.update",$role->id)}}" method="POST">
            @csrf

            <!-- Role Name (readonly) -->
            <div class="mb-4">
                <label for="role_name" class="form-label">Role Name</label>
                <input type="text" name="name" id="role_name" class="form-control border" value="{{ ucfirst($role->name) }}" readonly>
            </div>

            <!-- Permissions -->
            <div class="mb-4">
                <h5>Permissions</h5>
                <div class="row g-3"> <!-- g-3 gives spacing -->
                    @foreach ($neededPermissions as $permission)
                        <div class="col-md-3">
                            <div class="p-3 border rounded bg-light">
                                <div class="form-check form-switch">
                                    <input 
                                        class="form-check-input" 
                                        type="checkbox" 
                                        name="permissions[]" 
                                        value="{{ $permission }}" 
                                        id="perm_{{ Str::slug($permission) }}"
                                        {{ $role->hasPermissionTo($permission) ? 'checked' : '' }}
                                        style="cursor:pointer"
                                    >
                                    <label class="form-check-label fw-bold" for="perm_{{ Str::slug($permission) }}">
                                        {{ ucwords($permission) }}
                                    </label>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>

            <div class="text-end">
                <button type="submit" class="btn btn-primary">Update Role</button>
            </div>
        </form>
    </div>
</div>
@endsection