@extends('layouts.principal')
@section('contenido')


<div class="row">
    <div class="card">
      <h5 class="card-header"><b><i class="fas fa-table"></i> Tablero de usuarios</b></h5>
      <div class="card-body">



		  <input type="button" class="btn btn-primary"  onclick="abrirModal()" value="Agregar usuario" >



		    <br><br>

    <!-- En esta parte va la Tabla  -->

    <div class="table-responsive">

      <table id="usuariosTable"  class="table table-striped mt-4" style="width:100%">
                    <thead>
                        <tr>
                            <th>N°</th>
                            <th>NOMBRES</th>
                            <th>AREA</th>
                            <th>PUESTO</th>
                            <th>ROL</th>
                            <th>ACCIONES</th>
                        </tr>
                    </thead>
                    <tbody id="tbody">


                           
                       </tr>
                     
                    </tbody>
                </table>


    </div>

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




<!-- Modal -->
<div class="modal fade" id="ModalInsertar" data-bs-backdrop="static" >
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">Nuevo Usuario</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        
      	    
      	    <form id="formInsert">
                        <div class="mb-3">
                          <label for="recipient-name" class="col-form-label">NOMBRES:</label>
                          <input type="text" class="form-control" id="name" name="name" >
                        </div>

                        <div class="mb-3">
                          <label for="recipient-name" class="col-form-label">APELLIDO PATERNO:</label>
                          <input type="text" class="form-control" id="apepaterno" name="apepaterno">
                        </div>

                        <div class="mb-3">
                          <label for="recipient-name" class="col-form-label">APELLIDO MATERNO:</label>
                          <input type="text" class="form-control" id="apematerno" name="apematerno" >
                        </div>

                        <div class="mb-3">
                          <label for="recipient-name" class="col-form-label">DNI:</label>
                          <input type="text" class="form-control" id="dni" name="dni" >
                        </div>

                         <div class="mb-3">
                          <label for="recipient-name" class="col-form-label">EMAIL:</label>
                          <input type="text" class="form-control" id="email" name="email" >
                        </div>

                        <div class="mb-3">
                          <label for="recipient-name" class="col-form-label">UEN:</label>
                          <select  name="unidadS" id="unidadS" class="form-control" onchange="listarSucursales()" >

                          </select>
                        </div>

                        <div class="mb-3">
                          <label for="recipient-name" class="col-form-label">SUCURSAL:</label>
                          <select  class="form-control" id="SucursalS" onchange="listarAreas()" name="SucursalS">

                          </select>
                        </div>


                         <div class="mb-3">
                          <label for="recipient-name" class="col-form-label">AREA:</label>
                          <select  class="form-control"  id="areaS" name="areaS">

                            
                          </select>
                        </div>

               
                         <div class="mb-3">
                          <label for="recipient-name" class="col-form-label">PUESTO:</label>
                          <select  class="form-control" id="puesto" name="puesto">
                              <option value="0">Seleccione puesto</option>

                          </select>
                        </div>


			      </div>
			      <div class="modal-footer">
			        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
			        <button type="submit" class="btn btn-primary">Grabar</button>
			      </div>

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


<div class="modal fade" id="ModalShowDetails" data-bs-backdrop="static" >
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">Detalles de Usuario</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        
            
          <div class="table-responsive">
              <table class="table table-striped">

                <thead>
                      <th>ITEM</th>
                      <th>DETALLES</th>
                </thead>

                <tbody id="userTbody">

                  <tr>
                    <td>NOMBRE :</td>
                    <td id="nombreShow"></td>
                  </tr>

                  <tr>
                    <td>APELLIDOS :</td>
                    <td id="apeShow"></td>
                  </tr>

                  <tr>
                    <td>DOCUMENTO :</td>
                    <td id="dniShow"></td>
                  </tr>

                  <tr>
                    <td>CORREO :</td>
                    <td id="emailShow"></td>
                  </tr>

                  <tr>
                    <td>UNIDAD - SUCURSAL :</td>
                    <td id="uenShow"></td>
                  </tr>

                   <tr>
                    <td>AREA :</td>
                    <td id="areaShow"></td>
                  </tr>

                   <tr>
                    <td>PUESTO :</td>
                    <td id="puestoShow"></td>
                  </tr>

                  <tr>
                    <td>ESTADO :</td>
                    <td id="estadoShow"></td>
                  </tr>
                  
                </tbody>
                  
              </table>
          </div>

          
     </div>
     <div class="modal-footer">
       <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
     </div>
    </div>
  </div>
</div>


<!-- Modal -->
<div class="modal fade" id="ModalEditUser" data-bs-backdrop="static" >
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">Editar Usuario</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        
            
            <form id="formEditUser">
                        <div class="mb-3">
                          <label for="recipient-name" class="col-form-label">NOMBRES:</label>
                          <input type="text" class="form-control" id="nameE" name="name" >
                        </div>

                        <div class="mb-3">
                          <label for="recipient-name" class="col-form-label">APELLIDO PATERNO:</label>
                          <input type="text" class="form-control" id="apepaternoE" name="apepaterno">
                        </div>

                        <div class="mb-3">
                          <label for="recipient-name" class="col-form-label">APELLIDO MATERNO:</label>
                          <input type="text" class="form-control" id="apematernoE" name="apematerno" >
                        </div>

                        <div class="mb-3">
                          <label for="recipient-name" class="col-form-label">DNI:</label>
                          <input type="text" class="form-control" id="dniE" name="dni" >
                        </div>

                         <div class="mb-3">
                          <label for="recipient-name" class="col-form-label">EMAIL:</label>
                          <input type="text" class="form-control" id="emailE" name="email" >
                        </div>

                        <div class="mb-3">
                          <label for="recipient-name" class="col-form-label">UEN:</label>
                          <select  name="unidadS" id="unidadSE" class="form-control" onchange="listarSucursalesModificar()" >

                          </select>
                        </div>

                        <div class="mb-3">
                          <label for="recipient-name" class="col-form-label">SUCURSAL:</label>
                          <select  class="form-control" id="SucursalSE" onchange="listarAreasModificar()" name="SucursalS">

                          </select>
                        </div>


                         <div class="mb-3">
                          <label for="recipient-name" class="col-form-label">AREA:</label>
                          <select  class="form-control"  id="areaSE" name="areaS">

                            
                          </select>
                        </div>

               
                         <div class="mb-3">
                          <label for="recipient-name" class="col-form-label">PUESTO:</label>
                          <select  class="form-control" id="puestoE" name="puestoE">
                              <option value="0">Seleccione puesto</option>

                          </select>
                        </div>

                         <div class="mb-3">
                          <label for="recipient-name" class="col-form-label">ESTADO:</label>
                          <select  class="form-control" id="estadoE" name="estado">
                              <option value="0">ACTIVO</option>
                              <option value="1">INACTIVO</option>
                             

                          </select>
                        </div>

                        <input type="hidden" id="idUser" >


            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
              <button type="submit" class="btn btn-primary" >Grabar</button>
            </div>

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



@endsection