<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 Maquina</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 >
               <table id="tabla123" class="cell-border" style="width:100%">
                   <thead>
                          <tr>
                            <th>Maquina</th>
                            <th>Producto</th>
                            <th>Unidad</th>
                            <th>Producción</th>      
                            <th>Peso</th>    
                            <th>Merma</th>     
                          </tr>                     
                   </thead>
                        <tfoot align="right">
                            <tr>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th></th>
                            </tr>
                        </tfoot>                   
               </table>
           </div>
          </div>
        </div>
      </div>
    </div>
  </div>

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

<script>

    $(document).ready(function() {   
        var fecha_i = '1970-01-01';
        var fecha_f = '1970-01-01';
        var parametro = fecha_i + '&' + fecha_f
        var url1 = "/links/rep-prodxmaquina/" + parametro;

          $('#tabla123').DataTable({     
                   responsive: true,
                  dom: 'Bfrtip',
                  buttons: [
                       'excel', 'pdf', 'print'
                  ],
                  "ajax" : {
                  "url" : url1,
                  "dataSrc":"",
                  "type" : "GET"                  
              },
              "columns":[
                  {"data": "la_maquina", "width": "10%", "title": "Maquina" },
                  {"data": "Producto", "width": "10%", "title":  "Producto"},                 
			      {"data": "unidad", "width": "10%", "title": "Unidad"}, 
                  {"data": "Produccion_Ejecutada", "width": "10%", "title": "Produccion", render: $.fn.dataTable.render.number(',', '.', 2, '', '')  },
                  {"data": "Peso_ejecutado", "width": "10%", "title": "Peso", render: $.fn.dataTable.render.number(',', '.', 2, '', '')  },
                  {"data": "Merma_ejecutada", "width": "10%", "title": "Merma", render: $.fn.dataTable.render.number(',', '.', 2, '', '')  }                 
             ],
             pageLength : 10,
             lengthMenu: [[5, 10, 20, -1], [5, 10, 20, 'Todos']],
            "scrollY": 400,
            "scrollX": true         
              });
    });

</script>

<script>

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



//****************
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-prodxmaquina/" + 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({
                      data:  data,
                      destroy: true,
                      dom: 'Bfrtip',
                      buttons: [
                       'excel', 'pdf','print'
                  ],
              "columns":[
                  {"data": "la_maquina", "width": "5%", "title": "Maquina" },
                  {"data": "Producto", "width": "40%", "title":  "Maquina/Producto"},                 
			      {"data": "unidad", "width": "10%", "title": "Unidad"}, 
                  {"data": "Produccion_Ejecutada", "width": "5%", "title": "Produccion", render: $.fn.dataTable.render.number(',', '.', 2, '', '')  },
                  {"data": "Peso_ejecutado", "width": "5%", "title": "Peso", render: $.fn.dataTable.render.number(',', '.', 2, '', '')  },
                  {"data": "Merma_ejecutada", "width": "5%", "title": "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( 3 )
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 );
				
	     var Totalpeso = api
                .column( 4 )
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 );
				
	     var Totalmerma = api
                .column( 5 )
                .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( 2 ).footer() ).html('Totales');
            $( api.column( 3 ).footer() ).html(Totalproduccion);
            $( api.column( 4 ).footer() ).html(Totalpeso);
            $( api.column( 5 ).footer() ).html(Totalmerma);
        },
        "processing": true
        //******


        

    }); // fin de datatable declaracion

                  
            });


} // fin



</script>


</div>

