<%@ page import="com.mycompany.moduloseguridad.utilities.dotenSrv" %>
<%@ page import="io.github.cdimascio.dotenv.Dotenv" %>
<%@ page import="com.mycompany.moduloseguridad.utilities.OsUtils" %>
<%@page contentType="text/html" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <%@include file="templates/header.jsp" %>
    <!--template-core-->

    <!--css-->
    <link href="../css/general.css" rel="stylesheet" type="text/css"/>
    <!--css-->
</head>
<%
    String TP = dotenSrv.obtenerValorVariableEntorno("TRISMEGISTO_ASISTENCIA_URL");
    String TPPrueba = dotenSrv.obtenerValorVariableEntorno("TRISMEGISTO_ASISTENCIA_PRUEBA_URL");
%>
<script type="application/javascript">
    const TP = "<%=TP%>";
    const TPPrueba = "<%=TPPrueba%>";
</script>
<body onload="segundaCarga();">
<%@include file="templates/header-body.jsp" %>
<!--  content -->
<div class="row  animated fadeIn">
    <div class="col-sm-12 col-md-12 col-lg-6 col-centered">
        <div class="panel panel-primary card-3" style="margin-top: 30px">
            <div class="panel-heading" style="padding: 8px 15px">
                <h6 class="panel-title" style="font-size: 15px; font-family: inherit"><i class="icon icon-search4"></i>&nbsp;
                    Búsqueda de Tipos de Usuario</h6>
                <div class="heading-elements">
                    <div class="checkbox checkbox-switchery">
                        <label>
                            <span id="txtEstado"></span>
                            <input type="checkbox" id="cbkEstado">
                        </label>
                    </div>
                </div>
            </div>
            <div class="panel-body" id="panelSearch">
                <form id="formUsuario" onsubmit="return false" autocomplete="off">
                    <div class="row">
                        <%--                <div class='divBusqueda col-md-12'>--%>
                        <%--                  <div class="form-group">--%>
                        <%--                    <label style="font-size: small">--%>
                        <%--                      Buscar por:  --%>
                        <%--                    </label>--%>
                        <%--                    <span class="asterisk">(*)</span>--%>
                        <%--                    <select id="cboTipoBusqueda" class="form-control" name="cboTipoBusqueda">--%>
                        <%--                      <option value="">SELECCIONE FILTRO</option>--%>
                        <%--                      <option value="4">TRABAJADOR (APELLIDOS Y/O NOMBRES)</option>--%>
                        <%--                      <option value="1">USUARIO (NICKNAME)</option>--%>
                        <%--                      <option value="2">PROYECTO</option>--%>
                        <%--                      <option value="3">TIPO DE USUARIO</option>--%>
                        <%--                      <option value="5">CARGO</option>--%>
                        <%--                    </select>--%>
                        <%--                  </div>--%>
                        <%--                </div>--%>
                        <div class='col-md-4'>
                            <div class="form-group">
                                <label style="font-size: small">
                                    Nº Documento / Nickname:
                                </label>
                                <input type="text" id="txtTrabajador" name="txtTrabajador" class="form-control" value=""
                                       placeholder="INGRESAR PERSONAL" style="text-transform:uppercase;">
                            </div>
                        </div>
                        <div class='col-md-4'>
                            <div class="form-group">
                                <label style="font-size: small">
                                    Cargos:
                                </label>
                                <span class="asterisk">(*)</span>
                                <select id="cboCargos" name="cboCargos" class="form-control">
                                    <option value="">TODOS</option>
                                </select>
                            </div>
                        </div>
                            <div class=' col-md-4'>
                                <div class="form-group">
                                    <label style="font-size: small">
                                        Proyecto:
                                    </label>
                                    <span class="asterisk">(*)</span>
                                    <select id="cboProyecto" class="form-control" name="cboProyecto">
                                        <option value="0">SELECCIONE UN PROYECTO</option>
                                    </select>
                                </div>
                            </div>
                    </div>
                        <div class="row">
                            <div class='col-md-4'>
                                <div class="form-group">
                                    <label style="font-size: small">
                                        Sedes:
                                    </label>
                                    <select id="cboSede" class="form-control" name="cboSede">
                                        <option value="0">TODOS</option>
                                    </select>
                                </div>
                            </div>
                            <div class='col-md-4'>
                                <div class="form-group">
                                    <label style="font-size: small">
                                        Tipo de Usuario:
                                    </label>
                                    <span class="asterisk">(*)</span>
                                    <select id="cboTipoUsuario" class="form-control" name="cboTipoUsuario">
                                        <option value="0">SELECCIONE UN TIPO DE USUARIO</option>
                                    </select>
                                </div>
                            </div>
                            <div class='col-md-4'>
                                <div class="form-group">
                                    <label style="font-size: small">
                                        Estado Usuario :
                                    </label>
                                    <span class="asterisk">(*)</span>
                                    <select id="cboEstadoTipoUsuario" class="form-control" name="cboTipoUsuario">
                                        <option value="2">TODOS</option>
                                        <option value="1">ACTIVOS</option>
                                        <option value="0">INACTIVOS</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    <div style="display:flex; align-items: center; justify-content: space-between;">
                        <div class='col-md-4'>
                            <div class="form-group">
                                <label style="font-size: small">
                                    Estado Personal:
                                </label>
                                <select id="cboEstado" class="form-control" name="cboEstado">
                                    <option value="0">TODOS</option>
                                    <option value="1">HABILITADO</option>
                                    <option value="2">INHABILITADO</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="text-center">
                                <button class="btn bg-primary border-primary-600 btn-xs" type="button" id="btnBuscar"><i
                                        class="fa fa-search"></i> Buscar
                                </button>
                                <button class="btn bg-orange border-orange-600 btn-xs" type="button" id="btnLimpiar"><i
                                        class="fa fa-refresh"></i> Limpiar
                                </button>
                            </div>
                        </div>
                    </div>
<%--                    <div class="row" style="display: flex; justify-content: center;">--%>
<%--                            <div class="col-md-4">--%>
<%--                                    <div class="text-center">--%>
<%--                                        <button class="btn bg-primary border-primary-600 btn-xs" type="button" id="btnBuscar"><i--%>
<%--                                                class="fa fa-search"></i> Buscar--%>
<%--                                        </button>--%>
<%--                                        <button class="btn bg-orange border-orange-600 btn-xs" type="button" id="btnLimpiar"><i--%>
<%--                                                class="fa fa-refresh"></i> Limpiar--%>
<%--                                        </button>--%>
<%--                                    </div>--%>
<%--                            </div>--%>
<%--                        </div>--%>
                </form>
            </div>
        </div>
    </div>

    <div class="col-sm-12 col-md-12 col-lg-11 col-centered">
        <div class="panel panel-primary card-3" style="margin-top: 30px">
            <div class="panel-heading" style="padding: 8px 15px">
                <h6 class="panel-title" style="font-size: 15px; font-family: inherit"><i class="fa fa-list"></i>&nbsp;
                    Listado de Usuarios</h6>
                <div class="heading-elements">
                    <button type="button" id="btnNuevoUsuario" class="btn bg-slate border-slate-600 btn-xs"><i
                            class="glyphicon glyphicon-plus"></i>&nbsp; Nuevo Usuario
                    </button>
                </div>
            </div>
            <div class="table-responsive">
                <table class="table dataTable table-striped table-hover table-sm table-bordered display"
                       id="tblUsuario">
                    <thead>
                    <tr>
                        <th class="text-center">CÓDIGO</th>
                        <th class="text-center">USUARIO</th>
                        <th class="text-center">DATOS</th>
                        <th class="text-center">ÁREA</th>
                        <th class="text-center">CARGO</th>
                        <th class="text-center">SEDE</th>
                        <th class="text-center">ESTADO</th>
                        <th class="text-center">ACCIONES</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>
<!-- / content -->
<%@include file="templates/footer-body.jsp" %>
<!--js-->
<script src="../js/pages/usuario.js" type="text/javascript"></script>
<script src="../lib/js/crypto-js.min.js"></script>
<!--js-->
</body>
</html>