lemon-admin/resources/views/app/my-account/admin/orders/partials/table.blade.php

<div class="d-flex align-items-center justify-content-between">
    <div class="d-flex align-items-center">
        <div class="my-2">Showing <b>{{ $rows->firstItem() }}</b> to <b>{{ $rows->lastItem() }}</b> of total
            <b>{{ $rows->total() }}</b> records
        </div>
    </div>
</div>



<div class="table-responsive scrollable">
    <table class="table table-sm table-hover table-bordered mb-0 bg-white">
        <thead>
            <tr>
                <th>#</th>
                <th>Created At</th>
                <th>Total Amount</th>
                <th>Orders</th>
                <th>Trx</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($rows as $order)
                <tr @if ($order->is_cancelled) class="cancelled-order" @endif>
                    <td class="text-nowrap">
                        <a href="{{ route('admin.orders.view.dashboard', $order) }}"
                            class="me-2">{{ $order->orderNumber() }}</a>
                    </td>
                    <td class="text-nowrap">{{ friendly_date_time($order->created_at) }}</td>
                    <td>{{ displayAmount('$', $order->total()) }}</td>
                    <td>
                        @include('app.my-account.admin.orders.partials.order-tests-summary')
                    </td>
                    <td class="text-nowrap">
                        <?php $finalTrx = $order->finalFinancialTransaction(); ?>
                        @if (@$finalTrx)
                            @if ($finalTrx->charge_or_refund == 'CHARGE')
                                <span><i class="fa-duotone fa-circle-check fa-fw text-success"></i> CHARGED</span>
                            @else
                                <span><i class="fa-duotone fa-circle-xmark fa-fw text-danger"></i> REFUNDED</span>
                            @endif
                        @else
                            <span><i class="fa-duotone fa-circle-xmark fa-fw text-danger"></i> NOT CHARGED</span>
                        @endif
                    </td>
                </tr>
            @endforeach
        </tbody>
    </table>
</div>

<script>
    (function($) {
        var ordersTable = {
            checkedOrders: [],
            initSelectAll: function() {
                var self = this;
                var multiCheckbox = $('[multi-check]');
                var orderCheckboxes = $('[order-check]');
                multiCheckbox.click(function(e) {
                    var isChecked = e.target.checked ? true : false;
                    var checkedOrders = [];
                    if (isChecked) {
                        $.each(orderCheckboxes, function(i, order) {
                            var orderID = $(order).data('id');
                            checkedOrders.push(orderID);
                            $(order).attr('checked', true);
                        });
                    } else {
                        $.each(orderCheckboxes, function(i, order) {
                            $(order).attr('checked', false);
                        });
                    }
                    self.updateCheckedOrders(checkedOrders);
                });
            },
            initSingleOrderCheckbox: function() {
                var self = this;
                $('[order-check]').click(function(e) {
                    var input = e.target;
                    var orderID = $(input).data('id');
                    var isChecked = input.checked ? true : false;
                    var checkedOrders = [...self.checkedOrders];
                    if (isChecked) {
                        checkedOrders.push(orderID);
                    } else {
                        var index = checkedOrders.indexOf(orderID);
                        checkedOrders.splice(index, 1);
                    }
                    self.updateCheckedOrders(checkedOrders);
                });
            },
            updateCheckedOrders: function(orders) {
                var self = this;
                self.checkedOrders = orders;
                if ($('[order-check]:checked').length === $('[order-check]').length) {
                    $('[multi-check]').prop('checked', true);
                } else {
                    $('[multi-check]').prop('checked', false);
                }

                $('input[name=selectedIDs]').val(JSON.stringify(self.checkedOrders));
                if (self.checkedOrders.length) {
                    $('#GenerateInvoicesPdfForm').removeClass('d-none');
                } else {
                    $('#GenerateInvoicesPdfForm').addClass('d-none');
                }

            },
            init: function() {
                this.initSelectAll();
                this.initSingleOrderCheckbox();
            }
        };
        ordersTable.init();
    })(jQuery);
</script>