@extends('layouts.admin')

@section('title', 'Roles')

@section('content')
<div class="d-flex flex-wrap justify-content-between align-items-start gap-3 mb-4">
    <div>
        <h1 class="h3 mb-1">Roles y permisos</h1>
        <p class="text-secondary mb-0">Configuración de accesos por rol</p>
    </div>
</div>

<div class="accordion" id="roles">
    @foreach($roles as $role)
        <div class="accordion-item">
            <h2 class="accordion-header">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#role{{ $role->id }}">
                    {{ $role->name }}
                    <span class="badge text-bg-secondary ms-2">{{ $role->permissions_count }} permisos</span>
                </button>
            </h2>
            <div id="role{{ $role->id }}" class="accordion-collapse collapse" data-bs-parent="#roles">
                <form class="accordion-body" method="POST" action="{{ route('roles.update', $role) }}">
                    @csrf
                    @method('PUT')
                    <label class="form-label">Nombre</label>
                    <input class="form-control mb-3" name="name" value="{{ $role->name }}" required>
                    <label class="form-label">Descripción</label>
                    <textarea class="form-control mb-3" name="description">{{ $role->description }}</textarea>
                    @foreach($permissions as $group => $items)
                        <h3 class="h6 text-uppercase mt-3">{{ $group }}</h3>
                        <div class="row">
                            @foreach($items as $permission)
                                <label class="col-md-4 mb-2">
                                    <input type="checkbox" name="permissions[]" value="{{ $permission->id }}" @checked($role->permissions->contains($permission))>
                                    {{ $permission->code }}
                                </label>
                            @endforeach
                        </div>
                    @endforeach
                    <button class="btn btn-primary mt-3" type="submit">Guardar permisos</button>
                </form>
            </div>
        </div>
    @endforeach
</div>
@endsection