{% extends "base.html" %}
{% load static %}
{% block titulo %}
  Ingresos Egresos Caja Dolar
{% endblock titulo %}
{% block content1 %} 
<script type="text/javascript">
  $("#navDolares").attr('class','dropdown active');
  $("#navMovimientosDolar").attr('class','active');
</script>
<div class="row">
  <div class="col-md-12 col-sm-12" >
    <div class="panel panel-default">
        <div class="panel-heading panel-dolar" id="grupoC"> <strong>LISTADO DE INGRESO/EGRESO (CAJA DOLAR)</strong></div>
        <div class="panel-body">
        <p></p>
          <div class="row">
              <div class="col-md-1 col-md-offset-1">
                <h5>Filtrar Por</h5>
              </div>
              <div class="col-md-2">
              <div class="select">
              <div class="fg-line">
                <select class="form-control" id="comboFiltroF">
                  <option value="h">Hoy</option>
                  <option value="f">Fecha</option>
                  <option value="ef">Entre Fechas</option>
                </select>
                </div>
                </div>
                <p></p>
              </div>
              <div class="col-md-2">
              <div class="fg-line">
                <input type='text' class=" form-control" id="txtfecha1">
                </div>
                <p></p>
              </div>
              <div class="col-md-2">
              <div class="fg-line">
                <input type='text' class="form-control" id="txtfecha2">
                </div>
              </div>
              <div class="col-md-2" align="center">
                <button type="button" class=" btn btn-block btn-danger" id="buscarF"><i class="fa fa-search"></i> Buscar</button>
                <p></p>
              </div>
          </div>
          <div class="row">
            <div class="col-md-12">
              <div class="panel panel-warning">
                <div class="panel-body"> 
                      <ul class="nav nav-tabs" role="tablist">
                        <li role="presentation" class="active"><a href="#pg1" role="tab" data-toggle="tab"><label><span class="glyphicon glyphicon-save" aria-hidden="true"></span> Ingreso</label></a></li>
                        <li role="presentation" ><a href="#pg2" role="tab" data-toggle="tab"><label><span class="glyphicon glyphicon-open" aria-hidden="true"></span> Egreso</label></a></li>
                      </ul> 

                  <!-- Tab panes -->
                  <div class="tab-content" style="text-align: left;">
                    <div role="tabpanel" class="tab-pane fade in active" id="pg1">
                      <div id="impresionI" >
                        <div class="table-responsive">
                          <table id="tableIngreso" class="table table-bordered">
                            <thead>
                              <tr>
                                <th>Fecha</th>
                                <th>TD</th>
                                <th>NR</th>
                                <th>Concepto</th>
                                <th>Moneda</th>
                                <th>Monto</th>
                              </tr>
                            </thead>
                            <tbody id="listaI"></tbody>
                            <tfoot>
                              <tr>
                                <td>&nbsp;</td>
                                <td>&nbsp;</td>
                                <td>&nbsp;</td>
                                <td align="right"><b>SUBTOTAL</b></td>
                                <td><b>Soles</b></td>
                                <td id="ingreso_total_soles"></td>
                              </tr>
                              <tr>
                                <td>&nbsp;</td>
                                <td>&nbsp;</td>
                                <td>&nbsp;</td>
                                <td align="right"><b>SUBTOTAL</b></td>
                                <td><b>Dolares</b></td>
                                <td id="ingreso_total_dolares"></td>
                              </tr>
                            </tfoot>
                          </table>                   
                        </div>                    
                      </div>
                     <p></p>
                      <div class="row">
                        <div class="col-md-4 col-md-offset-4">
                          <button type="button" class=" btn btn-block btn-inverse" id="imprimirI"><i class="fa fa-print"></i> Imprimir Ingreso</button>
                        </div>
                      </div>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="pg2">
                      <div class="table-responsive">
                        <div id="impresionE" >
                          <table id="tableEgreso" class="table table-bordered">
                            <thead>
                              <tr>
                                <th>Fecha</th>
                                <th>TD</th>
                                <th>NR</th>
                                <th>Concepto</th>
                                <th>Moneda</th>
                                <th>Monto</th>
                              </tr>
                            </thead>
                            <tbody id="listaE"></tbody>
                            <tfoot>
                              <tr>
                                <td>&nbsp;</td>
                                <td>&nbsp;</td>
                                <td>&nbsp;</td>
                                <td align="right"><b>SUBTOTAL</b></td>
                                <td><b>Soles</b></td>
                                <td id="egreso_total_soles"></td>
                              </tr>
                              <tr>
                                <td>&nbsp;</td>
                                <td>&nbsp;</td>
                                <td>&nbsp;</td>
                                <td align="right"><b>SUBTOTAL</b></td>
                                <td><b>Dolares</b></td>
                                <td id="egreso_total_dolares"></td>
                              </tr>
                            </tfoot>
                          </table>                         
                        </div>
                      </div>
                      <p></p>
                      <div class="row">
                        <div class="col-md-4 col-md-offset-4">
                          <button type="button" class=" btn btn-block btn-inverse" id="imprimirE"><i class="fa fa-print"></i> Imprimir Egreso</button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
  </div>
</div>
<style type="text/css">
  .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
    padding: 4px;
    line-height: 1.42857143;
    vertical-align: top;
    border-top: 1px solid #ddd;
  }
</style>
    <script type="text/javascript">
      $(document).ready(function (){
        $('#txtfecha1').datetimepicker({
          locale: 'es',
          format: 'YYYY-MM-DD'
        });
        $('#txtfecha2').datetimepicker({
          locale: 'es',
          format: 'YYYY-MM-DD'
        });
        //
        $("#txtfecha1").hide();
        $("#txtfecha2").hide();
        //
        $("#comboFiltroF").change(function(){
          if($("#comboFiltroF").val()=="ef"){
            $("#txtfecha1").show();
            $("#txtfecha1").prop("value","");
            $("#txtfecha2").show();
            $("#txtfecha2").prop("value","");
          }
          if($("#comboFiltroF").val()=="f"){
            $("#txtfecha1").prop("value","");
            $("#txtfecha1").show();
            $("#txtfecha2").hide();
          }
          if($("#comboFiltroF").val()=="h"){
            $("#txtfecha1").prop("value","");
            $("#txtfecha1").hide();
            $("#txtfecha2").prop("value","");
            $("#txtfecha2").hide();
          }
        });
        //
        $("#buscarF").click(function(){
          ajax_IngresoB();
          ajax_EgresoB();
        })
        //
        $("#imprimirI").click(function(){
          imprimirIngreso();
        })
        $("#imprimirE").click(function(){
          imprimirEgreso();
        })

        function imprimirIngreso(){
           var doc = new jsPDF('p', 'pt');
          var resi=doc.autoTableHtmlToJson(document.getElementById("tableIngreso")); 
        
          var base='{{ dg_oficina }}';
          var operador='{{ dg_operador }}';

          doc.setFontSize(10);
          doc.setFontStyle('bold');
          doc.text("CONOSCIO IMPERIAL RESUMEN DE INGRESOS CAJA DOLAR", 10, 20);
          doc.setFontSize(8);
          doc.setFontStyle('normal');
          doc.text("OFICINA : " + base, 10, doc.autoTableEndPosY()+35);
          doc.text("OPERADOR: "+ operador, 10, doc.autoTableEndPosY()+50);

          if($("#comboFiltroF").val()=="ef"){
            doc.text("FECHA DESDE : "+$("#txtfecha1").text(), 10, doc.autoTableEndPosY()+65);
            doc.text("FECHA HASTA : "+$("#txtfecha2").text(), 140, doc.autoTableEndPosY()+65);
          }else{
            if($("#comboFiltroF").val()=="f"){
               doc.text("FECHA : "+$("#txtfecha1").text(), 10, doc.autoTableEndPosY()+65);
            }else{ 
                var d = new Date();
                var n = d.toLocaleString();
                doc.text("FECHA : "+n, 10, doc.autoTableEndPosY()+65);
            }
          }
          
          doc.setFontSize(8);
          doc.setFontStyle('bold'); 

          doc.autoTable(resi.columns, resi.data, {
              startY: 90,
              margin: {horizontal: 10},
              headerStyles: {rowHeight: 12, fontSize: 7,valign: 'middle'},
              styles: {overflow: 'linebreak'},
              bodyStyles: {rowHeight: 12, fontSize: 8, valign: 'middle'}, 
              theme: 'grid',
              pageBreak: 'avoid',
          });

          doc.save('reporteIngresosDolar.pdf'); 
        }


         function imprimirEgreso(){
           var doc = new jsPDF('p', 'pt');
          var rese=doc.autoTableHtmlToJson(document.getElementById("tableEgreso")); 
        
          var base='{{ dg_oficina }}';
          var operador='{{ dg_operador }}';

          doc.setFontSize(10);
          doc.setFontStyle('bold');
          doc.text("CONOSCIO IMPERIAL RESUMEN DE EGRESOS CAJA DOLAR", 10, 20);
          doc.setFontSize(8);
          doc.setFontStyle('normal');
          doc.text("OFICINA : " + base, 10, doc.autoTableEndPosY()+35);
          doc.text("OPERADOR: "+ operador, 10, doc.autoTableEndPosY()+50);
         if($("#comboFiltroF").val()=="ef"){
            doc.text("FECHA DESDE : "+$("#txtfecha1").text(), 10, doc.autoTableEndPosY()+65);
            doc.text("FECHA HASTA : "+$("#txtfecha2").text(), 140, doc.autoTableEndPosY()+65);
          }else{
            if($("#comboFiltroF").val()=="f"){
               doc.text("FECHA : "+$("#txtfecha1").text(), 10, doc.autoTableEndPosY()+65);
            }else{
                var d = new Date();
                var n = d.toLocaleString();
                doc.text("FECHA : "+n, 10, doc.autoTableEndPosY()+65);
            }
          }
          
          doc.setFontSize(8);
          doc.setFontStyle('bold'); 

          doc.autoTable(rese.columns, rese.data, {
              startY: 90,
              margin: {horizontal: 10},
              headerStyles: {rowHeight: 12, fontSize: 7,valign: 'middle'},
              styles: {overflow: 'linebreak'},
              bodyStyles: {rowHeight: 12, fontSize: 8, valign: 'middle'}, 
              theme: 'grid',
              pageBreak: 'avoid',
          });

          doc.save('reporteEgresosDolar.pdf'); 
        }


        //
        function ajax_IngresoB(){
          $('.table-responsive').waitMe({effect : 'progressBar',text : 'Recuperando Datos'});
          $.ajax({
            data:{'filtro':$('#comboFiltroF').val(),'F1':$('#txtfecha1').val(),'F2':$('#txtfecha2').val()},
            url:'/consultaIngreso_dolar_ajax/',
            type:'GET',
            dataType:'json',
            success: function(data){
              var html ="";
              for(var i=0;i<data.length-1;i++){
                html += '<tr id="'+i+'"><td>'+data[i].fecha+'</td><td>'+data[i].tipodoc+'</td><td>'+data[i].nroR+'</td><td>'+data[i].concepto+'</td><td>'+data[i].moneda +'</td><td>'+data[i].monto+'</td></tr>';
              }                        
              $('#listaI').html(html);
              $("#ingreso_total_soles").html("<b>"+data[data.length-1].total_soles+"</b>");
              $("#ingreso_total_dolares").html("<b>"+data[data.length-1].total_dolares+"</b>");
              $('.table-responsive').waitMe('hide');
            }
          });
        }
        //
        function ajax_EgresoB(){
          $('.table-responsive').waitMe({effect : 'progressBar',text : 'Recuperando Datos'});
          $.ajax({
            data:{'filtro':$('#comboFiltroF').val(),'F1':$('#txtfecha1').val(),'F2':$('#txtfecha2').val()},
            url:'/consultaEgreso_dolar_ajax/',
            type:'GET',
            dataType:'json',
            success: function(data){
              var html ="";
              for(var i=0;i<data.length-1;i++){
                html += '<tr id="'+i+'"><td>'+data[i].fecha+'</td><td>'+data[i].tipodoc+'</td><td>'+data[i].nroR+'</td><td>'+data[i].concepto+'</td><td>'+data[i].moneda +'</td><td>'+data[i].monto+'</td></tr>';
              }                        
              $('#listaE').html(html);
              $("#egreso_total_soles").html("<b>"+data[data.length-1].total_soles+"</b>");
              $("#egreso_total_dolares").html("<b>"+data[data.length-1].total_dolares+"</b>");
              $('.table-responsive').waitMe('hide');
            }
          });
        }
        //
      });
    </script>
{% endblock content1 %}