<div class="container-fluid">
<div class="modal fade"  id="modalPlanes" 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   w-100  shadow-xl p-3 mb-5 bg-white ">
                                            <div class="card-header">
                                                <h2>Listado de Ordenes de Producción</h2>
                                            </div>
                                            <div class="card-body">
                                                <!-- COMIENZO DEL FORMULARIO -->
                                                <div class="container-fluid">
                            
                                                    <div>
                                                        <table id="tablaplanes" class="cell-border" style="width:100%">
                                                            <thead>
                                                                <tr>
                                                                    <th>#Orden</th>
                                                                    <th>Producto</th>
                                                                    <th>Desde</th>
                                                                    <th>Hasta</th>
                                                                    <th>Cantidad</th>
                                                                    <th>Unidad</th>
                                                                    <th>Acciones </th>
                                                                </tr>
                                                            </thead>
                                                            <tfoot>
                                                                <tr>
                                                                    <th>#Orden</th>
                                                                    <th>Producto</th>
                                                                    <th>Desde</th>
                                                                    <th>Hasta</th>
                                                                    <th>Cantidad</th>
                                                                    <th>Unidad</th>
                                                                    <th>Acciones </th>
                                                                </tr>
                                                            </tfoot>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                            
                                </div>
                                <script>
                                    $(document).ready(function () {
                                        var url1 = "/links/listarordenes";

                                         $('#tablaplanes').DataTable({
                                             responsive: true,
                                            "ajax": {
                                                "url": url1,
                                                "dataSrc": "",
                                                "type": "GET"
                                            },
                                            "aaSorting": [[0, "desc"]],
                                            "autoWidth":true,
                                            "columns": [
                                                { "data": "numerodeorden", "title": "#Orden" },
                                                { "data": "descripcion", "title": "Producto" },
                                                { "data": "Fecha_i", "title": "Desde" },
                                                { "data": "Fecha_f", "title": "Hasta" },
                                                { "data": "cantidad", "title": "Cantidad" },
                                                { "data": "unidad_medida", "title": "Unidad" },
                                                { "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
                                        });
                                            $('#modalPlanes').on('shown.bs.modal', function (e) {
                                                $('#tablaplanes').DataTable().draw(true);
                                            })                                        
                                    });
                                     
                                </script>
                            
                                <script>

                                    $(document).on("click", ".btnAceptar", function () {
                                        fila = $(this).closest("tr");
                                        var orden = fila.find('td:eq(0)').text();
                                        var desprod = fila.find('td:eq(1)').text();
                                        var i = parseInt('0' + document.getElementsByName('indextable')[0].value) ;
                                        document.getElementsByName('numorden')[i].value = orden.trim();  
                                        document.getElementsByName('des-orden')[i].value = desprod.trim();  
                                        document.getElementsByName('idmaquina-1974')[0].value = '';
                                        document.getElementsByName('des-maquina88')[0].value = ''; 


                                        $("#modalPlanes").modal("hide");
                                    })

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