<div class="modal fade bd-example-modal-lg"  id="modalPlanes" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">   
    
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                    <span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title" id="myModalLabel"></h4>
            </div>
            
            <!-- Modal Body -->
            <div class="modal-body">
                <p class="statusMsg"></p>
                <form role="form">
                    <div class="container-fluid">
                        <div class="row">
                           <div class="col-md-12">
                                <h2>Listado de Materia Prima</h2>
                                <input class="form-control" id="myInput-planes2" type="text" value = "" placeholder="Search..">
                                <br>
                                <table class="table table-hover"   class="table table-responsive" class="table table-fit" >
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th class="text-nowrap" >Descripcion</th>
                                        <th >Unidad</th>
                                    </tr>
                                </thead>
                                <tbody id="myTable-planes">
                                    {{#each lista}}
                                    {{#each lista_materiaprima}}
                                    <tr>
                                        <td > {{id}} </td> 
                                        <td class="text-nowrap" > {{descripcion}} </td> 
                                        <td > {{Unidad}} </td> 
                                    </tr>
                                    {{/each}}
                                    {{/each}}
                                </tbody>
                                </table>
                            </div>    
                        </div>        
                    </div>    
                </form>
            </div>
            
            <!-- Modal Footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary submitBtn" >Aceptar</button>
            </div>
        </div>
    </div>
</div>

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

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

 
<script>

var table2 = document.getElementById('myTable-planes');
for(var r = 0; r < table2.rows.length; r++) {
  table2.rows[r].addEventListener('click', function() {
    var orden = '';
    var desprod = '';
    var i = parseInt('0' + document.getElementsByName('indextable')[0].value) ;
    orden = this.cells[0].innerHTML;
    desprod = this.cells[1].innerHTML;
    document.getElementsByName('idmateriaprima')[i].value = orden.trim();  
    document.getElementsByName('des-materiaprima')[i].value = desprod.trim();  
    
    //unidad
    
    $("#modalPlanes").modal("hide");
  });
}
</script>
