FloatBackOfffice/application/views/member/extra/member_alerts.php

<div class="panel panel-flat" style="background-color: aliceblue;">
    <div class="panel-body">

        <div class="row">

            <div class="col-lg-10">
                <h4>Notifications</h4>
                <div class="panel">
                    <div class="panel-body">
                        <!-- <?= $alerts_recieved ?> -->

                        <div>
                            <form id="notifications-form">
                                <div class="form-group">
                                    <div class="trigger_key">
                                        <label for="trigger_key" class="font-weight-bold col-lg-6 col-form-label">
                                            Trigger Key
                                        </label>
                                        <div class="col-lg-12">
                                            <input type="search" name="trigger_key" id="trigger_key" class="form-control">
                                        </div>
                                    </div>
                                    <div class="msg_status">
                                        <label for="msg_status" class="font-weight-bold col-lg-6 col-form-label">
                                            Message Status
                                        </label>
                                        <div class="col-lg-12">
                                            <?= $card_msg_status ?>
                                        </div>
                                    </div>
                                    <div class="added">
                                        <label for="start_date" class="font-weight-bold col-lg-6 col-form-label">
                                            Added
                                        </label>
                                        <div class="search-by-range">
                                            <div class="col-lg-6">
                                                <input type="search" name="start_date" id="start_date" class="form-control">
                                            </div>
                                            <div class="col-lg-6">
                                                <input type="search" name="end_date" id="end_date" class="form-control">
                                            </div>
                                        </div>
                                    </div>
                                    <input type="button" name="search-notifications" id="search-notifications" value="Search" class="btn btn-info" />

                                </div>
                                <input type="hidden" name="member_id" value='<?= $member_id ?>'>
                            </form>

                        </div>
                        <div id="pagination-notifications"></div>
                        <table id="notifications-list" class="table-bordered table-condensed table-hover table-striped table-condensed col-lg-12" style="padding:0px; background-color:aliceblue;">
                            <thead class="bg-indigo">
                                <th>Added</th>
                                <th>Expire</th>
                                <th>Send Alert</th>
                                <th>Email Alert</th>
                                <th>Trigger Key</th>
                                <th>Notice Type</th>
                                <th>Message</th>
                                <th>Message Status</th>
                                <th>Mmode</th>
                                <th>Send</th>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
                <!-- /current server load -->
            </div>

            <div class="col-lg-2">
                <h4>*</h4>
                <!-- Members online -->
                <div class="panel">
                    <div class="panel-body">

                    </div>
                </div>
                <!-- /members online -->
            </div>

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

<script src="/assets/js/plugins/pickers/datepicker.js"></script>
<script type="text/javascript" src="/assets/js/app.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        // Datepicker
        $("input[name='start_date']").datepicker({
            defaultDate: "+1w",
            changeMonth: true,
            numberOfMonths: 3,
            format: "yyyy-mm-dd",
            onClose: function(selectedDate) {
                $("#start_date").datepicker("option", "minDate", selectedDate);
            }
        });

        $("input[name='end_date']").datepicker({
            defaultDate: "+1w",
            changeMonth: true,
            numberOfMonths: 3,
            format: "yyyy-mm-dd",
            onClose: function(selectedDate) {
                $("input[name='end_date']").datepicker("option", "minDate", selectedDate);
            }
        });

        setDefaultDate($('#notifications-form'));

        // Oauth2 Tokens
        function createNotificationsTable(result) {

            $('#notifications-list tbody').empty();

            for (index in result) {
                let tr =
                    `<tr>
                        <td>${result[index].added}</td>
                        <td>${result[index].expire}</td>
                        <td>${result[index].sendalert}</td>
                        <td>${result[index].emailalert}</td>
                        <td>${result[index].trigger_key}</td>
                        <td>${result[index].notice_type}</td>
                        <td>${result[index].msg}</td>
                        <td>${result[index].msg_status}</td>
                        <td>${result[index].mmode}</td>
                        <td>
                            <button
                                type="button"
                                onclick="pushNotification(
                                    '${result[index].id_members_notification}',
                                    '${result[index].id_members}'
                                );"
                                class="btn btn-danger"
                                id="acc'${result[index].id_members_notification}'"
                            >Send
                            </button>
                            <div id="msgl${result[index].id_members_notification}"></div> 
                        </td>
                    </tr>`;

                $('#notifications-list tbody').append(tr);
            }
        }
        // Detect pagination click
        $('#pagination-notifications').on('click', 'a', function(e) {
            e.preventDefault();
            var pageno = $(this).attr('data-ci-pagination-page');
            loadNotificationsRecord(pageno);
        });

        // Detect search click
        $('#search-notifications').on('click', function(e) {
            setDefaultDate($(this).closest('form'));
            loadNotificationsRecord(0);
        });

        // Prevent submit form by press the enter button
        $(window).keydown(function(event) {
            if (event.keyCode == 13) {
                loadNotificationsRecord(0);
                event.preventDefault();
                return false;
            }
        });

        function loadNotificationsRecord(pagno, btnSearch = null) {
            loadingButton(btnSearch);
            $.ajax({
                url: '/member/loadNotificationsRecord?row_no=' + pagno,
                type: 'get',
                dataType: 'json',
                data: $('#notifications-form').serialize(),
                success: function(response) {
                    $('#pagination-notifications').html(response.pagination);
                    createNotificationsTable(response.result);
                },
                complete: function() {
                    stopLoadingButton(btnSearch);
                }
            });
        }

        loadNotificationsRecord(0);
    })
</script>
<script type="text/javascript">
        function pushNotification(notice_id, member_id) {
            $('#msgl' + notice_id).html('Processing...');
            $('#acc' + notice_id).prop('disabled', true);
            $.ajax({
                url: "/notifications/sendnotification?notice_id=" + notice_id + "&member_id=" + member_id
            }).done(function (data) {
                $('#msgl'+ notice_id).html(data);
                $('#acc' + notice_id).prop('disabled', false);
            });
            return false;

            return false;
        }
</script>

<style>
    #notifications-form .form-group {
        display: flex;
        align-items: flex-end;
    }

    .added {
        display: flex;
        flex-direction: column;
    }

    .search-by-range {
        display: flex;
        align-items: flex-end;
    }

    .search-by-range div {
        padding: 1px;
    }

    .panel-heading {
        padding: 15px 0px;
    }
</style>