<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@include file="templates/validar.jsp"%>
<!DOCTYPE html>
<html lang="en">
  <head>
    <!--Estilos plantilla-->
    <%@include file="templates/header.jsp" %>
    <!--Estilos plantilla-->

    <!--Estilos propios-->

    <!--<link href="../js/lib/jquery-confirm-master/jquery-confirm.min.css" rel="stylesheet" type="text/css"/>-->
    <!--Estilos propios-->
    <link href="../css/pages/colors.css" rel="stylesheet" type="text/css"/>
    <link href="../css/pages/general.css" rel="stylesheet" type="text/css"/>
    <link href="../css/pages/index.css" rel="stylesheet" type="text/css"/>
  </head>

  <body onload="cargar();">

    <input id="codTitulo" name="codTitulo" type="hidden" value="<%= menu != null ? menu.getCodigoTitulo() : 0%>">
    <input id="codModulo" type="hidden" value="<%= menu != null ? menu.getCodigoModulo() : 0%>">
    <input id="codCategoria" type="hidden" value="<%= menu != null ? menu.getCodigoCategoria() : 0%>">
    <input id="codSubCategoria" type="hidden" value="<%= menu != null ? menu.getCodigoSubcategoria() : 0%>">

    <input type="hidden" id="defaultMail" name="defaultMail" value=""/>


    <!--navbar - sidebar-->
    <%@include file="templates/header-body.jsp" %>
    <!--navbar - sidebar-->

    <%@include file="templates/page-header.jsp" %>


    <!--contenido-->

    <!-- ------------------------------------------------------------------------------------------------------ -->
    <!-- ------------------------------- Panel de busqueda de fichas pendientes ------------------------------- -->
    <!-- ------------------------------------------------------------------------------------------------------ -->

    <div class="row">
      <div class="col-md-6 col-md-offset-3">
        <div class="panel so-card-2">
          <!--<div class="panel-heading bg-blue-800">-->
          <div class="panel-heading bg-primary">
            <h6 class="panel-title">
              <i class="fa fa-search"></i>&nbsp;&nbsp;Buscar fichas pendientes
            </h6>
            <div class="heading-elements">
              <!--<button type="button" class="btn btn-info btn-ladda-progress"  id="btnLimpiarFiltroFichaPendiente"><i class="fa fa-refresh fa-lg position-left"></i> Limpiar filtro</button>-->
              <button type="button" class="btn bg-orange btn-ladda btn-ladda-progress" data-style="expand-right" data-spinner-size="20" id="btnLimpiarFiltroFichaPendiente"><span class="ladda-label"><i class="fa fa-filter fa-lg"></i> Limpiar filtro</span><span class="ladda-spinner"></span><div class="ladda-progress" style="width: 158px;"></div></button>
            </div>
          </div>
          <div class="panel-body">
            <form action="#" method="post" id="formBusquedaFichaPendiente" name="formBusquedaFichaPendiente">
              <div class="row">
                <div class="col-md-4">
                  <div class="form-group">
                    <label for="cboCriterioBusqueda" class="text-semibold">Criterio <span class="text-danger">*</span></label>
                    <select class="select" id="cboCriterioBusqueda" name="cboCriterioBusqueda">
                      <option value="0">[SELECCIONAR]</option>
                      <option value="1">TIPO DE DOCUMENTO</option>
                      <option value="2">APELLIDOS</option>
                      <option value="3">FECHA DE REGISTRO</option>
                    </select>
                  </div>
                </div>
                <div id="divRowFiltro1"></div>
                <div id="divRowFiltro2"></div>
              </div>
              <div class="row">
                <div class="col-md-12 text-danger text-right text-semibold">
                  (*) Campos obligatorios
                </div>
              </div>
              <div class="row">
                <div class="col-md-12 text-center">
                  <button type="submit" class="btn bg-success text-center" id="btnBusquedaFichaPendiente"><i class="fa fa-search fa-lg position-left"></i> Buscar</button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>

    <!-- ------------------------------------------------------------------------------------------------------ -->
    <!-- ------------------------------- Panel de busqueda de fichas pendientes ------------------------------- -->
    <!-- ------------------------------------------------------------------------------------------------------ -->




















    <!-- ------------------------------------------------------------------------------------------------------ -->
    <!-- ------------------------------- Panel de listado de fichas pendientes -------------------------------- -->
    <!-- ------------------------------------------------------------------------------------------------------ -->
    <div class="row">
      <div class="col-md-12">
        <div class="panel so-card-2">
          <div class="panel-heading bg-primary">
            <h6 class="panel-title">
              <i class="fa fa-file"></i>&nbsp;&nbsp;Listado de fichas pendientes
              <a class="heading-elements-toggle"><i class="icon-more"></i></a>
            </h6>
            <div class="heading-elements">
              <button type="button" class="btn bg-primary-800 btn-sm" id="btnAbrirModalRegistrarNuevaFicha">
                <i class="fa fa-plus fa-lg position-left"></i> Nueva ficha
              </button>
            </div>
          </div>
          <table class="table table-bordered table-striped table-framed table-xxs" id="tblListadoFichaPendiente">
            <thead class="text-primary-800" style="background-color: #EEEEEE;">
              <tr>
                <th>#</th>
                <th>TIPO DOCUMENTO</th>
                <th>NRO DOCUMENTO</th>
                <th>APELLIDOS Y NOMBRES</th>
                <th>FECHA DE REGISTRO</th>
                <th>CORREO ELECTRÓNICO</th>
                <th>ESTADO</th>
                <th>ACCIÓN</th>
              </tr>
            </thead>
            <tbody>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <!-- ------------------------------------------------------------------------------------------------------ -->
    <!-- ------------------------------- Panel de listado de fichas pendientes -------------------------------- -->
    <!-- ------------------------------------------------------------------------------------------------------ -->



    <!-- ------------------------------------------------------------------------------------------------------ -->
    <!-- ------------------------------------ Modal de registro de nueva ficha -------------------------------- -->
    <!-- ------------------------------------------------------------------------------------------------------ -->

    <!--Modal nueva ficha-->
    <form action="#" method="post" id="formNuevaFicha" name="formNuevaFicha">
      <div id="modalRegistrarNuevaFicha" class="modal fade">
        <div class="modal-dialog modal-lg">
          <div class="modal-content">
            <div class="modal-header bg-primary">
              <h6 class="modal-title"><i class="fa fa-file fa-lg"></i>&nbsp;&nbsp;Nueva ficha</h6>
            </div>
            <div class="modal-body">
              <div class="row">
                <div class="col-md-4">
                  <div class="form-group">
                    <label for="cboSedeNuevaFicha" class="text-semibold">Sede <span class="text-danger">(*)</span></label>
                    <select class="select" id="cboSedeNuevaFicha" name="cboSedeNuevaFicha">
                      <option value="0">[SELECCIONAR]</option>
                    </select>
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="form-group">
                    <label for="cboAreaNuevaFicha" class="text-semibold">Área <span class="text-danger">(*)</span></label>
                    <select class="select" id="cboAreaNuevaFicha" name="cboAreaNuevaFicha">
                      <option value="0">[SELECCIONAR]</option>
                    </select>
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="form-group">
                    <label for="cboCargoNuevaFicha" class="text-semibold">Cargo <span class="text-danger">(*)</span></label>
                    <select class="select" id="cboCargoNuevaFicha" name="cboCargoNuevaFicha">
                      <option value="0">[SELECCIONAR]</option>
                    </select>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-6">
                  <div class="form-group">
                    <label for="cboTipoDocumentoNuevaFicha" class="text-semibold">Tipo de Documento <span class="text-danger">(*)</span></label>
                    <select class="select" id="cboTipoDocumentoNuevaFicha" name="cboTipoDocumentoNuevaFicha">
                      <option value="0">[SELECCIONAR]</option>
                    </select>
                  </div>                    
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <div>
                      <label for="txtNumeroDocumentoNuevaFicha" class="text-semibold">Número de Documento <span class="text-danger">(*)</span></label>
                      <span class="pull-right" id="linkValidarDNI"></span>
                    </div>
                    <input type="text" class="form-control text-uppercase" placeholder="Ingresar número de documento" id="txtNumeroDocumentoNuevaFicha" name="txtNumeroDocumentoNuevaFicha" maxlength="15" autocomplete="off" required disabled>
                  </div>                    
                </div>
              </div>
              <div class="row">
                <div class="col-md-12" id="respuestaHTML">
                </div>
              </div>
              <div class="row" id="ventanaEmergenciaNuevaFicha">
              </div>
              <div class="row">
                <div class="col-md-12">
                  <div class="form-group">
                    <div class="row">
                      <div class="col-md-6">
                        <label for="txtCorreoNuevaFicha" class="text-semibold">Correo electrónico <span class="text-danger">(*)</span></label>
                      </div>
                      <div class="col-md-6 text-right" id="switcheryHTML">
                      </div>
                    </div>
                    <input type="email" class="form-control text-uppercase" placeholder="Ingresar correo electrónico" id="txtCorreoNuevaFicha" name="txtCorreoNuevaFicha" maxlength="50" autocomplete="off" required>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-12 text-danger text-right text-semibold">
                  (*) Campos obligatorios
                </div>
              </div>
            </div>
            <div class="modal-footer">
              <button type="submit" class="btn bg-primary" id="btnRegistrarNuevaFicha"><i class="fa fa-check fa-lg position-left"></i>Registrar</button>
              <button type="button" class="btn bg-danger" data-dismiss="modal" id="btnCancelarRegistarNuevaFicha"><i class="fa fa-close fa-lg position-left"></i>Cerrar</button>
            </div>
          </div>
        </div>
      </div>
    </form>
    <!-- /Modal nueva ficha-->
    <!-- ------------------------------------------------------------------------------------------------------ -->
    <!-- ------------------------------------ Modal de registro de nueva ficha -------------------------------- -->
    <!-- ------------------------------------------------------------------------------------------------------ -->


    <!-- ------------------------------------------------------------------------------------------- -->
    <!-- ------------------------------------ Modal de editar ficha -------------------------------- -->
    <!-- ------------------------------------------------------------------------------------------- -->
    <form action="#" method="post" id="formEditarFicha" name="formEditarFicha">
      <div id="modalEditarFicha" class="modal fade">
        <div class="modal-dialog modal-lg">
          <div class="modal-content">
            <div class="modal-header bg-primary">
              <h6 class="modal-title"><i class="fa fa-pencil fa-lg"></i>&nbsp;&nbsp;Editar ficha</h6>
            </div>
            <div class="modal-body">
              <div class="row">
                <div class="col-md-12">
                  <div class="alert alert-warning no-border">
                    <span class="text-bold">¡AVISO!</span>
                    <p>Al actualizar la ficha, automáticamente se realizarán las siguientes acciones:</p>
                    <ul>
                      <li>Se desactivará el código de verificación de ficha enviado anteriormente.</li>
                      <li>Se enviará un nuevo código de verificación al correo indicado.</li>
                    </ul>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-4">
                  <div class="form-group">
                    <label for="cboSedeEditarFicha" class="text-semibold">Sede <span class="text-danger">*</span></label>
                    <select class="select" id="cboSedeEditarFicha" name="cboSedeEditarFicha">
                      <option value="0">[SELECCIONAR]</option>
                    </select>
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="form-group">
                    <label for="cboAreaEditarFicha" class="text-semibold">Área <span class="text-danger">*</span></label>
                    <select class="select" id="cboAreaEditarFicha" name="cboAreaEditarFicha">
                      <option value="0">[SELECCIONAR]</option>
                    </select>
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="form-group">
                    <label for="cboCargoEditarFicha" class="text-semibold">Cargo <span class="text-danger">*</span></label>
                    <select class="select" id="cboCargoEditarFicha" name="cboCargoEditarFicha">
                      <option value="0">[SELECCIONAR]</option>
                    </select>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-6">
                  <div class="form-group">
                    <label for="cboTipoDocumentoEditarFicha" class="text-semibold">Tipo de Documento <span class="text-danger">*</span></label>
                    <select class="select" id="cboTipoDocumentoEditarFicha" name="cboTipoDocumentoEditarFicha">
                      <option value="0">[SELECCIONAR]</option>
                    </select>
                  </div>                    
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <div>
                      <label for="txtNumeroDocumentoEditarFicha" class="text-semibold">Número de Documento <span class="text-danger">*</span></label>
                      <span class="pull-right" id="linkValidarDNIEditarFicha"></span>
                    </div>
                    <input type="text" class="form-control text-uppercase" placeholder="Ingresar número de documento" id="txtNumeroDocumentoEditarFicha" name="txtNumeroDocumentoEditarFicha" maxlength="15" autocomplete="off" required>
                  </div>                    
                </div>
              </div>
              <div class="row">
                <div class="col-md-12" id="respuestaHTMLEditarFicha">
                </div>
              </div>
              <div class="row" id="ventanaEmergenciaEditarFicha">
              </div>
              <div class="row">
                <div class="col-md-12">
                  <div class="form-group">
                    <div class="row">
                      <div class="col-md-6">
                        <label for="txtCorreoEditarFicha" class="text-semibold">Correo electrónico <span class="text-danger">*</span></label>
                      </div>
                      <div class="col-md-6 text-right" id="switcheryHTMLEditarFicha">
                      </div>
                    </div>
                    <input type="email" class="form-control text-uppercase" placeholder="Ingresar correo electrónico" id="txtCorreoEditarFicha" name="txtCorreoEditarFicha" maxlength="50" autocomplete="off" required>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-12 text-danger text-right text-semibold">
                  (*) Campos obligatorios
                </div>
              </div>
            </div>
            <div class="modal-footer">
              <button type="submit" class="btn bg-success" id="btnEditarFicha"><i class="fa fa-check fa-lg position-left"></i>Actualizar</button>
              <button type="button" class="btn bg-danger" data-dismiss="modal" id="btnCancelarEditarFicha"><i class="fa fa-close fa-lg position-left"></i>Cancelar</button>
            </div>
          </div>
        </div>
      </div>
    </form>
    <!-- ------------------------------------------------------------------------------------------- -->
    <!-- ------------------------------------ Modal de editar ficha -------------------------------- -->
    <!-- ------------------------------------------------------------------------------------------- -->
    <!--contenido-->


    <!--javascript plantilla-->
    <%@include file="templates/footer-body.jsp" %>
    <!--select-->
    <!--<script type="text/javascript" src="../plantilla/assets/js/plugins/forms/selects/bootstrap_select.min.js"></script>-->
    <!--select2-->
    <script type="text/javascript" src="../plantilla/assets/js/plugins/forms/selects/select2.min.js"></script>
    <!--datatable-->
    <script type="text/javascript" src="../plantilla/assets/js/plugins/tables/datatables/datatables.min.js"></script>
    <!--datepicker-->
    <script type="text/javascript" src="../plantilla/assets/js/core/libraries/jquery_ui/widgets.min.js"></script>
    <!--validInput-->
    <script type="text/javascript" src="../plantilla/assets/js/plugins/validateInput/validate_inputs.js"></script>
    <!--validate-->
    <script type="text/javascript" src="../plantilla/assets/js/plugins/forms/validation/validate.min.js"></script>
    <script type="text/javascript" src="../plantilla/assets/js/plugins/forms/validation/additional_methods.min.js"></script>
    <script type="text/javascript" src="../plantilla/assets/js/plugins/forms/validation/localization/messages_es_PE.js"></script>
    <script type="text/javascript" src="../js/pages/newRulesValidate.js"></script>
    <!--javascript plantilla-->

    <!--datatable-->
    <script type="text/javascript" src="../plantilla/assets/js/plugins/tables/datatables/datatables.min.js"></script>
    <script type="text/javascript" src="../plantilla/assets/js/plugins/forms/selects/select2.min.js"></script>
    <script type="text/javascript" src="../plantilla/assets/js/plugins/tables/datatables/extensions/responsive.min.js"></script>
    <!--datatable-->


    <!--javascript lib api-reniec--> 
    <script src="../js/lib/reniec-sunat-js.min.js" type="text/javascript"></script>
    <!--javascript lib api-reniec--> 



    <!--button spinner-->
    <script type="text/javascript" src="../plantilla/assets/js/plugins/buttons/spin.min.js"></script>
    <script type="text/javascript" src="../plantilla/assets/js/plugins/buttons/ladda.min.js"></script>
    <script src="../js/lib/simple-input-validate.js" type="text/javascript"></script>

    <!--switchery-->
    <script type="text/javascript" src="../plantilla/assets/js/plugins/forms/styling/uniform.min.js"></script>
    <script type="text/javascript" src="../plantilla/assets/js/plugins/forms/styling/switchery.min.js"></script>
    <script type="text/javascript" src="../plantilla/assets/js/plugins/forms/styling/switch.min.js"></script>

    <!--axios-->
    <script src="../js/lib/axios.min.js" type="text/javascript"></script>

    <!--javascript general-->
    <script type="text/javascript" src="../js/lib/jquery-confirm-master/jquery-confirm.min.js"></script>
    <script src="../js/pages/general.js" type="text/javascript"></script>
    <script src="../js/pages/menu.js" type="text/javascript"></script>

    <!--javascript general-->


    <!--javascript propios-->
    <script type="text/javascript" src="../js/pages/indexPage/inicializeComponents.js">//inizilizeComponents</script>
    <script type="text/javascript" src="../js/pages/indexPage/configPanelBusqueda.js">//config panel de busqueda</script>
    <script type="text/javascript" src="../js/pages/indexPage/request.js">//request - peticiones</script>
    <script type="text/javascript" src="../js/pages/indexPage/buscarFichasPendientes.js">//buscar fichas pendientes</script>
    <script type="text/javascript" src="../js/pages/indexPage/nuevaFicha.js">//nueva ficha</script>
    <script type="text/javascript" src="../js/pages/indexPage/editarFicha.js">//editar ficha</script>
    <script type="text/javascript" src="../js/pages/indexPage/validarVacantes.js">//validar vacantes</script>
    <script type="text/javascript" src="../js/pages/indexPage/anularFicha.js">//anular vacantes</script>
    <!--javascript propios-->
  </body>
</html>
<%    }
%>