vb_book/app/Views/notify_the_expiry_subscribers.php

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body"><br>
                <h4 class="header-title mb-3"><?= $page_name; ?></h4>
                <div class="row">
                    <div class="col-md-3">
                        <input type="number" class="form-control" id="params" name="params" placeholder="Number of Days" required />

                    </div>
                    <div class="col-md-3">
                        <button type="button" id="callajax" class="btn btn-primary" onclick="sendsms()">Send Message</button>
                    </div>
                    <div class="col-md-4">
                        <input id='date_picker' class="form-control input-daterange-datepicker" type="text" name="date" value="<?php echo $selected_data; ?>" />
                    </div>
                    <div class="col-md-2">
                        <button type="submit" class="btn btn-primary" onclick="generateData()">Generate Report</button>
                    </div>
                </div>

                <div class="row">
                    <br>
                    <div class="col-md-12" style="margin: 15px;" id="target-div"></div>
                </div>
                <div id="modal_table">
                    <div class="table-responsive">
                        <table id="datatable-buttons" class="table table-striped nowrap w-100">
                            <thead>
                                <tr>
                                    <!-- <th hidden>id</th> -->
                                    <th>Customer Name</th>
                                    <th>Sent Date</th>
                                    <th>Membership ID</th>
                                    <th>Email/Mobile</th>
                                    <th>Mode</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody id="table-body">

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div> <!-- end card body-->
    </div> <!-- end card -->
</div><!-- end col--><!-- end row-->

<script>
    $(document).ready(function() {
        $('#modal_table').hide();
        $('#datatable-buttons').DataTable({
            "dom": 'frtip',
            "ordering": false,
            "paging": true,
            "searching": true,
            "autoWidth": true
        });


        var $select_data = '<?php echo $selected_data; ?>';
        var dateRangeFilter = $('input.input-daterange-datepicker').daterangepicker({
                locale: {
                    format: 'DD/MM/YYYY',
                    cancelLabel: 'Clear'
                },
                startDate: $select_data ? moment($select_data.split(' - ')[0], 'DD/MM/YYYY') : moment(),
                endDate: $select_data ? moment($select_data.split(' - ')[1], 'DD/MM/YYYY') : moment(),
                ranges: {
                    'Today': [moment(), moment()],
                    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    'This Month': [moment().startOf('month'), moment().endOf('month')]
                }
            })
            .on('apply.daterangepicker', function(ev, picker) {
                console.log(`Selected: ${picker.startDate.format('DD/MM/YYYY')} - ${picker.endDate.format('DD/MM/YYYY')}`);
            })
            .on('cancel.daterangepicker', function() {
                $(this).val('');
            });
    });
</script>
<script>
    function sendsms() {
        var params = $("#params").val();
        var params2 = $("#date_picker").val();
        console.log("The param passed is " + params2);
        if (params2) {
            var dates = params2.split(" - ");
            var from_date = dates[0];
            var to_date = dates[1];
        }
        if (!params && !(params2)) {
            alert("Enter a valid number of days.");
            return;
        } else {
            console.log("param 1 is " + params);
            console.log("params 2 is " + params2);
            console.log('<?= base_url() . 'getExpCustomerDetail/' ?>');
            $.ajax({
                type: "POST",
                url: `<?= base_url() . 'getExpCustomerDetail/' ?>${params}/${params2}`,
                data: {
                    from_date: from_date,
                    to_date: to_date,
                    params: params

                },
                success: function(response) {
                    $('#target-div').html(response); // Insert raw HTML into the target div
                    $("#params").val('');
                    console.log(response);
                },
                error: function(xhr, status, error) {
                    console.error("AJAX Error:", error);
                    $('#target-div').html("");
                    $("#params").val('');
                }
            });

        }
    }

    function generateData() {
        var date = $("#date_picker").val();
        console.log(date);
        $.ajax({
            type: 'POST',
            url: '<?= base_url('notify_the_expiry_subscribers') ?>',
            data: {
                date: date
            },
            success: function(response) {
                console.log(response);
                var data = response.data;
                var table = $('#datatable-buttons').DataTable();
                var tableBody = $('#table-body');
                table.clear();
                tableBody.empty();
                if (data && data.length > 0) {
                    data.forEach(function(item) {
                        var sentTime = new Date(item.sent_time);
                        var status = (item.receiving_status == 1) ? 'Success' : 'Fail';
                        var sentDateFormatted = ('0' + sentTime.getDate()).slice(-2) + '/' +
                            ('0' + (sentTime.getMonth() + 1)).slice(-2) + '/' +
                            sentTime.getFullYear();
                        var hours = sentTime.getHours();
                        var minutes = ('0' + sentTime.getMinutes()).slice(-2);
                        var ampm = hours >= 12 ? 'PM' : 'AM';
                        hours = hours % 12 || 12; // Convert 0 (midnight) and 12 (noon) properly

                        var sentTimeFormatted = ('0' + hours).slice(-2) + ':' + minutes  + ' ' + ampm;
                        var sentDateTimeFormatted = sentDateFormatted + ' ' + sentTimeFormatted; // Combine date and time

                        var sentDateTimeFormatted = sentDateFormatted + ' ' + sentTimeFormatted; // Combine date and time
                        table.row.add([
                            item.first_name + ' ' + item.last_name,
                            sentDateTimeFormatted,
                            item.membership_id,
                            item.receiving_entity,
                            item.mode,
                            status
                        ]);

                    });

                    table.draw();
                    regenerateFilters(table);
                    $('#modal_table').show();

                    // table.draw();
                } else {
                    tableBody.append('<tr><td colspan="6" class="text-center">No data available</td></tr>');
                    table.draw();
                    $('#modal_table').show();
                }
            },
            error: function(xhr, status, error) {
                console.error("Ajax Error: ", error);
            }
        });
    }

    function regenerateFilters(table) {
        $('#datatable-buttons thead tr:eq(1)').remove();
        $('#datatable-buttons thead tr').clone(true).appendTo('#datatable-buttons thead');

        $('#datatable-buttons thead tr:eq(1) th').each(function(i) {
            var title = $(this).text();
            var column = table.column(i);

            var uniqueValues = column.data().unique().sort();

            var select = $('<select class="form-control form-control-sm"><option value="">Search ' + title + '</option></select>')
                .appendTo($(this).empty())
                .on('change', function() {
                    var val = $.fn.dataTable.util.escapeRegex($(this).val());
                    column
                        .search(val ? '^' + val + '$' : '', true, false)
                        .draw();
                });

            uniqueValues.each(function(d) {
                if (d) {
                    select.append('<option value="' + d + '">' + d + '</option>');
                }
            });
        });
    }
</script>