the_mechanic/app/Views/reorder_level_list.php

<?php include('layout/header.php'); ?>
<div class="container-fluid">
<div class="row">
        <div class="col-12">
            <div class="page-title-box page-title-box-alt">
                <h4 class="page-title">Low Stock Items</h4>
                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                   
                    </ol>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-body">
                    <!-- <h4 class="header-title">Business List</h4> -->

                



                    <table id="datatable-buttons-2" class="table table-striped dt-responsive nowrap w-100" style="width:100% !important;">
                        <thead>

                            <tr>
                                <th>Vendor Name</th>
                                <!-- <th>Vendor Name</th>
                                <th>Unit Price</th> -->
                                <th>Item</th>
                                <!-- <th>Re-Order Level</th> -->
                                <th>Actions</th>                           
                            </tr>
                        </thead>


                        <tbody>
                            <?php foreach ($reorder as $value) : ?>
                            <tr >
                                <div></div>
                                <td><?= $value['prefered_vendor_name']; ?></td>
                                <td><?= $value['product_count']; ?></td>
                                <!-- <td><?= $value['prefered_vendor_name']; ?></td>
                                <td><?= number_format($value['unit_price']); ?></td> 
                                    <td><?= $value['qty_stock']; ?></td>
                                <td><?= $value['purchase_order_level']; ?></td> -->
                                <td>
                                    <div class="btn-group dropdown">
                                        <a href="javascript: void(0);" class="dropdown-toggle arrow-none btn btn-light btn-sm" data-toggle="dropdown" aria-expanded="false"><i class="mdi mdi-dots-horizontal"></i></a>
                                        <div class="dropdown-menu dropdown-menu-right">
                                            <!-- <a href="<?= "rise_order/" . $value['product_id']; ?>" class="edit-button"><i class="ri-arrow-up-circle-fill"></i>Rise</a> -->
                                            <a class="dropdown-item product_list_view" id="<?php echo $value['prefered_vendor']; ?>">
                                                <i class="fas fa-shopping-cart mr-2 text-muted font-18 vertical-middle"></i>Product List
                                            </a>
                                            <a href="<?= "rise_order/" . $value['prefered_vendor']; ?>" class="dropdown-item edit-button" title="Raise PO"><i class="fas fa-file-invoice mr-2 text-muted font-18 vertical-middle"></i>Raise</a>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                </td>
                                <?php endforeach; ?>

                            </tr>
                        </tbody>
                    </table>
                </div> <!-- end table-responsive-->
             
            </div>
        </div> <!-- end card -->
    </div> <!-- end col -->

</div>

<!-- Start Product List Pop-UP -->
<div id="product_list_model" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content justify-content-center" style="height: 40vh;">
            <div class="modal-body">
                <div class="text-center mt-2 mb-4">
                   <h4>Product List</h4>
                </div>
                <div class="form-group" id="product_list_model_body">
                        
                </div>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->



<?php include('layout/footer.php'); ?>

<script>
$(document).ready(function() {
    $('#datatable-buttons-2').DataTable({
      "order": [[0, 'desc']], // Set initial sorting to descending on the first column
      "dom": 'Bfrtip', // Show export buttons
      "buttons": [ {
                extend: 'pdfHtml5',
                title: 'Mechanic', // Set your custom PDF title here
                text: 'PDF',
                customize: function(doc) {
                    // You can further customize the PDF here if needed
                    // doc.content[1].table.body.forEach(function(row) {
                    // row.splice(0, 1); // Remove the first column (ID column)
                  // });
                }
            },
            {
                extend: 'print',
                title: 'Mechanic', // Set your custom print title here
                text: 'Print',
                customize: function(win) {
                    // You can further customize the print output here if needed
                    // $(win.document.body).find('table').find('th:first-child, td:first-child').remove();
                }
            },
            {
                extend: 'copy',
                text: 'Copy', // Set the title for the Copy button
                titleAttr: 'Copy', // Set the tooltip for the Copy button
                exportOptions: {
                  // columns: ':not(:first-child)' // Exclude the first column (ID column)
                }
            },
            {
                extend: 'csv',
                text: 'CSV', // Set the title for the CSV button
                title: 'Mechanic', // Set your custom print title here
                exportOptions: {
                  // columns: ':not(:first-child)' // Exclude the first column (ID column)
                }
            }], // Enable export options
      "language": {
        "search": "Search: " // Customize search label
      },
      "ordering": false
    });
});


  $('.product_list_view').click(function () {
    var vendor_id = $(this).attr('id');

    $.ajax({
        url: '<?php echo base_url()."get_product_by_vendor/"?>'+vendor_id,
        method: 'GET',
        success: function(response) {
            var product_list = JSON.parse(response);

            if (product_list) {
                // console.log(product_list);
                $('#product_list_model').modal('show');

                var html = '';
                html += '<table class="table table-striped dt-responsive nowrap w-100"><thead><tr><th>Name </th><th>Qty</th></tr></thead><tbody>';
                
                product_list.forEach(function(product) {
                    // console.log(product);
                    html += '<tr><td>'+ product.product_name+'</td><td>'+product.qty_stock+'</td></tr>';
                });

                html += '</tbody></table>'

                $("#product_list_model_body").html(html);
            }
        },
        error: function(xhr, status, error) {
            console.error('Error occurred while deleting the item:', error);
        }
    });
    
  })

</script>