<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">Listado de Planificaciones</div>
        <div class="card-body">
          <!-- COMIENZO DEL FORMULARIO -->
          <form id="lismaquinas" action="/links/producciond" method="POST" class="needs-validation" novalidate>
            <div class="container mt-3">
              <h2>Listado de Planificaciones</h2>
              <input class="form-control" id="myInput" type="text" placeholder="Search..">
              <br>
          <div style="height: 600px;overflow: scroll;">
              <table   class="table table-hover"  >
                <thead>
                  <tr>
                    <th class="col-xs-3">#Orden</th>
                    <th class="col-xs-3">Cliente</th>
                    <th class="col-xs-3">Producto</th>
                    <th class="col-xs-3">Fecha I</th>
                    <th class="col-xs-3">Fecha F</th>
                    <th class="col-xs-3">Cantidad</th>
                    <th class="col-xs-3">Unidad</th>
                  </tr>
                </thead>
                <tbody id="myTable">
                  {{#each lista_planes}}
                  <tr>
                    <td class="col-xs-3"> {{numerodeorden}} </td> 
                    <td class="col-xs-3"> {{nombre}} </td> 
                    <td class="col-xs-3"> {{descripcion}} </td>  
                    <td class="col-xs-3"> {{fechainicial}} </td> 
                    <td class="col-xs-3"> {{fechafinal}} </td> 
                    <td class="col-xs-3"> {{cantidad}} </td> 
                    <td class="col-xs-3"> {{unidad_medida}} </td> 
                  </tr>
                  {{/each}}
                </tbody>
              </table>
           </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>


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

  <script>

    $(document).ready(function () {
      $("#myInput").on("keyup", function () {
        var value = $(this).val().toLowerCase();
        
        $("#myTable tr").filter(function () {
          $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
        });
      });
    });    
    
 </script>

 
<script>

var table = document.getElementById('myTable');
for(var i = 0; i < table.rows.length; i++) {
  table.rows[i].addEventListener('click', function() {
    var id_maq = '';
    var des_maquina = '';
    id_maq = this.cells[0].innerHTML;
    des_maquina = this.cells[1].innerHTML;
     
    document.getElementsByName('idmaquina')[0].value = id_maq;
    document.getElementsByName('des-maquina')[0].value = des_maquina;
    $("#myModal").modal("hide");
  });
}
</script>
