{% extends "base.html" %}
{% block titulo %}
  .::SALDO DISPONIBLE 
{% endblock titulo %}
{% block content1 %} 
      <script type="text/javascript">
        $("#navBalp").attr('class','dropdown active');
        $("#navSaldoCaja").attr('class','active');
      </script>
        <!--<div class="row"><br><br><br><br></div>-->
        <div class="row">
          <div class="col-md-12 col-sm-12" >
              <div class="card">
                <div class="card-header bgm-bluegray text-center"> <h2>SALDO DISPONIBLE</h2></div>
                <div class="card-body">
                  <div class="row">
                    <div class="col-md-10 col-md-offset-1">
                      <div class="panel panel-default">
                        <div class="panel-body">
                          <div class="row">
                            <div class="col-md-12">
                              <h4 class="bg-info" align="center" id="usr">
                                <!--&nbsp;-->
                                usuario: {{resultado}}
                              </h4>
                            </div>
                          </div>
                          
                           <div class="row">
                            <div class="col-md-2 col-md-offset-1">
                              <h5>Caja:</h5>
                            </div>
                            <div class="col-md-3">
                               <input type="text" class="form-control" id="txtCaja" disabled>
                            </div>
                            <div class="col-md-2 col-md-offset-3">
                              <button class="btn btn-info btn-block" type="button" id="refrescar"> Actualizar</button>
                              <p></p>
                            </div>
                          </div>
                          <div class="row">
                            <div class="col-md-2 col-md-offset-1">
                              <h5>Encargado:</h5>
                            </div>
                            <div class="col-md-5">
                              <input type="text" class="form-control" id="txtEncargado" disabled>
                            </div>
                            <div class="col-md-1">
                              <h5>DNI</h5>
                            </div>
                            <div class="col-md-2">
                              <input type="text" class="form-control" id="txtDni" disabled>
                              <p></p>
                            </div>
                            
                          </div>
                          <div class="row">
                            <div class="col-md-2 col-md-offset-1">
                              <h5>Saldo Soles:</h5>
                            </div>
                            <div class="col-md-3">
                               <input type="text" class="form-control" id="txtSoles" disabled>
                               <p></p>
                            </div>
                          </div> 
                          <div class="row">
                            <div class="col-md-2 col-md-offset-1">
                              <h5>Saldo Dolares:</h5>
                            </div>
                            <div class="col-md-3">
                               <input type="text" class="form-control" id="txtDolares" disabled>
                               <p></p>
                            </div>
                            
                          </div>  
                          <script type="text/javascript">
                            $(document).ready(function(){
                              ajax_saldo();
                              $("#refrescar").click(function(){
                                ajax_saldo();
                              });
                              function ajax_saldo(){
                                $.ajax({
                                  url:'/SaldoCaja_ajax/',
                                  //async:false,
                                  type:'GET',
                                  dataType:'json',
                                  success: function(data){
                                    $("#txtCaja").prop('value',data[0].caja);
                                    enc= data[0].p_nombre +' '+ data[0].p_ap+' '+data[0].p_am;
                                    $("#txtEncargado").prop('value',enc);
                                    $("#txtDni").prop('value',data[0].p_dni);
                                    $("#txtSoles").prop('value',data[0].saldo_soles);
                                    $("#txtDolares").prop('value',data[0].saldo_dolares)
                                  }
                                });
                              };
                            });
                          </script>
                        </div>
                      </div>  
                    </div>
                  </div>
                </div>
              </div>
          </div>
        </div>
    </div>
{% endblock content1 %}