<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <h4 class="mb-sm-0">Configuración de permisos</h4>

            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="javascript: void(0);">Sistema</a></li>
                    <li class="breadcrumb-item">Configuración</li>
                    <li class="breadcrumb-item active">Configurar permisos</li>
                </ol>
            </div>

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

<div class="row">
    <div class="col-sm-12 col-md-12">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title mb-0"> <span class="text-danger"><strong>¡Atención!</strong></span> Los permisos serán heredados dependiendo del nivel en el que sean asignados, siempre teniendo prioridad el nivel superior.</h4>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-sm-6 col-md-6">
        <div class="card">
            <div class="card-header">
                <div class="row">
                    <div class="col-sm mt-0 pt-0">
                        <div class="h-100 d-flex align-items-center">
                            <h4 class="card-title mb-0">Módulos</h4>
                        </div>
                    </div>
                    <div class="col-sm mt-0 pt-0">
                        <div class="d-flex float-end">
                            <button class="btn btn-sm btn-danger" type="button" disabled id="btn-regresar">
                                <i class="fa-solid fa-chevron-left"></i> Regresar
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-sm-12 col-md-12 mb-2">
                        <span id="spn-ubicacion"></span>
                    </div>
                    <div class="col-sm-12">
                        <table class="table table-bordered" id="modulos-apartados-tbl" style="text-align:center; width:100% !important;">
                            <thead>
                                <th class="text-center">N°</th>
                                <th>Título</th>
                                <th>Descripción</th>
                                <th class="text-center">Acciones</th>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-md-6">
        <div class="card">
            <div class="card-header">
                <div class="row">
                    <div class="col-sm">
                        <div class="h-100 d-flex align-items-center">
                            <h4 class="card-title mb-0">Permisos</h4>
                        </div>
                    </div>
                    <div class="col-sm mt-0 pt-0">
                        <div class="d-flex float-end">
                            <button class="btn btn-sm btn-primary mt-0" type="button" disabled id="btn-permiso">
                                <i class="fas fa-plus"></i> Permiso
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-sm-12 col-md-12">
                        <table class="table table-bordered" id="permisos-tbl" style="text-align:center; width:100% !important;">
                            <thead>
                                <th class="text-center">N°</th>
                                <th>Tipo</th>
                                <th>Asignación</th>
                                <th>Permiso</th>
                                <th class="text-center">Acciones</th>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modal-permiso" data-bs-keyboard="false" data-bs-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Configuración de permiso</h4>
                <button class="btn-close" type="button" aria-label="Close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body pt-1">
                <form id="permiso-form" name="permiso-form" accept-charset="utf-8" method="POST" class="needs-validation" novalidate>
                    <div class="row">
                        <div class="col-sm-12 col-md-12">
                            <label for="cbo-tipo-asignacion" class="form-label">Tipo de asignación <span class="required">*</span></label>
                            <select class="form-select" id="cbo-tipo-asignacion" name="cbo-tipo-asignacion" required title="">
                                <option selected disabled value="">Seleccione</option>
                                <option value="rol">Rol</option>
                                <option value="usuario">Usuario</option>
                            </select>
                            <div class="invalid-feedback">
                                Por favor seleccione un tipo de asignación
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-12">
                            <label for="cbo-asignacion" class="form-label">Asignación <span class="required">*</span></label>
                            <div class="form-group has-validation">
                                <select id="cbo-asignacion" name="cbo-asignacion" class="form-control selectpicker" required title="" data-live-search="true">
                                    <option selected disabled value="">Seleccione</option>
                                </select>
                                <div class="invalid-feedback">
                                    Por favor seleccione una opción
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-12">
                            <label for="cbo-tipo-permiso" class="form-label">Tipo de permiso <span class="required">*</span></label>
                            <select class="form-select" id="cbo-tipo-permiso" name="cbo-tipo-permiso" required title="">
                                <option selected disabled value="">Seleccione</option>
                                <option value="LECTURA">Lectura</option>
                                <option value="ESCRITURA">Escritura</option>
                            </select>
                            <div class="invalid-feedback">
                                Por favor seleccione un tipo de permiso
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-sm btn-primary" type="submit" form="permiso-form">
                    Guardar
                </button>
                <button class="btn btn-sm btn-secondary" type="button" data-bs-dismiss="modal">
                    Cerrar
                </button>
            </div>
        </div>
    </div>
</div>

<?php
$jsModules = [
    'permisosPage'
];
