 <div class="container-fluid">
  <div class="row">
    <div class="col-lg-12">
      <div class="card shadow-lg p-3 mb-5 bg-white ">
        <div class="card-header"> <h2>Programación   {{lista.0.newParam.idreg}}</h2> </div>
        <div class="card-body">
          <!-- COMIENZO DEL FORMULARIO -->
         <div >            
             
             <input type="hidden"   class="form-control"  name="id" value="{{lista.0.newParam.idreg}}" >    
             <input type="hidden"   class="form-control"  name="subtitulo" value="{{lista.0.newParam.subtitulo}}" > 
             <input type="hidden"   class="form-control"  name="msfinal" value="{{lista.0.newParam.msfinal}}" > 


               <table id="tabla123" class="display" style="width:100%">
                 <button id="btnCrear" class="btn btn-outline-danger  btn-lg mt-8" type="submit"   onclick="window.location.href='/links/planificaciones-general'"><i class='fas fa-sign-out-alt'  ></i> </button>
                   <thead>
                          <tr>
                            <th >Nro</th>  
                            <th >Dia</th>
                            <th>Actividad</th>
                            <th>Id</th>
                            <th>Producto</th>
                            <th>Hora I</th>
                            <th>Hora F</th>
                            <th>Lote</th>      
                            <th>Cantidad</th>
                            <th  style="display:none">fecha_reg</th>
                            <th  style="display:none">nro_registro</th>
                          </tr>                     
                   </thead>
                  <tfoot>
                          <tr>
                            <th >Nro</th>  
                            <th >Dia</th>
                            <th>Actividad</th>
                            <th>Id</th>
                            <th>Producto</th>
                            <th>Inicio</th>
                            <th>Fin</th>
                            <th>Lote</th>      
                            <th>Cantidad</th>    
                            <th  style="display:none">fecha_reg</th>
                            <th  style="display:none">nro_registro</th>
                          </tr>
                      </tfoot>                   
               </table>

            <div >

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

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


<script>

    $(document).ready(function() {   
          var id = document.getElementsByName('id')[0].value ;
          var url1 = "/links/api-show-programacion/" + id;;

          var el_mensaje = document.getElementsByName('subtitulo')[0].value;
          var msfinal = document.getElementsByName('msfinal')[0].value;

          $('#tabla123').DataTable({     


//*****
    dom: 'Bfrtip',
    buttons: [
        {
            extend: 'excel',           // Extend the excel button
            messageTop: el_mensaje,
            messageBottom: msfinal,
            excelStyles: {                // Add an excelStyles definition
                template: 'blue_medium',  // Apply the 'blue_medium' template
            },
             exportOptions: {
                    columns: ':visible'
                }

        },
    ],
//*****
                  "ajax" : {
                  "url" : url1,
                  "dataSrc":"",
                  "type" : "GET"    

              },
             "order": [[ 3, "asc" ]],

              "columns":[
                  
                  {"data":  "dia",  "title":  "Nro" ,  className: "text-center" ,render: 
                  function ( data, type, row ) {

                        switch (row.dia) {
                          case 'Lunes':
                            return 0
                            break;
                          case 'Martes':
                            return 1
                            break;
                          case 'Miércoles':
                            return 2
                            break;
                         case 'Jueves':
                           return 3
                           break;
                         case 'Viernes':
                           return 4
                           break;
                         case  'Sábado': 
                           return 5
                           break;
                         case 'Domingo': 
                           return 6 
                           break;

                        }
                  } },

                  {"data": "dia_c",  "title": "Dia", className: "text-center" },
                  {"data": "nombre_actividad",  "title":  "Actividad" },
                  {"data":  "id_unico",  "title":  "id" },
			            {"data": "nombre_producto",  "title": "Producto"  }, 
                  {"data": "hora_inicio",  "title": "Inicio"  },
                  {"data": "hora_final",  "title": "Fin"  },
                  {"data": "lote",  "title": "#Lote"  },
                  {"data": "cantidad",  "title": "Cantidad"  },

                  {"data":  "id_unico",  "title":  "id_unico" },
                  

                  {"data": "nro_registro",  "title": "nro_registro"  },

             ],

            "columnDefs": [
            { "visible": false, "targets": 9 },
            { "visible": false, "targets": 10 }
            
        ],
		         rowsGroup: [ 	0, 	1,  2,  3, 4, 5, 6 ],             
             pageLength : 10,
             lengthMenu: [[5, 10, 20, -1], [5, 10, 20, 'Todos']],
            "scrollY": 300,
            "scrollX": true,
            "scrollX": true,
            "scrollCollapse": true
              });


    });



</script>

<script>





</script>


</div>

