{% extends "base.html" %}
{% load static %}
{% block titulo %}
  .::Balance Dolar
{% endblock titulo %}
{% block content1 %} 
      <script type="text/javascript">
      $("#navDolares").attr('class','dropdown active'); 
      $("#navBalanceDolar").attr('class','active');
      </script>
        <div class="row">
          <div class="col-md-12 col-sm-12" >
              <div class="card">
                <div class="card-head card-head-xs style-default"> <strong>BALANCE DOLAR</strong></div>
                <div class="card-body">
                  <div class="row" >
                    <h4 class="bg-success" align="center" id="ExitoCambiar">
                    </h4>
                  </div>
                  <div class="row">
                    <div class="col-md-2 col-md-offset-1">
                      <button type="button" class="btn btn-block btn-primary" id="btnRefrescar"><span class="fa fa-refresh"></span> Actualizar</button>
                    </div>
                  </div>
                  <div class="row">
                    <br>
                    <p class="bg-success">
                      &nbsp;
                      <div class="col-md-12">
                          <div>
                            <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 col-sm-12" >
                                          <div class="row">
                                            <div class="col-md-2 col-md-offset-1">
                                              <label>Monto: </label>
                                            </div>
                                            <div class="col-md-2">
                                              <label id="bal_monto"></label>
                                            </div>
                                          </div>
                                          <div class="row">
                                            <div class="col-md-2 col-md-offset-1">
                                              <label>Promedio T.C. Compra: </label>
                                            </div>
                                            <div class="col-md-2">
                                              <label id="bal_ptcc"></label>
                                            </div>
                                            <div class="col-md-2">
                                              <label>Promedio T.C. Venta: </label>
                                            </div>
                                            <div class="col-md-2">
                                              <label id="bal_ptcv"></label>
                                            </div>
                                          </div>
                                          <div class="row">
                                            <div class="col-md-2 col-md-offset-1">
                                              <label>Saldo: </label>
                                            </div>
                                            <div class="col-md-3">
                                              <label id="bal_saldo"></label>
                                            </div>
                                          </div>
                                          <br>
                                          <div class="row"> 
                                          	 <div class="col-md-12"> 
                                               <p class="bg-success" align="center">
                                                    <h4>Detalle del Balance</h4>
                                                </p>
                                                <br></br>
                                                <div class="table-responsive">
                                                  <table class="table table-bordered">
                                                      <thead>
                                                        <tr>
                                                          <th>Nro</th>
                                                          <th>Fecha</th>
                                                          <th>T.C. Compra</th>
                                                          <th>Dolar Comprado</th>
                                                          <th>T.C. Venta</th>
                                                          <th>Dolar Vendido</th>
                                                        </tr>
                                                      </thead>
                                                      <tbody id="listaC">
                                                          
                                                      </tbody>
                                                      <tfooter>
                                                        <tr>
                                                          <td>&nbsp;</td>
                                                          <td>&nbsp;</td>
                                                          <td>&nbsp;</td>
                                                          <td>&nbsp;</td>
                                                          <th>Saldo:</th>
                                                          <th id="td_saldo"></th>
                                                        </tr>
                                                      </tfooter>
                                                  </table>
                                                </div> 
                                                </div>
                                          </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>
                          <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                  <tr>
                                    <th>Nro</th>
                                    <th>Fecha</th>
                                    <th>Monto</th>
                                    <th>Promedio T.C. Compra</th>
                                    <th>Promedio T.C. Venta</th>
                                  </tr>
                                </thead>
                                <tbody id="listaB">
                                    
                                </tbody>
                                
                            </table>
                          </div>
                      </div>
                    </p>
                  </div>
                  <br>
                  <div class="row">
                    <div class="col-md-10 col-md-offset-1" align="center">
                      <nav>
                        <ul class="pagination">
                          <li>
                            <a href="#" aria-label="Previous">
                              <span aria-hidden="true">&laquo;</span>
                            </a>
                          </li>
                          <li class="active"><a href="#">1</a></li>
                          <li><a href="#">2</a></li>
                          <li><a href="#">3</a></li>
                          <li><a href="#">4</a></li>
                          <li><a href="#">5</a></li>
                          <li>
                            <a href="#" aria-label="Next">
                              <span aria-hidden="true">&raquo;</span>
                            </a>
                          </li>
                        </ul>
                      </nav>
                    </div>
                  </div>
                </div>
              </div>
          </div>
        </div>
<script type="text/javascript">
  var Aux="";
  var filaI =0;
  $(document).ready(function () {
    ajax_Balances();
    $(document).on("click",".filaba",function(){
      var num = $(this).attr('id');
      filaI = num;
      var fila= $(this).attr('class');
      $("."+fila).attr('class','filaba');
      $("#"+num).attr('class','filaba info');
      $("#bal_monto").text(Aux[filaI].monto);
      $("#bal_ptcc").text(Aux[filaI].pd);
      $("#bal_ptcv").text(Aux[filaI].ph);
      $("#bal_saldo").text(Aux[filaI].sd);
      $("#td_saldo").text(Aux[filaI].sd);
      ajax_Compras();
    });
    $("#btnRefrescar").click(function(){
      ajax_Balances();
    });
  
    function ajax_Balances(){
      $.ajax({
        url:'/ListaBalances_ajax/',
        type:'GET',
        dataType:'json',
        success: function(data){
          Aux = data;
          var html ="";
          for(var i=0;i<data.length;i++){
              html += '<tr data-toggle="modal" data-target="#myModal" class="filaba" id="'+i+'"><th scope="row">'+(i+1)+'</td><td>'+data[i].fecha+'</td><td>'+data[i].monto+'</td><td>'+data[i].pd+'</td><td>'+data[i].ph+'</td></tr>';
          }                        
          //html+='</tbody></table>';
          $('#listaB').html(html);
        }
      });
    }
    //
    function ajax_Compras(){
        $.ajax({
          url:'/listaComprasDolar_entre_ajax/',
          data:{'idIni':Aux[filaI].id_debeIni,'idFin':Aux[filaI].id_debe},
          type:'GET',
          dataType:'json',
          success: function(data){
            var html ="";
            for(var i=0;i<data.length;i++){
                if(i==0&& filaI>0 &&Aux[filaI-1].es=='si'){
                  html += '<tr class="filaC" id="'+i+'"><th scope="row">'+(i+1)+'</td><td>'+data[i].fecha+'</td><td>'+data[i].tipo_cambio+'</td><td><span style="text-decoration:line-through;">'+data[i].monto_dolar +' </span><span style=" color: #ce4844;"> '+Aux[filaI-1].sd +'</span></td><td>&nbsp;</td><td>&nbsp;</td></tr>';
                }
                else{
                  html += '<tr class="filaC" id="'+i+'"><th scope="row">'+(i+1)+'</td><td>'+data[i].fecha+'</td><td>'+data[i].tipo_cambio+'</td><td>'+data[i].monto_dolar +'</td><td>&nbsp;</td><td>&nbsp;</td></tr>';
                }
            }
            var mv= parseFloat(Aux[filaI].sd)+parseFloat(Aux[filaI].monto)
            var html1= '<tr class="success"><th>&nbsp;</td><td>&nbsp;</td><td>'+Aux[filaI].pd+'</td><td>'+mv +'</td><td>'+Aux[filaI].ph+'</td><td>'+Aux[filaI].monto+'</td></tr>';
            $('#listaC').html(html+html1);
          }
        });
      }
    //
    //
  });
</script>
{% endblock content1 %}