FloatBackOfffice/application/views/points/view_systemic_points_summary.php

<style>
    #tblSummary tr.hidd{
        display: none;
    }
    .tippy{
        border-bottom: 1px dotted;
    }
</style>
<table class="table table-striped table-hover table-bordered table-condensed" id="tblSummary">
    <thead class="bg-indigo">
        <tr>
            <th>Location</th>
            <th>Points Assigned 24HRs</th>
            <th>Points Assigned Past 7 Days</th>
            <th>Points Assigned Past 14 Days</th>
            <th>Points Assigned Past 30 Days</th>
            <th>Points Assigned All Time</th>
        </tr>
    </thead>
    <tbody>
    <?php
    $s1 = $s2 = $s3 = $s4 = $s5 = 0;
    foreach ($data_report ?? [] as $item) {
        $s1 += $item['last_24_hrs'];
        $s2 += $item['last_7_days'];
        $s3 += $item['last_14_days'];
        $s4 += $item['last_30_days'];
        $s5 += $item['total_assigned_times'];
        ?>
        <tr class="<?=$item['location']?> <?=(!in_array($item['location'],['SG','US','Unknown'])?'hidd':'')?>" >
            <td class="text-right">
                <?php
                    if($item['location'] === 'Unknown'){
                        echo '<span class="tippy" data-tippy-content="User has not provided GPS Permission">'.$item["location"].'</span>';
                    }else{
                        echo $item['location'];
                    }
                ?>
            </td>
            <td class="text-right"><?= $item['last_24_hrs'] ?></td>
            <td class="text-right"><?= $item['last_7_days'] ?></td>
            <td class="text-right"><?= $item['last_14_days'] ?></td>
            <td class="text-right"><?= $item['last_30_days'] ?></td>
            <td class="text-right"><?= $item['total_assigned_times'] ?></td>
        </tr>
    <?php } ?>
    <tr>
       <td colspan="100%" class="text-center">
           <a onclick="fnShowExpand(this)">...Expand...</a>
       </td>
    </tr>
    <tr style="background-color: #efefbf8c; opacity: 0.8; font-weight: bold">
        <td class="text-right"></td>
        <td class="text-right"><?=$s1?></td>
        <td class="text-right"><?=$s2?></td>
        <td class="text-right"><?=$s3?></td>
        <td class="text-right"><?=$s4?></td>
        <td class="text-right"><?=$s5?></td>
    </tr>
    </tbody>
</table>

<div class="block" style="margin-top: 30px">
    <hr/>
    <form method="get" action="#" onsubmit="return fnSubmitFormReport();">
        <div class="row">
            <div class="col-md-2">
                <div class="form-group">
                    <input type="text" class="form-control" id="date_range" name="date_range"
                           value="<?= $date_range ?? '' ?>" style="width: 100%" autocomplete="off"
                           placeholder="Allocation Date"/>
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-group">
                    <input type="text" class="form-control" id="email" name="email" placeholder="Email" autocomplete="off">
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-group">
                    <?= $country_filter ?>
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-group">
                    <?= $point_key ?>
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-group">
                    <?= $point_value ?>
                </div>
            </div>
            <div class="col-md-2">
                    <a class="btn btn-default" href="/points/systemicpointssummary">Reset</a>
                    <input type="button" onclick="fn_export_csv();" class="btn btn-info btn-xs" value="Export CSV">
            </div>
        </div>
    </form>
</div>

<div class="block">
    <div class="table-responsive">
        <table id="tblReport" class="table table-striped table-hover table-bordered table-condensed">
            <thead>
                <tr>
                    <th>Allocation Date</th>
                    <th>Sign-up Date</th>
                    <th>Location</th>
                    <th>User ID</th>
                    <th>User Email</th>
                    <th>Point Key</th>
                    <th>Point Name</th>
                    <th>Point Value</th
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>

<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>
<link rel="stylesheet" href="https://unpkg.com/tippy.js@6/animations/scale.css"/>
<script>
    $(document).ready(function() {
        tippy('.tippy', {
            content: 'Global content',
            animation: 'scale',
        });
    });
</script>

<script>
    const $date_range = $('input[name="date_range"]');
    $date_range.daterangepicker({
        opens: 'right',
        autoUpdateInput: false,
        locale: {
            cancelLabel: 'Clear'
        },
        ranges: {
            'Today': [moment(), moment()],
            'Past 24 hours': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
            'Last 7 Days': [moment().subtract(6, 'days'), moment()],
            'Last 14 Days': [moment().subtract(13, 'days'), moment()],
            'Last 30 Days': [moment().subtract(29, 'days'), moment()],
            'Last 60 Days': [moment().subtract(59, 'days'), moment()],
            'This Month': [moment().startOf('month'), moment().endOf('month')],
            'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
            'Two months ago': [moment().subtract(2, 'month').startOf('month'), moment().subtract(2, 'month').endOf('month')]
        },
        alwaysShowCalendars: true
    });
    $date_range.on('apply.daterangepicker', function (ev, picker) {
        $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
        fnSubmitFormReport();
    });
    $date_range.on('cancel.daterangepicker', function (ev, picker) {
        $(this).val('');
        fnSubmitFormReport();
    });
    $date_range.on('show.daterangepicker', function (ev, picker) {
        $("#date_range").get(0).scrollIntoView();
    });

    $('#country_filter').change(function () {
        fnSubmitFormReport();
    });

    $('#point_key').change(function () {
        fnSubmitFormReport();
    });

    $('#point_value').change(function () {
        fnSubmitFormReport();
    });

    window.tblReport = null;
    window.date_range_value = '';
    window.country_filter = '';
    $(function () {
        window.tblReport = $('#tblReport').DataTable({
            "sDom": 'lrtip',
            "responsive": true,
            "processing": true,
            "serverSide": true,
            'ajax': {
                'url': '/points/getSystemicPointsDatatables',
                "type": "POST",
                "data": {
                    "date_range": function () {
                        return $("#date_range").val()
                    },
                    "email": function () {
                        return $('#email').val()
                    },
                    "country_filter": function () {
                        return $('#country_filter').val()
                    },
                    "point_key": function () {
                        return $('#point_key').val()
                    },
                    "point_value": function () {
                        return $('#point_value').val()
                    },
                },
                "error": function (xhr, ajaxOptions, thrownError) {
                    alert(thrownError);
                }
            },
            "order": [[1, "desc"]],
            "pageLength": 25,
            "lengthMenu": [10, 25, 50, 100, 200, 500, 1000],
            'columns': [
                {data: 'allocation_date'},
                {data: 'sign_up_date'},
                {data: 'country'},
                {data: 'member_id'},
                {data: 'email'},
                {data: 'point_key'},
                {data: 'name'},
                {data: 'points'}
            ],
            'columnDefs': [
                {
                    targets: 2,
                    render: function (data, type, row, meta) {
                        const _user_id = row.user_id;
                        if (type === 'display' && data === 'Unknown') {
                            return '<span class="tippy" data-tippy-content="User has not provided GPS Permission">'+data+'</span>';
                        }
                        return data;
                    }
                },
                {
                    targets: 3,
                    render: function (data, type, row, meta) {
                        if (type === 'display') {
                            return `<a href="/member/viewLocateMember?member_id=${data}" target="_blank">${data}</a>`;
                        }
                        return data;
                    }
                },
                {"orderable": false, "targets": [4,5,6,7]}
            ],
        });

        window.tblReport.on( 'draw', function () {
            tippy('.tippy', {
                content: 'Global content',
                animation: 'scale',
            });
        });

    });

    function fnShowExpand(that){
        const cur_text = $(that).text();
        $(that).text(cur_text == '...Expand...'?'Collapse':'...Expand...');
        $('#tblSummary').find('tr.hidd').toggle();
    }

    function debounce(func, wait) {
        var timeout;

        return function() {
            var context = this,
                args = arguments;

            var executeFunction = function() {
            func.apply(context, args);
            };

            clearTimeout(timeout);
            timeout = setTimeout(executeFunction, wait);
        };
    };

    var handleSearchEmail = debounce(function (e) {
        fnSubmitFormReport();
    }, 500);

    $('#email').on('keyup', handleSearchEmail);

    //filter clicked
    function fnSubmitFormReport() {
        window.tblReport.ajax.reload(false);
        return false;
    }
    function fn_export_csv(){
        window.location.assign("/points/systemicPointsReportCSV");
    }
</script>