<div class="container">
  <div class="row">
    <div class="col-lg-12">
      <div class="card shadow-lg p-3 mb-5 bg-white ">
        <div class="card-header"> <h2>Reporte de Produccion por Producto</h2> </div>
        <div class="card-body">
          <!-- COMIENZO DEL FORMULARIO -->
         <div class="container-fluid">
            
             <div class="form-row">           
                     <div class="col-md-3 mb-3">
                        <label class="font-weight-bold" for="fecha">Fecha desde </label>
                        <input name="fecha_desde" type="date" class="form-control" id="id-fecha" value={{ eldia }} >
                     </div>
                    
                     <div class="col-md-3 mb-3">
                        <label class="font-weight-bold" for="fecha">Fecha hasta </label>
                        <input name="fecha_hasta" type="date" class="form-control" id="id-fecha" value={{ eldia }} >
                     </div>

                     <div class="col-md-3 mb-3">
                        
                     </div>

                     <div class="col-md-3 mb-3">
                        <button id="btnCrear" class="btn btn-primary"  onclick="ejecutarconsulta(0)"  >Ejecutar</button>
                     </div>
                        
             </div>
                    
<div class="form-row">
            <div >
               <table id="tabla123" class="cell-border" style="width:100%">
                   <thead>
                          <tr>
                            <th>Producto</th>
                            <th>Fecha</th>
                            <th>Total Producción</th>
                            <th>Total Peso</th>
                            <th>Total Merma</th>      
                          </tr>                     
                   </thead>
                        <tfoot align="right">
                            <tr>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th></th>
                            </tr>
                        </tfoot>                   

               </table>
           </div>
</div>                    
          </div>
        </div>
      </div>
    </div>
  </div>

<script src= "/jquery/dist/jquery.js"  ></script> 

<script>

    $(document).ready(function() {   

        //var fecha_i = document.getElementsByName('fecha_desde')[0].value;
       // var fecha_f = document.getElementsByName('fecha_hasta')[0].value;
        var fecha_i = '1970-01-01';
        var fecha_f = '1970-01-01';
        var parametro = fecha_i + '&' + fecha_f
        var url1 = "/links/rep-prodxproducto/" + parametro;

          $('#tabla123').DataTable({     
                        "language": {
                            "decimal": ",",
                            "thousands": "."
                        },              
                  dom: 'Bfrtip',
                  buttons: [
                       'excel', 'pdf', 'print'
                  ],
                  "ajax" : {
                  "url" : url1,
                  "dataSrc":"",
                  "type" : "GET"                  
              },
              "columns":[
                  {"data": "descripcion", "width": "5%", "title": "Producto"  },
                  {"data": "Fecha", "width": "35%", "title": "Fecha"   },
                  {"data": "TotalProduccion", "width": "30%", "title":  "Total Produccion", render: $.fn.dataTable.render.number(',', '.', 0, '', '')},                 
			      {"data": "TotalPeso", "width": "15%", "title": "Total Peso", render: $.fn.dataTable.render.number(',', '.', 0, '', '')  }, 
                  {"data": "TotalMerma", "width": "30%", "title": "Total Merma", render: $.fn.dataTable.render.number(',', '.', 0, '', '')  }
             ],
             pageLength : 10,
             lengthMenu: [[5, 10, 20, -1], [5, 10, 20, 'Todos']],
            "scrollY": 400,
            "scrollX": true         
              });
    });

</script>

<script>

//*******************

   $('#tabla123 tbody').on( 'click', 'tr.group', function () {
        var currentOrder = table.order()[0];
        if ( currentOrder[0] === groupColumn && currentOrder[1] === 'asc' ) {
            table.order( [ 0, 'desc' ] ).draw();
        }
        else {
            table.order( [ 0, 'asc' ] ).draw();
        }
    } );


//****************
function ejecutarconsulta(value) {

        var fecha_i = document.getElementsByName('fecha_desde')[0].value;
        var fecha_f = document.getElementsByName('fecha_hasta')[0].value;
        var parametro = fecha_i + '&' + fecha_f
        var url1 = "/links/rep-prodxproducto/" + parametro;
        var table9 = $('#tabla123').DataTable();

            table9.clear()
            table9.draw();

            $.ajax({
                type: "GET",
                url: url1,
                datatype: "json",
                traditional: true
            })
            .done(function (data) {
                  var groupColumn = 0;        
                  var table = $('#tabla123').DataTable({
                        "language": {
                            "decimal": ",",
                            "thousands": "."
                        },
                      data:  data,
                      destroy: true,
                  dom: 'Bfrtip',
                  buttons: [
                       'excel', 'pdf','print'
                  ],
              "columns":[
                  {"data": "descripcion", "width": "5%", "title": "Producto"  },
                  {"data": "Fecha", "width": "35%", "title": "Fecha"   },
                  {"data": "TotalProduccion", "width": "30%", "title":  "Total Produccion", render: $.fn.dataTable.render.number(',', '.', 2, '', '')},                 
			      {"data": "TotalPeso", "width": "15%", "title": "Total Peso", render: $.fn.dataTable.render.number(',', '.', 2, '', '')  }, 
                  {"data": "TotalMerma", "width": "30%", "title": "Total Merma", render: $.fn.dataTable.render.number(',', '.', 2, '', '')  }

             ],
             pageLength : 10,
             lengthMenu: [[5, 10, 20, -1], [5, 10, 20, 'Todos']],
            "scrollY": 400,
            "scrollX": true,

        "columnDefs": [
            { "visible": false, "targets": groupColumn }
        ],
        "order": [[ groupColumn, 'asc' ]],
        "displayLength": 25,
        "drawCallback": function ( settings ) {
            var api = this.api();
            var rows = api.rows( {page:'current'} ).nodes();
            var last=null;
 
            api.column(groupColumn, {page:'current'} ).data().each( function ( group, i ) {
                if ( last !== group ) {
                    $(rows).eq( i ).before(
                        '<tr class="group"><td colspan="5">'+group+'</td></tr>'
                    );
 
                    last = group;
                }
            } );  //fin de api
        }, // fin de drawcalback
        //***************
    	"footerCallback": function ( row, data, start, end, display ) {
            var api = this.api(), data;
 
            // converting to interger to find total
            var intVal = function ( i ) {
                return typeof i === 'string' ?
                    i.replace(/[\$,]/g, '')*1 :
                    typeof i === 'number' ?
                        i : 0;
            };
 
            // computing column Total of the complete result 
            var Totalproduccion = api
                .column( 2 )
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 );
				
	     var Totalpeso = api
                .column( 3 )
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 );
				
	     var Totalmerma = api
                .column( 4 )
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 );
			
				
            // Update footer by showing the total with the reference of the column index 
	    $( api.column( 1 ).footer() ).html('Totales');
            $( api.column( 2 ).footer() ).html(Totalproduccion);
            $( api.column( 3 ).footer() ).html(Totalpeso);
            $( api.column( 4 ).footer() ).html(Totalmerma);
        },
        "processing": true

        //*****************



    }); // fin de datatable declaracion

                  
            });


} // fin



</script>


</div>

