<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>Requerimiento de Materia Prima por Orden</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>
                        <button id="btnCrear" class="btn btn-warning"  onclick=""  >Enviar a Saint</button>
                     </div>
                        
             </div>
                    
            <div >
               <table id="tabla123" class="cell-border" style="width:100%">
                   <thead>
                          <tr>
                            <th>Materia Prima</th> 
                            <th>Producto</th>
                            <th>Area</th>
                            <th>Cantidad Materia Prima</th>      
                            <th class="display none"></th>
                            <th class="display none"> </th>
                            <th class="display none"></th>
                            <th class="display none"> </th>

                          </tr>                     
                   </thead>
               </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-requerimientoMp/" + parametro;

          $('#tabla123').DataTable({     
                        "language": {
                            "decimal": ",",
                            "thousands": "."
                        },              
                  dom: 'Bfrtip',
                  buttons: [
                       'excel', 'pdf', 'print'
                  ],
                  "ajax" : {
                  "url" : url1,
                  "dataSrc":"",
                  "type" : "GET"                  
              },
              "columns":[
                  {"data": "Des_MateriaPrima", "width": "15%", "title": "Materia Prima"   },
                  {"data": "orden", "width": "60%", "title": "Producto"  },
                  {"data": "nombre_area", "width": "25%", "title":  "Area"},                                    
			      {"data": "cantidad", "width": "10%", "title": "Cantidad Materia Prima", render: $.fn.dataTable.render.number(',', '.', 2, '', '')  },
                  {"data": "Nro_orden", "width": "25%", "title":  "Nro de Orden"},
                  {"data": "producto", "width": "25%", "title":  "producto"},
                  {"data": "codigo", "width": "25%", "title":  "codigo materia prima"},
                  {"data": "descripcion", "width": "25%", "title":  "descripcion materia prima"}

             ],
             "columnDefs": [
                  { "visible": false, "targets": 4 },
                  { "visible": false, "targets": 5 },
               ],
             ],
             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-requerimientoMp/" + 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": "Des_MateriaPrima", "width": "15%", "title": "Materia Prima"   },
                  {"data": "orden", "width": "50%", "title": "Producto"  },
                  {"data": "nombre_area", "width": "25%", "title":  "Area"},                                    
			      {"data": "cantidad", "width": "25%", "title": "Cantidad Materia Prima", render: $.fn.dataTable.render.number(',', '.', 2, '', '')  },
                  {"data": "Nro_orden", "width": "25%", "title":  "Nro de Orden"},
                  {"data": "producto", "width": "25%", "title":  "producto"},
                  {"data": "codigo", "width": "25%", "title":  "codigo materia prima"},
                  {"data": "descripcion", "width": "25%", "title":  "descripcion materia prima"}
             ],
             pageLength : 10,
             lengthMenu: [[5, 10, 20, -1], [5, 10, 20, 'Todos']],
            "scrollY": 400,
            "scrollX": true,

        "columnDefs": [
            { "visible": false, "targets": groupColumn },
            { "visible": false, "targets": 4 },
            { "visible": false, "targets": 5 },
            { "visible": false, "targets": 6 },
            { "visible": false, "targets": 7 },

        ],
        "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>

