  <div class="modal fade" id="myModal3" role="dialog">
    <div class="modal-dialog modal-xl"> 
      <!-- Modal content-->
      <div class="col-lg-12"></div>
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
          <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 Productos</div>
                  <div class="card-body">
                    <!-- COMIENZO DEL FORMULARIO -->
                    <form id="list-clientes" action="" method="POST" class="needs-validation" novalidate>                    
                      <div class="container mt-3">
                        <h2>Listado de Productos</h2>
                        <input class="form-control" id="myInput-producto" type="text" value = "" placeholder="Search..">
                        <br>
                        <table class="table table-hover">
                          <thead>
                            <tr>
                              <th>ID</th>
                              <th>Descripcion</th>
                              <th>medida</th>
                              <th>Ancho</th>
                              <th>Largo</th>
                              <th>Espesor</th>
                              <th>Fuelle</th>
                              <th>Color</th>
                              <th>Tratamiento</th>
                              <th>Peso</th>
                            </tr>
                          </thead>
                          <tbody id="myTable-productos">
                            {{#each lista}}
                            {{#each lista_productos}}
                            <tr>

                              <td> {{id_productos}}</td>
                              <td> {{descripcion}}</td>
                              <td> {{medida}}</td>
                              <td> {{ancho}}</td>
                              <td> {{largo}}</td>
                              <td> {{espesor}}</td>
                              <td> {{fuelle}}</td>
                              <td> {{color}}</td>
                              <td> {{tratamiento}}</td>
                              <td> {{peso}}</td>


                            </tr>
                            {{/each}}
                            {{/each}}
                          </tbody>
                        </table>
                      </div>
                    </form>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

{{!-- scripts para el catalogo de clientes --}}

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

      $('td:nth-child(4)').hide();
      $('th:nth-child(4)').hide();  

      $('td:nth-child(5)').hide();
      $('th:nth-child(5)').hide();  

      $('td:nth-child(6)').hide();
      $('th:nth-child(6)').hide();  

      $('td:nth-child(7)').hide();
      $('th:nth-child(7)').hide();  

      $('td:nth-child(8)').hide();
      $('th:nth-child(8)').hide();  

      $('td:nth-child(9)').hide();
      $('th:nth-child(9)').hide();  

      $('td:nth-child(10)').hide();
      $('th:nth-child(10)').hide();  




 </script>





<script>

var table2 = document.getElementById('myTable-productos');
for(var r = 0; r < table2.rows.length; r++) {
  table2.rows[r].addEventListener('click', function() {
    var id_cliente = '';
    var des_cliente = '';
    var unidad = '';
    var ancho = '';
    var largo = '';
    var espesor = '';
    var fuelle = '';
    var color = '';
    var tratamiento = '';
    var peso = '';

    id_producto = this.cells[0].innerHTML;
    des_producto = this.cells[1].innerHTML;
    unidad = this.cells[2].innerHTML;

    ancho = this.cells[3].innerHTML;
    largo = this.cells[4].innerHTML;
    espesor = this.cells[5].innerHTML;
    fuelle = this.cells[6].innerHTML;
    color = this.cells[7].innerHTML;
    tratamiento = this.cells[8].innerHTML;
    peso = this.cells[9].innerHTML;

    document.getElementsByName('idproducto')[0].value = id_producto;
    document.getElementsByName('des-producto')[0].value = des_producto;
    document.getElementsByName('des-unidad')[0].value = unidad;

    document.getElementsByName('ancho')[0].value = ancho;
    document.getElementsByName('largo')[0].value = largo;
    document.getElementsByName('espesor')[0].value = espesor;
    document.getElementsByName('fuelle')[0].value = fuelle;
    document.getElementsByName('color')[0].value = color;
    document.getElementsByName('tratamiento')[0].value = tratamiento;
    document.getElementsByName('peso')[0].value = peso;
       
    cargar_mp(0);

    $("#myModal3").modal("hide");
  });
}
</script>

