@include('layouts.header');
@include('layouts.sidebar');
<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'>
<style>
    .error {
        color: red;
        font-size: 13px;
        font-weight: 600;
        /* margin-top: 50px; */
    }

    .success-border {
        border: 2px lightgreen ridge;
    }

    .error-border {
        border: 2px red ridge;
    }

    .flex-box {
        float: right;
        margin-top: -51px;
    }

    #model_emp_details_2,
    #model_emp_details_1,
    #model_emp_details_3,
    #model_emp_details_note_file,
    #history_left_model {

        top: 86px;
    }



    .emp_photos_model {
        width: 300px;
        height: 300px;
        display: flex;
        justify-content: center;
        align-items: center;

    }

    .emp_photos_model img {
        width: 300px;
        height: 300px;
        border: 3px solid goldenrod;

    }



    .ui-datepicker {
        position: absolute;
        top: 114px;
        width: 300px;
        height: 300px;
        color: #963131;
        margin: 5px auto 0;
        font: 12pt Arial, sans-serif;
    }

    .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-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-timepicker-standard .ui-menu-item {
        margin: 0 auto;
        padding: 0 30%;
    }

    /* .btn-close {
        width: 30px; font-weight:500;
    } */

    #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;
        }


    }

    .row-adjust {
        padding-right: calc(var(--bs-gutter-x) * .0) !important;
    }

    .captured {
        background: green !important;
        border: green !important;
    }

    @media only screen and (max-width: 767px) {
        .row-adjust {
            padding-right: calc(var(--bs-gutter-x) * .0) !important;
        }
    }

    @media only screen and (max-width: 100%) {
        .row-adjust_2 {
            padding-right: calc(var(--bs-gutter-x) * .0) !important;
        }
    }

    .wrapper {
        display: flex;
        height: 80%;
        width: 100%;
        justify-content: center;
        margin: 10px auto;
    }

    #to_date #from_date #user_name {
        color: black;
    }


    #ex_img_1 {
        width: 27px;
        float: right;
        margin-top: -3%;
        color: #963131;
    }



    #ex_img_3 {
        width: 27px;
        float: right;
        margin-top: 0%;
        color: #963131;
    }

    button.dt-button,
    div.dt-button,
    a.dt-button {
        color: #963131;

    }

    .select2-container {
        width: 100% !important;

    }

    span.select2-selection.select2-selection {
        min-height: 52px !important;
        /* width: 300px; */
    }
</style>

<body>
    @include ('layouts.head')
    <div class="col-lg-12" id="pageloader">
        <img src="images/256x256.gif">
    </div>

    <main id="main" class="main">


        <div class="row" style="margin-top:-2%; margin-bottom: 1%;">

            <div class="col-lg-12">

                <div class="card" style="margin-bottom: 0px;">

                    <div class="card-body" style="padding: 0 20px 0px 20px;">

                        <div class="row container-element">

                            <div class="col-md-12 pagetitle" style="margin-top: 7px;">
                                <h1 style="font-weight: bold;"> Employee Attendance Report</h1>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-body">
                {{-- <h5 class="card-title">Employee Report</h5> --}}
                <ul class="nav nav-tabs d-flex" id="myTabjustified" role="tablist">
                </ul>
                <div class="tab-content pt-3" 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">
                                <form class="g-3 pt-3" id="get_order_form" method="POST">
                                    <div class="row">



                                        <div class="col-md-3">
                                            <div class="form-floating">
                                                <select class="selUser form-select" id="user_name" name="user_name" aria-label="" data-placeholder="Select User Name" autocomplete="off" required multiple>
                                                    <option value="0">All</option>
                                                  



                                                    @if ($features !== 0 && !empty($features))
                                        
                                                                                                            @endif

                                                </select>
                                                {{-- <label for="">Select User Name</label> --}}
                                                <p id="error_user_name" style="color:red"></p>
                                            </div>
                                        </div>



                                        <div class="col-md-3">
                                            <div class="form-floating">
                                                <select class="form-select" id="report_type" name="report_type" aria-label="" placeholder="Report type" autocomplete="off" required style="color: black">
                                                    <option value="1">Date Wise</option>
                                                    <option value="2">Month Wise</option>


                                                </select>
                                                <label for="">Report Type</label>
                                                <p id="error_report_type" style="color:red"></p>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <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="from_date_error" style="color:red"></p>
                                            </div>
                                        </div>

                                        <div class="col-md-3">
                                            <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="to_date_error" style="color:red"></p>
                                            </div>
                                        </div>

                                    </div>

                                    <div class="text-center">
                                        <button type="button" onclick="send_id()" id="submit_assign_hub" class="btn btn-primary">Submit</button>
                                    </div>

                                </form><!-- End floating Labels Form -->

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

            </div>
        </div>

        <!-- REPORTS STARTS FROM HERE -->




        <div class="col-lg-12" id="table-data">
            <div class="card">
                <div class="card-body" style="overflow-x:auto;">
                    <h5 class="card-title">Report</h5>
                    <span id="ex_img_1">

                        {{-- <img id="ex_img" src="https://img.icons8.com/color/48/000000/export-excel.png" onclick="export_e1();"> --}}
                        {{-- <i id="ex_img_1" class="fas fa-file-excel" title="Employee_details"></i> --}}
                    </span>

                    <table id="employee_attendance_reports" class='display dataTable nowrap' style="width:100%">
                        <thead>
                            <tr>
                                <th scope="col">User Name</th>
                                <th scope="col">Date</th>
                                <th scope="col">Working Hours </th>
                                <th scope="col">Break Hours</th>
                                <th scope="col">Total Hours </th>
                                <th scope="col"></th>
                                <th scope="col"></th>
                                <th scope="col"></th>
                                <th scope="col"></th>
                                <th scope="col"></th>
                                <th scope="col"></th>
                                <th scope="col"></th>
                                <th scope="col"></th>

                                <th scope="col"></th>
                                <th scope="col"></th>
                                <th scope="col"></th>
                                <th scope="col"></th>

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



        <div class="modal fade" id="openEmpPhoto_model" tabindex="-1"
            aria-labelledby="modal2Label_openEmpPhoto_model" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content" id="model_emp_details_2">
                    <div class="modal-header">
                        <h5 class="modal-title" id="modal2Label_openEmpPhoto_model">Employee Photo</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form class="row" id="agent_master_view" method="POST">
                            <input type="hidden" id="view_id" name="view_id">
                            <div class="col-md-12">
                                <div class="form-floating">
                                    <div class="textarea-container d-flex justify-content-center">
                                        <div class="emp_photos_model">
                                            <!-- Ensure the image tag is properly closed -->
                                            {{-- <img src="/assets/img/uploads/335834978.jpeg" alt="Employee Photo"
                                            class="img-fluid"> --}}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>





        <div class="col-lg-12" id="table-data2">
            <div class="card">
                <div class="card-body" style="overflow-x:auto;">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="card-title">Report</h5>
                        <div class="d-flex">
                            <span style="padding-right: 10px;">
                                <button class="btn btn-primary custom-maroon-btn" onclick="downloadAllPayship();">Download All Payslip</button>
                            </span>
                            <span id="ex_img_3"></span>
                        </div>
                    </div>



                    <table id="employee_attendance_reports_month_wise" class='display dataTable nowrap' style="width:100%">
                        <thead>
                            <tr>
                                <th scope="col">User Name</th>
                                <th scope="col">Month</th>
                                <th scope="col">Days</th>
                                <th scope="col">Working Hours </th>
                                <th scope="col">Break Hours</th>
                                <th scope="col">Total Hours </th>
                                <th scope="col"> </th>
                                <th scope="col"></th>
                                <th scope="col"> </th>

                                <th scope="col"> </th>
                                <th scope="col"></th>
                                <th scope="col"> </th>
                                <th scope="col"> </th>

                                <th scope="col"> Payslip</th>

                            </tr>
                        </thead>

                    </table>
                </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='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 type="text/javascript">
        var data = {};
        data['_token'] = "{{csrf_token()}}";

        $(document).ready(function() {


            $(".selUser").select2();

            $('#table-data').hide();
            $('#table-data2').hide();

            // $("#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);
                    }
                });
            });


            $("#get_order_form").validate({
                rules: {
                    from_date: "required",
                    to_date: "required",
                    user_name: "required"

                },
                errorPlacement: function(error, element) {
                    if (element.attr("name") == "from_date") {
                        error.appendTo('#from_date_error');
                    } else if (element.attr("name") == "to_date") {
                        error.appendTo('#to_date_error');

                    } else if (element.attr("name") == "user_name") {
                        error.appendTo('#error_user_name');

                    } else {
                        error.insertAfter(element);
                    }
                },
            });

        })

        // $("#submit_assign_hub").click(function(e) {
        //     e.preventDefault();
        //     if ($("#get_order_form").valid()) {
        //         alert("ok")
        //     }else{
        //         return
        //     }

        // });

        // $("#from_date,#to_date").on("change", function() {
        //     $("#get_order_form").valid()
        // });

        function send_id() {
            // $("#pageloader").fadeIn();
            if ($("#get_order_form").valid()) {
                let data = {
                    all_payslip: 0,
                    from_date: $("#from_date").val(),
                    to_date: $("#to_date").val(),
                    user_name: $("#user_name").val(),
                    report_type: $("#report_type").val()
                }
                data['_token'] = "{{csrf_token()}}"
                $.ajax({
                    url: 'get_employee_attendance_report',
                    type: "post",
                    data: data,
                    success: function(response) {

                        var tabel = jQuery.parseJSON(response);
                        // console.log(tabel);

                        if (tabel == 0) {
                            alert("No data found ");
                            $("#table-data").hide();
                            $("#table-data2").hide();
                        } else {
                            let report_type_chk = $("#report_type").val();
                            if (report_type_chk == 1) {
                                $("#table-data").show();
                                $("#table-data2").hide();
                                load_main_table(tabel);
                            } else {
                                $("#table-data").hide();
                                $("#table-data2").show();
                                load_main_table2(tabel);
                            }
                        }
                    },
                    error: function(error) {
                        // console.log(error)

                    }
                });
            }
        }





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

            //collapse all groups by default
            tabel.forEach(row => {
                collapsedGroups[row.user_name] = true;

            });

            $('#employee_attendance_reports').DataTable().destroy();
            var table = $('#employee_attendance_reports').DataTable({
                "autoWidth": true,
                "ordering": true,
                "order": [0, 'asc'],
                "scrollY": "450px",
                "scrollX": true,
                "scrollCollapse": true,
                "bPaginate": false,
                "responsive": true,
                "dom": 'Blfrtip',
                data: tabel,
                "columns": [{
                        "data": "image_url",
                        "title": "Employee Photo",
                        "render": function(data, type, row) {
                            var client_name=row.client_name;
                            if (data != null) {
                                // return   $('#openEmpPhoto').append('<img  src="/assets/img/uploads/' + emp_photo + '">');
                                return '<button type="button" class="btn btn-primary custom-maroon-btn" onclick="employee_photo_model(\'' + encodeURIComponent(data) + '\',\'' + client_name + '\')"> <i class="fas fa-eye"></i></button>';

                            } else {
                                return '';
                            }

                        }
                    },
                    {
                        "data": "user_name",
                        "title": "Employee Name"
                    },
                    {
                        "data": "emp_code",
                        "title": "Employee Id"
                    },
                    {
                        "data": "outlet_name",
                        "title": "Outlet Name"
                    },
                    {
                        "data": "designation",
                        "title": "Designation"
                    },
                    {
                        "data": "date",
                        "title": "Date"
                    },
                    {
                        "data": "in_time",
                        "title": "In Time"
                    },
                    {
                        "data": "out_time",
                        "title": "Out Time"
                    },


                    {
                        "data": "total_hours",
                        "title": "Total Hours"
                    },
                    {
                        "data": "work_hours",
                        "title": "Work Hours"
                    },
                    {
                        "data": "work_payment",
                        "title": "Payment Process"
                    },
                    {
                        "data": "ot_hours",
                        "title": "OT Hours"
                    },
                    {
                        "data": "ot_payment",
                        "title": "OT Payment"
                    },
                    {
                        "data": "total_payment",
                        "title": "Total Payment"
                    },
                    {
                        "data": "break_in",
                        "title": "Break In"
                    },
                    {
                        "data": "break_out",
                        "title": "Break Out"
                    },
                    {
                        "data": "break_hours",
                        "title": "Break Hours"
                    },
                ],
                "buttons": [{
                    extend: 'excelHtml5',
                    text: '<i class="fas fa-file-excel" title="Employee_details"></i>',
                    titleAttr: 'Excel',
                    filename: function() {
                        var current_date = new Date();
                        var months = [
                            "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
                        ];
                        var formatted_date = current_date.getDate() + '-' +
                            months[current_date.getMonth()] + '-' +
                            current_date.getFullYear();
                        return 'attendance_report_date_wise' + formatted_date;
                    },
                    exportOptions: {
                        // Exclude the first column (index 0) from the export
                        columns: ':not(:first-child)' // This will exclude the first column from the export
                    }


                }],
                columnDefs: [{
                        "width": "1%",
                        "targets": [0],
                        "orderable": false,
                        "className": "dt-center",
                        "searching": false
                    },
                    {
                        "width": "5%",
                        "targets": [1],
                        "className": "dt-center"
                    },
                    {
                        "width": "5%",
                        "targets": [2],
                        "className": "dt-center"
                    },
                    {
                        "width": "5%",
                        "targets": [3],
                        "className": "dt-center"
                    },
                    {
                        "width": "5%",
                        "targets": [4],
                        "className": "dt-center"
                    },
                    {
                        "width": "5%",
                        "targets": [5],
                        "className": "dt-center"
                    },
                    {
                        "width": "5%",
                        "targets": [6],
                        "className": "dt-center"
                    },
                    {
                        "width": "5%",
                        "targets": [7],
                        "className": "dt-center"
                    },
                    {
                        "width": "15%",
                        "targets": [8],
                        "className": "dt-center"
                    },
                    {
                        "width": "15%",
                        "targets": [9],
                        "className": "dt-center"
                    },
                    {
                        "width": "5%",
                        "targets": [10],
                        "className": "dt-center"
                    },
                    {
                        "width": "15%",
                        "targets": [11],
                        "className": "dt-center"
                    },
                    {
                        "width": "15%",
                        "targets": [12],
                        "className": "dt-center"
                    },
                    {
                        "width": "15%",
                        "targets": [13],
                        "className": "dt-center"
                    },
                    {
                        "width": "15%",
                        "targets": [14],
                        "className": "dt-center"
                    },
                    {
                        "width": "15%",
                        "targets": [15],
                        "className": "dt-center"
                    },

                    // {
                    //     "width": "15%",
                    //     "targets": [6],
                    //     "className": "dt-center"
                    // }
                ],
                rowGroup: {
                    dataSrc: 'user_name',
                    startRender: function(rows, group, level) {
                        var collapsed = !!collapsedGroups[group];
                        // console.log(collapsed);


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

                        return $('<tr/>')
                            .append('<td colspan="6" style="background:#f8f9f9">' + group + '</td>')
                            .attr('data-name', group)
                            .toggleClass('collapsed', collapsed);
                    }
                },


                initComplete: function() {

                    setTimeout(function() {
                        table.columns.adjust().draw();
                    }, 300);
                }
            });

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


            $('#employee_attendance_reports tbody').on('click', 'tr.dtrg-start', function() {
                var name = $(this).data('name');
                collapsedGroups[name] = !collapsedGroups[name];
                table.draw(false);
            });

            var excelButton = table.buttons(0, null).container().appendTo($('#ex_img_1'));
            excelButton.addClass('export');
        }


        function employee_photo_model(data,client_name) {
            // console.log(data);
            const decodedData = decodeURIComponent(data);
            var secondModal = new bootstrap.Modal(document.getElementById('openEmpPhoto_model'));
            secondModal.show();

            $('.emp_photos_model').empty();


            if (decodedData === 'null') {
                console.log(decodedData);
                $('.emp_photos_model').val('');
            } else {
                // $('.emp_photos_model').append('<img  src="/assets/img/uploads/' + emp_photo + '">');
                // $('.emp_photos_model').append('<img src="/uploads/employee_attendence/' + decodedData + '" class="img-fluid" alt="Employee Photo">');

                var imageUrl = 'https://mykitchenoa.com/assets/img/' + client_name + '_hr/' + decodedData;

                $('.emp_photos_model').append('<img src="' + imageUrl + '">');


            }
        }





        function load_main_table2(tabel) {
            var collapsedGroups = {};

            // console.log(tabel);

            //collapse all groups by default
            tabel.forEach(row => {
                collapsedGroups[row.user_name] = true;

            });

            $('#employee_attendance_reports_month_wise').DataTable().destroy();
            var table_2 = $('#employee_attendance_reports_month_wise').DataTable({
                "autoWidth": true,
                "ordering": true,
                "order": [0, 'asc'],
                "scrollY": "450px",
                "scrollX": true,
                "scrollCollapse": true,
                "bPaginate": false,
                "responsive": true,
                "dom": 'Blfrtip',
                data: tabel,
                "columns": [{
                        "data": "user_name",
                        "title": "Employee Name"
                    },
                    {
                        "data": "emp_code",
                        "title": "Employee Id"
                    },
                    {
                        "data": "outlet_name",
                        "title": "Outlet Name"
                    },
                    {
                        "data": "designation",
                        "title": "Designation"
                    },

                    {
                        "data": "month",
                        "title": "Month"
                    },

                    {
                        "data": "total_days",
                        "title": "Total Days"
                    },
                    {
                        "data": "total_hours",
                        "title": "Total Hours"
                    },
                    {
                        "data": "total_break_hours",
                        "title": "Break Hours"
                    },
                    {
                        "data": "total_work_hours",
                        "title": "Working Hours"
                    },
                    {
                        "data": "work_payment",
                        "title": "Payment Process"
                    },
                    {
                        "data": "ot_hours",
                        "title": "OT Hours"
                    },
                    {
                        "data": "ot_payment",
                        "title": "OT Payment"
                    },
                    {
                        "data": "total_payment",
                        "title": "Total Payment"
                    },

                    {
                        "data": "emp_code",
                        "title": "Download Payslip",

                        render: function(data, full, row) {
                            var user_name = row['user_name'];

                            var emp_code = row['emp_code'];
                            var outlet_name = row['outlet_name'];
                            var designation = row['designation'];
                            var month = row['month'];
                            var year = row['year'];
                            var total_days = row['total_days'];
                            var total_hours = row['total_hours'];
                            var total_break_hours = row['total_break_hours'];
                            var total_work_hours = row['total_work_hours'];
                            var ot_hours = row['ot_hours'];
                            var work_payment = row['work_payment'].replace(/[,\.]/g, '');
                            var total_payment = row['total_payment'].replace(/[,\.]/g, '');;
                            var ot_payment = row['ot_payment'].replace(/[,\.]/g, '');;

                            return (
                                '<div class="buttons-center">' +
                                '<button id="previous_button" onclick="download_payslip(' +
                                '\'' + emp_code + '\', ' +
                                '\'' + user_name.replace(/'/g, "\\'") + '\', ' +
                                '\'' + outlet_name.replace(/'/g, "\\'") + '\', ' +
                                '\'' + designation.replace(/'/g, "\\'") + '\', ' +
                                '\'' + month + '\', ' +
                                total_days + ', ' +
                                '\'' + ot_hours + '\', ' + // Ensure ot_hours is passed as a string
                                work_payment + ', ' +
                                total_payment + ', ' +
                                ot_payment +
                                ', ' +
                                year +
                                ')" class="btn btn-primary custom-maroon-btn">Download</button>' +
                                '</div>'
                            );




                        }
                    },
                ],
                "buttons": [{
                    extend: 'excelHtml5',
                    text: '<i class="fas fa-file-excel" title="Employee_details"></i>',
                    titleAttr: 'Excel',
                    filename: function() {
                        var current_date = new Date();
                        var months = [
                            "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
                        ];
                        var formatted_date = current_date.getDate() + '-' +
                            months[current_date.getMonth()] + '-' +
                            current_date.getFullYear();
                        return 'attendance_report_month_wise' + formatted_date;
                    },
                    exportOptions: {
                        columns: ':not(:last-child)' // Exclude the first and last columns from the export
                    }


                }],
                columnDefs: [{
                        "width": "1%",
                        "targets": [0],
                        "orderable": false,
                        "className": "dt-center",
                        "searching": false
                    },
                    {
                        "width": "5%",
                        "targets": [1],
                        "className": "dt-center"
                    },
                    {
                        "width": "15%",
                        "targets": [2],
                        "className": "dt-center"
                    },
                    {
                        "width": "15%",
                        "targets": [3],
                        "className": "dt-center"
                    },
                    {
                        "width": "5%",
                        "targets": [4],
                        "className": "dt-center"
                    },
                    {
                        "width": "15%",
                        "targets": [5],
                        "className": "dt-center"
                    },
                    {
                        "width": "15%",
                        "targets": [6],
                        "className": "dt-center"
                    },
                    {
                        "width": "15%",
                        "targets": [7],
                        "className": "dt-center"
                    },
                    {
                        "width": "15%",
                        "targets": [8],
                        "className": "dt-center"
                    },
                    {
                        "width": "15%",
                        "targets": [9],
                        "className": "dt-center"
                    },
                    {
                        "width": "15%",
                        "targets": [10],
                        "className": "dt-center"
                    },
                    {
                        "width": "15%",
                        "targets": [11],
                        "className": "dt-center"
                    },
                    {
                        "width": "15%",
                        "targets": [12],
                        "className": "dt-center"
                    },

                    // {
                    //     "width": "15%",
                    //     "targets": [6],
                    //     "className": "dt-center"
                    // }
                ],
                rowGroup: {
                    dataSrc: 'user_name',
                    startRender: function(rows, group, level) {
                        var collapsed = !!collapsedGroups[group];
                        // console.log(collapsed);


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

                        return $('<tr/>')
                            .append('<td colspan="6" style="background:#f8f9f9">' + group + '</td>')
                            .attr('data-name', group)
                            .toggleClass('collapsed', collapsed);
                    }
                },


                initComplete: function() {

                    setTimeout(function() {
                        table_2.columns.adjust().draw();
                    }, 300);
                }
            });

            $(".toggle-sidebar-btn").click(function() {
                setTimeout(function() {
                    table_2.columns.adjust().draw();
                }, 300);
            });


            $('#employee_attendance_reports_month_wise tbody').on('click', 'tr.dtrg-start', function() {
                var name = $(this).data('name');
                collapsedGroups[name] = !collapsedGroups[name];
                table_2.draw(false);
            });




            var excelButton = table_2.buttons(0, null).container().appendTo($('#ex_img_3'));
            excelButton.addClass('export');
        }


        function download_payslip(emp_code, user_name, outlet_name, designation, month, total_days, ot_hours, work_payment, total_payment, ot_payment, year) {

            data['emp_code'] = emp_code;
            data['user_name'] = user_name;
            data['outlet_name'] = outlet_name;
            data['designation'] = designation;
            data['month'] = month;
            data['total_days'] = total_days;
            data['ot_hours'] = ot_hours;
            data['work_payment'] = work_payment;
            data['total_payment'] = total_payment;
            data['ot_payment'] = ot_payment;
            data['year'] = year;


            data['_token'] = "{{ csrf_token() }}";
            // Your logic to generate and download the payslip
            $.ajax({
                type: 'post',
                url: "download_salary_payslip",
                data: data,
                success: function(response) {
                    $("#pageloader").fadeOut();
                    // Check if response is an ArrayBuffer or binary string
                    var blob = new Blob([response], {
                        type: 'application/pdf'
                    });
                    var a = document.createElement('a');
                    var url = URL.createObjectURL(blob);
                    a.href = url;
                    a.download = 'payslip.pdf';
                    document.body.appendChild(a);
                    a.click();
                    document.body.removeChild(a);
                    URL.revokeObjectURL(url);
                },
                dataType: 'binary',
                xhrFields: {
                    responseType: 'blob' // Set the response type to blob
                },

                error: function(xhr, status, error) {
                    console.error('File download failed:', error);
                }
            });
        }


        function downloadAllPayship() {
            $("#pageloader").fadeIn();
            let data = {
                all_payslip: 1,
                from_date: $("#from_date").val(),
                to_date: $("#to_date").val(),
                user_name: $("#user_name").val(),
                report_type: $("#report_type").val()
            }
            data['_token'] = "{{ csrf_token() }}";
            // Your logic to generate and download the payslip
            $.ajax({
                type: 'post',
                url: "download_all_salary_payslip",
                data: data,
                success: function(response) {
                    $("#pageloader").fadeOut();
                    // Assuming 'response' is the server response (e.g., from an AJAX call)
                    if (response == 0) {
                        alert("No data found");
                    } else {
                            var blob = new Blob([response], { type: 'application/zip' });
                            var url = URL.createObjectURL(blob);
                            var a = document.createElement('a');
                            a.href = url;
                            a.download = 'salary_payslips.zip';
                            document.body.appendChild(a);
                            a.click();
                            document.body.removeChild(a);
                            URL.revokeObjectURL(url);

                        }

                },

                dataType: 'binary', // Ensure this is correct for your case. For binary files, blob is preferred.
                xhrFields: {
                    responseType: 'blob' // This ensures we get the response as a Blob (PDF or zip file)
                },

                error: function(xhr, status, error) {
                    console.error('File download failed:', error);
                }

            });

        }
    </script>
</body>

</html>