@include('layouts.headElement')
@include('layouts.headerNormal')
@include('layouts.sidebarV2')
<!-- <link rel="stylesheet" type="text/css" href="{{asset('jquery.dataTables.min')}}" /> -->
<link
    href="https://cdn.jsdelivr.net/gh/priyashpatil/phone-input-by-country@0.0.1/cpi.css"
    rel="stylesheet"
    crossorigin="anonymous"
    referrerpolicy="no-referrer">
<!-- jQuery -->
<!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> -->
<!-- jQuery UI -->
<!-- <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"> -->



<!-- Include SweetAlert CDN -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>



<style>
    #table-data2 .card {
        margin: 5px -10px 0px 0px;
    }

    #table-data3 .card {
        margin: 5px -10px 0px 0px;

    }
    table{
        border-radius: 10px !important;
    }
    /* Chrome, Safari, Edge, Opera */
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    /* Firefox */
    input[type=number] {
        -moz-appearance: textfield;
    }

    #upload_name {
        margin-top: -8px;
    }

    span.select2-selection.select2-selection--multiple {
        height: auto !important;
        padding: 12px;

    }

    .error {
        color: red;
        font-size: 13px;
        font-weight: 600;
        /* margin-top: 45px; */
    }

    .dataTables_length,
    .dataTables_filter {
        display: block;
    }

    .filter {
        width: 51px;
    }

    tfoot {
        display: table-header-group !important;
    }

    .info {
        margin-bottom: 0rem !important;
        color: brown;
        font-size: 13px;
    }

    .info1 {
        color: brown;
        font-size: 16px;
        font-weight: bold;
    }

    .toggler {
        position: absolute;
        right: 29px;
        top: 45%;
        transform: translateY(-50%);
        cursor: pointer;
    }

    #toggler {
        position: absolute;
        right: 29px;
        top: 25%;
        transform: translateY(-50%);
        cursor: pointer;
    }

    #upload_name {
        margin-top: -8px;
    }

    @media only screen and (min-width: 200px) and (max-width: 767px) {
        .tbl-adjust {
            width: 150%;
        }

        ul.chosen-choices {
            height: 57px !important;
            width: 250px !important;
        }

        ul.chosen-results {
            height: 75px !important;
            width: 250px !important;
            overflow-y: scroll;
        }
    }


    .image-design {
        border: 1px solid;
        background: #fff;
        width: 100%;
        height: auto;
        padding: 1%;
    }

    .custom-maroon-btn {
        background-color: #ba434d;
        border-color: #ba434d;
    }


    .ui-datepicker {
        width: 265px;
        height: 265px;
        color: #ba434d;
        margin: 5px auto 0;
        font: 12pt Arial, sans-serif;
    }

    .ui-datepicker-header {
        background: #963131;
        color: #963131;
        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;
    }



    #profile_images img {

        /* width: 100%;
            height: 100%; */
        /* object-fit: cover; */
        position: absolute;
        top: 0;
        left: 0;
    }



    #profile_images {

        border: 1px solid #ba434d;
        border-radius: 10%;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        position: relative;
        width: 200px;
        height: 180px;
    }

    #profile_images_2 {
        border: 1px solid #ba434d;
        border-radius: 10%;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        position: relative;
        width: 200px;
        height: 180px;

    }


    #profile_images_2 img {

        /* width: 100%;
            height: 100%; */
        /* object-fit: cover; */
        position: absolute;
        top: 0;
        left: 0;
    }

    .buttons-center {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: space-evenly;
        align-items: center;
        column-gap: 2px;
    }

    .buttons-center2 {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: space-evenly;
        align-items: center;
        column-gap: 2px;

    }


    /* load page */


    #image_preview {
        width: 150px;
        height: 140px;
        /* border-radius: 50%; */
        border: 1px solid black;
        overflow: hidden;
        position: relative;
    }

    #image_preview img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
    }

    .required-symbol {
        /* display: none; */
        position: absolute;
        top: 0;
        right: 8px;
        color: red;
        font-size: 18px;

    }

    .country_code {
        position: relative;
    }

    .country_code .form-select {

        width: 200px;


    }

    .country_code .form-select {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1000;

        height: calc(100% - 2px);
        margin: 0;
        border-radius: .25rem 0 0 .25rem;
        border-right-color: transparent;
    }

    #country_code_text {
        padding-left: 30px;
    }


    .country_code {
        height: 50px;
    }

    input[name='employee_photo'] {
        color: transparent;
    }


    input[name='employee_photo']::before {
        font-size: 14px;
        /* content: 'Choose File'; */
        color: #000000;
        font-weight: bold;

    }

    .empty-border-bottom {
        border-bottom: 1px solid #ba434d;
        /* Adjust border width and color as needed */
    }


    #upload_bank_details {
        width: 300px;
        height: 100px;

        border: 1px solid black;
        overflow: hidden;
        margin: 10px;

    }


    .upload-file-button,
    .upload-file-button:focus {
        border: none !important;
        padding: 3px;
    }

    .upload-file-button::file-selector-button {
        background-color: #ba434d;
        color: white;
        border: none;
        padding: 9px;


    }

    #num .country_code {
        position: relative;
    }

    #num .country_code .form-select {

        width: 200px;


    }

    #num .country_code .form-select {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1000;
        width: auto;
        height: calc(100% - 2px);
        margin: 0;
        border-radius: .25rem 0 0 .25rem;
        border-right-color: transparent;
    }

    #country_code_text {
        padding-left: 30px;
    }



    #num .country_code {
        height: 40px !important;
    }

    #l1_separate {
        background-color: gray;
    }

    #l2_separate {
        background-color: yellowgreen;
    }


    #ex_img {
        width: 20px;
        float: right;
        margin-top: 67%;
        /* color: #303773 !important; */
    }

    .fa-file-excel:before {
        content: "\f1c3";
        display: none;
    }

    #btn_excel {

        float: right;
        padding-top: 20px;
        /* border: 20px; */
        background-color: white;
        color: #ba434d;
        display: block;

    }

    /* .fa,
    .fa-brands,
    .fa-duotone,
    .fa-light,
    .fa-regular,
    .fa-solid,
    .fa-thin,
    .fab,
    .fad,
    .fal,
    .far,
    .fas,
    .fat {
        float: right !important;
    } */

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

    }

    #btn_excel,
    #btn_excel_summary,
    #btn_excel3 {

        float: right;
        padding-top: 20px;
        /* border: 20px; */
        background-color: white;
        color: #ba434d;
        display: block;

    }

    /* summary table search */
    .dataTables_wrapper .dataTables_filter {

        text-align: right;
        display: none;
    }

    /* ideal total count rows */
    .dataTables_wrapper .dataTables_info {
        clear: both;
        float: left;
        padding-top: .755em;
        display: none;
    }

    /* previous next for ideal table report */
    .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
    .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
    .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
        cursor: default;
        color: #666 !important;
        border: 1px solid transparent;
        background: transparent;
        box-shadow: none;
        display: none;
    }

    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_processing,
    .dataTables_wrapper .dataTables_paginate {
        color: #333;
        display: none;
    }




    #data-table,
    #data-table th,
    #data-table td {
        border: 1px solid #cbc4c4;
        border-collapse: collapse;
    }

    #data-table-salary-report,
    #data-table-salary-report th,
    #data-table-salary-report td {
        border: 1px solid #cbc4c4;
        border-collapse: collapse;

    }

    #data-table-summary,
    #data-table-summary th,
    #data-table-summary td {
        border: 1px solid #cbc4c4;
        border-collapse: collapse;

    }

    #table_idal_current_diff_count2,
    #table_idal_current_diff_count2 th,
    #table_idal_current_diff_count2 td {
        border: 1px solid #cbc4c4;
        border-collapse: collapse;

    }

    @media screen and (max-width:768px) {
        #table-data2 .card {
            margin: 5px -5px 0px 0px;
        }

        #table-data3 .card {
            margin: 5px -5px 0px 0px;

        }

    }
</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">Ideal & Current Staff Report</h5>
                        </div>

                    </div>
                </div>
            </div>
            <section class="section dashboard">

                {{-- <div class="card">
                <div class="card-body"> --}}
                <div class="col-lg-12" id="table-data2">
                    <div class="card">
                        <div class="card-body" style="overflow-x:auto;">

                            <div style="display: flex; justify-content: space-between;">
                                <h5 class="card-title"></h5>



                            </div>
                            <table id="data-table" class='display dataTable' style="width:100%;text-align: center;font-size:12px">

                                <thead>
                                </thead>
                                <tbody>
                                </tbody>

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






                <div class="col-lg-12" id="table-data3">
                    <div class="card">
                        <div class="card-body" style="overflow-x:auto;">

                            <div style="display: flex; justify-content: space-between;">
                                <h5 class="card-title">Salary Report</h5>
                                <span id="btn_excel3">

                                </span>

                            </div>
                            <table id="salary-data-table-except_TPB-PP" class='display dataTable' style="width:100%;text-align: center;font-size:12px">
                                <thead>

                                </thead>
                                <tbody>


                                </tbody>

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





                <div class="col-lg-12" id="table-data2">
                    <div class="card">
                        <div class="card-body" style="overflow-x:auto;">

                            <div style="display: flex; justify-content: space-between;">
                                <h5 class="card-title">Summary</h5>
                                <span id="btn_excel_summary">

                                </span>

                            </div>
                            <table id="data-table-summary" class='display dataTable' style="width:100%;text-align: center;font-size:12px">
                                <thead>
                                    <tr>
                                        <th>Department</th>
                                        <th>Nos</th>
                                        <th>Salary</th>

                                    </tr>

                                </thead>
                                <tbody>

                                </tbody>

                            </table>
                        </div>
                    </div>
                </div>
                {{--
                </div>
            </div> --}}
        </div>


        </section>
        </div>
    </main>


    @include('layouts.footer');
    <!-- <link rel="stylesheet" href="//cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css"> -->
    <!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> -->
    <script
        src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"
        integrity="sha512-rstIgDs0xPgmG6RX1Aba4KV5cWJbAMcvRCVmglpam9SoHZiUCyQVDdH2LPlxoHtrv17XWblE/V/PP+Tr04hbtA=="
        crossorigin="anonymous"
        referrerpolicy="no-referrer"></script>
    <script src="//cdn.datatables.net/1.12.1/js/jquery.dataTables.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.jsdelivr.net/gh/priyashpatil/phone-input-by-country@0.0.1/cpi.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src='assets/vendor/excel_datatable/buttons.html5.min.js'></script>
    <script src='assets/vendor/excel_datatable/dataTables.buttons.min.js'></script>
    <script>
        var data = {};
        var arr = {};
        data['_token'] = "{{csrf_token()}}";
        arr['_token'] = "{{csrf_token()}}";

        $('.category_table').hide();

        $(document).ready(function(e) {


            load_summary_table();
            retrive_departments();
            salary_retrive_departments();



        });



        function load_summary_table() {
            var collapsedGroups = {};
            $('#data-table-summary').DataTable().destroy();
            var table = $('#data-table-summary').DataTable({
                "autoWidth": true,
                "ordering": true,
                "bPaginate": false,
                "pageLength": 20,
                "order": [0, 'asc'],
                // dom: 'lBfrtip',
                "ajax": {
                    url: "get_hr_tool_summary_data", // Ajax request
                    type: "get",
                    data: data,

                },

                "columns": [

                    {
                        "data": "department",
                        "title": "Department"
                    },
                    {
                        "data": "employee_count",
                        "title": "Nos"
                    },
                    {
                        "data": 'total_salary',
                        "title": "Salary",
                        "render": function(data, type, row) {
                            return formatSalary(data);
                        }
                    },


                ],

                columnDefs: [{
                        "width": "10%",
                        "targets": [0],
                        "orderable": false,
                        "className": "dt-center",
                        "searching": false
                    },
                    {
                        "width": "10%",
                        "targets": [1],
                        "className": "dt-center"
                    },
                    {
                        "width": "10%",
                        "targets": [2],
                        "className": "dt-center"
                    },

                ],

                initComplete: function() {
                    $("#pageloader").fadeOut();

                }
            });

        }

        function formatSalary(data) {
            return new Intl.NumberFormat('en-IN').format(data);
        }


        // function retrive_departments(){

        //     $("#pageloader").fadeIn();
        //     data['_token'] = "{{ csrf_token() }}";
        //     $.ajax({
        //         type: 'post',
        //         url: 'retrive_dept_for_ideal_staff_report',
        //         data: data,

        //         success: function (returndata) {
        //             $("#pageloader").fadeOut();
        //             var data = jQuery.parseJSON(returndata);
        //             var department = data.dept;
        //             var location = data.location;

        //             var headerRow1 = '<tr><th rowspan="2">Location</th>'; 
        //             var headerRow2 = '<tr>'; 

        //             // Loop through departments and create columns dynamically
        //             department.forEach(dept => {
        //                 headerRow1 += `<th style="background-color: #c2e5f3; text-align:center" colspan="3" id="${dept.id}">${dept.department}</th>`;
        //                 headerRow2 += `
        //                     <th style="background-color: #F2F2F2;" id="ideal_dept_${dept.id}">IDL</th>
        //                     <th style="background-color: #F2F2F2;" id="current_dept_${dept.id}">CNT</th>
        //                     <th style="background-color: #F2F2F2;" id="diff_dept_${dept.id}">DIFF</th>
        //                 `;
        //             });

        //             headerRow1 += `<th style="background-color: #FDE9D9; text-align:center" colspan="3">TOTAL</th>`;
        //             headerRow2 += `
        //                 <th style="background-color: #FDE9D9; color: red;" id="total_idl">IDL</th>
        //                 <th style="background-color: #FDE9D9; color: red;" id="total_cnt">CNT</th>
        //                 <th style="background-color: #FDE9D9; color: red;" id="total_diff">DIFF</th>
        //             `;

        //             headerRow1 += '</tr>';
        //             headerRow2 += '</tr>';


        //             $('#data-table thead').html(headerRow1 + headerRow2);


        //             if (location) {
        //                 let bodyContent = '';
        //                 location.forEach(loc => {

        //                     bodyContent += `<tr id="loc_${loc.id}"><td>${loc.location}</td>`;

        //                     department.forEach(dept => {
        //                         bodyContent += `
        //                             <td class="idl_loc_${loc.id}_${dept.id}"></td>
        //                             <td class="cnt_loc_${loc.id}_${dept.id}"></td>
        //                             <td class="diff_loc_${loc.id}_${dept.id}"></td>
        //                         `;
        //                     });


        //                     bodyContent += `
        //                         <td class="total_idl_loc_${loc.id}"></td>
        //                         <td class="total_cnt_loc_${loc.id}"></td>
        //                         <td class="total_diff_loc_${loc.id}"></td>
        //                     `;

        //                     // Close the row
        //                     bodyContent += `</tr>`;
        //                 });

        //                 // Append the constructed rows to the table body
        //                 $('#data-table tbody').html(bodyContent);
        //             }

        //             master_dashboard();

        //         },


        //     });

        // }



        function retrive_departments() {

            $("#pageloader").fadeIn();
            data['_token'] = "{{ csrf_token() }}";
            $.ajax({
                type: 'post',
                url: 'retrive_dept_for_ideal_staff_report',
                data: data,

                success: function(returndata) {
                    $("#pageloader").fadeOut();

                    var data = jQuery.parseJSON(returndata);
                    var department = data.dept;
                    var location = data.location;

                    var headerRow1 = '<tr><th rowspan="2" style="text-align: center;">Location</th>';
                    var headerRow2 = '<tr>';

                    // Loop through departments and create columns dynamically
                    department.forEach(dept => {
                        headerRow1 += `<th style="background-color: #c2e5f3; text-align:center" colspan="3" id="${dept.id}">${dept.department}</th>`;
                        headerRow2 += `
                            <th style="background-color: #F2F2F2;" id="ideal_dept_${dept.id}">IDL</th>
                            <th style="background-color: #F2F2F2;" id="current_dept_${dept.id}">CNT</th>
                            <th style="background-color: #F2F2F2;" id="diff_dept_${dept.id}">DIFF</th>
                        `;
                    });

                    headerRow1 += `<th style="background-color: #FDE9D9; text-align:center" colspan="3">TOTAL</th>`;
                    headerRow2 += `
                        <th style="background-color: #FDE9D9; color: red;" id="total_idl">IDL</th>
                        <th style="background-color: #FDE9D9; color: red;" id="total_cnt">CNT</th>
                        <th style="background-color: #FDE9D9; color: red;" id="total_diff">DIFF</th>
                    `;

                    headerRow1 += '</tr>';
                    headerRow2 += '</tr>';

                    $('#data-table thead').html(headerRow1 + headerRow2);

                    let bodyContent = '';


                    location.forEach(loc => {
                        bodyContent += `<tr id="loc_${loc.id}"><td class="loc_except_div">${loc.kitchen_name}</td>`;


                        department.forEach(dept => {

                            let idl = 0;
                            let cnt = 0;
                            let diff = 0;


                            bodyContent += `
                                <td class="idl_loc_${loc.id}_${dept.id}">${idl}</td>
                                <td class="cnt_loc_${loc.id}_${dept.id}">${cnt}</td>
                                <td class="diff_loc_${loc.id}_${dept.id}">${diff}</td>
                            `;
                        });

                        bodyContent += `
                            <td style="background-color: #FDE9D9;" class="total_idl_loc_${loc.id}"></td>
                            <td style="background-color: #FDE9D9;" class="total_cnt_loc_${loc.id}"></td>
                            <td style="background-color: #FDE9D9;" class="total_diff_loc_${loc.id}"></td>
                        </tr>`;
                    });


                    bodyContent += `<tr id="total_row">
                        <td style="text-align:center; font-weight: bold;background-color: #FDE9D9;">TOTAL</td>`;

                    department.forEach(dept => {
                        bodyContent += `
                            <td style="background-color: #FDE9D9;" class="row_total_ideal_${dept.id}"></td>
                            <td style="background-color: #FDE9D9;" class="row_total_current_${dept.id}"></td>
                            <td style="background-color: #FDE9D9;" class="row_total_difference_${dept.id}"></td>
                        `;
                    });

                    bodyContent += `
                        <td style="background-color: #FDE9D9;" class="grand_total_ideal"></td>
                        <td style="background-color: #FDE9D9;" class="grand_total_current"></td>
                        <td style="background-color: #FDE9D9;" class="grand_total_diff"></td>
                    </tr>`;

                    // Add body content to the table
                    $('#data-table tbody').html(bodyContent);

                    // Apply border styles to the table
                    $('#data-table, #data-table th, #data-table td').css({
                        'border': '1px solid #cbc4c4',
                        'border-collapse': 'collapse'
                    });

                    // After all the data is displayed, you can call retrive_departments_expect_tpb_pp() to calculate and update the totals
                    // retrive_departments_expect_tpb_pp();


                    master_dashboard();


                },


            });

        }



        function master_dashboard() {
            $("#pageloader").fadeIn();
            data['_token'] = "{{ csrf_token() }}";
            $.ajax({
                type: 'post',
                url: 'retrive_ideal_current_diff_dashboard',
                data: data,
                success: function(returndata) {
                    $("#pageloader").fadeOut();
                    var data = jQuery.parseJSON(returndata);

                    data.forEach(location => {
                        const rowSelector = `#loc_${location.location_id}`;
                        const idealSelector = `${location.ideal_type}`;
                        const currentSelector = `${location.current_type}`;
                        const diffSelector = `${location.diff_type}`;

                        // console.log(location);
                        // console.log(location['ideal_type']);
                        $(`.${location['ideal_type']}`).text(location['ideal_count']) // .idl_loc_1_1
                        $(`.${location['current_type']}`).text(location['current_count']) // .idl_loc_1_1
                        $(`.${location['diff_type']}`).text(location['difference']) // .idl_loc_1_1
                        if (location['difference'] === 0) {
                            $(`.${location['diff_type']}`).css('color', 'rgb(233, 236, 239)');
                        } else if (location['difference'] < 0) {
                            $(`.${location['diff_type']}`).css('color', 'rgb(255, 0, 0)');
                        } else {
                            $(`.${location['diff_type']}`).css('color', 'rgb(0, 0, 255)');
                        }


                    });



                }
            });
        }




        function salary_retrive_departments() {

            $("#pageloader").fadeIn();
            data['_token'] = "{{ csrf_token() }}";
            $.ajax({
                type: 'post',
                url: 'retrive_dept_for_ideal_staff_report',
                data: data,

                success: function(returndata) {
                    $("#pageloader").fadeOut();

                    var data = jQuery.parseJSON(returndata);
                    var department = data.dept;
                    var location = data.location;

                    var headerRow1 = '<tr><th rowspan="2" style="text-align: center;">Location</th>';
                    var headerRow2 = '<tr>';

                    // Loop through departments and create columns dynamically
                    department.forEach(dept => {
                        headerRow1 += `<th style="background-color: #FDE9D9; text-align:center" colspan="2" id="${dept.id}">${dept.department}</th>`;
                        headerRow2 += `
                        
                            <th style="background-color: #CCC0DA;" id="current_dept_${dept.id}">Nos</th>
                            <th style="background-color: #CCC0DA;" id="sal_dept_${dept.id}">Salary</th>
                        `;
                    });

                    headerRow1 += `<th style="background-color: #FDE9D9; text-align:center" colspan="2">TOTAL</th>`;
                    headerRow2 += `
            
                        <th style="background-color: #FDE9D9; color: red;" id="total_cnt">Nos</th>
                        <th style="background-color: #FDE9D9; color: red;" id="total_diff">Salary</th>
                    `;

                    headerRow1 += '</tr>';
                    headerRow2 += '</tr>';

                    $('#salary-data-table-except_TPB-PP thead').html(headerRow1 + headerRow2);

                    let bodyContent = '';


                    location.forEach(loc => {
                        bodyContent += `<tr id="loc_${loc.id}"><td class="loc_except_div">${loc.kitchen_name}</td>`;


                        department.forEach(dept => {


                            let cnt = 0;
                            let diff = 0;


                            bodyContent += `
                        
                                <td class="cnt_loc_${loc.id}_${dept.id}">${cnt}</td>
                                <td class="sal_loc_${loc.id}_${dept.id}">${diff}</td>
                            `;
                        });

                        bodyContent += `
                    
                            <td style="background-color: #FDE9D9;" class="total_cnt_loc_${loc.id}"></td>
                            <td style="background-color: #FDE9D9;" class="sal_total_loc_${loc.id}"></td>
                        </tr>`;
                    });


                    bodyContent += `<tr id="total_row">
                        <td style="text-align:center; font-weight: bold;background-color:#dda15e;color:#f2e2d2">TOTAL</td>`;

                    department.forEach(dept => {
                        bodyContent += `
                
                            <td style="background-color:#dda15e;color:#f2e2d2" class="row_total_current_${dept.id}"></td>
                            <td style="background-color:#dda15e;color:#f2e2d2" class="sal_row_total_${dept.id}"></td>
                        `;
                    });

                    bodyContent += `
                
                        <td style="background-color:#dda15e;color:#f2e2d2" class="grand_total_current"></td>
                        <td style="background-color: #dda15e;color:#f2e2d2" class="grand_total_sal"></td>
                    </tr>`;

                    // Add body content to the table
                    $('#salary-data-table-except_TPB-PP tbody').html(bodyContent);

                    // Apply border styles to the table
                    $('#salary-data-table-except_TPB-PP, #salary-data-table-except_TPB-PP th, #salary-data-table-except_TPB-PP td').css({
                        'border': '1px solid #cbc4c4',
                        'border-collapse': 'collapse'
                    });


                    retrive_salary_departments_expect_tpb_pp();


                },


            });

        }


        function retrive_salary_departments_expect_tpb_pp() {
            $("#pageloader").fadeIn();
            data['_token'] = "{{ csrf_token() }}";
            $.ajax({
                type: 'post',
                url: 'retrive_ideal_current_diff_dashboard',
                data: data,
                success: function(returndata) {
                    $("#pageloader").fadeOut();
                    var data = jQuery.parseJSON(returndata);

                    data.forEach(location => {
                        const rowSelector = `#loc_${location.location_id}`;
                        const idealSelector = `${location.ideal_type}`;
                        const currentSelector = `${location.current_type}`;
                        const diffSelector = `${location.diff_type}`;

                        function formatted_salary(data) {
                            return new Intl.NumberFormat('en-IN').format(data);
                        }

                        $(`.${location['current_type']}`).text(location['current_count'])
                        $(`.${location['sal_type']}`).text(formatted_salary(location['total_salary']));


                    });



                }
            });
        }
    </script>
    <!--  -->
    <link rel="stylesheet" href="https://harvesthq.github.io/chosen/chosen.css">
    <script src="//harvesthq.github.io/chosen/chos`en.jquery.js"></script>
</body>

</html>