vb_book/app/Views/report_userwise_and_eventwise.php

<!-- start page title -->
<div class="row d-flex align-items-center">
    <!-- Title Section -->
    <div class="col-md-4">
        <div class="page-title-box page-title-box-alt">
            <h4 class="page-title"><?= $page_name ?></h4>
        </div>
    </div>

    <!-- Form Section -->
    <div class="col-md-5 offset-md-3">
        <form action="<?php echo base_url('report_userwise_and_eventwise'); ?>" method="post">
            <div class="form-group">
                <div class="row">
                    <div class="col-md-7">
                        <input class="form-control input-daterange-datepicker" type="text" name="date" value="<?php echo $selected_data; ?>" />
                    </div>
                    <div class="col-md-5">
                        <button type="submit" class="btn btn-primary">Generate Report</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>


<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <div class="table-responsive">
                    <table id="datatable-buttons" class="table table-striped nowrap w-100">
                        <thead>
                            <tr>
                                <th hidden>id</th>
                                <th>Invoice Date</th>
                                <th>Event Name</th>
                                <th>User Name</th>
                                <th>Books Sold</th>
                                <!-- <th>Payment Method</th> -->
                                <th>Total Amount</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php foreach ($report_data as $row) { ?>
                                <tr>
                                    <td hidden><?php echo $row["user_id"]; ?></td>
                                    <?php
                                    // Since invoice_date is now a proper date, we can format it directly
                                    $invoice_date = date("d/m/Y", strtotime($row['invoice_date']));
                                    ?>
                                    <td><?= $invoice_date ?></td>
                                    <td style="text-align: left;"><?= $row['event_name'] ?></td>
                                    <td style="text-align: left;"><?= $row['first_name'] . ' (' . $row['role'] . ')' ?></td>
                                    <td style="text-align: center;"><?= $row['books_sold'] ?></td>
                                    <!-- <td style="text-align: left;"><?= strtoupper($row['payment_method']) ?></td> -->
                                    <td style="text-align:right;padding-right: 67px;"><?= $row['total_amount'] ?></td>
                                </tr>
                            <?php } ?>
                        </tbody>

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

<script>
    $(document).ready(function() {
        var table = $('#datatable-buttons').DataTable({
            ordering: false,
            // "order": [[0, 'desc']],
            // "order": [[0, 'desc']],
            "dom": '<"row mb-3"<"col-md-6 d-flex align-items-center"B><"col-md-6 d-flex justify-content-end"f>>rtip',
            buttons: [{
                    extend: 'print',
                    title: '<?= $page_name . ' ' . $selected_data  ?>',
                    text: 'Print',
                    customize: function(win) {}
                },
                {
                    extend: 'csv',
                    text: 'CSV',
                    title: '<?= $page_name . ' ' . $selected_data ?>',
                    exportOptions: {}
                }
            ]
        });
    });
</script>
<!-- <script>
    $(document).ready(function () {
        // Initially hide all nested tables
        $('.nested-table-data').hide();

        // Toggle nested table visibility on parent row click
        $('.custom-tbody tr').click(function () {
            var nestedTable = $(this).next().find('.nested-table-data');

            // Toggle visibility
            nestedTable.slideToggle();

            // You can add additional styling or animation here if needed

            // Prevent the parent row from triggering the toggle when nested table row is clicked
            return false;
        });
    });
</script> -->


<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>