<div class="modal fade" id="myModal2" 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 Clientes</h2>
                                            </div>
                                            <div class="card-body">
                                                <!-- COMIENZO DEL FORMULARIO -->
                                                <div class="container-fluid">
                            
                                                    <div>
                                                        <table id="tablaclientes" class="display" style="width:100%">
                                                            <thead>
                                                                <tr>
                                                                    <th>ID</th>
                                                                    <th>Codigo</th>
                                                                    <th>Descripción</th>
                                                                    <th>Rif</th>
                                                                    <th class="text-center">Acciones </th>
                                                                </tr>
                                                            </thead>
                                                            <tfoot>
                                                                <tr>
                                                                    <th>ID</th>
                                                                    <th>Código</th>
                                                                    <th>Descripción</th>
                                                                    <th>Rif</th>
                                                                    <th class="text-center">Acciones </th>
                                                                </tr>
                                                            </tfoot>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                            
                                </div>
                                <script>
                                    $(document).ready(function () {
                                        var url1 = "/links/listarclientes";

                                        $('#tablaclientes').DataTable({
                                            "ajax": {
                                                "url": url1,
                                                "dataSrc": "",
                                                "type": "GET"
                                            },
                                            "aaSorting": [[0, "desc"]],
                                            "columns": [
                                                { "data": "id_cliente", "title": "ID" },
                                                { "data": "codigo", "title": "Codigo" },
                                                { "data": "nombre", "title": "Descripcion" },
                                                { "data": "rif", "title": "Rif" },
                                                { "defaultContent": "<div class='text-center'> <div class='btn-group'> <button class='btn btn-info btn-sm btnAceptar'>Seleccionar</button> </div> </div>" }

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

                                    });

                                </script>
                            
                                <script>

                                    $(document).on("click", ".btnAceptar", function () {
                                        fila = $(this).closest("tr");
                                        var id_cliente = parseInt(fila.find('td:eq(0)').text());
                                        var des_cliente = fila.find('td:eq(2)').text();
                                        document.getElementsByName('idcliente')[0].value = id_cliente;
                                        document.getElementsByName('des-cliente')[0].value = des_cliente;
                                        $("#myModal2").modal("hide");
                                    })

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