@include('layouts.header');
@include('layouts.sidebar');
<!-- <link rel="stylesheet" type="text/css" href="{{ asset('jquery.dataTables.min') }}" /> -->

<!-- <script type="text/javascript" src="DataTables/datatables.min.js"></script> -->


<link href='css/jquery-ui.css' rel='stylesheet'>
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.validate.js"></script>
<script src="js/jquery.dataTables.min.js"></script>


<style>
    /* .dataTables_wrapper .dt-buttons{
float:none;
text-align:left;
}
.dataTables_wrapper .dataTables_filter {
  float:none;
text-align:right;
} */

    /*fixed column datatable css*/

    table.dataTable thead tr>.dtfc-fixed-left,
    table.dataTable thead tr>.dtfc-fixed-right {
        z-index: 1;
        background-color: #ffd4d4;
        size: 250px;
    }

    table.dataTable tbody tr>.dtfc-fixed-left,
    table.dataTable tbody tr>.dtfc-fixed-right {
        z-index: 1;
        background-color: #ffd4d4
    }

    div.dtfc-left-top-blocker,
    div.dtfc-right-top-blocker {
        background-color: #ffd4d4
    }

    /*fixed header datatable css*/
    table.fixedHeader-floating {
        background-color: white
    }

    table.fixedHeader-floating.no-footer {
        border-bottom-width: 0
    }

    table.fixedHeader-locked {
        position: absolute !important;
        background-color: white
    }

    @media print {
        table.fixedHeader-floating {
            display: none,

        }
    }



    /*excel export*/



    div.dt-buttons {

        float: right;
        top: -60px;
    }



    .row-odd {
        border-radius: 2px;
        background: #9631312b;
        padding: 5px;
    }

    .row-even {
        border-radius: 2px;
        background: #9631315e;
        padding: 5px;
    }

    .button {
        background-color: #963131;
        color: white;
        text-align: center;
        font-size: 12px;
        padding-top: 3px;

    }

    .button:hover {
        background-color: antiquewhite;
        color: #963131;
    }

    button:hover {
        background-color: white;
    }

    /* .chart-area11 {
    margin-top: 0px;
    width: 498px;
    display: block;
    box-sizing: border-box;
    height: 325.6px;
    margin-left: -92px;
  } */





    .ui-datepicker-header {
        background: #963131;
        color: #963131;
        font-family: 'Times New Roman';
        border-width: 1px 0 0 0;
        border-style: solid;
        border-color: #111;
    }

    .ui-datepicker-prev {

        background-color: white !important;
    }

    .ui-datepicker-next {
        background-color: white !important;
    }

    .ui-datepicker-prev:hover {
        background-color: white !important;
    }

    .ui-datepicker-next {
        background-color: white !important;
    }

    .ui-datepicker-prev span {
        background-image: url("data:image/svg+xml;utf8,<svg fill='black' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z'/></svg>") !important;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 16px 16px;
    }

    .ui-datepicker-next span {
        background-image: url("data:image/svg+xml;utf8,<svg fill='black' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6z'/></svg>") !important;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 16px 16px;
    }


    .ui-datepicker-calendar .ui-state-default {
        background: linear-gradient(#963131, #963131);
        color: #ffffff;
        height: 35px;
        width: 35px;
        border: 1px;
        border-radius: 2px;

    }

    .ui-datepicker-calendar .ui-state-hover {
        background: white;
        color: #963131;
    }



    .ui-timepicker-standard a {
        border: 1px solid #d4d4d4;
        color: #ffffff;
        display: block;
        padding: 0.2em 0.4em;
        text-decoration: none;
        background-color: #963131;
    }

    /* .ui-menu .ui-menu-item {
    margin: 0;
    cursor: pointer;
    list-style-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
    background-color: #963131;
} */

    .ui-timepicker-standard .ui-menu-item {
        margin: 0 auto;
        padding: 0 30%;
    }




    @media screen and (max-width: 640px) {
        div.dt-buttons {
            float: right !important;
            text-align: center;
        }
    }


    #pageloader {
        background: rgb(255 255 255 / 20%);
        display: none;
        height: 100%;
        position: fixed;
        width: 100%;
        z-index: 9999;
    }

    #pageloader img {
        left: 60%;
        margin-left: -90px;
        margin-top: -32px;
        position: absolute;
        top: 40%;
        height: 150px;
        border: black;
        border-style: double;
        background-color: antiquewhite;
        border-radius: 20px;
    }

    @media screen and (max-width: 600px) {
        #pageloader img {
            left: 50%;
            margin-left: -90px;
            margin-top: -32px;
            position: absolute;
            top: 50%;
            height: 150px;
            border: black;
            border-style: double;
            background-color: antiquewhite;
            border-radius: 20px;
        }


    }

    #threshold_report_length,
    #threshold_report_filter {
        margin-top: 29px;
    }

    #to_date>.ui-datepicker {
        margin-top: 323px;
    }

    #threshold_report_wrapper .dt-buttons {
        position: absolute !important;
        right: 10px !important;
        top: -10px !important;
    }

    #threshold_report_item_wrapper {
        padding-top: 2rem;
    }

    #threshold_report_item_wrapper .dt-buttons {
        position: absolute !important;
        right: 10px !important;
        top: -10px !important;
    }
</style>

<body>
    <div class="col-lg-12" id="pageloader">
        <img src="images/256x256.gif">

    </div>
    @include ('layouts.head')
    <main id="main" class="main">
        <!-- <h1>All Live Oreder status </h1> -->
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Kitchen Prep Time Report</h5>
                <!-- Default Tabs -->
                <ul class="nav nav-tabs d-flex" id="myTabjustified" role="tablist">
                </ul>
                <div class="tab-content pt-1" id="myTabjustifiedContent">
                    <div class="tab-pane fade show active" id="home-justified" role="tabpanel"
                        aria-labelledby="home-tab">
                        <div class="card">
                            <div class="card-body">
                                <!-- <h5 class="card-title">Search Accourding To</h5> -->
                                <!-- Floating Labels Form -->
                                <form class="pt-3 g-3" id="threshold_data" method="POST">
                                    <div class="row">
                                        <input type="hidden" value="{{ csrf_token() }}" name="_token">

                                        <div class="col-md-4">
                                            <div class="form-floating mb-3">
                                                <select class="form-select" id="kitchen" name="kitchen" aria-label="">
                                                    <option value="">All</option>
                                                    @foreach ($kitchens as $Kitchen)
                                                    <option value="{{ $Kitchen['id'] }}">
                                                        {{ $Kitchen['kitchen_name'] }}
                                                    </option>
                                                    @endforeach
                                                </select>
                                                <label for="kitchen">Select Kitchen</label>
                                            </div>
                                        </div>
                                        <!-- <div class="col-md-3"></div> -->
                                        <div class="col-md-4">
                                            <div class="form-floating">
                                                <input type="text" class="form-control" id="from_date" name="from_date" autocomplete="off" placeholder="From Date" readonly='true'>
                                                <label for="from_date">From Date</span></label>
                                                <p id="projectIDSelectError1" style="color:red"></p>
                                            </div>
                                        </div>

                                        <div class="col-md-4">
                                            <div class="form-floating">
                                                <input type="text" class="form-control" id="to_date"
                                                    name="to_date" autocomplete="off" placeholder="Too date"
                                                    required="" readonly='true'>
                                                <label for="to_date">To Date</span></label>
                                                <p id="projectIDSelectError2" style="color:red"></p>

                                            </div>
                                        </div>

                                        <div class="col-md-4">
                                            <div class="form-floating mb-3">
                                                <select class="form-select" id="item_name" name="item_name" aria-label="">
                                                    <option value="">select</option>
                                                    @foreach ($items as $item)
                                                    <option value="{{ $item->order_name }}">
                                                        {{ $item->order_name }}
                                                    </option>
                                                    @endforeach
                                                </select>
                                                <label for="kitchen">Select Item</label>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <!-- <div class="col-md-5"></div> -->
                                        <div class="col-md-5"></div>
                                        <div class="text-center">
                                            <button type="button" id="submit" class="btn btn-primary" onclick="get_threshold()">Submit</button>
                                            <button type="reset" id="" class="btn btn-primary">Reset</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-12">
            <div class="card" id="ordre_card">
                <div class="card-body pt-4" id="tcp_table1" style="overflow-x:auto;">
                    <table id="threshold_report" class='display dataTable nowrap'>
                        <thead>
                            <tr>
                                <th scope="col">Order Id</th>
                                <th scope="col">Item</th>
                                <th scope="col">Kitchene Name</th>
                                <th scope="col">Qty</th>
                                <th scope="col">Date</th>
                                <th scope="col">KPT</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
            <div id="item_card" class="card">
                <div class="card-body pt-4" id="tcp_table12" style="overflow-x:auto;">
                    <table id="threshold_report_item" class='display dataTable nowrap'>
                        <thead>
                            <tr>
                                <th scope="col">Order Id</th>
                                <th scope="col">Item</th>
                                <th scope="col">Kitchene Name</th>
                                <th scope="col">Qty</th>
                                <th scope="col">Date</th>
                                <th scope="col">KPT</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </main>

    @include('layouts.footer');
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.1/css/buttons.dataTables.min.css">
    <script src="https://cdn.datatables.net/buttons/2.4.1/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.html5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">

    <link rel="stylesheet" href="https://cdn.datatables.net/rowgroup/1.3.1/css/rowGroup.bootstrap5.min.css">
    <script src="https://cdn.datatables.net/rowgroup/1.3.1/js/dataTables.rowGroup.min.js"></script>
    <script>
        var data = {};
        var arr = {};
        data['_token'] = "{{ csrf_token() }}";
        arr['_token'] = "{{ csrf_token() }}";

        $(document).ready(function() {
            $("#ordre_card").hide();
            $("#item_card").hide();
            $(".dataTables_empty").html("---");
            $(function() {
                $("#from_date").datepicker({
                    dateFormat: "yy-mm-dd",
                    maxDate: "+0m +0w",
                    changeMonth: true,
                    changeYear: true,
                });
                $("#from_date").change(function() {
                    test = $(this).datepicker('getDate');
                    testm = new Date(test.getTime());
                    testm.setDate(testm.getDate() + 0);

                    $("#to_date").datepicker("option", "minDate", testm);
                });
                $("#to_date").datepicker({
                    dateFormat: "yy-mm-dd",
                    maxDate: "+0m +0w",
                    changeMonth: true,
                    changeYear: true,

                });

                $("#threshold_data").validate({ //Vaildation
                    rules: {
                        from_date: "required",
                        to_date: "required"
                    },
                    messages: {
                        from_date: "This field is required",
                        to_date: "This field is required"
                    },
                    errorPlacement: function(error, element) {
                        if (element.attr("name") == "from_date") {
                            error.appendTo('#projectIDSelectError1');
                        } else if (element.attr("name") == "to_date") {
                            error.appendTo('#projectIDSelectError2');
                        } else {
                            error.insertAfter(element);
                        }
                    },
                });
            });
        });



        // function get_threshold() {
        //     if ($("#threshold_data").valid()) {
        //         $('#threshold_report').DataTable().destroy();

        //         let data = {};
        //         data['from_date'] = $("#from_date").val();
        //         data['to_date'] = $("#to_date").val();
        //         data['kitchen_id'] = $("#kitchen").val();
        //         data['_token'] = "{{ csrf_token() }}";
        //         let table = $('#threshold_report').DataTable({
        //             autoWidth: false,
        //             ordering: true, // enable ordering so grouping works
        //             responsive: true,
        //             paging: false,
        //             serverSide: false,
        //             scrollY: '400px',
        //             scrollCollapse: true,
        //             order: [
        //                 [1, 'asc']
        //             ], // sort by item_order_id (index 1)
        //             ajax: {
        //                 url: "get_kitchen_prep_time_report",
        //                 type: "post",
        //                 data: data,
        //             },
        //             dom: 'Blfrtip',
        //             buttons: [{
        //                 extend: 'excelHtml5',
        //                 title: 'Kitchen Prep Time Report',
        //                 text: '<i class="bi bi-file-earmark-excel-fill text-success" style="font-size: 28px;" title="Export to Excel"></i>',
        //                 className: '',
        //                 init: function(api, node) {
        //                     $(node).css({
        //                         'background': 'none',
        //                         'border': 'none',
        //                         'padding': '0',
        //                         'margin': '0',
        //                         'box-shadow': 'none'
        //                     });
        //                 }
        //             }],
        //             columns: [{
        //                     data: null,
        //                     title: "#",
        //                     render: function(data, type, row, meta) {
        //                         return meta.row + 1;
        //                     }
        //                 },
        //                 {
        //                     data: "item_order_id",
        //                     title: "Order Id",
        //                     render: function(data) {
        //                         return (data || '').trim();
        //                     }
        //                 },
        //                 {
        //                     data: "order_name",
        //                     title: "Item"
        //                 },
        //                 {
        //                     data: "kitchen_name",
        //                     title: "Kitchen Name"
        //                 },
        //                 {
        //                     data: "order_qty",
        //                     title: "Qty"
        //                 },
        //                 {
        //                     data: "order_date",
        //                     title: "Date"
        //                 },
        //                 {
        //                     data: "ktp_in_minutes",
        //                     title: "KPT",
        //                     render: function(data, type, row, meta) {
        //                         if (data == null) {
        //                             return "N/A";
        //                         } else {
        //                             return `${row.ktp_minutes} minutes ${row.ktp_seconds} seconds`;
        //                         }
        //                     }
        //                 }
        //             ],
        //             columnDefs: [{
        //                 width: "1%",
        //                 targets: [0, 1, 2, 3, 4, 5, 6],
        //                 className: "dt-center"
        //             }],
        //             rowGroup: {
        //                 dataSrc: function(row) {
        //                     return (row.item_order_id || '').trim();
        //                 },
        //                 startRender: function(rows, group) {
        //                     return 'Order ID: ' + group + ' (' + rows.count() + ' items)';
        //                 }
        //             }
        //         });

        //         table.on('order.dt search.dt', function() {
        //             let i = 1;
        //             table.cells(null, 0, {
        //                 search: 'applied',
        //                 order: 'applied'
        //             }).every(function(cell) {
        //                 this.data(i++);
        //             });
        //         }).draw();
        //     }
        // }


        function get_threshold() {
                $("#pageloader").show();
            $("#ordre_card").hide();
            $("#item_card").hide();
            if ($("#item_name").val()) {
                getDataTableItem()
                $("#item_card").show();
            } else {
                getDataTable()
                $("#ordre_card").show();
            }
        }

        function getDataTable() {
            if ($("#threshold_data").valid()) {
                if ($.fn.DataTable.isDataTable('#threshold_report')) {
                    $('#threshold_report').DataTable().clear().destroy();
                }

                let collapsedGroups = {};

                // Helper to normalize group keys consistently
                function normalizeGroupKey(row) {
                    const date = String(row.order_date).trim().toLowerCase();
                    // Pad item_order_id to 2 digits (adjust if needed)
                    const id = String(row.item_order_id).padStart(2, '0').trim().toLowerCase();
                    return `${date}__${id}`;
                }

                let data = {
                    from_date: $("#from_date").val(),
                    to_date: $("#to_date").val(),
                    kitchen_id: $("#kitchen").val(),
                    _token: "{{csrf_token()}}"
                };

                let table = $('#threshold_report').DataTable({
                    autoWidth: false,
                    ordering: true,
                    responsive: true,
                    paging: false,
                    serverSide: false,
                    scrollY: '400px',
                    scrollCollapse: true,
                    ajax: {
                        url: "get_kitchen_prep_time_report",
                        type: "post",
                        data: data,
                    },
                    order: [
                        [0, 'desc'],
                        // [4,'asc']
                    ],
                    dom: 'Blfrtip',
                    buttons: [{
                        extend: 'excelHtml5',
                        title: 'Kitchen Prep Time Report',
                        text: '<i class="bi bi-file-earmark-excel-fill text-success" style="font-size: 28px;" title="Export to Excel"></i>',
                        className: '',
                        init: function(api, node) {
                            $(node).css({
                                background: 'none',
                                border: 'none',
                                padding: '0',
                                margin: '0',
                                boxShadow: 'none'
                            });
                        }
                    }],
                    columns: [{
                            data: "item_order_id",
                            title: "Order Id"
                        },
                        {
                            data: "order_name",
                            title: "Item"
                        },
                        {
                            data: "kitchen_name",
                            title: "Kitchen Name"
                        },
                        {
                            data: "order_qty",
                            title: "Qty"
                        },
                        {
                            data: "order_date",
                            title: "Date"
                        },
                        {
                            data: "ktp_in_minutes",
                            title: "KPT",
                            render: function(data, type, row) {
                                if (data == null) return "N/A";
                                return `${row.ktp_minutes} minutes ${row.ktp_seconds} seconds`;
                            }
                        }
                    ],
                    columnDefs: [{
                        targets: "_all",
                        className: "dt-center"
                    }],
                    rowGroup: {
                        dataSrc: normalizeGroupKey,
                        startRender: function(rows, rawGroupKey) {
                            const groupKey = rawGroupKey.trim().toLowerCase();
                            if (!(groupKey in collapsedGroups)) {
                                collapsedGroups[groupKey] = true;
                            }
                            const collapsed = collapsedGroups[groupKey];

                            const [date, orderId] = groupKey.split('__');

                            let totalSeconds = 0;
                            let count = 0;

                            rows.data().each(function(d) {
                                let minutes = parseInt(d.ktp_minutes) || 0;
                                let seconds = parseInt(d.ktp_seconds) || 0;
                                totalSeconds += (minutes * 60) + seconds;
                                count++;
                            });

                            let avgSeconds = totalSeconds / count;
                            let avgMinutes = Math.floor(avgSeconds / 60);
                            let avgRemainSeconds = Math.round(avgSeconds % 60);

                            return $('<tr/>')
                                .addClass('group')
                                .toggleClass('collapsed', collapsed)
                                .attr('data-group', groupKey)
                                .css('cursor', 'pointer')
                                .append(`<td colspan="6">
                            <i class="bi ${collapsed ? 'bi-plus-square' : 'bi-dash-square'} toggle-icon"></i> 
                            <strong>Date:</strong> ${date} - 
                            <strong>Order ID:</strong> ${orderId} - 
                            <strong>Avg KPT:</strong> ${avgMinutes} minutes ${avgRemainSeconds} seconds
                        </td>`);
                        }
                    }
                });

                // Toggle expand/collapse on group header click
                $('#threshold_report tbody').off('click', 'tr.group').on('click', 'tr.group', function() {
                    const $groupRow = $(this);
                    const groupKey = $groupRow.attr('data-group').trim().toLowerCase();

                    collapsedGroups[groupKey] = !collapsedGroups[groupKey];

                    const icon = $groupRow.find('.toggle-icon');
                    icon.toggleClass('bi-plus-square bi-dash-square');

                    $('#threshold_report tbody tr').each(function() {
                        const rowData = table.row(this).data();
                        if (!rowData) return;

                        const rowGroupKey = normalizeGroupKey(rowData);
                        if (rowGroupKey === groupKey) {
                            $(this).toggle(!collapsedGroups[groupKey]);
                        }
                    });
                });

                // Hide/show rows on draw according to collapsedGroups
                table.on('draw', function() {
                    table.rows().every(function() {
                        const row = this.node();
                        const data = this.data();
                        const groupKey = normalizeGroupKey(data);
                        $(row).toggle(!collapsedGroups[groupKey]);
                    });
                    $("#pageloader").hide();
                });
                $(".toggle-sidebar-btn").click(function() {
                    setTimeout(function() {
                        table.columns.adjust().draw();
                    }, 300);
                });
            }
        }

        function getDataTableItem() {
            if ($("#threshold_data").valid()) {
                if ($.fn.DataTable.isDataTable('#threshold_report_item')) {
                    $('#threshold_report_item').DataTable().clear().destroy();
                }

                let collapsedGroups = {};

                // Grouping only by order_name
                function normalizeGroupKey(row) {
                    return String(row.order_name).trim().toLowerCase();
                }

                let data = {
                    from_date: $("#from_date").val(),
                    to_date: $("#to_date").val(),
                    kitchen_id: $("#kitchen").val(),
                    item_name: $("#item_name").val(),
                    _token: "{{csrf_token()}}"
                };

                let table = $('#threshold_report_item').DataTable({
                    autoWidth: true,
                    ordering: true,
                    responsive: true,
                    paging: false,
                    serverSide: false,
                    scrollY: '400px',
                    scrollCollapse: true,
                    ajax: {
                        url: "get_kitchen_prep_time_report_item",
                        type: "post",
                        data: data,
                    },
                    order: [
                        [0, 'desc']
                    ],
                    dom: 'Blfrtip',
                    buttons: [{
                        extend: 'excelHtml5',
                        title: 'Kitchen Prep Time Report',
                        text: '<i class="bi bi-file-earmark-excel-fill text-success" style="font-size: 28px;" title="Export to Excel"></i>',
                        className: '',
                        init: function(api, node) {
                            $(node).css({
                                background: 'none',
                                border: 'none',
                                padding: '0',
                                margin: '0',
                                boxShadow: 'none'
                            });
                        }
                    }],
                    columns: [{
                            data: "item_order_id",
                            title: "Order Id"
                        },
                        {
                            data: "order_name",
                            title: "Item"
                        },
                        {
                            data: "kitchen_name",
                            title: "Kitchen Name"
                        },
                        {
                            data: "order_qty",
                            title: "Qty"
                        },
                        {
                            data: "order_date",
                            title: "Date"
                        },
                        {
                            data: "ktp_in_minutes",
                            title: "KPT",
                            render: function(data, type, row) {
                                if (data == null) return "N/A";
                                return `${row.ktp_minutes} minutes ${row.ktp_seconds} seconds`;
                            }
                        }
                    ],
                    columnDefs: [{
                        width: "1%",
                        targets: [0, 1, 2, 3, 4, 5],
                        className: "dt-center"
                    }],
                    rowGroup: {
                        dataSrc: normalizeGroupKey,
                        startRender: function(rows, rawGroupKey) {
                            const groupKey = rawGroupKey.trim().toLowerCase();

                            if (!(groupKey in collapsedGroups)) {
                                collapsedGroups[groupKey] = true;
                            }

                            const collapsed = collapsedGroups[groupKey];

                            let totalSeconds = 0;
                            let count = 0;

                            rows.data().each(function(d) {
                                let minutes = parseInt(d.ktp_minutes) || 0;
                                let seconds = parseInt(d.ktp_seconds) || 0;
                                totalSeconds += (minutes * 60) + seconds;
                                count++;
                            });

                            let avgSeconds = totalSeconds / count;
                            let avgMinutes = Math.floor(avgSeconds / 60);
                            let avgRemainSeconds = Math.round(avgSeconds % 60);

                            return $('<tr/>')
                                .addClass('group')
                                .toggleClass('collapsed', collapsed)
                                .attr('data-group', groupKey)
                                .css('cursor', 'pointer')
                                .append(`<td colspan="6">
                            <i class="bi ${collapsed ? 'bi-plus-square' : 'bi-dash-square'} toggle-icon"></i> 
                            <strong>Item:</strong> ${groupKey} - 
                            <strong>Avg KPT:</strong> ${avgMinutes} minutes ${avgRemainSeconds} seconds
                        </td>`);
                        }
                    }
                });

                // Toggle expand/collapse on group header click
                $('#threshold_report_item tbody').off('click', 'tr.group').on('click', 'tr.group', function() {
                    const $groupRow = $(this);
                    const groupKey = $groupRow.attr('data-group').trim().toLowerCase();

                    collapsedGroups[groupKey] = !collapsedGroups[groupKey];

                    const icon = $groupRow.find('.toggle-icon');
                    icon.toggleClass('bi-plus-square bi-dash-square');

                    $('#threshold_report_item tbody tr').each(function() {
                        const rowData = table.row(this).data();
                        if (!rowData) return;

                        const rowGroupKey = normalizeGroupKey(rowData);
                        if (rowGroupKey === groupKey) {
                            $(this).toggle(!collapsedGroups[groupKey]);
                        }
                    });
                });

                table.on('draw', function() {
                    table.rows().every(function() {
                        const row = this.node();
                        const data = this.data();
                        const groupKey = normalizeGroupKey(data);
                        $(row).toggle(!collapsedGroups[groupKey]);
                    });
                    $("#pageloader").hide();
                });

                $(".toggle-sidebar-btn").click(function() {
                    setTimeout(function() {
                        table.columns.adjust().draw();
                    }, 300);
                });
            }
        }
    </script>
</body>

</html>