@extends('main')

@section('title', 'Roles | Page')

@section('content')

    <div class="content">
        <div class="page-header">
            <div class="page-title">
                <h4>User Roles</h4>
                <h6>Manage User Permissions</h6>
            </div>
        </div>

        <div class="card">
            <div class="card-body">

                @foreach ($roles as $role)
                    <form method="POST" action="{{ route('admin.roles.update', $role->id) }}">
                        @csrf
                        @method('PUT')

                        <div class="mb-4">
                            <h5 class="card-title text-primary">{{ ucfirst($role->name) }}</h5>
                            <p class="text-muted">Manage permissions for this role</p>
                        </div>

                        <div class="form-group">
                            @foreach ($permissions as $permission)
                                <div class="form-check form-check-inline">
                                    <input type="checkbox" class="form-check-input" name="permissions[]"
                                        value="{{ $permission->name }}"
                                        {{ $role->hasPermissionTo($permission->name) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="permission{{ $permission->name }}">
                                        {{ ucfirst($permission->name) }}
                                    </label>
                                </div>
                            @endforeach
                        </div>

                        <div class="form-group mt-3">
                            <button type="submit" class="btn btn-primary">Update Permissions</button>
                        </div>
                    </form>

                    <hr> <!-- Add a line to separate each role block -->
                @endforeach

            </div>
        </div>
    </div>

@endsection