{% extends "base.html" %}
{% load static %}
{% block titulo %}
  Ingresos Egresos Caja Material
{% endblock titulo %}
{% block content1 %} 
<script type="text/javascript">
  $("#navCajaMaterial_dinero").attr('class','dropdown active');
  $("#navlistaIEM").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-material" id="grupoC"> <strong>LISTADO DE MOVIMIENTO EFECTIVO (CAJA MATERIAL)</strong></div>
        <div class="panel-body">
          <div class="row myb-4">
              <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>
              </div>
              <div class="col-md-2">
              <div class="fg-line">
                <input type='text' class=" form-control" id="txtfecha1">
                </div>
              </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>
              </div>
          </div>
          <div class="row myb-4">
            <div class="col-md-4 table-scroll" style="font-size: 15px;">
              <div class="table-responsive">
                <table class="table">
                  <thead>
                    <tr>
                      <th colspan="2" class="center light-green lighten-4">
                        SOLES
                      </th>
                    </tr>
                    <tr>
                      <th>Detalle</th>
                      <th class="right">Monto</th>
                    </tr>
                  </thead>
                  <tbody >
                    <tr>
                      <td>Total Ingresos</td>
                      <td style="color: green;" class="right" id="re-i-so">+ 0.00</td>
                    </tr>
                    <tr>
                      <td>Total Egresos</td>
                      <td style="color: red;" class="right" id="re-e-so">- 0.00</td>
                    </tr>
                  </tbody>
                  <tfoot>
                    <tr style="border: 1px solid #616161;">
                      <th>Diferencia:</th>
                      <td style="color: blue;" class="right" id="re-t-so">0.00</td>
                    </tr>
                  </tfoot>
                </table>
              </div>
            </div>
            <div class="col-md-4 table-scroll" style="font-size: 15px;">
              <div class="table-responsive">
                <table class="table">
                  <thead>
                    <tr>
                      <th colspan="2" class="center light-blue lighten-4">
                        DOLARES
                      </th>
                    </tr>
                    <tr>
                      <th>Detalle</th>
                      <th class="right">Monto</th>
                    </tr>
                  </thead>
                  <tbody >
                    <tr>
                      <td>Total Ingresos</td>
                      <td style="color: green;" class="right" id="re-i-do">+ 0.00</td>
                    </tr>
                    <tr>
                      <td>Total Egresos</td>
                      <td style="color: red;" class="right" id="re-e-do">- 0.00</td>
                    </tr>
                  </tbody>
                  <tfoot>
                    <tr style="border: 1px solid #616161;">
                      <th>Diferencia:</th>
                      <td style="color: blue;" class="right" id="re-t-do">0.00</td>
                    </tr>
                  </tfoot>
                </table>
              </div>
            </div>
          </div>
          <div class="row myb-4">
            <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-striped">
                            <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-striped">
                            <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">
  var i_so=0;
  var i_do=0;
  var e_so=0;
  var e_do=0;
  $(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();
      
    })
    //
    $("#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", 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('reporteIngresos.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", 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('reporteEgresos.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_m_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);
          $("#re-i-so").text("+ "+data[data.length-1].total_soles);
          $("#re-i-do").text("+ "+data[data.length-1].total_dolares);
          i_so = parseFloat(data[data.length-1].total_soles);
          i_do = parseFloat(data[data.length-1].total_dolares);
          $("#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');
          ajax_EgresoB();
        }
      });
    }
    //
    function ajax_EgresoB(){
      $('.table-responsive').waitMe({effect : 'progressBar',text : 'Recuperando Datos'});
      $.ajax({
        data:{'filtro':$('#comboFiltroF').val(),'F1':$('#txtfecha1').val(),'F2':$('#txtfecha2').val()},
        url:'/consultaEgreso_m_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>");
          $("#re-e-so").text("- "+data[data.length-1].total_soles);
          $("#re-e-do").text("- "+data[data.length-1].total_dolares);
          e_so = parseFloat(data[data.length-1].total_soles);
          e_do = parseFloat(data[data.length-1].total_dolares);
          calcular_totales();
          $('.table-responsive').waitMe('hide');
        }
      });
    }
    //
    function calcular_totales(){
      $("#re-t-so").text(round( i_so -e_so ,2));
      $("#re-t-do").text(round( i_do -e_do ,2));
    }
    //---
    function round(value, decimals) {
      return Number(Math.round(value+'e'+decimals)+'e-'+decimals);
    }
    //
  });
</script>
{% endblock content1 %}