@extends('layouts.admin')

@section('title', 'Gestión de roles')

<!-- Header -->
@section('nombre_header', 'Gestión de roles')
@section('section_header', 'ADMINISTRACIÓN')

<!-- Content -->
@section('content')

<div class="container">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h3 class="card-title mb-0">
                        Panel de administración de roles
                    </h3>
                    <div class="ml-auto">
                        <button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#notasRolesModal">
                            <i class="fas fa-info-circle"></i> Notas
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    <p class="text-muted">
                        En este panel podrás gestionar los roles del sistema. Aquí puedes:
                        crear, editar y asignar roles a los usuarios.
                    </p>

                </div>
            </div>
        </div>
    </div>
    <!-- Botón para agregar nuevo rol -->
    @include('modules.admin.roles.components.btn_modal_agregar_rol')
</div>

<!-- Modal de Notas Importantes -->
<div class="modal fade" id="notasRolesModal" tabindex="-1" role="dialog" aria-labelledby="notasRolesModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="notasRolesModalLabel">
                    <i class="fas fa-exclamation-triangle text-warning"></i> Notas Importantes sobre Roles
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="alert alert-warning">
                    <ul class="mb-0">
                        <li class="mb-2">Los roles "admin" y "user" no pueden ser eliminados ni editados</li>
                        <li class="mb-2">Los permisos de los roles "admin" y "user" sí pueden ser modificados</li>
                        <li>Los campos editables para los roles son:
                            <ul>
                                <li>Nombre del rol</li>
                                <li>Descripción (indicando la función específica del rol)</li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>

<!-- Tabla de roles -->
@include('modules.admin.roles.components.roles_table',['roles'=> $roles])

@stop







@section('css')
    {{-- Add here extra stylesheets --}}
    {{-- <link rel="stylesheet" href="/css/admin_custom.css"> --}}
@stop


{{-- Push extra scripts --}}
@push('js')

@endpush