{% extends "baseAdmin.html" %}
{% block titulo %}
  .::Nuevo Caja
{% endblock titulo %}
{% block content1 %}
    <div class="container">
      <script type="text/javascript">
        $("#navOficinas").attr('class','dropdown active');
        $("#navCaja").attr('class','active');
      </script>
      <form action="/Admin/CrearCaja/" method="POST" data-toggle="validator" role="form"> {% csrf_token %}
        <div class="row">
          <div class="col-md-12 col-sm-12" >
              <div class="panel panel-primary">
                <div class="panel-heading"> <strong>NUEVA CAJA</strong></div>
                <div class="panel-body">
                  <div class="row" id="Result">
                    {% 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 %}
                  </div>
                  <div class="row">
                    <div class="col-md-6">
                      <div class="panel panel-default">
                        <div class="panel-body">
                          <div class="row">
                            <div class="col-md-12">
                              <h4 class="bg-success" align="center">
                                <!--&nbsp;-->
                                Datos de Caja
                              </h4>
                            </div>
                          </div>
                          <div class="row">
                            <div class="col-md-2 col-md-offset-1">
                              <label>Nombre:</label>
                            </div>
                            <div class="col-md-4 ">
                              <div class="form-group">
                              <div class="fg-line">
                                <input type="text" class="form-control" id="txtNomCaja" placeholder=" Nombre de caja" name="NomCaja" 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>Oficina:</label>
                            </div>
                            <div class="col-md-4"> 
                            <div class="fg-line">
                            <div class="select">
                               <select class="form-control" id="ComboOficina" name="oficina">
                                  <option value="oficina1">-----</option>
                                </select>
                                <div class="form-control-feedback" style="text-align:left;" ></div>
                            </div>
                            </div>
                            </div>
                            <div class="col-md-4">
                              <a class="btn btn-danger btn-sm" href="/Admin/CrearOficina/">Crear nueva oficina</a>
                            </div>
                          </div>
                          <p></p>
                          <div class="row">
                            <div class="col-md-2 col-md-offset-1">
                              <label>Estado:</label>
                            </div>
                            <div class="col-md-4">
                             <div class="fg-line">
                            <div class="select">
                              <select class="form-control"  id="txtEstCaja" name="EstCaja">
                                <option value="activo">Activo</option>
                                <option value="desactivo">Desactivo</option>
                              </select>
                              <div class="form-control-feedback" style="text-align:left;" ></div>   
                            </div>
                            </div>   
                            </div> 
                          </div>
                        </div>
                      </div>  
                    </div>
                    <div class="col-md-6">
                      <div class="panel bs-item z-depth-2 m-t-5 m-l-5 m-r-5 panel-default">
                        <div class="panel-body">
                          <div class="row">
                            <div class="col-md-12">
                              <h4 class="bg-success" align="center">
                                <!--&nbsp;-->
                                Datos de operador
                              </h4>
                            </div>
                          </div>
                           <div class="row" id="op">
                            <div class="col-md-4 col-md-offset-1">
                              <label>Operador</label>
                            </div>
                            <div class="col-md-6">
                             <div class="fg-line">
                              <div class="select">
                                  <select class="form-control" id="ComboPersonal" name="operador">
                                    <option></option>
                                  </select> 
                                  <div class="form-control-feedback" style="text-align:left;" ></div>  
                              </div>
                              </div>   
                            </div>
                          </div>
                          <p></p>
                          <div class="row"> 
                            <div class="col-md-12 col-md-offset-1">
                              <div class="checkbox" id="campoChk">
                                  <label> 
                                  <input id="ts4" type="checkbox"> Crear Operador</label>
                                   
                              </div> 
                             </div> 
                          </div>
                          <div class="row" id= "campoOperador">
                            <div class=" col-md-12">
                              <div class="row">
                                <div class="col-md-4 col-md-offset-1">
                                  <label>Nombres:</label>
                                </div>
                                <div class="col-md-6">
                                  <div class="form-group">
                                  <div class="fg-line">
                                    <input type="text" class="form-control" id="txtnombre" placeholder=" Nombre de operador" name="nombre" required>
                                  </div>
                                  <div class="form-control-feedback" style="text-align:left;" ></div>
                                  </div>                             
                                  <p></p>
                                </div>
                              </div>

                              <div class="row">
                                <div class="col-md-4 col-md-offset-1">
                                  <label>Apellido Paterno:</label>
                                </div>
                                <div class="col-md-6">
                                  <div class="form-group">
                                  <div class="fg-line">
                                    <input type="text" class="form-control" placeholder=" Apellido paterno" id="txtap"  name="paterno" required>
                                    <div class="form-control-feedback" style="text-align:left;" ></div>
                                  </div>
                                  </div>                             
                                  <p></p>
                                </div>
                              </div>
                              <div class="row">
                                <div class="col-md-4 col-md-offset-1 ">
                                  <label>Apellido Materno:</label>
                                </div>
                                <div class="col-md-6">
                                  <div class="form-group">
                                  <div class="fg-line">
                                    <input type="text" class="form-control" placeholder=" Apellido materno" id="txtam"  name="materno" required>
                                    <div class="form-control-feedback" style="text-align:left;" ></div>
                                  </div>
                                  </div>                             
                                  <p></p>
                                </div>
                              </div>
                              <div class="row">
                                <div class="col-md-4 col-md-offset-1">
                                  <label>Usuario:</label>
                                </div>
                                <div class="col-md-6">
                                  <div class="form-group">
                                  <div class="fg-line">
                                    <input type="text" class="form-control" placeholder=" Usuario" id="txtuser"name="usuario" required>
                                    <div class="form-control-feedback" style="text-align:left;" ></div>
                                  </div>
                                  </div>                             
                                  <p></p>
                                </div>
                              </div>
                              <div class="row">
                                <div class="col-md-4 col-md-offset-1">
                                  <label>Contraseña:</label>
                                </div>
                                <div class="col-md-6">
                                  <div class="form-group">
                                  <div class="fg-line">
                                    <input type="text" class="form-control" placeholder=" Contraseña" id="txtpass"  name="contra" required>
                                    <div class="form-control-feedback" style="text-align:left;" ></div>
                                  </div>
                                  </div>                             
                                  <p></p>
                                </div>
                              </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;
                                    }
                                  });
                                  $("#txtuser").keyup(function(){
                                    var valor= $(this).val().toUpperCase();
                                    $(this).prop('value',valor);
                                  });
                                  $("#campoOperador").hide();
                                  ajax_Personal();
                                  $("#campoChk").click(function(){
                                    if($("#ts4").prop('checked')){
                                        $("#campoOperador").show();
                                        $("#op").hide();
                                        $("#ComboPersonal").prop('value',null);
                                        $("#ComboPersonal").prop('disabled',true);
                                      }
                                    else
                                    {
                                      $("#op").show();
                                      $("#campoOperador").hide();
                                      $("#ComboPersonal").prop('disabled',false);
                                      $("#txtnombre").prop('value',null);
                                      $("#txtap").prop('value',null);
                                      $("#txtam").prop('value',null);
                                      $("#txtuser").prop('value',null);
                                      $("#txtpass").prop('value',null);
                                    }
                                  });
                                   ajax_oficina();
                                  $("#ComboOficina").focus(function(){
                                    ajax_oficina();
                                  });

                                  $("#ComboPersonal").focus(function(){
                                    ajax_Personal();
                                  });
                                  //otra funcion
                                  function ajax_oficina(){
                                    $.ajax({
                                      url:'/Admin/oficinas_ajax/',
                                      //async:false,
                                      type:'GET',
                                      dataType:'json',
                                      success: function(data){
                                      var html ="";
                                        $("#ComboOficina").html('');
                                        for(var i=0;i<data.length;i++){
                                          if(data[i].estado_oficina){
                                            html += '<option value="'+data[i].pk+'">'+data[i].nombre_oficina+'</option>';
                                          }
                                        }
                                        $('#ComboOficina').html(html);
                                      }
                                    });
                                  };
                                  function ajax_Personal(){
                                    $.ajax({
                                      url:'/Admin/personal_ajax/',
                                      //async:false,
                                      type:'GET',
                                      dataType:'json',
                                      success: function(data){
                                      var html ="";
                                        $("#ComboPersonal").html('');
                                        for(var i=0;i<data.length;i++){
                                          html += '<option value="'+data[i].pk+'">'+data[i].nombre+' '+data[i].Apellido_paterno+' '+data[i].Apellido_materno+'     '+data[i].dni+'</option>';
                                        }
                                        $('#ComboPersonal').html(html);
                                      }
                                    });
                                  };
                                });
                              </script>
                            </div>
                            
                          </div>
                          
                        </div>
                      </div>  
                    </div>
                  </div> 
                  <div class="row">
                    <div class="col-md-2 col-md-offset-5 col-xs-4 col-xs-offset-2 m-b-10">
                       <button class="btn btn-block btn-primary waves-effect" type="submit"><i class="md md-check"></i> Guardar</button>
                    </div>
                  </div>  
                </div>
              </div>
          </div>
        </div>
      </form>
    </div>
{% endblock content1 %}