vb_book/app/Views/payment_status_view.php

<style>
    .custom-thead th,
    .custom-tbody td {
        white-space: initial !important;
    }

    .custom-thead th {
        text-align: center;
        /* Center-align the main table column headings  */
    }

    td {
        text-align: center;
    }
    
</style>
<div class="card">
    <div class="card-body">
        <!-- start page title -->
        <div class="row d-flex align-items-center">
            <!-- Title Section -->
            <div class="col-md-3">
                <div class="page-title-box page-title-box-alt">
                    <h4 class="page-title"><?= $page_name ?></h4>
                </div>
            </div>
            <div class="col-md-4">
                <div class="custom-control custom-switch" style="text-align: left;">
                    <input type="checkbox" class="custom-control-input" id="statusSwitch" data-parsley-multiple="statusSwitch" checked>
                    <label class="custom-control-label" for="statusSwitch">Payment Received</label>
                </div>
            </div>

            <!-- Form Section -->
            <div class="col-md-5">
                <!-- <form id="payment_status_form"> -->
                <div class="form-group">
                    <div class="row">
                        <div class="col-md-7">
                            <input class="form-control input-daterange-datepicker" type="text" id="daterange" name="date" value="<?php echo $selected_data; ?>" />
                        </div>
                        <div class="col-md-5">
                            <button onclick="submitdateRange()" id="dateRangeButton" class="btn btn-primary">Get Details</button>
                        </div>
                    </div>
                </div>
                <!-- </form> -->
            </div>
        </div>
        <div id="payment_status_table"></div>
    </div>
</div>
<script>
    $(document).ready(function() {
        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) {
                var formattedStartDate = picker.startDate.format('DD/MM/YYYY');
                var formattedEndDate = picker.endDate.format('DD/MM/YYYY');
                var selectedDateRange = formattedStartDate + ' - ' + formattedEndDate;
                $(this).val(selectedDateRange);
            })
            .on('cancel.daterangepicker', function() {
                $(this).val('');
            });

        $('.today-btn').on('click', function() {
            var today = moment();
            dateRangeFilter.data('daterangepicker').setStartDate(today);
            dateRangeFilter.data('daterangepicker').setEndDate(today);
            dateRangeFilter.val(today.format('DD/MM/YYYY') + ' - ' + today.format('DD/MM/YYYY'));
            dateRangeFilter.trigger('apply.daterangepicker');
        });

        // Trigger "Today" button click to set it as default if $select_data is empty
        if ($select_data === '') {
            $('.today-btn').trigger('click');
        }
    });
</script>

<script>
    $(document).ready(function() {
        var status = $('#statusSwitch').is(':checked') ? 1 : 0;
        var daterange = getPreviousMonthDateRange();
        console.log("date range - ", daterange);
        getTableData(daterange, status);
    })

    function submitdateRange() {
        event.stopPropagation();
        console.log("button clicked");
        var status = $('#statusSwitch').is(':checked') ? 1 : 0;
        var daterange = $('#daterange').val();
        getTableData(daterange, status);

    }

    $('#statusSwitch').change(function() {
        console.log("status is switched");
        var status = $('#statusSwitch').is(':checked') ? 1 : 0;
        var daterange = $('#daterange').val();
        getTableData(daterange, status);
    })

    function getTableData(daterange, status) {
        console.log('Function called:', daterange, status);

        var formData = {
            dateRange: daterange,
            status: status
        };

        console.log('Form Data:', formData);

        $.ajax({
            url: "<?= base_url('payment_status') ?>",
            method: "POST",
            data: formData,
            dataType: "json",
            success: function(response) {
                if (response.status) {
                    console.log("Response Data:", response.data);
                    $('#payment_status_table').html(response.html);
                    setTable();
                    $('#daterange').val(response.data.selected_data);

                } else {
                    console.log("Error: Unexpected response format.");
                }
            },
            error: function(xhr, status, error) {
                console.log("AJAX Error:", status, error);
            }
        });
    }

    function setTable() {
        var table = $('#datatable-buttons').DataTable({
            "order": [
                [2, 'asc']
            ],
            dom: 'Bfrtip', // 'B' means Buttons
            buttons: [],
        });

        $('#datatable-buttons').off('click', '.reconcile-btn').on('click', '.reconcile-btn', function() {
            var orderId = $(this).data('order-id');
            var $btn = $(this);
            if (!confirm('Verify this payment with Paytm and record the renewal if paid?')) {
                return;
            }
            $btn.prop('disabled', true).text('Syncing...');
            $.ajax({
                url: "<?= base_url('payment_reconcile') ?>",
                method: "POST",
                data: { order_id: orderId },
                dataType: "json",
                success: function(response) {
                    alert(response.message);
                    if (response.status) {
                        var daterange = $('#daterange').val();
                        var status = $('#statusSwitch').is(':checked') ? 1 : 0;
                        getTableData(daterange, status);
                    } else {
                        $btn.prop('disabled', false).text('Sync with Paytm');
                    }
                },
                error: function() {
                    alert('Could not connect to the server. Please try again.');
                    $btn.prop('disabled', false).text('Sync with Paytm');
                }
            });
        });
    }

    function getPreviousMonthDateRange() {
        let today = new Date();
        let previousMonth = new Date(today);
        previousMonth.setMonth(previousMonth.getMonth() - 1);

        let formatDate = (date) => {
            let day = date.getDate().toString().padStart(2, '0');
            let month = (date.getMonth() + 1).toString().padStart(2, '0'); // Months are 0-indexed
            let year = date.getFullYear();
            return `${day}/${month}/${year}`;
        };

        return `${formatDate(previousMonth)} - ${formatDate(today)}`;
    }
</script>