  <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />

    <!-- <script src="../lib/js/jquery-3.4.1.min.js"></script> -->
    <script src="../lib/js/select.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1>Usuarios</h1>
          </div>
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="#">Home</a></li>
              <li class="breadcrumb-item"><a href="#">Configuración</a></li>
              <li class="breadcrumb-item"><a href="#">Usuarios</a></li>
              <!--<li class="breadcrumb-item active">Opción</li>-->
            </ol>
          </div>
        </div>
      </div><!-- /.container-fluid -->
    </section>

	<!-- Modal -->
	<div class="modal fade" id="modal_usuarios" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
	  <div class="modal-dialog">
	    <div class="modal-content">
	      <div class="modal-header">
	        <h5 class="modal-title" id="exampleModalLabel">Usuarios</h5>   
	      </div>
	      <div class="modal-body">
	      	<input type="text" class="form-control col-sm-12 mb-3 text-uppercase" name="buscador_usuario" id="buscador_usuario" placeholder="Buscar usuario" onkeyup="consultaUsuario(this.value, 'frm_usuario', '<?php echo $_GET['id_usuario'] ?>', 'consultar_usuario', '../controlador/usuario.controlador.php');">
	       	<table class="table table-bordered">
	       		<thead>
	       			<tr>
	       				<td>Nombre</td>
	       				<td>Apellido</td>
	       			</tr>
	       		</thead>
	       		<tbody id="lista_usuarios">
	       		</tbody>
	       	</table>
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-success" data-dismiss="modal">Cerrar </button>
	      </div>
	    </div>
	  </div>
	</div>

    <!-- Main content -->
    <section class="content">

      <div class="container-fluid">
        <div class="row">
          <div class="col-12">
            <!-- Default box -->
            <div class="card">
              <!-- <div class="card-header">
                <h3 class="card-title">Opción no disponible</h3>

                <div class="card-tools">
                  <button type="button" class="btn btn-tool" data-card-widget="collapse" data-toggle="tooltip" title="Collapse">
                    <i class="fas fa-minus"></i></button>
                  <button type="button" class="btn btn-tool" data-card-widget="remove" data-toggle="tooltip" title="Remove">
                    <i class="fas fa-times"></i></button>
                </div>
              </div> -->
              <form class="" action="" method="post" autocomplete="off" id="frm_usuario">

                <input type="hidden" name="accion" id="accion" value="registrar_usuario">

                <div class="card-body">

                  <?php 

                    require_once "../../controlador/usuario.controlador.php";

                    // Instancia de la clase UsuarioControlador
                    $usuarioControlador = new ControladorUsario();

                    // Ejecución de la función controladora encargada de consultar perfiles. 
                    $perfiles = $usuarioControlador->ctrCosultaPerfiles();

                    // Ejecución de la función controladora encargada de consultar perfiles.
                    $procesos = $usuarioControlador->ctrConsultaProcesos();

                   ?>
                  <div class="row">
                    <div class="col-sm-6">
                       	<div class="form-group row">
                       	 <div class="input-group mb-2 col-sm-6">
            					  		<input type="text" class="form-control text-uppercase" name="nombre" id="nombre" placeholder="Nombres" aria-label="Buscar usuario" aria-describedby="button-addon2">
            					  		<div class="input-group-append">
            					    		<button class="btn btn-success" type="button" id="button-addon2" data-toggle="modal" data-target="#modal_usuarios"><i class="fas fa-search" id=""></i></button>
            							  </div>
            						 </div>
                         <div class="col-sm-6">
                           <input type="text" class="form-control text-uppercase" name="apellido" id="apellido" placeholder="Apellidos">  
                         </div>
                       </div>
                       <div class="form-group">
                         <!-- <label for="correo" class="col-sm-1 col-form-label"></label> -->
                         <div>
                           <input type="mail" class="form-control text-lowercase" name="correo" id="correo" placeholder="CORREO ELECTRÓNICO">
                         </div>
                       </div>
                       <div class="form-group">
                          <!-- <label for="correo" class="col-sm-1 col-form-label"></label> -->
                          <div>
                            <select class="selectproceso form-control" name="proceso" id="proceso">
                              <option value="0">SELECCIONAR PROCESO</option>
                              <?php foreach ($procesos as $proceso) { ?>
                                <option value="<?php echo $proceso['id'] ?>"><?php echo utf8_encode($proceso['descripcion']) ?></option>
                              <?php } ?>  
                            </select> 
                          </div>
                       </div>
                       <div class="form-group row">
                          <!-- <label for="celular" class="col-sm-1 col-form-label"></label> -->
                          <div class="col-sm-6">
                            <input type="number" class="form-control" name="celular" id="celular" min="0" value="" placeholder="CELULAR">
                          </div>
                          <div class="col-sm-6">
                              <div class="custom-file">
                                <input type="file" class="custom-file-input" id="foto" name="foto" aria-describedby="inputGroupFileAddon04" onchange="nombreFoto();">
                                <label class="custom-file-label" for="inputGroupFile04" id="nombrefoto">SELECCIONAR UNA FOTO</label>
                              </div>
                          </div>
                       </div>
                    </div>

                    <div class="col-sm-6">
                       <div class="form-group row">
                         <!-- <label for="perfil" class="col-sm-1 col-form-label"></label> -->
                         <div class="col-sm-6">
                           <select class="selectperfil form-control" name="perfil" id="perfil">
                             <option value="0">SELECCIONAR PERFIL</option>
                             <?php foreach ($perfiles as $perfil) { ?>
                              <option value="<?php echo $perfil['id'] ?>"><?php echo utf8_encode($perfil['descripcion']) ?></option>
                             <?php } ?>
                           </select>  
                         </div>
                         <div class="col-sm-2 text-center">
                           <div class="form-control custom-switch ml-4 col-sm-3" style="border: none;">
                              <input type="checkbox" class="custom-control-input" name="customSwitusuario" id="customSwitusuario" onclick="checkbox_select('customSwitusuario');">
                              <label class="custom-control-label" for="customSwitusuario"></label>
                            </div> 
                         </div>
                         <div class="col-sm-3 pt-2" id="msj_checkbox_user">Inactivo</div>
                       </div>
                       <div class="form-group">
                         <!-- <label for="clave" class="col-sm-1 col-form-label"></label> -->
                         <div>
                           <input type="password" class="form-control" name="clave" id="clave" placeholder="CONTRASEÑA">  
                         </div>
                       </div>
                       <div class="form-group">
                         <!-- <label for="direccion" class="col-sm-1 col-form-label"></label> -->
                         <div>
                             <input type="text" class="form-control text-uppercase" name="direccion" id="direccion" placeholder="Dirección">
                         </div>
                       </div>
                       <div class="form-group">
                         <!-- <label for="cargo" class="col-sm-1 col-form-label"></label> -->
                         <div>
                             <input type="text" class="form-control text-uppercase" name="cargo" id="cargo" placeholder="Cargo">
                         </div>
                       </div>
                    </div>
                  </div>        
                </div>
                <!-- /.card-body -->
                <div class="card-footer text-right">

                  <button class="btn btn-success btn-lg" type="button" onclick="limpiarFormulario();">Cancelar <i class="fas fa-times ml-3"></i></button>
                  <button class="btn btn-success btn-lg" type="button" onclick="formulario('frm_usuario', '<?php echo $_GET['id_usuario'] ?>', '', '../controlador/usuario.controlador.php', 'modulos/usuarios.php?id_usuario=<?php echo $_GET['id_usuario'] ?>&usuario=<?php echo $_GET['usuario'] ?>&id_proceso=<?php echo $_GET['id_proceso'] ?>,&id_perfil=<?php echo $_GET['id_perfil'] ?>', '');">Guardar <i class="far fa-save ml-3"></i></button>
                </div>
                <!-- /.card-footer-->
              </form>
            </div>
            <!-- /.card -->
          </div>
        </div>
      </div>
    </section>
    <!-- /.content -->
  </div>