@extends('adminlte::page')

@section('title', 'Roles')

@section('content_header')
    <h1>Gestión de Roles</h1>
@stop

@section('content')
    <x-adminlte-card title="Listado de Roles" theme="info" icon="fas fa-user-tag">

        <a href="{{ route('roles.create') }}" class="btn btn-success mb-3">
            <i class="fas fa-plus"></i> Nuevo Rol
        </a>

        <x-adminlte-datatable
            id="tableRoles"
            :heads="['ID', 'Nombre', 'Permisos', 'Acciones']"
            striped hoverable bordered with-buttons>

            @foreach($roles as $role)
                <tr>
                    <td>{{ $role->id }}</td>
                    <td>{{ ucfirst($role->name) }}</td>
                    <td>
                        @foreach($role->permissions as $permission)
                            <span class="badge bg-primary">{{ $permission->name }}</span>
                        @endforeach
                    </td>
                    <td>
                        <a href="{{ route('roles.edit', $role->id) }}" class="btn btn-xs btn-warning mr-1">
                            <i class="fas fa-edit"></i>
                        </a>
                        <form action="{{ route('roles.destroy', $role->id) }}" method="POST" class="d-inline"
                              onsubmit="return confirm('¿Estás seguro de eliminar este rol?')">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-xs btn-danger">
                                <i class="fas fa-trash"></i>
                            </button>
                        </form>
                    </td>
                </tr>
            @endforeach

        </x-adminlte-datatable>

    </x-adminlte-card>
@stop