{% extends "baseAdmin.html" %}
{% load static %}
{% block titulo %}
  .:: Listado Ingresos/Egresos
{% endblock titulo %}
{% block content1 %} 
      <script type="text/javascript">
        //$("#navC").attr('class','dropdown active');
        //$("#navlistaIE").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>LISTADO INGRESO/EGRESO</strong></div>
                <div class="card-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"><i class="fa fa-fw  fa-reply"></i> Ingreso</a></li>
                                <li role="presentation" ><a href="#pg2" role="tab" data-toggle="tab"><i class="fa fa-fw fa-share"></i> Egreso</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> 
    <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='{{ SITE_URL }}';
          var operador='{{ user.get_username }}';

          doc.setFontSize(10);
          doc.setFontStyle('bold');
          doc.text("SISTEMA INTEGRAL - RESUMEN INGRESOS", 10, 20);
          doc.setFontSize(8);
          doc.setFontStyle('normal');
          doc.text("BASE : " + 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('reporteIngresos.pdf'); 
        }


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

          doc.setFontSize(10);
          doc.setFontStyle('bold');
          doc.text("SISTEMA INTEGRAL - RESUMEN EGRESOS", 10, 20);
          doc.setFontSize(8);
          doc.setFontStyle('normal');
          doc.text("BASE : " + 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('reporteEgresos.pdf'); 
        }


        //
        function ajax_IngresoB(){
          $.ajax({
            data:{'filtro':$('#comboFiltroF').val(),'F1':$('#txtfecha1').val(),'F2':$('#txtfecha2').val()},
            url:'/consultaIngreso_cierre/',
            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>");
            }
          });
        }
        //
        function ajax_EgresoB(){
          $.ajax({
            data:{'filtro':$('#comboFiltroF').val(),'F1':$('#txtfecha1').val(),'F2':$('#txtfecha2').val()},
            url:'/consultaEgreso_cierre/',
            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>");
            }
          });
        }
        //
      });
    </script>
{% endblock content1 %}