   /* global loader, bootbox, Cookies */

   //  VARIABLES GLOBALES
   let tableUsuarios;
   //  VARIABLES GLOBALES 

   const helpers = {
      tblUsuariosCharge() {
         tableUsuarios.destroy()
         initComponents.listarUsuarios()
      },
      tblUsuariosRefresh() {
         tableUsuarios.ajax.reload();
      }
   }

   const httpRequest = {
      listarSede() {
         return new Promise((resolve, reject) => {
            $.ajax({
               type: 'POST',
               url: "../UsuarioServlet?accion=listarSede",
               dataType: "json",
               success: function (data, textStatus, jqXHR) {
                  resolve(data)
               }, error: function (jqXHR, textStatus, errorThrown) {
                  reject('Error en la petición')
               }
            })
         })
      },
      validarUsuario(json) {
         return new Promise((resolve, reject) => {
            $.ajax({
               type: 'POST',
               url: "../UsuarioServlet?accion=validarUsuario",
               dataType: "json",
               data: {
                  json: JSON.stringify(json)
               },
               success: function (data, textStatus, jqXHR) {
                  resolve(data)
               }, error: function (jqXHR, textStatus, errorThrown) {
                  reject('Error en la petición')
               }
            })
         })
      },
      listarNivel() {
         return new Promise((resolve, reject) => {
            $.ajax({
               type: 'POST',
               url: "../UsuarioServlet?accion=listarNivel",
               dataType: "json",
               success: function (data, textStatus, jqXHR) {
                  resolve(data)
               }, error: function (jqXHR, textStatus, errorThrown) {
                  reject('Error en la petición')
               }
            })
         })
      },
      listarGrado(json) {
         return new Promise((resolve, reject) => {
            $.ajax({
               type: 'POST',
               url: "../UsuarioServlet?accion=listarGrado",
               dataType: "json",
               data: {
                  json: JSON.stringify(json)
               },
               success: function (data, textStatus, jqXHR) {
                  resolve(data)
               }, error: function (jqXHR, textStatus, errorThrown) {
                  reject('Error en la petición')
               }
            })
         })
      },
      eliminarUsuario(json) {
         return new Promise((resolve, reject) => {
            $.ajax({
               type: 'POST',
               url: "../UsuarioServlet?accion=eliminarUsuario",
               dataType: "json",
               data: {
                  json: JSON.stringify(json)
               },
               success: function (data, textStatus, jqXHR) {
                  resolve(data)
               }, error: function (jqXHR, textStatus, errorThrown) {
                  reject('Error en la petición')
               }
            })
         })
      },
      nuevoUsuario(json) {
         return new Promise((resolve, reject) => {
            $.ajax({
               type: 'POST',
               url: "../UsuarioServlet?accion=nuevoUsuario",
               dataType: "json",
               data: {
                  json: JSON.stringify(json)
               },
               success: function (data, textStatus, jqXHR) {
                  resolve(data)
               }, error: function (jqXHR, textStatus, errorThrown) {
                  reject('Error en la petición')
               }
            })
         })
      },
      editarUsuario(json) {
         return new Promise((resolve, reject) => {
            $.ajax({
               type: 'POST',
               url: "../UsuarioServlet?accion=editarUsuarios",
               dataType: "json",
               data: {
                  json: JSON.stringify(json)
               },
               success: function (data, textStatus, jqXHR) {
                  resolve(data)
               }, error: function (jqXHR, textStatus, errorThrown) {
                  reject('Error en la petición')
               }
            })
         })
      }
   }

   const DOMEvents = {
      tblUsuariosEditar() {
         $('#tblUsuarios tbody').on('click', '.editar', (e) => {
            let thisNode = e.currentTarget;
            let data = tableUsuarios.row($(thisNode).parents('tr')).data();
            console.log(data);
            let bbxEditarUsuario = bootbox.dialog({
               title: "<span>EDITAR USUARIO</span>",
               headerClass: "modal-bg-primary",
               size: "large",
               message: `<form id="formCrearUsuario" onsubmit="return false" autocomplete="off"> 
                              <div class="row">
                                  <div class="col-md-4"> 
                                       <div class="form-group">
                                          <label>Rol: <span class="asterisk">(*)</span></label>
                                          <select class="form-control" id="cboRol" name="cboRol">
                                             <option value="">[SELECCIONE]</option>
                                             <option value="ESTUDIANTE">ESTUDIANTE</option>
                                             <option value="DOCENTE">DOCENTE</option>
                                             <option value="DIRECTOR PRIMARIA">DIRECTOR PRIMARIA</option>
                                             <option value="DIRECTOR SECUNDARIA">DIRECTOR SECUNDARIA</option>
                                          </select>
                                       </div>
                                  </div>                                  
                                  <div class="col-md-4"> 
                                       <div class="form-group">
                                          <label>Tipo: <span class="asterisk">(*)</span></label>
                                          <select class="form-control" id="cboTipo" name="cboTipo">
                                             <option value="">[SELECCIONE]</option>
                                             <option value="OIDC">OIDC</option>
                                             <option value="MANUAL">MANUAL</option>
                                          </select>
                                       </div>
                                  </div>          
                                  <div class="col-md-4"> 
                                       <div class="form-group">
                                          <label>Dni: <span class="asterisk">(*)</span></label>
                                          <input type="text" class="form-control" id="txtDni2" name="txtDni" placeholder="Ingrese DNI">
                                       </div>
                                  </div>         
                              </div> 
                              <div class="row">
                                 <div class="col-md-4"> 
                                       <div class="form-group">
                                          <label>Apellido Paterno: <span class="asterisk">(*)</span></label>
                                          <input type="text" class="form-control" id="txtApepat" name="txtApepat" placeholder="Ingrese apellido paterno">
                                       </div>
                                  </div>      
                                  <div class="col-md-4"> 
                                       <div class="form-group">
                                          <label>Apellido Materno: <span class="asterisk">(*)</span></label>
                                          <input type="text" class="form-control" id="txApemat" name="txApemat" placeholder="Ingrese apellido materno">
                                       </div>
                                  </div>                                           
                                  <div class="col-md-4"> 
                                       <div class="form-group">
                                          <label>Nombre(s): <span class="asterisk">(*)</span></label>                                       
                                          <input type="text" class="form-control" id="txtNombre" name="txtNombre" placeholder="Ingrese nombre(s)">
                                       </div>
                                  </div>        
                              </div>
                              <div class="row">
                                  <div class="col-md-6"> 
                                       <div class="form-group">
                                          <label>Correo: <span class="asterisk">(*)</span></label>
                                          <input type="email" class="form-control" id="txtCorreo" name="txtCorreo" disabled="" placeholder="Correo Autogenerado">
                                       </div>
                                  </div>                                          
                                  <div class="col-md-6"> 
                                       <div class="form-group">
                                          <label>Contraseña temporal: <span class="asterisk">(*)</span></label>
                                          <input type="text" class="form-control" id="txtClave" name="txtClave" placeholder="Ingrese contraseña temporal">
                                       </div>
                                  </div>                                          
                              </div>
                              <div class="row rowCbo">
                                 <div class="colSede col-md-4">
                                       <div class="form-group">
                                          <label>Sede: <span class="asterisk">(*)</span></label>
                                          <select class="form-control" id="cboSede" name="cboSede">
                                             <option value="">[SELECCIONE]</option>
                                          </select>
                                       </div>
                                 </div>
                                 <div class="colNivel col-md-4">
                                       <div class="form-group">                                          
                                          <label>Nivel: <span class="asterisk">(*)</span></label>
                                          <select class="form-control" id="cboNivel" name="cboNivel">
                                             <option value="">[SELECCIONE]</option>
                                          </select>
                                       </div>
                                 </div>
                                 <div class="colGrado col-md-4 hide">
                                       <div class="form-group">
                                          <label>Grado: <span class="asterisk">(*)</span></label>
                                          <select class="form-control" id="cboGrado" name="cboGrado">
                                             <option value="">[SELECCIONE]</option>
                                          </select>
                                       </div>
                                 </div>
                              </div>
                          </form>
                        <div class="row">
                           <div class="col-md-12">
                               <div class="form-group" style="margin-bottom: 0px;">
                                   <div class="text-right"> 
                                       <span class="asterisk">(*)</span>  Campo obligatorio
                                   </div>
                               </div>
                           </div>
                        </div>`,
               buttons: {
                  si: {
                     label: "<i class='fa fa-check bigger-110'></i>&nbsp; Editar ",
                     className: "btn bg-success border-success-600 btn-xs",
                     callback: () => {
                        var valCrearUsuario = $("#formCrearUsuario").validate({
                           rules: {
                              cboRol: {required: true},
                              cboTipo: {required: true},
                              txtDni: {required: true},
                              txtCorreo: {required: true},
                              txtClave: {required: true},
                              txtApepat: {required: true},
                              txApemat: {required: true},
                              txtNombre: {required: true},
                              cboSede: {required: true},
                              cboNivel: {required: true},
                              cboGrado: {required: true}
                           },
                           messages: {
                              cboRol: {required: "<b>&times;</b>&nbsp;Este campo es requerido"},
                              cboTipo: {required: "<b>&times;</b>&nbsp;Este campo es requerido"},
                              txtDni: {required: "<b>&times;</b>&nbsp;Este campo es requerido"},
                              txtCorreo: {required: "<b>&times;</b>&nbsp;Este campo es requerido", email: "<b>&times;</b>&nbsp;Ingrese un correo válido"},
                              txtClave: {required: "<b>&times;</b>&nbsp;Este campo es requerido"},
                              txtApepat: {required: "<b>&times;</b>&nbsp;Este campo es requerido"},
                              txApemat: {required: "<b>&times;</b>&nbsp;Este campo es requerido"},
                              txtNombre: {required: "<b>&times;</b>&nbsp;Este campo es requerido"},
                              cboSede: {required: "<b>&times;</b>&nbsp;Este campo es requerido"},
                              cboNivel: {required: "<b>&times;</b>&nbsp;Este campo es requerido"},
                              cboGrado: {required: "<b>&times;</b>&nbsp;Este campo es requerido"}
                           }
                        });
                        if (valCrearUsuario.form()) {
                           let json = {
                              tipoUsuario: $('#cboTipo').val(),
                              correoUsuario: $('#txtCorreo').val(),
                              dniUsuario: $('#txtDni2').val(),
                              nombreUsuario: $('#txtNombre').val(),
                              apepatUsuario: $('#txtApepat').val(),
                              apematUsuario: $('#txApemat').val(),
                              nivelUsuario: $("#cboNivel option:selected").text(),
                              gradoUsuario: $("#cboGrado option:selected").text(),
                              codigoGrado: $('#cboGrado').val(),
                              sedeUsuario: $("#cboSede option:selected").text(),
                              claveUsuario: $('#txtClave').val(),
                              rolUsuario: $('#cboRol').val(),
                              codigoUsuario: data.codigoUsuario
                           }
                           httpRequest.validarUsuario(json)
                                   .then((rs) => {
                                      if (!rs.status) {
                                         msnError('El usuario ingresado ya existe', () => {
                                            $(`#tblUsuarios tbody .click${data.numeral}`).click()
                                         })
                                      } else {
                                         msnConfirm(" ¿Está seguro de modifcar este usuario? ", (option) => {
                                            if (option) {
                                               httpRequest.editarUsuario(json)
                                                       .then((data) => {
                                                          if (data.status) {
                                                             helpers.tblUsuariosRefresh()
                                                             msnSuccess("Usuario correctamente modificado")
                                                          } else {
                                                             if ((data.message).includes('--->')) {
                                                                msnError("Ha ocurrido un error")
                                                             } else {
                                                                msnError(data.message)
                                                             }
                                                          }
                                                       })
                                                       .catch(err => console.log(err))
                                            }
                                         })
                                      }
                                   })
                                   .catch(err => console.log(err))
                        } else {
                           return false
                        }
                     }
                  },
                  no: {
                     label: "<i class='fa fa-times bigger-110'></i>&nbsp; Cancelar",
                     className: "btn bg-danger border-danger-600 btn-xs",
                     callback: () => {
                     }
                  }
               }
            })
            bbxEditarUsuario.init(() => {
               initRequest.cargarSedeData(data.sedeUsuario)
               initRequest.cargarNivelData(data.nivelUsuario)
               this.generarCorreo()
               initComponents.initAlfiValidate()
               this.checkSelectsData(data.gradoUsuario)
               initComponents.chargeDataBootbox(data)
            })
         })
      },
      tblUsuariosAsignar() {
         $('#tblUsuarios tbody').on('click', '.asignar', (e) => {
            let thisNode = e.currentTarget;
            var data = tableUsuarios.row($(thisNode).parents('tr')).data();
            console.log(data);
            Cookies.set("dataUsuario", JSON.stringify(data), {expiry: 600})
            window.location = 'mantenimientoCurso.jsp'
         })
      },
      tblUsuarioEliminar() {
         $('#tblUsuarios tbody').on('click', '.eliminar', (e) => {
            let thisNode = e.currentTarget;
            var data = tableUsuarios.row($(thisNode).parents('tr')).data();
            console.log(data);
            msnConfirm(`<label>¿Seguro de eliminar este Usuario?</label>`, (option) => {
               if (option) {
                  httpRequest.eliminarUsuario(data)
                          .then((data) => {
                             if (data.status) {
                                helpers.tblUsuariosRefresh()
                                msnSuccess("Usuario correctamente eliminado")
                             } else {
                                if ((data.message).includes('--->')) {
                                   msnError("Ha ocurrido un error")
                                } else {
                                   msnError(data.message)
                                }
                             }
                          })
                          .catch(err => console.log(err))
               }
            });
         })
      },
      tblUsuariosTooltip() {
         $('#tblUsuarios').on('draw.dt', () => {
            $('[data-toggle="tooltip"]').tooltip();
         })
      },
      tblUsuariosBuscar() {
         $('#btnBuscar').click(() => {
            var valBusqUsuario = $("#frmBusqRequ").validate({
               rules: {
                  txtDni: {
                     required: true,
                     maxlength: 8,
                     minlength: 8
                  }
               },
               messages: {
                  txtDni: {
                     required: "<b>&times;</b>&nbsp;Este campo es requerido",
                     maxlength: "<b>&times;</b>&nbsp;Debe ingresar 8 dígitos",
                     minlength: "<b>&times;</b>&nbsp;Debe ingresar 8 dígitos"
                  }
               }
            });
            if (valBusqUsuario.form()) {
               helpers.tblUsuariosCharge()
            }
         })
      },
      tblUsuariosLimpiar() {
         $('#btnLimpiar').click(() => {
            $('#txtDni').val('')
            helpers.tblUsuariosCharge()
         })
      },
      checkSelects() {
         $('#cboNivel').change(() => {
            var cboNivel = $('#cboNivel').val()
            if (cboNivel !== '') {
               if (cboNivel !== '3') {
                  $(".colGrado").removeClass('hide')
                  initRequest.cargarGrado()
               } else {
                  $(".colGrado").addClass('hide')
                  $('#cboGrado').html('<option value="3" selected=true>Academias</option>')
               }
            } else {
               $(".colGrado").addClass('hide')
            }
         })
      },
      checkSelectsData(nombre) {
         $('#cboNivel').change(() => {
            var cboNivel = $('#cboNivel').val()
            if (cboNivel !== '') {
               if (cboNivel !== '3') {
                  $(".colGrado").removeClass('hide')
                  initRequest.cargarGradoData(nombre)
               } else {
                  $(".colGrado").addClass('hide')
                  $('#cboGrado').html('<option value="3" selected=true>Academias</option>')
               }
            } else {
               $(".colGrado").addClass('hide')
            }
         })
      },
      nuevoUsuario() {
         $('#btnNuevo').click(() => {
            let bbxCrearUsuario = bootbox.dialog({
               title: "<span>EDITAR USUARIO</span>",
               headerClass: "modal-bg-primary",
               className: "bbxCrearUsuario",
               size: "large",
               message: `<form id="formCrearUsuario" onsubmit="return false" autocomplete="off"> 
                              <div class="row">
                                  <div class="col-md-4"> 
                                       <div class="form-group">
                                          <label>Rol: <span class="asterisk">(*)</span></label>
                                          <select class="form-control" id="cboRol" name="cboRol">
                                             <option value="">[SELECCIONE]</option>
                                             <option value="ESTUDIANTE">ESTUDIANTE</option>
                                             <option value="DOCENTE">DOCENTE</option>
                                             <option value="DIRECTOR PRIMARIA">DIRECTOR PRIMARIA</option>
                                             <option value="DIRECTOR SECUNDARIA">DIRECTOR SECUNDARIA</option>
                                          </select>
                                       </div>
                                  </div>                                  
                                  <div class="col-md-4"> 
                                       <div class="form-group">
                                          <label>Tipo: <span class="asterisk">(*)</span></label>
                                          <select class="form-control" id="cboTipo" name="cboTipo">
                                             <option value="">[SELECCIONE]</option>
                                             <option value="OIDC">OIDC</option>
                                             <option value="MANUAL">MANUAL</option>
                                          </select>
                                       </div>
                                  </div>          
                                  <div class="col-md-4"> 
                                       <div class="form-group">
                                          <label>Dni: <span class="asterisk">(*)</span></label>
                                          <input type="text" class="form-control" id="txtDni2" name="txtDni" placeholder="Ingrese DNI" maxlength="8">
                                       </div>
                                  </div>         
                              </div> 
                              <div class="row">
                                 <div class="col-md-4"> 
                                       <div class="form-group">
                                          <label>Apellido Paterno: <span class="asterisk">(*)</span></label>
                                          <input type="text" class="form-control" id="txtApepat" name="txtApepat" placeholder="Ingrese apellido paterno">
                                       </div>
                                  </div>      
                                  <div class="col-md-4"> 
                                       <div class="form-group">
                                          <label>Apellido Materno: <span class="asterisk">(*)</span></label>
                                          <input type="text" class="form-control" id="txApemat" name="txApemat" placeholder="Ingrese apellido materno">
                                       </div>
                                  </div>                                           
                                  <div class="col-md-4"> 
                                       <div class="form-group">
                                          <label>Nombre(s): <span class="asterisk">(*)</span></label>                                       
                                          <input type="text" class="form-control" id="txtNombre" name="txtNombre" placeholder="Ingrese nombre(s)">
                                       </div>
                                  </div>        
                              </div>
                              <div class="row">
                                  <div class="col-md-6"> 
                                       <div class="form-group">
                                          <label>Correo: <span class="asterisk">(*)</span></label>
                                          <input type="email" class="form-control" id="txtCorreo" name="txtCorreo" disabled="" placeholder="Correo Autogenerado">
                                       </div>
                                  </div>                                          
                                  <div class="col-md-6"> 
                                       <div class="form-group">
                                          <label>Contraseña temporal: <span class="asterisk">(*)</span></label>
                                          <input type="text" class="form-control" id="txtClave" name="txtClave" placeholder="Ingrese contraseña temporal">
                                       </div>
                                  </div>                                          
                              </div>
                              <div class="row rowCbo hide">
                                 <div class="colSede col-md-4">
                                       <div class="form-group">
                                          <label>Sede: <span class="asterisk">(*)</span></label>
                                          <select class="form-control" id="cboSede" name="cboSede">
                                             <option value="">[SELECCIONE]</option>
                                          </select>
                                       </div>
                                 </div>
                                 <div class="colNivel col-md-4">
                                       <div class="form-group">                                          
                                          <label>Nivel: <span class="asterisk">(*)</span></label>
                                          <select class="form-control" id="cboNivel" name="cboNivel">
                                             <option value="">[SELECCIONE]</option>
                                          </select>
                                       </div>
                                 </div>
                                 <div class="colGrado col-md-4 hide">
                                       <div class="form-group">
                                          <label>Grado: <span class="asterisk">(*)</span></label>
                                          <select class="form-control" id="cboGrado" name="cboGrado">
                                             <option value="">[SELECCIONE]</option>
                                          </select>
                                       </div>
                                 </div>
                              </div>
                          </form>
                        <div class="row">
                           <div class="col-md-12">
                               <div class="form-group" style="margin-bottom: 0px;">
                                   <div class="text-right"> 
                                       <span class="asterisk">(*)</span>  Campo obligatorio
                                   </div>
                               </div>
                           </div>
                        </div>`,
               buttons: {
                  si: {
                     label: "<i class='fa fa-check bigger-110'></i>&nbsp; Crear",
                     className: "btn bg-success border-success-600 btn-xs",
                     callback: () => {
                        var valCrearUsuario = $("#formCrearUsuario").validate({
                           rules: {
                              cboRol: {required: true},
                              cboTipo: {required: true},
                              txtDni: {
                                 required: true,
                                 maxlength: 8,
                                 minlength: 8
                              },
                              txtCorreo: {required: true},
                              txtClave: {required: true},
                              txtApepat: {required: true},
                              txApemat: {required: true},
                              txtNombre: {required: true},
                              cboSede: {required: true},
                              cboNivel: {required: true},
                              cboGrado: {required: true}
                           },
                           messages: {
                              cboRol: {required: "<b>&times;</b>&nbsp;Este campo es requerido"},
                              cboTipo: {required: "<b>&times;</b>&nbsp;Este campo es requerido"},
                              txtDni: {
                                 required: "<b>&times;</b>&nbsp;Este campo es requerido",
                                 maxlength: "<b>&times;</b>&nbsp;Debe ingresar 8 dígitos",
                                 minlength: "<b>&times;</b>&nbsp;Debe ingresar 8 dígitos"
                              },
                              txtCorreo: {required: "<b>&times;</b>&nbsp;Este campo es requerido", email: "<b>&times;</b>&nbsp;Ingrese un correo válido"},
                              txtClave: {required: "<b>&times;</b>&nbsp;Este campo es requerido"},
                              txtApepat: {required: "<b>&times;</b>&nbsp;Este campo es requerido"},
                              txApemat: {required: "<b>&times;</b>&nbsp;Este campo es requerido"},
                              txtNombre: {required: "<b>&times;</b>&nbsp;Este campo es requerido"},
                              cboSede: {required: "<b>&times;</b>&nbsp;Este campo es requerido"},
                              cboNivel: {required: "<b>&times;</b>&nbsp;Este campo es requerido"},
                              cboGrado: {required: "<b>&times;</b>&nbsp;Este campo es requerido"}
                           }
                        });
                        if (valCrearUsuario.form()) {
                           let json = {
                              tipoUsuario: $('#cboTipo').val(),
                              correoUsuario: $('#txtCorreo').val(),
                              dniUsuario: $('#txtDni2').val(),
                              nombreUsuario: $('#txtNombre').val(),
                              apepatUsuario: $('#txtApepat').val(),
                              apematUsuario: $('#txApemat').val(),
                              nivelUsuario: $("#cboNivel option:selected").text(),
                              gradoUsuario: $("#cboGrado option:selected").text(),
                              codigoGrado: $('#cboGrado').val(),
                              sedeUsuario: $("#cboSede option:selected").text(),
                              claveUsuario: $('#txtClave').val(),
                              rolUsuario: $('#cboRol').val()
                           }
                           httpRequest.validarUsuario(json)
                                   .then((data) => {
                                      if (!data.status) {
                                         msnError('El usuario ingresado ya existe', () => {
                                            $('#btnNuevo').click()
                                         })
                                      } else {
                                         msnConfirm(" ¿Está seguro de registrar este usuario? ", (option) => {
                                            if (option) {
                                               httpRequest.nuevoUsuario(json)
                                                       .then((data) => {
                                                          if (data.status) {
                                                             helpers.tblUsuariosRefresh()
                                                             msnSuccess("Usuario correctamente registrado")
                                                          } else {
                                                             if ((data.message).includes('--->')) {
                                                                msnError("Ha ocurrido un error")
                                                             } else {
                                                                msnError(data.message)
                                                             }
                                                          }
                                                       })
                                                       .catch(err => console.log(err))
                                            }
                                         })
                                      }
                                   })
                                   .catch(err => console.log(err))
                        } else {
                           return false
                        }
                     }
                  },
                  no: {
                     label: "<i class='fa fa-times bigger-110'></i>&nbsp; Cancelar",
                     className: "btn bg-danger border-danger-600 btn-xs",
                     callback: () => {
                     }
                  }
               }
            })
            bbxCrearUsuario.init(() => {
               initComponents.initAlfiValidate()
               initRequest.cargarSede()
               initRequest.cargarNivel()
               this.checkSelects()
               this.generarCorreo()
            })
         })
      },
      generarCorreo() {
         $('#cboRol').on('change', () => {
            $('#cboSede').val('')
            $('#cboNivel').val('')
            $('#cboGrado').val('')
            var rol = $('#cboRol').val();
            if (rol === '') {
               $('.rowCbo').addClass('hide')
               $('#txtDni2').val("");
               $('#txtCorreo').val("");
               $('#txtCorreo').attr('disabled', true);
               $('#txtCorreo').attr('placeholder', 'Correo Autogenerado');
               correo = 'Correo Autogenerado';
            } else if (rol === 'DIRECTOR PRIMARIA' || rol === 'DIRECTOR SECUNDARIA') {
               $('.colSede').removeClass('hide')
               $('.colNivel').addClass('hide')
               $('.colGrado').addClass('hide')
               $('.rowCbo').removeClass('hide')
               $('#txtCorreo').val("");
               $('#txtDni2').val("");
               $('#txtCorreo').attr('disabled', false);
               $('#txtCorreo').attr('placeholder', 'Ingrese Correo');
            } else if (rol === 'ESTUDIANTE' || rol === 'DOCENTE') {
               if (rol === 'DOCENTE') {
                  $('.rowCbo').addClass('hide')
               } else {
                  $('.colSede').removeClass('hide')
                  $('.colNivel').removeClass('hide')
                  $('.rowCbo').removeClass('hide')
               }
               $('#txtDni2').val("");
               $('#txtCorreo').val("");
               $('#txtCorreo').attr('disabled', true);
               $('#txtCorreo').attr('placeholder', 'Correo Autogenerado');
            }
         });
         $('#txtDni2').keydown(() => {
            var dni = $('#txtDni2').val();
            var rol = $('#cboRol').val();
            if (rol === 'ESTUDIANTE' || rol === 'DOCENTE') {
               if (dni.length >= 1) {
                  var letraRol = $("#cboRol option:selected").text().substring(1, 0).toLowerCase();
                  correo = letraRol + dni + "@sistemahelicoidal.edu.pe";
                  $('#txtCorreo').val(correo);
               } else {
                  $('#txtCorreo').val("");
               }
            }
         });
      },
      autoClickSearch() {
         $('#txtDni').keypress((e) => {
            if (e.keyCode === 13) {
               $('#btnBuscar').click()
            }
         })
      }
   }

   const initRequest = {
      cargarSede() {
         httpRequest.listarSede()
                 .then((data) => {
                    if (data.status) {
                       var print = " <option value=''>[SELECCIONE]</option> "
                       var lista = data.results
                       for (var i in lista) {
                          print += " <option value ='" + lista[i].codigoSede + "' " + "" + ">" + lista[i].nombreSede + "</option> "
                       }
                       $("#cboSede").html(print)
                    } else {
                       var print = " <option  value=''>No hay contenido</option> "
                       $("#cboSede").html(print)
                    }
                 })
                 .catch(err => console.log(err))
      },
      cargarNivel() {
         httpRequest.listarNivel()
                 .then((data) => {
                    if (data.status) {
                       var print = " <option value=''>[SELECCIONE]</option> "
                       var lista = data.results
                       for (var i in lista) {
                          print += " <option value ='" + lista[i].codigoNivel + "' " + "" + ">" + lista[i].nombreNivel + "</option> "
                       }
                       $("#cboNivel").html(print)
                    } else {
                       var print = " <option  value=''>No hay contenido</option> "
                       $("#cboNivel").html(print)
                    }
                 })
                 .catch(err => console.log(err))
      },
      cargarGrado() {
         let json = {
            parent: $("#cboNivel").val()
         }
         httpRequest.listarGrado(json)
                 .then((data) => {
                    if (data.status) {
                       var print = " <option value=''>[SELECCIONE]</option> "
                       var lista = data.results
                       for (var i in lista) {
                          print += " <option value ='" + lista[i].codigoGrado + "' " + "" + ">" + lista[i].nombreGrado + "</option> "
                       }
                       $("#cboGrado").html(print)
                    } else {
                       var print = " <option  value=''>No hay contenido</option> "
                       $("#cboGrado").html(print)
                    }
                 })
                 .catch(err => console.log(err))
      },
      cargarSedeData(nombre) {
         httpRequest.listarSede()
                 .then((data) => {
                    if (data.status) {
                       var print = " <option value=''>[SELECCIONE]</option> "
                       var lista = data.results
                       for (var i in lista) {
                          let selected = nombre === lista[i].nombreSede ? "selected=true" : ""
                          print += " <option value ='" + lista[i].codigoSede + "' " + " " + selected + " >" + lista[i].nombreSede + "</option> "
                       }
                       $("#cboSede").html(print)
                    } else {
                       var print = " <option  value=''>No hay contenido</option> "
                       $("#cboSede").html(print)
                    }
                 })
                 .catch(err => console.log(err))
      },
      cargarNivelData(nombre) {
         httpRequest.listarNivel()
                 .then((data) => {
                    if (data.status) {
                       var print = " <option value=''>[SELECCIONE]</option> "
                       var lista = data.results
                       for (var i in lista) {
                          let selected = capitalizeWords(nombre) === lista[i].nombreNivel ? "selected=true" : ""
                          print += " <option value ='" + lista[i].codigoNivel + "' " + " " + selected + " >" + lista[i].nombreNivel + "</option> "
                       }
                       $("#cboNivel").html(print)
                       $("#cboNivel").change()
                    } else {
                       var print = " <option  value=''>No hay contenido</option> "
                       $("#cboNivel").html(print)
                    }
                 })
                 .catch(err => console.log(err))
      },
      cargarGradoData(nombre) {
         let json = {
            parent: $("#cboNivel").val()
         }
         httpRequest.listarGrado(json)
                 .then((data) => {
                    if (data.status) {
                       var print = " <option value=''>[SELECCIONE]</option> "
                       var lista = data.results
                       for (var i in lista) {
                          let selected = capitalizeWords(nombre) === lista[i].nombreGrado ? "selected=true" : ""
                          print += " <option value ='" + lista[i].codigoGrado + "' " + " " + selected + " >" + lista[i].nombreGrado + "</option> "
                       }
                       $("#cboGrado").html(print)
                    } else {
                       var print = " <option  value=''>No hay contenido</option> "
                       $("#cboGrado").html(print)
                    }
                 })
                 .catch(err => console.log(err))
      }
   }

   const initComponents = {
      listarUsuarios() {
         json = {}
         if ($('#txtDni').val() !== "") {
            json.dniUsuario = $('#txtDni').val()
         }
         tableUsuarios = $("#tblUsuarios").DataTable({
            "language": {
               "lengthMenu": "Mostrar: _MENU_",
               "zeroRecords": "&nbsp;&nbsp;&nbsp; No se encontraron resultados",
               "info": "&nbsp;&nbsp;&nbsp; Mostrando del _START_ al _END_ de un total de _TOTAL_ registros",
               "infoEmpty": "&nbsp;&nbsp;&nbsp; Mostrando 0 de 0 registros",
               "search": "Filtrar:",
               "loadingRecords": "Cargando...",
               "processing": '<span style="width:100%;"><img src="http://www.snacklocal.com/images/ajaxload.gif"></span>',
               "paginate": {
                  "first": "First",
                  "last": "Last",
                  "next": "Siguiente",
                  "previous": "Anterior"
               }
            },
            dom: '<"datatable-scroll"t> < "datatable-footers"ip > ',
            "ajax": {
               type: 'POST',
               url: "../UsuarioServlet?accion=listarUsuarios",
               data: {
                  json: JSON.stringify(json)
               }
            },
            "bSort": false,
            "bFilter": false,
            "serverSide": true,
            "processing": true,
            "aaSorting": [],
            "ordering": false,
            "bLengthChange": false,
            "bInfo": true,
            "paging": true,
            "iDisplayLength": 20,
            "columnDefs": [
               {targets: 0, orderable: false, width: "5%", className: "text-center"},
               {targets: 1, orderable: false, width: "20%", className: "text-center"},
               {targets: 2, orderable: false, width: "7%", className: "text-center"},
               {targets: 3, orderable: false, width: "7%", className: "text-center"},
               {targets: 4, orderable: false, width: "15%", className: "text-center"},
               {targets: 5, orderable: false, width: "15%", className: "text-center"},
               {targets: 6, orderable: false, width: "10%", className: "text-center"}
            ],
            "columns": [
               {"data": "numeral"},
               {"data": null, "render": (data, type, row) => {
                     return capitalizeWords(row.nombreUsuario + ' ' + row.apellidosUsuario);
                  }
               },
               {"data": "dniUsuario"},
               {"data": "tipoUsuario", "render": (data, type, row) => {
                     return capitalizeWords(data);
                  }
               },
               {"data": "correoUsuario"},
               {"data": "rolUsuario", "render": (data, type, row) => {
                     return capitalizeWords(data);
                  }
               },
               {"data": null, "render": (data, type, row) => {
                     var actions = "";
                     actions += `<span data-toggle="tooltip" data-placement="left" title="Editar" style="cursor: pointer"> <i class='editar click${row.numeral} icon-pencil text-blue-800'></i>&nbsp;&nbsp; </span>`
                     actions += `<span data-toggle="tooltip" data-placement="left" title="Asignar" style="cursor: pointer"> <i class='asignar  icon-cog2 text-slate-700'></i>&nbsp;&nbsp; </span>`
                     actions += `<span data-toggle="tooltip" data-placement="left" title="Eliminar" style="cursor: pointer"> <i class='eliminar glyphicon glyphicon-trash text-danger-700'></i>&nbsp;&nbsp; </span>`
                     return actions;
                  }
               }
            ],
            fnDrawCallback: () => {
               loader.terminarLoader();
            }
         });
      },
      initAlfiValidate() {
         new Input({el: '#txtDni2', param: 'numbers'}).validate()
         new Input({el: '#txtApepat', param: 'letters'}).validate()
         new Input({el: '#txApemat', param: 'letters'}).validate()
         new Input({el: '#txtNombre', param: 'letters'}).validate()
         new Input({el: '#txtCorreo', param: 'email'}).validate()
         new Input({el: '#txtDni', param: 'numbers'}).validate()
      },
      chargeDataBootbox(data) {
         $('#cboRol').val(data.rolUsuario)
         $('#cboTipo').val((data.tipoUsuario).toUpperCase())
         $('#cboRol').change()
         $('#txtDni2').val(data.dniUsuario)
         $('#txtCorreo').val(data.correoUsuario)
         $('#txtClave').val(data.claveUsuario)
         $('#txtApepat').val(capitalizeWords(data.apepatUsuario))
         $('#txApemat').val(capitalizeWords(data.apematUsuario))
         $('#txtNombre').val(capitalizeWords(data.nombreUsuario))
      }
   }

   initialize = () => {
      initComponents.listarUsuarios()
      DOMEvents.nuevoUsuario()
      DOMEvents.tblUsuariosEditar()
      DOMEvents.tblUsuariosAsignar()
      DOMEvents.tblUsuarioEliminar()
      DOMEvents.tblUsuariosTooltip()
      DOMEvents.tblUsuariosBuscar()
      DOMEvents.tblUsuariosLimpiar()
      initComponents.initAlfiValidate()
      DOMEvents.autoClickSearch()
   }

   initialize()

   