@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>
    .report-container{
        margin-top: -5px ;
    }

    /* Chrome, Safari, Edge, Opera */
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    #kst-card-container {
        padding: 0px !important;
        margin: 0px !important;
    }

    #kst-card-container .card {
        border: none !important;
        padding: 0px !important;
        margin: 0px !important;
    }

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

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

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

    }

    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: rgb(142, 26, 26);
        border-color: rgb(142, 26, 26);
    }


    .ui-datepicker {
        width: 265px;
        height: 265px;
        color: #963131;
        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;
    }




    .nav-link {
        color: #111;
    }

    .nav-link:hover {
        color: #ba434d;
    }

    .nav-tabs .nav-item.show .nav-link,
    .nav-tabs .nav-link.active {
        border-color: #ba434d;
        color: #ba434d;

    }

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

    }


    #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 #963131;
        /* 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: #963131;
        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: #963131;
        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: #963131;
        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;

    }



</style>

<body>
    <!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script> -->
    @include ('layouts.loader')

    <main id="body_main_container" class="body-main-container">
        <div id="body_container">
            <section class="section dashboard">
                <div class="row">

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

                        <div class="card" id="page_header_container">

                            <div class="card-body">

                                <div class="row container-element">

                                    <div class="col-md-5 pagetitle">
                                        <h5 style="font-weight: bold;" class="card-title"> Outlet Staff Report</h5>
                                    </div>
                                    <div class="col-md-1"></div>

                                    <div class="col-md-3 col-sm-12 ">
                                        <select class="selUser form-select" id="dept_id" name="dept_id" data-placeholder="Department" autocomplete="off" required="">
                                            <option value=""></option>
                                            <option value="0">All</option>

                                            @if ($dept !== 0 && !empty($dept))

                                            @foreach ($dept as $details)
                                            <option value="{{$details->id}}">{{$details->department}}</option>
                                            @endforeach
                                            @endif
                                        </select>

                                        <span id="error_location_ids"></span>
                                    </div>
                                    <div class="col-md-3 col-sm-12">
                                        <select class="selUser form-select" id="location_id" name="location_id" data-placeholder="Location" autocomplete="off" required="">


                                            @if ($location !== 0 && !empty($location))

                                            @foreach ($location as $location => $details)
                                            <option value="{{ $details['id'] }}">{{ $details['kitchen_name'] }}</option>
                                            @endforeach
                                            @endif
                                        </select>

                                        <span id="error_location_ids"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


                {{--
            <div class="card">
                <div style="height: fit-content;" class="card-body"> --}}
                <div class="col-lg-12" id="table-data2">
                    <div class="card p-0 report-container">
                        <div style="height: fit-content;" class="card-body" style="overflow-x:auto;">


                            <div id="kstDetails" class="detail-section">

                                <div class="row horizontal-scroll" id="all_kst_table">

                                    <div class="container" id="kst-card-container" style="overflow-x:auto">

                                    </div>

                                </div>
                            </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) {


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

            retrive_dashboard_data();

        });

        $('#location_id').on('change', function() {
            var selectedValue = $(this).val();
            // $('#location_id_hidden').val(selectedValue);
            if (selectedValue) {
                retrive_dashboard_data();
            }

        });


        $('#dept_id').on('change', function() {
            var selectedValue = $(this).val();
            // $('#location_id_hidden').val(selectedValue);
            if (selectedValue) {
                retrive_dashboard_data();
            }

        });


        function retrive_dashboard_data() {

            var data = {};

            var location_id = $('#location_id').val();
            var dept_id = $('#dept_id').val();

            data['location_id'] = $('#location_id').val();
            data['dept_id'] = $('#dept_id').val();

            if (location_id) {
                $("#pageloader").fadeIn();
                data['_token'] = "{{ csrf_token() }}";
                $.ajax({
                    type: 'GET',
                    url: 'retrive_outlet_staff_data',
                    data: data,
                    success: function(returndata) {
                        $("#pageloader").fadeOut();
                        var arr = jQuery.parseJSON(returndata);


                        kst_table(arr?.data);

                    }
                });

            }

        }




        function kst_table(arr) {
            var cardContainer = $('#kst-card-container');
            cardContainer.empty();

            $.each(arr, function(index, item) {
                var employeeRows = item.employees.length > 0 ?
                    item.employees.map(emp => {
                        var date_of_join = emp.doj;
                        if (date_of_join == 0) {
                            var monthsDiff = 0;
                            var bgClass = getBackgroundClass(monthsDiff);
                        } else {
                            var dojDate = new Date(date_of_join);
                            var monthsDiff = calculateMonthDifference(dojDate);
                            var bgClass = getBackgroundClass(monthsDiff);

                        }

                        return `
                    <tr>
                        <td>${emp.id}</td>
                        <td>${emp.name}</td>
                        <td>${emp.designation}</td>
                        <td>${emp.dept}</td>
                        <td id="${bgClass}">${formatDate(emp.doj)}</td>
                        <td><span id="salary_hidden_data_kst">${formatted_salary(emp.salary)}</span></td>
                    
                    </tr>
                `;
                    }).join('') :
                    '<tr><td colspan="5" class="text-center">No Data</td></tr>';

                var blankRows = '';
                if (item.ideal > item.current) {
                    var rowsToAdd = item.ideal - item.current;
                    blankRows = Array.from({
                        length: rowsToAdd
                    }).map(() => `
                <tr style="background-color: yellow;">
                    <td colspan="6"></td>
                    
                </tr>

            `).join('');
                }

                var cardHtml = `
            <div class="col-lg-12">
                <div class="card p-0">
                    <div class="card-body p-1">
                        <div class="row  justify-content-center">
                            <div class="card-body card-height">
                                <h5 style="color: #BA434D; padding-left: 2px;text-transform:capitalize" class="card-title">
                                    ${item.reference_location}
                                </h5>
                                <div class="scrollable-content">
                                    <table class="table table-bordered">
                                        <tr>
                                           
                                            <th>Ideal</th>
                                            <th>Current</th>
                                            <th>Diff</th>
                                            <th>Total Salary</th>
                                            <th>Per Salary</th>
                                            <th></th>
                                        </tr>
                                        <tr>
                                          
                                            <td style="background-color: #6d8acf ;">${item.ideal}</td>
                                            <td style="background-color: #4f8a8b;">${item.current}</td>
                                            <td style="background-color: ${item.diff < 0 ? '#5e503f' : item.diff > 0 ? 'red' : 'transparent'}">${item.diff}</td>
                                            <td><span id="salary_hidden_data_kst">${formatted_salary(item.totalSalary)}</span></td>
                                            <td><span id="salary_hidden_data_kst">${formatted_salary(item.perSalary)}</span></td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <th style="background-color: #D9D9D9;">Emp ID</th>
                                            <th style="background-color: #D9D9D9;">Name</th>
                                            <th style="background-color: #D9D9D9;">Designation</th>
                                             <th style="background-color: #D9D9D9;">Department</th>
                                            <th style="background-color: #D9D9D9;">DOJ</th>
                                            <th style="background-color: #D9D9D9;">Salary</th>
                                        </tr>
                                        ${employeeRows}
                                        ${blankRows}
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        `;

                cardContainer.append(cardHtml);
            });
        }

        function formatted_salary(data) {
            if (data == 0 || data == null) {
                return '';
            } else {

                return new Intl.NumberFormat('en-IN').format(data);

            }


        }





        function calculateMonthDifference(dojDate) {


            var today = new Date();
            var yearsDiff = today.getFullYear() - dojDate.getFullYear();
            var monthsDiff = today.getMonth() - dojDate.getMonth() + (yearsDiff * 12);
            return monthsDiff;

        }

        function getBackgroundClass(monthsDiff) {
            // console.log(monthsDiff);

            if (monthsDiff <= 6) {
                return 'white-bg';
            } else if (monthsDiff <= 12) {
                return 'pink-bg';
            } else if (monthsDiff <= 24) {
                return 'light-green-bg';
            } else {
                return 'dark-green-bg';
            }

        }


        function formatDate(dateText) {

            if (dateText != 0) {
                var parts = dateText.split('-');
                var formattedDate = parts[2] + '-' + get_months(parts[1]) + '-' + parts[0];
                return formattedDate;
            } else {
                return '';

            }
        }

        function get_months(monthName) {
            var months = {
                '01': 'Jan',
                '02': 'Feb',
                '03': 'Mar',
                '04': 'Apr',
                '05': 'May',
                '06': 'Jun',
                '07': 'Jul',
                '08': 'Aug',
                '09': 'Sep',
                '10': 'Oct',
                '11': 'Nov',
                '12': 'Dec'
            };
            return months[monthName];
        }
    </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>