@include('layouts.headElement')
@include('layouts.headerNormal')
@include('layouts.sidebarV2')

<script src="js/jquery-ui.min.js"></script>
<script src="assets/vendor/timepicker/jquery.timepicker.min.js"></script>
<link rel="stylesheet" href="assets/vendor/timepicker/jquery.timepicker.min.css" />
<!-- <link href='css/jquery-ui.css' rel='stylesheet'> -->
<!-- <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script> -->
<!-- <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css"> -->

<!-- <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css" /> -->
<link rel="stylesheet" href="https://cdn.datatables.net/rowgroup/1.3.1/css/rowGroup.dataTables.min.css" />
<style>


    #date_range,
    #month_range {
        height: calc(3.5rem + 2px);
        /* Match Bootstrap form-control height */
        border-radius: 0.375rem;
        /* Match Bootstrap border-radius */
        padding: 0.375rem 0.75rem;
        font-size: 1rem;
        line-height: 1.5;
    }

    /* Calendar popup background */
    .flatpickr-calendar {
        background-color: rgb(188, 78, 114) !important;
        color: white !important;
        border: none;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    }

    /* Day cells - text color */
    .flatpickr-day {
        color: white !important;
        font-weight: 500;
    }

    /* Day hover effect */
    .flatpickr-day:hover {
        /* background: white !important; */
        color: rgb(199, 41, 54) !important;
        border-radius: 6px;
    }

    /* Selected day */
    .flatpickr-day.selected,
    .flatpickr-day.startRange,
    .flatpickr-day.endRange {
        /* background: blue !important; */
        color: black !important;
        border-radius: 6px;
    }

    /* Month and year in header */
    .flatpickr-current-month,
    .flatpickr-months .flatpickr-prev-month,
    .flatpickr-months .flatpickr-next-month {
        color: black !important;
    }

    /* Weekdays (Sun, Mon, ...) */
    .flatpickr-weekday {
        color: black !important;
    }

    /* Disable future dates */
    .flatpickr-day.flatpickr-disabled,
    .flatpickr-day.flatpickr-disabled:hover {
        background: transparent !important;
        color: #ccc !important;
        cursor: not-allowed !important;
    }

    /* Highlight today */
    .flatpickr-day.today {
        border: 1px solid white;
        font-weight: bold;
    }

    /* Flatpickr month navigation arrows */
    .flatpickr-months .flatpickr-prev-month svg,
    .flatpickr-months .flatpickr-next-month svg {
        fill: black !important;
        /* Your desired arrow color */
        stroke: black !important;
        /* For outlines, if present */
        width: 14px;
        height: 14px;
    }

    /* Optional: Add hover effect */
    .flatpickr-months .flatpickr-prev-month:hover svg,
    .flatpickr-months .flatpickr-next-month:hover svg {
        fill: rgb(255, 215, 0) !important;
        /* Example: gold on hover */
        cursor: pointer;
    }

    .flatpickr-monthSelect-month {
        color: white;
    }

    .flatpickr-monthSelect-month.flatpickr-disabled {
        color: #aaa !important;
        background-color: transparent !important;
        cursor: not-allowed;
    }






    #ex_img_1 {
          width: 27px;
        float: right;
        margin-top: 0%;
        margin-bottom: 1%;
        color: #963131 !important;
    }




    .fa-file-excel {
        color: maroon;
    }



    /*  */

    /* multi select */
    .sd-CustomSelect {
        /* width: 368.2px; */
        display: none;
        visibility: hidden;


        width: 100% !important;
        /* Take full width of parent */
        max-width: 100%;
        /* Prevent overflow */
        box-sizing: border-box;
    }


    .sd-CustomSelect+.ms-parent {
        width: 100% !important;
    }


    .sd-CustomSelect+.ms-parent .ms-choice {
        height: calc(3.5rem + 2px);
        padding: 1rem 0.75rem 0 0.75rem;
        border-radius: 0.375rem;
        border: 1px solid #ced4da;
        background-color: #fff;
        display: flex;
        align-items: center;
        font-size: 1rem;
        position: relative;
    }

    .ms-drop input[type="checkbox"],
    .ms-drop input[type="radio"] {
        accent-color: brown;
    }


    .sd-CustomSelect+.ms-parent .ms-choice>span {
        position: relative;
        top: 2px;
        color: #6c757d;
    }


    .sd-CustomSelect+.ms-parent .ms-choice::before,
    .sd-CustomSelect+.ms-parent .ms-choice::after {
        display: none !important;
        content: none !important;
    }


    .sd-CustomSelect+.ms-parent .ms-choice>div {
        background-image: none !important;
    }


    .sd-CustomSelect+.ms-parent .ms-drop {
        z-index: 1050;
        border-radius: 0.375rem;
        border: 1px solid #ced4da;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
    }



    .placeholder {
        background-color: transparent;
    }

    .ms-choice {
        height: 56px !important;
    }


    #multiselect_users,
    #multiselect_options {
        margin-top: -11px;
        font-size: 14px;
        z-index: 10000;
    }

</style>


<body>
    @include ('layouts.loader')
    <main id="body_main_container" class="body-main-container">
        <div id="body_container">
            <div class="card" id="page_header_container">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-8">
                            <h5 class="card-title">Early And Late Punch Report</h5>
                        </div>
                    </div>
                </div>
            </div>


            <ul class="nav nav-tabs d-flex" id="myTabjustified" role="tablist">
            </ul>
            <div class="tab-content" id="myTabjustifiedContent">
                <div class="tab-pane fade show active" id="home-justified" role="tabpanel" aria-labelledby="home-tab">
                    <div class="card form-container p-0">
                        <div class="card-body p-1">
                            <form class="" id="get_late_and_early_punching" method="POST">
                                <div class="row p-2 g-2">

                                    <div class="col-md-4">
                                        <div class="form-floating ">
                                            <select class="form-select" id="kitchen_name" name="kitchen_name[]" required>
                                                <option value="">Select</option>
                                                @foreach ($kitchensData as $kitchens)
                                                <option value="{{ $kitchens->id }}"> {{$kitchens->kitchen_name }}</option>
                                                @endforeach
                                            </select>

                                            <label for="floatingName">Kitchen Name</label>

                                            <p id="error_kitchen_name" style="color:red"></p>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-floating">
                                            <select class="sd-CustomSelect" id="emp_name" name="emp_name[]" aria-label="" autocomplete="off" required multiple>


                                            </select>
                                            <label for="floatingName" id="multiselect_users">Employee Name</label>

                                            <p id="error_rate_emp_name" style="color:red"></p>
                                        </div>
                                    </div>

                                    <div class="col-md-4">
                                        <div class="form-floating">
                                            <select class="form-select" id="report_type" name="report_type" onchange="changeReportType();" required style="color: black">
                                                <option value="3">All</option>
                                                <option value="1">Early Punch</option>
                                                <option value="2">Late Punch</option>
                                            </select>
                                            <label for="report_type">Punch Type</label>
                                            <p id="error_rate_report_type" style="color:red"></p>
                                        </div>
                                    </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="Your Name" required="" readonly='true'>
                                            <label for="floatingName">From Date</span></label>
                                            <p id="error_rate_from_date" 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="Your Name" required="" readonly='true'>
                                            <label for="floatingName">To Date</span></label>
                                            <p id="error_to_date" style="color:red"></p>
                                        </div>
                                    </div>


                                    <div class="text-center buttons-container">
                                        <button type="button" class="btn submit-btn" onclick="send_id();">Submit</button>
                                    </div>

                            </form>
                        </div>
                    </div>
                </div>
            </div>


            <div class="col-lg-12" id="late_punch_in">
                <div class="card pt-2">
                    <div class="card-body" style="overflow-x:auto;">
                        <table id="punch_in_late_and_early_report" class='display dataTable nowrap' style="width:100%">
                            <thead>
                                <tr>
                                    <th scope="col">Emp Name </th>
                                    <th scope="col">Emp ID </th>
                                    <th scope="col">Date</th>
                                    <th scope="col">Shift Start Time </th>
                                    <th scope="col">Punch In Time</th>
                                    <th scope="col">Total Min</th>

                                </tr>
                            </thead>
                        </table>

                    </div>
                </div>
            </div>
            <div class="col-lg-12" id="early_punch_in">
                <div class="card">
                    <div class="card-body" style="overflow-x:auto;">
                        <div class="d-flex justify-content-between align-items-center pt-2">

                            <h5 class="card-title" style="font-weight: bold;"></h5>
                            <div class="d-flex">

                                 <i id="ex_img" class="fas fa-file-excel" title="Employee_details" onclick="export_e1();"></i>
                            </div>
                        </div>

                        <table id="early_punch_in_report" class='display dataTable nowrap mt-2' style="width:100%">
                            <thead>
                                <tr>
                                    <th scope="col">Emp Name </th>
                                    <th scope="col">Emp ID </th>
                                    <th scope="col">Date</th>
                                    <th scope="col">Shift Start Time</th>
                                    <th scope="col">Punch In Time</th>
                                    <th scope="col">Total Min</th>
                                    <th scope="col">Status</th>

                                </tr>
                            </thead>
                        </table>

                    </div>
                </div>
            </div>
        </div>
    </main>
    @include('layouts.footer');
    <link rel="stylesheet" href="css/jquery.dataTables.min.css">
    <script src="js/jquery-3.6.0.min.js"></script>
    <script src="js/jquery-ui.js"></script>
    <script src="js/jquery.dataTables.min.js"></script>
    <script src='js/jquery.validate.js'></script>
    {{-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> --}}
    <link rel="stylesheet" href="\assets\js\multi-select-css.css">
    <script src="\assets\js\multi-select.js"></script>
        <script src='js\table2excel.min.js'></script>
    <script src='assets/vendor/excel_datatable/buttons.html5.min.js'></script>
    <script src='assets/vendor/excel_datatable/dataTables.buttons.min.js'></script>
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>




    <script src="https://cdn.datatables.net/rowgroup/1.3.1/js/dataTables.rowGroup.min.js"></script>


    <!-- //date and month  picker start  -->
    <script>
        $(document).ready(function(e) {

            $('#late_punch_in').hide();
            $('#early_punch_in').hide();

            $("#get_late_and_early_punching").validate({
                rules: {
                    kitchen_name: "required",
                    to_date: "required",
                    report_type: "required",
                    from_date: "required",
                    to_date: "required",

                },
                errorPlacement: function(error, element) {
                    if (element.attr("id") == "kitchen_name") {
                        error.appendTo('#error_rate_kitchen_name');
                    } else if (element.attr("id") == "emp_name") {
                        error.appendTo('#error_rate_emp_name');
                    } else if (element.attr("name") == "report_type") {
                        error.appendTo('#error_rate_report_type');
                    } else if (element.attr("name") == "from_date") {
                        error.appendTo('#error_rate_from_date');
                    } else if (element.attr("name") == "to_date") {
                        error.appendTo('#error_to_date');
                    } else {
                        error.insertAfter(element);
                    }
                },
            });

            // $("#pageloader").fadeIn();
            $(function() {
                $("#from_date").datepicker({
                    dateFormat: "yy-mm-dd",
                    changeMonth: true,
                    changeYear: true,
                    maxDate: '0',
                    onClose: function(selectedDate) {
                        jQuery("#to_date").datepicker("option", "minDate", selectedDate);
                    }
                });
            });
            $(function() {
                $("#to_date").datepicker({
                    dateFormat: "yy-mm-dd",
                    changeMonth: true,
                    changeYear: true,
                    maxDate: '0',
                    onClose: function(selectedDate) {
                        jQuery("#from_date").datepicker("option", "maxDate", selectedDate);
                    }
                });
            });


            $(".sd-CustomSelect").multipleSelect({
                selectAll: true,
                filter: true,
                minimumCountSelected: 1,
                container: 'body',
                onOptgroupClick: function(view) {
                    $(view).parents("label").addClass("selected-optgroup");
                }
            });


            $("#kitchen_name").multipleSelect('checkAll');
            $("#emp_name").multipleSelect('checkAll');

            $(".sd-CustomSelect").css({
                display: "block",
                visibility: "visible"
            });


        });



        function toggleTable(type) {
            $('#date_wise_table').show();
            // if (type == 1) {
            //     $('#date_wise_table').show();
            //     $('#month_wise_table').hide();
            // } else if (type == 2) {
            //     $('#month_wise_table').show();
            //     $('#date_wise_table').hide();
            // } else {
            //     $('#month_wise_table').hide();
            //     $('#date_wise_table').hide();
            // }
        }
        $('#report_type').change(function() {
            let type = $(this).val();
            console.log(type)
            toggleTable(type);
        });

        // Kitchen change - fetch employee list
        $('#kitchen_name').change(function() {
            let kitchenId = $(this).val();
            $("#pageloader").fadeIn();
            $.ajax({
                url: 'get_emp_list_by_kitchen_id',
                method: 'get',
                data: {
                    id: kitchenId
                },
                success: function(res) {
                    $("#pageloader").fadeOut();
                    let empData = JSON.parse(res);

                    $('#emp_name').html('');

                    if (empData.length === 0) {
                        $('#emp_name').html('');
                    } else {
                        // $('#emp_name').prop('disabled', false);
                        empData.forEach(function(data) {
                            $('#emp_name').append(`<option value="${data.client_user_id}">${data.full_name}  (${data.emp_code})</option>`);
                        });
                    }

                    $('#emp_name').multipleSelect('refresh');
                    $('#emp_name').multipleSelect('checkAll');
                    $(".sd-CustomSelect").css({
                        display: "block",
                        visibility: "visible"
                    });

                },
                error: function(res) {
                    $("#pageloader").fadeOut();
                    console.log(res);
                }
            });
        });
        $(document).ready(function() {
            toggleTable(0)
        })


        function changeReportType() {

            // var report_type = $('#report_type').val();
            // $('#early_punch_in').hide();
            // if (report_type) {
            //     $('#early_punch_in').show();
            // }
        }



        // function late_punch_in() {

        //     const employees = ["John Doe", "Jane Smith", "Ravi Kumar", "Ayesha Khan"];
        //     const empData = [];


        //     const startDate = new Date("2025-07-01");
        //     const endDate = new Date("2025-07-12");

        //     for (let d = new Date(startDate); d <= endDate; d.setDate(d.getDate() + 1)) {
        //         employees.forEach((name) => {
        //             let id = "EMP" + (100 + employees.indexOf(name));
        //             let batchTime = "09:00";
        //             let punchMinLate = Math.floor(Math.random() * 30); // Late by 0–29 min
        //             let punchTime = "09:" + (punchMinLate < 10 ? "0" + punchMinLate : punchMinLate);

        //             empData.push({
        //                 emp_name: name,
        //                 emp_id: id,
        //                 date: d.toISOString().split("T")[0],
        //                 batch_time: batchTime,
        //                 punch_in_time: punchTime,
        //                 total_min: punchMinLate
        //             });
        //         });
        //     }


        //     const table = $('#punch_in_late_and_early_report').DataTable({
        //         data: empData,
        //         columns: [{
        //                 data: 'emp_name'
        //             },
        //             {
        //                 data: 'emp_id'
        //             },
        //             {
        //                 data: 'date'
        //             },
        //             {
        //                 data: 'batch_time'
        //             },
        //             {
        //                 data: 'punch_in_time'
        //             },
        //             {
        //                 data: 'total_min'
        //             }
        //         ],
        //         rowGroup: {
        //             dataSrc: 'emp_name',
        //             startRender: function(rows, group) {
        //                 const totalMin = rows
        //                     .data()
        //                     .pluck('total_min')
        //                     .reduce((a, b) => a + b * 1, 0);

        //                 return $('<tr/>')
        //                     .addClass('group-start collapsed')
        //                     .attr('data-group', group)
        //                     .append('<td colspan="6"><strong>' + group + '</strong> — (<b>' + totalMin + '</b>) Min</td>');
        //             }
        //         },
        //         order: [
        //             [0, 'asc']
        //         ],
        //         paging: false,
        //         drawCallback: function(settings) {
        //             // Hide all non-group-start rows after every draw
        //             $('#punch_in_late_and_early_report tbody tr').each(function() {
        //                 if (!$(this).hasClass('group-start')) {
        //                     $(this).hide();
        //                 }
        //             });
        //         }
        //     });

        //     // Handle group toggle on click
        //     $('#punch_in_late_and_early_report tbody').on('click', 'tr.group-start', function() {
        //         const groupName = $(this).data('group');
        //         const isCollapsed = $(this).hasClass('collapsed');
        //         $(this).toggleClass('collapsed');

        //         table.rows().every(function() {
        //             const data = this.data();
        //             const node = $(this.node());
        //             if (data.emp_name === groupName && !node.hasClass('group-start')) {
        //                 node.toggle(isCollapsed);
        //             }
        //         });
        //     });
        // }

        function send_id() {
            // $("#pageloader").fadeIn();
            if ($("#get_late_and_early_punching").valid()) {


                let kitchen_name = $("#kitchen_name").val();
                if (kitchen_name.length == 0) {
                    alert("Select Kitchens")
                    return;
                }

                let emp_name = $("#emp_name").val();
                if (emp_name.length == 0) {
                    alert("Select Kitchens")
                    return;
                }
                const form = document.querySelector('#get_late_and_early_punching');
                let formData = new FormData(form);

                formData.append('_token', '{{ csrf_token() }}');
                $("#pageloader").fadeIn();
                $.ajax({
                    url: 'get_all_punch_late_and_early_report',
                    type: "post",
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        $("#pageloader").fadeOut();
                        // var response = jQuery.parseJSON(response);
                        if (response.length == 0) {
                            $('#early_punch_in').hide();
                            alert("No Data found!");
                            return;
                        }


                        load_main_table(response);

                        $('#early_punch_in').show();


                    },
                    error: function(error) {
                        // console.log(error)

                    }
                });
            }
        }

        function load_main_table(tabel) {
            const collapsedGroups = {};

            // Mark all groups as initially collapsed
            tabel.forEach(row => {
                collapsedGroups[row.full_name] = true;
            });

            // Destroy previous DataTable instance
            const tableId = '#early_punch_in_report';
            if ($.fn.DataTable.isDataTable(tableId)) {
                $(tableId).DataTable().destroy();
            }

            const table = $(tableId).DataTable({
                autoWidth: true,
                ordering: true,
                order: [
                    [0, 'asc'],
                    [2, 'asc'] //date i want in serial from because 2025-07-03 coming first then 2025-07-01 comming 
                ],
                scrollY: "450px",
                scrollX: true,
                scrollCollapse: true,
                paging: false,
                responsive: true,
                dom: 'Blfrtip',
                data: tabel,
                columns: [{
                        data: "full_name",
                        title: "Employee Name"
                    },
                    {
                        data: "emp_code",
                        title: "Emp Id"
                    },
                    {
                        data: "date",
                        type: 'date',
                        title: "Date"
                    },
                    {
                        data: "start_time",
                        title: "Shift Start Time"
                    },
                    {
                        data: "pinchTime",
                        title: "Punch In Time"
                    },
                    {
                        data: "minutes_difference",
                        title: "Total Min",
                        render: function(data, type, row) {
                            var status = row.attendance_status;
                            var beyond_time = row.beyond_time; // e.g., "00:20:00"
                            var minutesDiff = data; // e.g., "00:24:00"

                            function toMinutes(timeStr) {
                                if (!timeStr || timeStr === '00:00:00') return 0;
                                var parts = timeStr.split(':');
                                var h = parseInt(parts[0]) || 0;
                                var m = parseInt(parts[1]) || 0;
                                var s = parseInt(parts[2]) || 0;
                                return h * 60 + m + Math.floor(s / 60);
                            }

                            var beyondMinutes = toMinutes(beyond_time);
                            var diffMinutes = toMinutes(minutesDiff);

                            if (status === 'late' && beyondMinutes > 0 && diffMinutes > beyondMinutes) {
                                return `<span style="color:red;">${minutesDiff}</span>`;
                            }

                            return minutesDiff;
                        }
                    },
                    {
                        data: "attendance_status",
                        title: "Status",
                        render: function(data, type, row) {
                            var beyond_time = row.beyond_time; // e.g., "00:20:00"
                            var minutesDiff = row.minutes_difference;

                            function toMinutes(timeStr) {
                                if (!timeStr || timeStr === '00:00:00') return 0;
                                var parts = timeStr.split(':');
                                var h = parseInt(parts[0]) || 0;
                                var m = parseInt(parts[1]) || 0;
                                var s = parseInt(parts[2]) || 0;
                                return h * 60 + m + Math.floor(s / 60);
                            }

                            if (data === 'late') {
                                var beyondMinutes = toMinutes(beyond_time);
                                var diffMinutes = toMinutes(minutesDiff);

                                // Check only if beyondMinutes is > 0
                                if (beyondMinutes > 0 && diffMinutes > beyondMinutes) {
                                    return '<span style="color:red;font-weight:bold;">Late Punch (Half Day)</span>';
                                } else {
                                    return '<span style="color:red;font-weight:bold;">Late Punch</span>';
                                }
                            } else if (data === 'early') {
                                return '<span style="color:green;font-weight:bold;">Early Punch</span>';
                            } else if (data === 'onTime') {
                                return '<span style="color:orange;font-weight:bold;">On Time Punch</span>';
                            } else if (data === 'No Data') {
                                return '<span style="color:gray;font-weight:bold;">No Data</span>';
                            } else if (data === 'wo') {
                                return '<span style="color:blue;font-weight:bold;">Week Off</span>';
                            } else {
                                return `<span>${data}</span>`;
                            }
                        }
                    }


                ],
                buttons: [{
                    extend: 'excelHtml5',
                    text: '<i class="fas fa-file-excel" title="Download Excel"></i>',
                    titleAttr: 'Excel',
                    filename: function() {
                        const d = new Date();
                        const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
                            "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
                        ];
                        return `punch_report_early_${d.getDate()}-${monthNames[d.getMonth()]}-${d.getFullYear()}`;
                    }
                }],
                columnDefs: [{
                        targets: 0,
                        width: "1%",
                        orderable: false,
                        className: "dt-center",
                        searchable: true
                    },
                    {
                        targets: [1, 2, 3, 4, 5, 6],
                        width: "5%",
                        className: "dt-center"
                    }
                ],
                rowGroup: {
                    dataSrc: 'full_name',
                    startRender: function(rows, group) {
                        const collapsed = collapsedGroups[group] === true;

                        // Sum minutes_difference values in seconds
                        let totalSeconds = 0;
                        rows.data().each(function(d) {
                            if (d.minutes_difference && /^\d{2}:\d{2}:\d{2}$/.test(d.minutes_difference)) {
                                totalSeconds += timeToSeconds(d.minutes_difference);
                            }
                        });
                        const totalTime = secondsToHHMMSS(totalSeconds);

                        rows.nodes().each(function(row) {
                            row.style.display = collapsed ? 'none' : '';
                        });

                        return $('<tr/>')
                            .addClass('dtrg-start')
                            .toggleClass('collapsed', collapsed)
                            .attr('data-name', group)
                            .append(`<td colspan="7" style="background:#f8f9f9; cursor:pointer;">
                    <strong>${group}: (${totalTime})</strong> 
                  
                 </td>`);
                    }
                },
                drawCallback: function() {
                    // Show only headers or visible rows
                    $(`${tableId} tbody tr`).each(function() {
                        const isHeader = $(this).hasClass('dtrg-start');
                        const groupName = $(this).data('name');
                        $(this).toggle(isHeader || !collapsedGroups[groupName]);
                    });
                },
                initComplete: function() {
                    setTimeout(() => {
                        table.columns.adjust().draw();
                    }, 300);
                }
            });

            // Redraw when sidebar toggles
            $(".toggle-sidebar-btn").click(function() {
                setTimeout(() => {
                    table.columns.adjust().draw();
                }, 300);
            });

            // Toggle row group on header click
            $(tableId + ' tbody').on('click', 'tr.dtrg-start', function() {
                const name = $(this).data('name');
                collapsedGroups[name] = !collapsedGroups[name];
                table.draw(false);
            });

            // Move Excel button to custom container
         //   table.buttons(0, null).container().appendTo($('#ex_img_1')).addClass('export');
        }

        function timeToSeconds(timeStr) {
            const [h, m, s] = timeStr.split(':').map(Number);
            return h * 3600 + m * 60 + s;
        }

        // Function to convert seconds back to HH:MM:SS
        function secondsToHHMMSS(totalSeconds) {
            const h = Math.floor(totalSeconds / 3600);
            const m = Math.floor((totalSeconds % 3600) / 60);
            const s = totalSeconds % 60;
            return [h, m, s].map(v => String(v).padStart(2, '0')).join(':');
        }

        function export_e1() {
            $(function() {

                // Now export to Excel
                $("#early_punch_in_report").table2excel({
                    filename: "employee_late_early_report.xls"
                });

            });
        }
    </script>


</body>

</html>