<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 Consumo de Materia Prima</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>Codigo</th>
                            <th>Materia Prima</th>
                            <th>Unidad</th>
                            <th>Fecha</th>
                            <th>Total Consumo</th>      
                          </tr>                     
                   </thead>
               </table>
           </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-consumomp/" + parametro;

          $('#tabla123').DataTable({     
                  dom: 'Bfrtip',
                  buttons: [
                       'excel', 'pdf', 'print'
                  ],
                  "ajax" : {
                  "url" : url1,
                  "dataSrc":"",
                  "type" : "GET"                  
              },
              "columns":[
                  {"data": "codigo", "width": "5%", "title": "Codigo"  },
                  {"data": "MateriaPrima", "width": "35%", "title": "Materia Prima" },
                  {"data": "Unidad", "width": "5%", "title":  "Unidad"},                 
			      {"data": "fecha", "width": "10%", "title": "Fecha" }, 
                  {"data": "Total_Consumo", "width": "10%", "title": "Total Consumo", 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-consumomp/" + parametro;
        var table9 = $('#tabla123').DataTable();

            table9.clear()
            table9.draw();

            $.ajax({
                type: "GET",
                url: url1,
                datatype: "json",
                traditional: true
            })
            .done(function (data) {
                  var groupColumn = 3;        
                  var table = $('#tabla123').DataTable({

                      data:  data,
                      destroy: true,
                  dom: 'Bfrtip',
                  buttons: [
                       'excel', 'pdf','print'
                  ],
              "columns":[
                  {"data": "codigo", "width": "5%", "title": "Codigo"  },
                  {"data": "MateriaPrima", "width": "35%", "title": "Materia Prima" },
                  {"data": "Unidad", "width": "5%", "title":  "Unidad"},                 
			            {"data": "fecha", "width": "25%", "title": "Fecha" }, 
                  {"data": "Total_Consumo", "width": "10%", "title": "Total Consumo", 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


        

    }); // fin de datatable declaracion

                  
            });


} // fin



</script>


</div>

