<div class="modal fade" id="myModal3" role="dialog">
      <div class="modal-dialog modal-xl"> 
      <div class="modal-content">
         <div class="modal-header">
             <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">
                                                <h2>Catalogo de Productos</h2>
                                            </div>
                                            <div class="card-body">
                                                <!-- COMIENZO DEL FORMULARIO -->
                                                <div class="container-fluid">
                            
                                                    <div>
                                                        <table id="tablaproductos" class="display" style="width:100%">
                                                            <thead>
                                                              <tr>
                                                                    <th>ID</th>
                                                                    <th>Codigo</th>
                                                                    <th>Descripcion</th>
                                                                    <th>Medida</th>
                                                                    <th class="text-center">Acciones </th>
                                                                    <th class="display none" >Peso</th>
                                                                    
                                                                </tr>
                                                            </thead>
                                                            <tfoot>
                                                                <tr>
                                                                    <th>ID</th>
                                                                    <th>Codigo</th>
                                                                    <th>Descripcion</th>
                                                                    <th>Medida</th>
                                                                    <th class="text-center">Acciones </th>
                                                                    <th class="display none" >Peso</th>
                                                                    
                                                                </tr>
                                                            </tfoot>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                            
                                </div>

                                <script>
                                    
                                    $(document).ready(function () {
                                        var url1 = "/links/listar-productos9";
                                        
                                        $('#tablaproductos').DataTable({
                                            "ajax": {
                                                "url": url1,
                                                "dataSrc": "",
                                                "type": "GET"
                                            },
                                            "aaSorting": [[0, "desc"]],
                                            "columns": [
                                                { "data": "id_productos", "title": "ID" },
                                                { "data": "codigo", "title": "Codigo" },
                                                { "data": "descripcion", "title": "Descripcion" },
                                                { "data": "medida", "title": "Medida" },
                                                { "defaultContent": "<div class='text-center'> <div class='btn-group'> <button class='btn btn-info btn-sm btnAceptarP'>Seleccionar</button> </div> </div>" },
                                                { "data": "peso", "title": "peso"  }                                               
                                            ],
                                              "columnDefs": [
                                                    { "visible": false, "targets": 5 }
                                                ],

                                            pageLength: 10,
                                            lengthMenu: [[5, 10, 20, -1], [5, 10, 20, 'Todos']],
                                            "scrollY": 400,
                                            "scrollX": true
                                        });
                                            $('#myModal3').on('shown.bs.modal', function (e) {
                                                $('#tablaproductos').DataTable().draw(true);
                                            })                                         
                                        
                                    });


                                    $(document).on("click", ".btnAceptarP", function () {
                                        var fila = $(this).closest("tr");
                                        var data = $('#tablaproductos').DataTable().row(fila).data();
                                        var id_producto = parseInt(fila.find('td:eq(0)').text());
                                        var des_producto = data['descripcion'];
                                        var unidad = data['medida'];
                                        var peso = data['peso'];
                                        

                                        document.getElementsByName('idproducto')[0].value = id_producto;
                                        document.getElementsByName('des-producto')[0].value = des_producto;
                                      //  document.getElementsByName('des-unidad')[0].value = unidad;
                                       // document.getElementsByName('peso')[0].value = peso;
                                        
                                       
                                        $("#myModal3").modal("hide");
                                    })


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