@include('layouts.header');
@include('layouts.sidebar');
<!-- <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>


      /* 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;
        }

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



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

        }


        /* load page */

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


        }

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


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

        #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.head')

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



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


        <section class="section dashboard">


            <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-5 pagetitle" style="margin-top: 28px;">
                                    <h1 style="font-weight: bold;"> Outlet Staff Report</h1>
                                </div>  
                                <div class="col-md-1"></div>  

                                <div class="col-md-3 col-sm-12 p-3">
                                    <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 p-3">
                                    <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">
                            <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">
                                          
                                        </div>
                                       
                                    </div>
                                </div>

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


          

        </section>

    </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">
                    <div class="card-body">
                        <div class="row pt-3 justify-content-center">
                            <div class="card-body card-height">
                                <h5 style="color: #BA434D; padding-left: 2px;" 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: palevioletred;">${item.ideal}</td>
                                            <td style="background-color: #90EE90;">${item.current}</td>
                                            <td style="background-color: ${item.diff < 0 ? 'yellow' : 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>