vb_book/app/Views/report_itemwise.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  */
    } 
om    /* .nested-table-data th,
    .nested-table-data td {
        text-align: center; /* Center-align the nested table data 
    } */

    /* .nested-table-data .truncate-text {
        max-width: none;  Remove max-width for the nested table text */
        /* white-space: initial;
        overflow: visible;
        text-overflow: initial;
        cursor: default; */
    /* }  */
</style>

<!-- 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('itemwise_report'); ?>" 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>

<!-- end page title -->

<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 class="custom-thead">
                    <tr>
                    <th><b>Published Date</b></th>
                        <th><b>Publisher Code</b></th>
                        <th><b>Publisher Item Count</b></th>
                        <th><b>Publisher Total Cost</b></th>
                        <th><b>Book Name</b></th>
                        <th><b>Item Count</b></th>
                        <th><b>Total Cost</b></th>
                    </tr>
                </thead>
                <tbody class="custom-tbody">
                    <?php foreach ($report_data as $row) { ?>
                        <?php foreach ($row->books as $book) { ?>
                            <tr>
                            <td><?php echo $book->book_publication_date; ?></td>
                            <td style="text-align: left;"><?php echo isset($row->publisher_code)? $row->publisher_code:'-'; ?></td>
                                <td style="text-align: center;"><?php echo $row->publisher_item_count; ?></td>
                                <td style="text-align: right;"><?php echo number_format($row->publisher_total_cost, 2); ?></td>
                                <td style="text-align: left;"><?php echo $book->book_name; ?></td>
                                <td style="text-align: center;"><?php echo $book->item_count; ?></td>
                                <td style="text-align: right;"><?php echo number_format($book->total_cost, 2); ?></td>
                                
                            </tr>
                        <?php } ?>
                    <?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({
            // "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>