<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>Ejecucion de la Produccion</h2> </div>
        <div class="card-body">
          <!-- COMIENZO DEL FORMULARIO -->
         <div class="container-fluid">            
             <button id="btnCrear" class="btn btn-outline-success  btn-lg mt-8" type="submit"   onclick="window.location.href='/links/openturno'"><i class='fas fa-plus-circle'  ></i> </button>           
              <input type="hidden"   class="form-control"  name="tipo"  value="general" >      
            <div >
              <div class="row">
                    <div class="col-md-2 mb-3">
                        <select name="fechas" class="custom-select"   onchange="filtrartabla()"  required>
                           <option value="999"  >Todos</option> 
                           {{#each lista_fechas}}
                             <option value="{{Fecha}}" >{{Fecha}}</option>
                             {{/each}}
                           
                        </select>
                    </div>

              </div>

               <table id="tabla123" class="display" style="width:100%">
                   <thead>
                          <tr>
                            <th>ID</th>
                            <th>Fecha</th>
                            <th>Turno</th>
                            <th>Area</th>
                            <th>Supervisor</th>      
                            <th class="display none">tipo</th>
                            <th  class="text-center" >Acciones </th>                                                         
                          </tr>                     
                   </thead>
                  <tfoot>
                          <tr>
                            <th>ID</th>
                            <th>Fecha</th>
                            <th>Turno</th>
                            <th>Area</th>
                            <th>Supervisor</th>    
                            <th class="display none">tipo</th>  
                            <th  class="text-center" >Acciones </th>                                                         
                          </tr>
                      </tfoot>                   

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

  </div>

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

<script>

    $(document).ready(function() {   
          var url1 = "/links/Listaopenturno";

          $('#tabla123').DataTable({     
                  dom: 'Bfrtip',
                  buttons: [
                       'excel', 'pdf'
                  ],
                  "ajax" : {
                  "url" : url1,
                  "dataSrc":"",
                  "type" : "GET"                  
              },
              "aaSorting": [[ 0, "desc" ]],
              "columns":[
                  {"data": "id_produccion",  "title": "ID"  },
                  {"data": "Fecha",  "width": "15%",  "title": "Fecha"   },
                  {"data": "turno",  "width": "15%", "title":  "Turno"},
			            {"data": "Area",   "width": "20%","title": "Area"  }, 
                  {"data": "supervisor",  "title": "Supervisor"  },
                  {"data": "tipo_de_costo",  "title": "tipo_de_costo"  },                 
                  {"defaultContent": "<div class='text-center'> <div class='btn-group'> <button class='btn btn-info btn-sm btnEditar'>Editar</button> <button class='btn btn-warning btn-sm btnConsumo'>Consumo</button> <button class='btn btn-success btn-sm btnActividad'>Actividades</button> <button class='btn btn-danger btn-sm btnCerrar'>Cerrar</button>  </div> </div>"}

             ],
             "columnDefs": [
                { "visible": false, "targets": 5 }
                 ],

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

</script>

<script>

    $(document).ready(function() { 
        filtrartabla()
    });

    $(document).on("click", ".btnEditar", function(){		            
        opcion='editar';
        fila = $(this).closest("tr");	        
        id = parseInt(fila.find('td:eq(0)').text());
        window.location.href = "/links/edit-turno/" + id;
        
    })


    $(document).on("click", ".btnCerrar", function(){		            
        opcion='cerrar';
        fila = $(this).closest("tr");	        
        id = parseInt(fila.find('td:eq(0)').text());
        window.location.href = "/links/close-turno/" + id;       
    })


    $(document).on("click", ".btnConsumo", function(){		            
        var fila = $(this).closest("tr");	        
        var id = parseInt(fila.find('td:eq(0)').text());
        var data = $('#tabla123').DataTable().row(fila).data();
        var el_tipo = data['tipo_de_costo'];
        if (el_tipo =='general') {
              // consumo por departamentos
              window.location.href = "/links/consumo-turno2/" + id;
        }else {
              // consumo por maquina
              window.location.href = "/links/consumo-turno/" + id;
        }        
    })


    $(document).on("click", ".btnActividad", function(){		            
        opcion='Actividades';
        fila = $(this).closest("tr");	        
        id = parseInt(fila.find('td:eq(0)').text());
        window.location.href = "/links/actividad-turno/" + id;
        
    })

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

function filtrartabla() { 
  var table = $('#tabla123').DataTable();
  var valor = document.getElementsByName('fechas')[0].value;
  if (valor =='999') {
      valor ="";    
  }
  table.search( valor);
  table.draw(true);
}
</script>


</div>

