{% extends "base.html" %}
{% load static %}
{% block titulo %}
  Ingresos Egresos Material
{% endblock titulo %}
{% block content1 %} 
<script type="text/javascript">
  $("#navCajaMaterial").attr('class','dropdown active');
  $("#navlistaIEMaterial").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 INGRESO/EGRESO 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">
                        MATERIAL
                      </th>
                    </tr>
                    <tr>
                      <th>Detalle</th>
                      <th class="right">Cantidad (Gramos)</th>
                    </tr>
                  </thead>
                  <tbody >
                    <tr>
                      <td>Total Ingresos</td>
                      <td style="color: green;" class="right" id="re-i-ma">+ 0.00</td>
                    </tr>
                    <tr>
                      <td>Total Egresos</td>
                      <td style="color: red;" class="right" id="re-e-ma">- 0.00</td>
                    </tr>
                  </tbody>
                  <tfoot>
                    <tr style="border: 1px solid #616161;">
                      <th>Diferencia:</th>
                      <td style="color: blue;" class="right" id="re-t-ma">0.00</td>
                    </tr>
                  </tfoot>
                </table>
              </div>
            </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-striped">
                            <thead>
                              <tr>
                                <th>Fecha</th>
                                <th>TD</th>
                                <th>NR</th>
                                <th>Concepto</th>
                                <th>Cantidad (Gramos)</th>
                              </tr>
                            </thead>
                            <tbody id="listaI"></tbody>
                            <tfoot>
                              <tr>
                                <td>&nbsp;</td>
                                <td>&nbsp;</td>
                                <td align="right"><b>SUBTOTAL</b></td>
                                <td><b>Material</b></td>
                                <td id="ingreso_total_soles"></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>Cantidad (Gramos)</th>
                              </tr>
                            </thead>
                            <tbody id="listaE"></tbody>
                            <tfoot>
                              <tr>
                                <td>&nbsp;</td>
                                <td>&nbsp;</td>
                                <td align="right"><b>SUBTOTAL</b></td>
                                <td><b>Material</b></td>
                                <td id="egreso_total_soles"></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_ma=0;
      var e_ma=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();
          //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 MATERIAL", 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('reporteIngresosMaterial.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 MATERIAL", 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('reporteEgresosMaterial.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_material_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].monto+'</td></tr>';
              }                        
              $('#listaI').html(html);
              $("#re-i-ma").text("+ "+data[data.length-1].total_material);
              i_ma = parseFloat(data[data.length-1].total_material);
              $("#ingreso_total_soles").html("<b>"+data[data.length-1].total_material+"</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_material_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].monto+'</td></tr>';
              }                        
              $('#listaE').html(html);
              $("#re-e-ma").text("- "+data[data.length-1].total_material);
              e_ma = parseFloat(data[data.length-1].total_material);
              $("#egreso_total_soles").html("<b>"+data[data.length-1].total_material+"</b>");
              $('.table-responsive').waitMe('hide');
              calcular_totales();
            }
          });
        }
        //
        //
        function calcular_totales(){
          $("#re-t-ma").text(round( i_ma -e_ma ,2));
        }
        //---
        function round(value, decimals) {
          return Number(Math.round(value+'e'+decimals)+'e-'+decimals);
        }
      });
    </script>
{% endblock content1 %}