{% extends "baseAdmin.html" %}
{% load static %}
{% block titulo %}
  Personales
{% endblock titulo %}
{% block content1 %} 
      <script type="text/javascript">
        $("#navAdministracion").attr('class','dropdown active');
        $("#navPersonales").attr('class','active');
      </script>
        <div class="row">
          <div class="col-md-12 col-sm-12" >
              <div class="panel panel-default">
                <div class="panel-heading"> <strong>PERSONAL POR OFICINAS</strong></div>
                <div class="panel-body">
                <p></p>
                  <div class="row">
                    <div class="col-md-2 col-md-offset-1">
                     <!-- <a class="btn btn-block btn-primary waves-effect" href="/Admin/CrearPersonal/" role="button">Nuevo</a>-->
                     <button type="button" class="btn btn-primary btn-block btn-sm" data-toggle="modal" data-target="#myModalcp">Nuevo Personal</button>
                    </div>
                    <div class="col-md-2">
                      <button type="button" class="btn btn-info btn-block btn-sm" id="btnRefrescar"><span class="fa fa-refresh"></span> Actualizar</button>
                    </div>  
                  </div>
                  <div id="myModalcp" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-lg">
                      <div class="modal-content">
                        <div class="modal-header">
                          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                          <h4 class="modal-title" id="myModalLabel">Nuevo Personal</h4>
                        </div>
                        <div class="modal-body">
                          <form action="/Admin/Mant_CrearPersonal/" method="POST" data-toggle="validator" role="form"> {% csrf_token %}
                            <div class="row">
                              <div class="col-md-12">
                                <div class="panel panel-primary"> 
                                  <div class="panel-body">
                                    <div class="row">
                                      <div class="col-md-12"> 
                                            <div class="row">
                                              <div class="col-md-12">
                                                <h4 class="bg-success" align="center">
                                                  <!--&nbsp;-->
                                                  Datos Personales
                                                </h4>
                                              </div>
                                            </div>
                                             <div class="row">
                                              <div class="col-md-2 col-md-offset-1">
                                                <label>DNI</label>
                                              </div>
                                              <div class="col-md-3">
                                                <div class="form-group">
                                                <div class="fg-line">
                                                  <input type="text" class="form-control" id="txtDNIPersonal" placeholder="DNI" name="DNIPersonal" data-minlength="8" maxlength="8">
                                                  <div class="form-control-feedback" style="text-align:left;" ></div>
                                                </div>
                                                </div>
                                                
                                                <p></p>
                                              </div>
                                            </div>
                                            <div class="row">
                                              <div class="col-md-2 col-md-offset-1">
                                                <label>Nombre(s)</label>
                                              </div>
                                              <div class="col-md-3">
                                                <div class="form-group">
                                                <div class="fg-line">
                                                  <input type="text" class="form-control" id="txtNomPersonal" placeholder="Nombre del personal" name="Nombre" required>
                                                  <div class="form-control-feedback" style="text-align:left;" ></div>
                                                </div>
                                                </div>
                                                
                                                <p></p>
                                              </div>
                                            </div>
                                            <div class="row">
                                              <div class="col-md-2 col-md-offset-1">
                                                <label>Apellido P.</label>
                                              </div>
                                              <div class="col-md-3">
                                                <div class="form-group">
                                                <div class="fg-line">
                                                   <input type="text" class="form-control" id="txtApPersonal" placeholder="Apellido Paterno" name="APaterno" required>
                                                   <div class="form-control-feedback" style="text-align:left;" ></div>
                                                </div>
                                                </div>
                                               
                                                <p></p>
                                              </div>
                                              <div class="col-md-2">
                                                <label>Apellido M.</label>
                                              </div>
                                              <div class="col-md-3">
                                                <div class="form-group">
                                                <div class="fg-line">
                                                  <input type="text" class="form-control" id="txtAmPersonal" placeholder="Apellido Materno" name="AMaterno">
                                                  <div class="form-control-feedback" style="text-align:left;" ></div>
                                                </div>
                                                </div>
                                                
                                                <p></p>
                                              </div>
                                            </div>           

                                            <div class="row">
                                              <div class="col-md-2 col-md-offset-1">
                                                <label>Teléfono</label>
                                              </div>
                                              <div class="col-md-5">
                                                <div class="form-group">
                                                <div class="fg-line">
                                                  <input type="text" class="form-control" id="txtTelefonoPersonal" placeholder="Teléfono" name="telefonoPersonal">
                                                  <div class="form-control-feedback" style="text-align:left;" ></div>
                                                </div>
                                                </div>                              
                                                <p></p>
                                              </div>                            
                                            </div>  

                                            <div class="row">
                                              <div class="col-md-2 col-md-offset-1">
                                                <label>Email</label>
                                              </div>
                                              <div class="col-md-5">
                                                <div class="form-group">
                                                <div class="fg-line">
                                                  <input type="email" class="form-control" id="txtEmail" placeholder="Email" name="Email">
                                                  <div class="form-control-feedback" style="text-align:left;" ></div>
                                                </div>
                                                </div>                              
                                                <p></p>
                                              </div>                            
                                            </div>   
                                      </div>
                                    </div>
                                    <div class="row">
                                      <div class="col-md-12">
                                            <div class="row">
                                              <div class="col-md-12">
                                                <h4 class="bg-success" align="center">
                                                  <!--&nbsp;-->
                                                  Datos de Usuario
                                                </h4>
                                              </div>
                                            </div>
                                             <div class="row" id="op">
                                              <div class="col-md-2 col-md-offset-1">
                                                <label>Cargo</label>
                                              </div>
                                              <div class="col-md-4">
                                              <div class="select">
                                                  <select class="form-control" id="comboCargo" name="comboCargo">
                                                    <option value="subgerente">SUBGERENTE</option>
                                                    <option value="operador">OPERADOR</option>
                                                  </select>
                                                  <div class="form-control-feedback" style="text-align:left;" ></div>   
                                              </div>
                                                  <p></p>    
                                              </div>
                                            </div>
                                             <div class="row" id="op">
                                              <div class="col-md-2 col-md-offset-1">
                                                <label>Estado</label>
                                              </div>
                                              <div class="col-md-4">
                                              <div class="select">
                                              <div class="fg-line">
                                                  <select class="form-control" id="comboEstado" name="comboEstado">
                                                    <option value="activo">ACTIVO</option>
                                                    <option value="desactivo">INACTIVO</option>
                                                  </select>
                                                  <div class="form-control-feedback" style="text-align:left;" ></div>   
                                              </div>
                                              </div>
                                                  <p></p>    
                                              </div>
                                            </div>
                                             <div class="row">
                                              <div class="col-md-2 col-md-offset-1">
                                                <label>Sueldo:</label>
                                              </div>
                                              <div class="col-md-4">
                                                <div class="form-group">
                                                <div class="fg-line">
                                                  <input type="text" class="form-control" id="txtSueldooPer" placeholder="sueldo" name="sueldoPersonal">
                                                  <div class="form-control-feedback" style="text-align:left;" ></div>
                                                </div>
                                                </div>
                                                <p></p>
                                              </div>
                                            </div>
                                            <div class="row">
                                            <div class="col-md-3 text-right">
                                              <label>Fecha de contratación</label>
                                            </div>
                                            <div class="col-md-4">
                                              <input type='text' class="form-control" id='datetimepicker2' name="fechaContratPers" />
                                              <div class="form-control-feedback" style="text-align:left;" ></div>
                                              <p></p>
                                            </div>
                                             <script type="text/javascript">
                                              $(document).ready(function (){
                                                $('input').on('keypress', function(e){
                                                if(e.keyCode == 13)
                                                {
                                                  var inputs = $(this).parents("form").eq(0).find(":input.form-control");
                                                  var idx = inputs.index($(this));
                                                  if (idx == inputs.length - 1) {
                                                    inputs[0].select()
                                                  } 
                                                  else {
                                                    inputs[idx + 1].focus(); //  handles submit buttons
                                                    inputs[idx + 1].select();
                                                  }
                                                  return false;
                                                }
                                              });
                                                $("#txtUserPer").keyup(function(){
                                                  var valor= $(this).val().toUpperCase();
                                                  $(this).prop('value',valor);
                                                });
                                                $('#datetimepicker2').datetimepicker({
                                                      locale: 'es',
                                                      format: 'YYYY-MM-DD'
                                                  });

                                                //tados numericos
                                                $('#txtDNIPersonal').numeric();
                                                $('#txtTelefonoPersonal').numeric();
                                                $('#txtCelPersonal').numeric();
                                                $('#txtSueldooPer').numeric('.');
                                              });
                                            </script>
                                          </div>
                                            <div class="row">
                                              <div class="col-md-2 col-md-offset-1">
                                                <label>Observaciones</label>
                                              </div>
                                              <div class="col-md-8">
                                                <div class="form-group">
                                                <div class="fg-line">
                                                  <textarea class="form-control" rows="3" placeholder="Observaciones" name="obs"></textarea >
                                                  <div class="form-control-feedback" style="text-align:left;" ></div>
                                                </div>
                                                </div>
                                                <p></p>
                                              </div>
                                            </div>
                                            <div class="row">
                                              <div class="col-md-2 col-md-offset-1">
                                                <label>Usuario:</label>
                                              </div>
                                              <div class="col-md-4">
                                                <div class="form-group">
                                                <div class="fg-line">
                                                  <input type="text" class="form-control" id="txtUserPer" placeholder="usuario" name="User" required>
                                                  <div class="form-control-feedback" style="text-align:left;" ></div>
                                                </div>
                                                </div>
                                                <p></p>
                                              </div>
                                            </div>
                                            <div class="row">
                                              <div class="col-md-2 col-md-offset-1">
                                                <label>Contraseña:</label>
                                              </div>
                                              <div class="col-md-4">
                                                <div class="form-group">
                                                <div class="fg-line">
                                                  <input type="text" class="form-control" id="txtPass" placeholder="Contraseña" name="Password" required>
                                                  <div class="form-control-feedback" style="text-align:left;" ></div>
                                                </div>
                                                </div>
                                                 
                                                 <p></p>
                                              </div>
                                            </div>
                                          </div> 
                                    </div>
                                    <div class="row">
                                      <div class="col-md-4 col-md-offset-4 col-xs-4 col-xs-offset-2">
                                        <button class="btn btn-primary btn-block" type="submit">Guardar</button>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </form>
                        </div>
                        <div class="modal-footer">
                          <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
                        </div>
                      </div><!-- /.modal-content -->
                    </div><!-- /.modal-dialog -->
                  </div>
                  <p></p>

                  <div class="row">
                     <div class="row" id="Result">
                    {% ifnotequal resultado None %}
                    {% ifnotequal resultado '' %}
                    {% ifequal resultado 'exito' %}
                    <div class="alert alert-success" role="alert" align="center">
                      <h4>OPERACION EXITOSA!!</h4>
                    </div>
                    {% else %}
                    <div class="alert alert-danger" role="alert" align="center">
                      <h4>FALLO OPERACIÓN :( {{resultado}}</h4>
                    </div>
                    {% endifequal %}
                    {% endifnotequal %}
                    {% endifnotequal %}
                  </div>
                    <div class="col-md-10 col-md-offset-1">
                        <div class="table-responsive m-b-10">
                          <table class="table table-bordered table-striped">
                              <thead>
                                <tr>
                                  <th>Nro</th>
                                  <th>Oficina</th>
                                  <th>&nbsp;</th>
                                </tr>
                              </thead>
                              <tbody id="listaR">
                                  
                              </tbody>
                          </table>
                        </div>
                    </div>
                    
                  </div>
                </div>
              </div>
          </div>
        </div>
    </div>

    <div id="modalOficinaCentral" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title" id="myModalLabel">Opciones</h4>
            </div>
            <div class="modal-body">
              <div class="row">
                <div class="col-md-4 col-md-offset-1" align="right"> 
                   <label>Oficina Central:</label> 
                </div>
                <div class="col-md-5">  
                 <div class="fg-line">
                  <div class="select">
                  <select class="form-control" id="ComboOficina">    
                  </select>
                  </div>
                  </div>
                </div>
              </div>
              <p></p>
              <div class="row">
                <div class="col-md-4 col-md-offset-4 col-xs-4 col-xs-offset-4">
                  <button type="button" class="btn btn-warning btn-block" id="cambiarOfi">Guardar</button>
                </div>
              </div>
            </div>
            <div class="modal-footer">
              <div class="row">
                <div class="col-md-2 col-md-offset-10">
                   <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
                </div>
              </div>
            </div>

          </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

     <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title" id="myModalLabel">Detalles</h4>
            </div>
            <div class="modal-body">
              <div class="row">
                <div class="col-md-12">
                  <div class="panel panel-default">
                        <div class="panel-body">
                          <div class="row">
                            <div class="col-md-12">
                              <h4 class="bg-success" align="center">
                                <!--&nbsp;-->
                                Detalles Cajas
                              </h4>
                            </div>
                          </div>
                          <div class="row">
                             <div class="col-md-4">
                              <div class="col-md-4" align="right">
                                <label>Oficina: </label>
                              </div>
                              <div class="col-md-4">
                                <input type="text" class="form-control" id="txtidOfi" readonly="">
                                <p></p>
                              </div>
                            </div>
                            
                          </div>
                          <div class="row">
                            <div class="col-md-12">
                              <div class="table-responsive">
                                <table class="table table-bordered table-striped">
                                    <thead>
                                      <tr>
                                        <th>Nombre Caja</th>
                                        <th>Nombre Personal</th>
                                         <th>Cargo</th>
                                         <th>Inicio</th>
                                      </tr>
                                    </thead>
                                    <tbody id="listaCa">
                                    </tbody>
                                </table>
                              </div>
                            </div>
                          </div>

                        </div><!--fin panel body-->
                      </div>
                </div>
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
            </div>
          </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
      </div>
 

      <div id="Modalmovi" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title" id="myModalLabel">Detalles</h4>
            </div>
            <div class="modal-body">
              <div class="row">
                <div class="col-md-12">
                  <div class="panel panel-default">
                        <div class="panel-body">
                          <form id="formConfiguracion" action="/Admin/modificarPersonal_ajax/" method="POST" data-toggle="validator" role="form"> {% csrf_token %}
                            <div class="row">
                              <div class="col-md-12">
                                <h4 class="bg-success" align="center">
                                  <!--&nbsp;-->
                                  Información de la Caja
                                </h4>
                              </div>
                            </div>
                            <p></p>
                            <div class="row">
                              <div class="col-md-2" align="right">
                                <label>Caja: </label>
                              </div>
                              <div class="col-md-5">
                                <input type="text" class="form-control" id="txtnombreCa" readonly>
                                <p></p>
                              </div>
                              <div class="col-md-2" align="right">
                                <label>Id Caja: </label>
                              </div>
                              <div class="col-md-3">
                                <input type="text" class="form-control" name="pkC" id="txtidCa" readonly>
                                <p></p>
                              </div>

                              <input type="text" class="form-control hidden" name="pk" id="txtidPer" readonly="readonly">
                                   
                            </div> 
                              <div class="col-md-12"> 
                                <div class="col-md-4" align="right">
                                  <label>Hora de Ingreso: </label>
                                </div>
                                <div class="col-md-4">
                                   <div class="form-group">
                                        <div class='input-group date' id='datetimepicker3'>
                                            <input type='text' class="form-control" id="txtHoraIngreso" />
                                            <span class="input-group-addon">
                                                <span class="glyphicon glyphicon-time"></span>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <button class="btn btn-sm btn-primary" data-loading-text="<i class='fa fa-spinner fa-spin '></i> Modificando Hora..." id="btnModificarHoraIngreso" type="button"><i class="fa fa-refresh"></i> Modificar</button>
                                </div> 
                            </div> 
                            <p></p>
                            <div class="row">
                              <div class="col-md-12">
                                <h4 class="bg-success" align="center">
                                  <!--&nbsp;-->
                                  Información de la Persona
                                </h4>
                              </div>
                            </div>
                            
                            <p></p>
                            <div class="row">
                              <div class="col-md-2 col-md-offset-1">
                                <label>DNI</label>
                              </div>
                              <div class="col-md-5">
                                <div class="form-group">
                                <div class="fg-line">
                                  <input type="text" class="form-control" id="txtDNIPersonal1" placeholder="DNI" name="dni" data-minlength="8" maxlength="8">
                                  <div class="form-control-feedback" style="text-align:left;" ></div>
                                </div>
                                <div class="help-block with-errors"></div>
                                </div>
                                 
                              </div>
                            </div>
                             <div class="row">
                              <div class="col-md-2 col-md-offset-1">
                                <label>Nombre(s)</label>
                              </div>
                              <div class="col-md-5">
                                <div class="form-group">
                                <div class="fg-line">
                                  <input type="text" class="form-control" id="txtNomPersonal1" placeholder="Nombre del personal" name="nom" required>
                                  <div class="form-control-feedback" style="text-align:left;" ></div>
                                </div>
                                <div class="help-block with-errors"></div>
                                </div> 
                              </div>
                            </div>
                            <div class="row">
                              <div class="col-md-2 col-md-offset-1">
                                <label>Apellidos</label>
                              </div>
                              <div class="col-md-4">
                                <div class="form-group">
                                <div class="fg-line">
                                   <input type="text" class="form-control" id="txtApPersonal1" placeholder="Apellido Paterno" name="ap" required>
                                   <div class="form-control-feedback" style="text-align:left;" ></div>
                                </div>
                                <div class="help-block with-errors"></div>
                                </div> 
                              </div>
                              <div class="col-md-4">
                                <div class="form-group">
                                <div class="fg-line">
                                  <input type="text" class="form-control" id="txtAmPersonal1" placeholder="Apellido Materno" name="am" required>
                                  <div class="form-control-feedback" style="text-align:left;" ></div>
                                </div>
                                <div class="help-block with-errors"></div>
                                </div>
                              </div>
                            </div>
                             <div class="row">
                              <div class="col-md-2 col-md-offset-1">
                                <label>Dirección</label>
                              </div>
                              <div class="col-md-5">
                                <div class="form-group">
                                <div class="fg-line">
                                  <input type="text" class="form-control" id="txtDireccion1" placeholder="Teléfono" name="dir">
                                  <div class="form-control-feedback" style="text-align:left;" ></div>
                                </div>
                                <div class="help-block with-errors"></div>
                                </div> 
                              </div>                            
                            </div> 
                            <div class="row">
                              <div class="col-md-2 col-md-offset-1">
                                <label>Teléfono</label>
                              </div>
                              <div class="col-md-5">
                                <div class="form-group">
                                <div class="fg-line">
                                  <input type="text" class="form-control" id="txtTelefonoPersonal1" placeholder="Teléfono" name="tel">
                                  <div class="form-control-feedback" style="text-align:left;" ></div>
                                </div>
                                <div class="help-block with-errors"></div>
                                </div> 
                              </div>                            
                            </div> 
                            <div class="row">
                              <div class="col-md-2 col-md-offset-1">
                                <label>Email</label>
                              </div>
                              <div class="col-md-5">
                                <div class="form-group">
                                <div class="fg-line">
                                  <input type="email" class="form-control" id="txtEmail1" placeholder="Email" name="email">
                                  <div class="form-control-feedback" style="text-align:left;" ></div>
                                </div>
                                <div class="help-block with-errors"></div>
                                </div>
                              </div>                            
                            </div>
                            <div class="row">
                              <div class="col-md-12">
                                <h4 class="bg-success" align="center">
                                  <!--&nbsp;-->
                                  Información del Usuario
                                </h4>
                              </div>
                            </div>
                            <p></p>
                            <div class="row" id="op">
                              <div class="col-md-2 col-md-offset-1">
                                <label>Cargo</label>
                              </div>
                              <div class="col-md-5">
                              <div class="select">
                              <div class="fg-line">
                                  <select class="form-control" id="comboCargo1" name="cargo" readonly>
                                    <!--
                                    <option value="subgerente">SUBGERENTE</option>-->
                                    <option value="operador">OPERADOR</option>
                                  </select>
                                  <div class="form-control-feedback" style="text-align:left;" ></div>   
                              </div>
                              <div class="help-block with-errors"></div>
                              </div>     
                              </div>
                            </div>
                            <p></p>
                            <div class="row" id="op">
                              <div class="col-md-2 col-md-offset-1">
                                <label>Estado</label>
                              </div>
                              <div class="col-md-5">
                              <div class="select">
                              <div class="fg-line">
                                  <select class="form-control" id="comboEstado1" name="est" required>
                                    <option value="activo">ACTIVO</option>
                                    <option value="desactivo">INACTIVO</option>
                                  </select>
                                  <div class="form-control-feedback" style="text-align:left;" ></div>   
                              </div>
                              <div class="help-block with-errors"></div>
                              </div>   
                              </div>
                            </div>
                            <p></p> 
                             <div class="row">
                              <div class="col-md-2 col-md-offset-1">
                                <label>Sueldo:</label>
                              </div>
                              <div class="col-md-5">
                                <div class="form-group">
                                <div class="fg-line">
                                  <input type="text" class="form-control" id="txtSueldooPer1" placeholder="sueldo" name="sueldo" >
                                  <div class="form-control-feedback" style="text-align:left;" ></div>
                                </div>
                                <div class="help-block with-errors"></div>
                                </div>
                              </div>
                            </div>
                              <div class="row">
                                <div class="col-md-3 text-right">
                                  <label>Fecha de nacimiento</label>
                                </div>
                                <div class="col-md-5">
                                  <div class="fg-line">
                                  <input type='text' class="form-control" id='datetimepicker21' name="fn" />
                                  <div class="form-control-feedback" style="text-align:left;" ></div>
                                  </div>
                                  <div class="help-block with-errors"></div>
                                </div>
                                 
                              </div> 
                              <p></p>
                              <div class="row">
                                 <div class="col-md-3 text-right">
                                  <label>Fecha de Inicio</label>
                                </div>
                                <div class="col-md-5">
                                  <div class="fg-line">
                                  <input type='text' class="form-control" id='datetimepicker22' name="fc" />
                                  <div class="form-control-feedback" style="text-align:left;" ></div>
                                  </div>
                                  <div class="help-block with-errors"></div>
                                </div>
                              </div>
                              <p></p>
                              <script type="text/javascript">
                                    $(document).ready(function (){
                                      $('input').on('keypress', function(e){
                                      if(e.keyCode == 13)
                                      {
                                        var inputs = $(this).parents("form").eq(0).find(":input.form-control");
                                        var idx = inputs.index($(this));
                                        if (idx == inputs.length - 1) {
                                          inputs[0].select()
                                        } 
                                        else {
                                          inputs[idx + 1].focus(); //  handles submit buttons
                                          inputs[idx + 1].select();
                                        }
                                        return false;
                                      }
                                    });
                                      $("#txtUserPer1").keyup(function(){
                                        var valor= $(this).val().toUpperCase();
                                        $(this).prop('value',valor);
                                      });
                                        $('#datetimepicker3').datetimepicker({
                                            format: 'LT'
                                        });
                                      $('#datetimepicker21').datetimepicker({
                                            locale: 'es',
                                            format: 'YYYY-MM-DD'
                                        });
                                       $('#datetimepicker22').datetimepicker({
                                            locale: 'es',
                                            format: 'YYYY-MM-DD'
                                        });
                                      //tados numericos
                                      $('#txtDNIPersonal').numeric();
                                      $('#txtTelefonoPersonal').numeric();
                                      $('#txtCelPersonal').numeric();
                                      $('#txtSueldooPer').numeric('.');
                                  });
                                </script>
                             <div class="row">
                              <div class="col-md-2 col-md-offset-1">
                                <label>Observaciones</label>
                              </div>
                              <div class="col-md-8">
                                <div class="form-group">
                                <div class="fg-line">
                                  <textarea class="form-control" rows="3" placeholder="Observaciones" name="obs" id="txtObs1"></textarea >
                                  <div class="form-control-feedback" style="text-align:left;" ></div>
                                </div>
                                <div class="help-block with-errors"></div>
                                </div>
                              </div>
                            </div>
                            <div class="row">
                              <div class="col-md-2 col-md-offset-1">
                                <label>Usuario:</label>
                              </div>
                              <div class="col-md-5">
                                <div class="form-group">
                                <div class="fg-line">
                                  <input type="text" class="form-control" id="txtUserPer1" placeholder="usuario" name="usr" required readonly>
                                  <div class="form-control-feedback" style="text-align:left;" ></div>
                                </div>
                                <div class="help-block with-errors"></div>
                                </div> 
                              </div>
                            </div>
                            <div class="row">
                              <div class="col-md-2 col-md-offset-1">
                                <label>Contraseña:</label>
                              </div>
                              <div class="col-md-5">
                                <div class="form-group">
                                <div class="fg-line">
                                  <input type="text" class="form-control" id="txtPass1" placeholder="Contraseña" name="pass" required>
                                  <div class="form-control-feedback" style="text-align:left;" ></div>
                                </div>
                                <div class="help-block with-errors"></div>
                                </div>
                              </div>
                            </div>
                             <div class="row">
                                <div class="col-md-4 col-md-offset-4 col-xs-4 col-xs-offset-4">
                                  <button class="btn btn-primary btn-block" id="btnActualizar" type="button">Actualizar</button>
                                </div>
                              </div>
                           </form>  
                        </div><!--fin panel body-->
                      </div>
                </div>
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
            </div>
          </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
      </div>
     <script type="text/javascript">
      Aux=[];
      Aux3=[];

      $("#btnActualizar").click(function(){
          $("#formConfiguracion").submit();
      });

       $("#btnModificarHoraIngreso").click(function(){
        $("#btnModificarHoraIngreso").button('loading');
        $.ajax({
            data:{'hora':$("#txtHoraIngreso").val(),'idOficina':$("#txtidOfi").val(),'idCaja':$("#txtidCa").val()},
              url:'/actualizar_hora_ingreso/',
              type:'GET',
              dataType:'text',
              success: function(data){
                 $("#btnModificarHoraIngreso").button('reset');
                if(data=='exito'){
                  bootbox.alert("Hora de ingreso ha sido modificada con exito :)");
                }else{
                  bootbox.alert(data);
                }
                 
              },
              error: function(xhr, textStatus, errorThrown) { 
                  $("#btnModificarHoraIngreso").button('reset');
                  console.log(xhr.responseText);
              },
            });
      });

      //function submitForm(){
        //console.log("data");
        //$("#formConfiguracion").submit();
      //}

      $(document).ready(function (){
         $("#listaR").on("click",".filaOf",function(){
          var num = $(this).prop('id');
          filaI2 = num;
          var fila= $(this).prop('class');
          $("."+fila).prop('class','filaOf');
          $(this).prop('class','filaOf warning');
          ajax_personales(Aux[filaI2].pk);
          //insertando datos en el modal
          $("#txtidOfi").prop('value',Aux[filaI2].pk);
          $("#txtpkO").prop('value',Aux[filaI2].pk);
          $("#txtof").text(Aux[filaI2].of);
        });

        $("#listaCa").on("click",".filaCa",function(){
          $("#listaO").html("");
          $("#grupo_f").hide();
          var num = $(this).prop('id');
          filaI3 = num;
          var fila= $(this).prop('class');
          $("."+fila).prop('class','filaCa');
          $(this).prop('class','filaCa warning');
          //insertando datos al modal
          $("#txtidCa").prop('value',Aux3[filaI3].c_id);
          $("#txtidPer").prop('value',Aux3[filaI3].p_id);
          $("#txtHoraIngreso").val(Aux3[filaI3].c_hora_ingreso);
          $("#txtDNIPersonal1").prop('value',Aux3[filaI3].p_dni)
          $("#txtNomPersonal1").prop('value',Aux3[filaI3].p_nombre);
          $("#txtApPersonal1").prop('value',Aux3[filaI3].p_ap);
          $("#txtAmPersonal1").prop('value',Aux3[filaI3].p_am);
          $("#txtTelefonoPersonal1").prop('value',Aux3[filaI3].p_telefono);
          $("#txtEmail1").prop('value',Aux3[filaI3].p_email);
          $("#comboCargo1").prop('value',Aux3[filaI3].p_cargo);
          $("#datetimepicker21").prop('value',Aux3[filaI3].p_fn);
          $("#datetimepicker22").prop('value',Aux3[filaI3].p_fc);
          if(Aux3[filaI3].p_estado==true){
              $("#comboEstado1").prop('value',"activo");
          }else{
              $("#comboEstado1").prop('value',"desactivo");
          }
          
          $("#txtSueldooPer1").prop('value',Aux3[filaI3].p_sueldo);
          $("#txtObs1").prop('value',Aux3[filaI3].p_observacion);
          $("#txtUserPer1").prop('value',Aux3[filaI3].p_usuario);
          $("#txtPass1").prop('value',Aux3[filaI3].p_password);
          $("#txtDireccion1").prop('value',Aux3[filaI3].p_direccion);
           
          
          
          $("#txtnombreCa").prop('value',Aux3[filaI3].c_nombre);
          $("#txtencargadoCa").prop('value',Aux3[filaI3].p_nombre+' '+Aux3[filaI3].p_ap+' '+Aux3[filaI3].p_am); 
        });
        
        function ajax_personales(idOf){
           $.ajax({
                url:'/PersonalesTotal_ajax/',
                data:{'idOfi':idOf},
                type:'GET',
                dataType:'json',
                success: function(data){
                  Aux3 = data;
                  var html ="";
                  var esta='';
                  var sty ='';       
                  console.log(data);
                  for(var i=0;i<data.length;i++){
                      html += '<tr data-toggle="modal" data-target="#Modalmovi" class="filaCa" '+sty+' id="'+i+'"><td>'+data[i].c_nombre+'</td><td>'+data[i].p_nombre+' '+data[i].p_ap+' '+data[i].p_am+'</td><td>'+data[i].p_cargo+'</td><td>'+data[i].p_fc+'</td></tr>';
                  }                        
                  $('#listaCa').html(html);
                },
                error: function(xhr, textStatus, errorThrown) {
                      console.log(xhr.responseText);
                },
              }); 
        };

        /*
        function ajax_saldo_oficinas(){
          $.ajax({
            url:'/ver_saldo_oficinas_admin_ajax/',
            type:'GET',
            dataType:'json',
            success: function(data){
              Aux = data;
              console.log(data);
              var html ="";
              for(var i=0;i<data.length;i++){
                  html += '<tr data-toggle="modal" data-target="#myModal" class="filaOf" id="'+i+'" ><th scope="row">'+(i+1)+'</th><td>'+data[i].of+'</td></tr>';
              }                        
              $('#listaR').html(html);
            },
            error: function(xhr, textStatus, errorThrown) {

                        console.log(xhr.responseText);
                },
          });
        };
        
	*/
	 function ajax_saldo_oficinas(){
          $.ajax({
            url:'/ver_saldo_oficinas_admin_ajax/',
            type:'GET',
            dataType:'json',
            success: function(data){
              Aux = data;
              console.log(data);
              var html ="";
              for(var i=0;i<data.length;i++){
                if (data[i].be=='si'){
                    html += '<tr data-toggle="modal" data-target="#myModal" class="filaOf" id="'+i+'" ><th scope="row">'+(i+1)+'</th><td>'+data[i].of+'</td><td><button type="button" class="btn btn-danger btn-xs btn-subbases" id="b'+data[i].conf+'"> SubBases </button></td></tr>';
                }
                else{
                   html += '<tr data-toggle="modal" data-target="#myModal" class="filaOf" id="'+i+'" ><th scope="row">'+(i+1)+'</th><td>'+data[i].of+'</td><td>&nbsp;</td></tr>';
                }
                 
              }                        
              $('#listaR').html(html);
              $(".btn-subbases").click(function(event, element){
                if (event.stopPropagation) {
                    event.stopPropagation();   // W3C model
                } else {
                    event.cancelBubble = true; // IE model
                }
                var idOficina = $(this).prop('id');
                ajax_Bases_oficina(idOficina.substring(1));
                $("#ModalBasesExt").modal('show');
                //alert(idOficina);
              })
            },
            error: function(xhr, textStatus, errorThrown) {

                        console.log(xhr.responseText);
                },
          });
        };
        
        function ajax_Bases_oficina(pkconf){
        $.ajax({
          url:'/Admin/bases_para_of_externa_view/',
          data:{'idConf':pkconf},
          type:'GET',
          dataType:'json',
          success: function(data){
            Aux2 = data;
            var html ="";
            var esta='';
            for(var i=0;i<data.length;i++){
                html += '<tr id="'+i+'"><td>'+data[i].fecha+'</td><td>'+data[i].nombre+'</td><td>'+data[i].ciudad+'</td><td>'+data[i].dir+'</td></tr>';
            }
            $('#listaBa').html(html);
          }
        });
      }
       
        
        $("#listaCa").on("click",".filaCa",function(){
          $("#grupo_f").hide();
          var num = $(this).prop('id');
          filaI3 = num;
          var fila= $(this).prop('class');
          $("."+fila).prop('class','filaCa');
          $(this).prop('class','filaCa warning');
          //insertando datos al modal
          $("#txtidCa").prop('value',Aux3[filaI3].c_id);
          $("#txtidCa2").prop('value',Aux3[filaI3].c_id);
          $("#txtnombreCa").prop('value',Aux3[filaI3].c_nombre);
          $("#txtencargadoCa").prop('value',Aux3[filaI3].p_nombre+' '+Aux3[filaI3].p_ap+' '+Aux3[filaI3].p_am);
        });
       
       
        
        ajax_saldo_oficinas();
        
        $("#btnRefrescar").click(function(){
          ajax_saldo_oficinas();
        });
      
        $(document).on('show.bs.modal', '.modal', function () {
            var zIndex = 1040 + (10 * $('.modal:visible').length);
            $(this).css('z-index', zIndex);
            setTimeout(function() {
                $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
            }, 0);
        });
        $(document).on('hidden.bs.modal', '.modal', function () {
            $('.modal:visible').length && $(document.body).addClass('modal-open');
        });
      });

    
      
    </script>
    <div id="ModalBasesExt" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel">Bases</h4>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-md-12">
              <div class="table-responsive">
                <table class="table table-hover">
                  <thead>
                    <tr>
                      <th>Fecha</th>
                      <th>Nombre</th>
                      <th>Ciudad</th>
                      <th>Direccion</th>
                    </tr>
                  </thead>
                  <tbody id="listaBa">
                      
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div>
{% endblock content1 %}