nhance/app/Views/ticket_reports.php

<div class="row">
    <div class="col-xl-12">
        <div id="accordion" class="mb-3">
            <div class="card mb-1">
                <h5 class="m-1">
                    <a id="toggleIcon" class="text-dark float-right" data-toggle="collapse" href="#collapseOne"
                        aria-expanded="true">
                        <i id="icon" class="mdi mdi-chevron-down mr-1 text-primary" style="font-size: 28px;"></i>
                    </a>
                </h5>
                <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
                    <div class="card-body">
                        <!-- <div class="text-center"> -->
                        <div class="form-row">
                            <div class="form-group col-md-4" id="date_div">
                                <label>Date<span class="text-danger"></span></label>
                                <div id="reportrange" class="form-control" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
                                    <i class="mdi mdi-calendar-blank"></i>&nbsp;
                                    <span></span> <i class="mdi mdi-menu-down"></i>
                                </div>
                                <input type="hidden" id="startDate" value=<?= $default_start ?>>
                                <input type="hidden" id="endDate" value=<?= $default_end ?>>
                            </div>


                            <div class="form-group col-md-4">
                                <label>Policy Type<span class="text-danger"> *</span></label> <br />
                                <select name="policy_type" class="form-control" id="policy_type" required>
                                    <option value="">Select</option>
                                    <?php foreach ($policy_type as $policy => $key) : ?>
                                        <option value="<?= $policy ?>"><?= $key ?></option>
                                    <?php endforeach ?>
                                </select>
                            </div>


                            <div class="form-group col-md-4">
                                <label>Report Type<span class="text-danger"> *</span></label> <br />
                                <select class="form-control" id="report_type" required>
                                    <option value="0">Select</option>
                                    <?php foreach ($report_type as $reports => $key) : ?>
                                        <option value="<?= $reports ?>"><?= $key ?></option>
                                    <?php endforeach ?>
                                </select>
                            </div>


                        </div>
                        <div class="row justify-content-end">

                            <div class="col-auto">
                                <a href="#" class="btn btn-primary waves-effect waves-light" id="get-report-page" onclick="fetchReportPage(event);">Submit</a>
                            </div>
                        </div>
                        <!-- </div> -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="card mb-1">

    <div id="report"></div>
</div>

<script>
    $(function() {

        var start = $('#startDate').val();
        var end = $('#endDate').val();

        var start = moment(start, 'DD/MM/YYYY');
        var end = moment(end, 'DD/MM/YYYY');

        function cb(start, end) {
            $('#reportrange span').html(start.format('D-MM-YYYY') + ' - ' + end.format('D-MM-YYYY'));
            $('#startDate').val(start.format('DD-MM-YYYY'));
            $('#endDate').val(end.format('DD-MM-YYYY'));
        }

        $('#reportrange').daterangepicker({
            startDate: start,
            endDate: end,
            ranges: {
                'Today': [moment(), moment()],
                'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                'This Month': [moment().startOf('month'), moment().endOf('month')],
                'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
                'Last Year': [moment().subtract(1, 'year').startOf('year'), moment().subtract(1, 'year').endOf('year')]
            }
        }, cb);

        cb(start, end);
    });
</script>
<script>

function fetchReportPage() {

    var fromDate = $('#startDate').val();
    var toDate = $('#endDate').val();
    var policy_type = $('#policy_type').val();
    var report_type = $('#report_type').val();
    var requestData = {
        fromDate: fromDate,
        toDate: toDate,
        policy_type: policy_type,
        report_type: report_type
    };
    // console.log(requestData);
    var url = '<?= base_url('/ticket/ticket_reports') ?>';
    $('.loader').fadeIn();
    $('.loader-mask').fadeIn();
    sendAjaxRequestForGlobal(url, 'POST', requestData, function(response) {
        if (response.status == true) {
            $('#report').html(response.html);
            $('.loader').fadeOut();
            $('.loader-mask').delay(350).fadeOut('slow');

        }else{
            $('.loader').fadeOut();
            $('.loader-mask').delay(350).fadeOut('slow');
            let message = response.message;
            toastr.error(message,'ERROR');
        }


    }, function(xhr, status, error) {
        console.error('Error fetching data:', error);
        console.error(xhr.responseText);
        toastr.error('An error occurred while fetching the report page.', 'ERROR');

        $('.loader').fadeOut();
        $('.loader-mask').delay(350).fadeOut('slow');
    });
}
</script>