nhance/app/Views/bds_report_bap_wise_data.php

<style>
.table th,
.table td {
    padding: 8px;
}

table.dataTable tbody td {
    padding: 4px 4px !important;
}

.col-12 {
    max-width: 98% !important;
}

.dataTables_filter {
    position: absolute;
}

.right-align-input {
    text-align: right;
}

#scroll-horizontal-datatable tfoot .right-align-input {
    text-align: right !important;
}
.dataTables_length label {height: 21px !important;}


</style>

<div class="col-12">
    <div class="card">
        <div class="card-body">
            <div class="row" style="padding-bottom: 10px;">
                <div class="col-6" style="align-self: center;">
                    <h4 style="position: relative;">BAP Report List</h4>
                </div>
            </div>
            <div class="table-responsive">
                <table data-custom-table-css="table" id="scroll-horizontal-datatable" class="table w-100 nowrap">
                    <thead class="bg-light">
                        <tr>
                            <th>Insurer</th>
                            <th>Policies</th>
                            <th>Premium</th>
                            <th>Revenue</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php foreach($bap_wise_data as $data): ?>
                            <tr>
                                <td><?= $data['bap'] ?></td>
                                <td><?= $data['Policies'] ?></td>
                                <td><?= $data['Premium'] ?></td>
                                <td><?= $data['Revenue']== 0.00 ? $data['Expected_amt'] : $data['Revenue']?></td>
                            </tr>
                        <?php endforeach ?>
                    </tbody>
                    <tfoot>
                        <tr>
                            <th>Grand Total</th>
                            <th></th>
                            <th></th>
                            <th></th>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
</div>

<script>
    $(document).ready(function() {
        var ticketsTable = $('#scroll-horizontal-datatable');

        if (ticketsTable.length) {
            ticketsTable.DataTable({
                scrollX: true,
                // dom: "<'row'<'col-sm-6'f><'col-sm-6 text-right'B>>" + // Filter left, buttons right
                //     "<'row'<'col-sm-12'tr>>" +
                //     "<'row'<'col-sm-5'i><'col-sm-7'p>>", // Pagination at the bottom, without page length selector
                dom: "<'row'<'col-sm-6'f><'col-sm-6 text-right'B>>" + // Filter left, buttons right
                "<'row'<'col-sm-12'tr>>" +
                "<'row align-items-center'<'col-5 text-start'i><'col-7 d-flex justify-content-end align-items-center'<'me-2'l>p>>",
                lengthMenu: [[10, 20, 50, 100], [10, 20, 50, 100]],
                buttons: [
                    {
                        extend: 'collection',
                        text: '<span class=" btn-custom"> Export </span><i class="mdi mdi-menu-down"></i>',
                        className: 'btn app-btn-secondary ',
                        buttons: [
                                    {
                                        extend: 'csv',
                                        text: '<i class="mdi mdi-file-delimited " ></i><span class="  btn-custom">  CSV </span>',
                                        className: 'app-btn-primary ',
                                        title: 'Bap-Wise-Report-List',
                                        footer: true
                                    },
                                    {
                                        extend: 'excel',
                                        text: '<i class="mdi mdi-file-excel " ></i><span class="  btn-custom">  EXCEL </span>',
                                        exportOptions: {
                                            orthogonal: 'sort'
                                        },
                                        className: 'app-btn-primary ',
                                        title: 'Bap-Wise-Report-List',
                                        sheetName: 'Bap-Wise-Report-List',
                                        footer: true
                                    }
                        ]
                    }
                ],
                language: {
                    search: `
                    <div class="datatable-search-wrapper" style="position:relative; display:inline-block;">
                        _INPUT_
                        <i class="mdi mdi-magnify datatable-search-icon" 
                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666;"></i>
                        <i class="mdi mdi-close-circle datatable-clear-icon" 
                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666; display:none;"></i>
                    </div>`,
                    searchPlaceholder: "Search",
                    emptyTable: '<div class="text-center text-muted">No Data found</div>'
                },
                paging: true, // Enable pagination
                pageLength: 10, // Set default number of rows per page (optional)
                ordering: false,
                footerCallback: function(row, data, start, end, display) {
                    var api = this.api();

                    // Helper function to parse numbers
                    var parseNumber = function(value) {
                        return typeof value === 'string' ?
                            parseFloat(value.replace(/[\$,]/g, '')) :
                            typeof value === 'number' ? value : 0;
                    };

                    // Calculate total for each column
                    var totalPolicies = api.column(1).data().reduce(function(a, b) {
                        return parseNumber(a) + parseNumber(b);
                    }, 0);

                    var totalPremium = api.column(2).data().reduce(function(a, b) {
                        return parseNumber(a) + parseNumber(b);
                    }, 0);

                    var totalRevenue = api.column(3).data().reduce(function(a, b) {
                        return parseNumber(a) + parseNumber(b);
                    }, 0);

                    // Update the footer with totals
                    $(api.column(1).footer()).html(totalPolicies.toLocaleString());
                    $(api.column(2).footer()).html("₹ " + totalPremium.toLocaleString(undefined, { minimumFractionDigits: 2 }));
                    $(api.column(3).footer()).html("₹ " + totalRevenue.toLocaleString(undefined, { minimumFractionDigits: 2 }));                
                }
            });
        } else {
            console.error("Table not found.");
        }
    });
</script>