@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>
    .form-container {
        margin-right: -10px !important;
        margin-top: -3px;
    }
    .report-container{
        margin-right: -12px !important ;
        margin-top:-13px !important;
    }

    .heading {
        text-align: center;
        padding-top: 10px;
    }

    .kitchen_heading {
        text-align: center;
        /* margin-bottom: -51px; */
    }

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

    }

    .select2-container .select2-selection {
        min-height: 58px;
    }

    .graphchart {
        display: none;
    }

    #myChart {
        position: relative;
        z-index: 10;
    }

    .heading {
        margin-right: -12px;
    }

    .rangeData {
        margin-top: 14px;
        margin-bottom: 14px;
    }


    #xxx:hover {
        /* background-color: red; */
        /* box-shadow: wheat 0px 10 px 10px; */
        box-shadow: -2px 2px red;
    }

    #shape {
        position: absolute;
        height: 55px;
        width: 55px;
        background: #f1977f;
        border-radius: 50%;
        z-index: 10;
        margin-left: 71%;
        margin-top: -28px;
    }

    #rect {
        position: absolute;
        height: 31px;
        width: 213px;
        z-index: 10;
        background: #f1977f;
        border-radius: 5px;
        margin-left: 57%;
        margin-top: -14px;
    }

    .shadowx:hover {
        transform: translate(0, 0);
        clip-path:
            polygon(0% var(--d),
                var(--d) 0%,
                100% 0%,
                100% calc(100% - var(--d)),
                calc(100% - var(--d)) 100%,
                0% 100%);
    }

    .xxd:hover {
        background: #f2e2d2;
        border-radius: 10px;
        box-shadow: 8px 8px 1px #00000013;
        transition: 0.4s;
        /* margin-left: 10px; */
    }

    .height-adjust {
        height: 60px;
        border-radius: 10px;
    }

    .ps-1,
    .ps-2,
    .ps-3,
    .ps-4,
    .ps-5,
    .ps-6,
    .ps-7,
    .ps-8 {
        padding-left: 1rem !important;
        font-weight: 600;
        font-size: 25px;
        color: #0d0170;
    }



    .apexcharts-toolbar {
        display: none;
    }

    .card-height {
        min-height: 200px;
    }

    .pie-title {
        margin-bottom: 2%;
        margin-top: 1%;
        color: #ba434d;
        text-align: center;
        font-size: 24px;
    }

    .box-adjust {
        width: 100%;
        display: flex;
        flex-direction: column;
        background: #fff;
        cursor: pointer;
        padding: 5px 10px;
        border: 1px solid #ccc;
        margin-bottom: 10px;

    }

    @media screen and (max-width: 500px) {


        .card-height {
            min-height: 200px;
        }

    }

    @media screen and (max-width: 600px) {

        #ex_img {
            padding: 20px;
            width: 71px;
            float: right;
            margin-left: 244px !important;
            margin-top: -18%;
        }


    }



    .horizontal-scroll {
        overflow-x: auto;
        white-space: nowrap;
    }

    .container {
        display: flex;
        flex-wrap: nowrap;


    }

    .card {
        margin-right: 10px;

    }

    #ex_img {
        padding: 20px;
        width: 71px;
        float: right;
        margin-left: 400px;

    }

    #white-bg {
        background-color: white !important;
        color: black;
    }

    #pink-bg {
        background-color: rgb(230, 182, 92) !important;
        color: black;
    }

    #light-green-bg {
        background-color: lightgreen !important;
        color: black;
    }

    #dark-green-bg {
        background-color: darkgreen !important;
        color: black;

    }

    #text_color {
        color: #ba434d;
    }

    #tpb-text_color,
    #pp-text_color,
    #ck-text_color,
    #foh-text_color {
        color: #ba434d;

    }

    #service_text_color_tpb,
    #service_text_color_pp,
    #service_text_color_ck,
    #service_text_color_foh {
        color: #ba434d;

    }

    .table-bordered>:not(caption)>*>* {
        border-width: 0 0;
        border: 1px solid #f2e2d2;
        text-align: center;

    }



    @media (prefers-reduced-motion: reduce) {
        .form-select {
            transition: none;
            font-size: 13px;
        }
    }

    .text-color {
        /* color: black; */
        text-align: center;
    }

    #ideal,
    #current,
    #gap {
        color: black;
        font-weight: bold;
        text-align: center;

    }

    span.select2-selection.select2-selection--single {
        height: 45px !important;

    }

    .card {
        margin-bottom: 15px;
        border: none;
        border-radius: 5px;
        box-shadow: 0px 0 30px rgba(1, 41, 112, 0.1);
        overflow: hidden;
    }

    #text-head {

        font-size: 18px;
        margin: 10px;
        color: #963131;
        font-weight: 600;
        padding: 10px;
    }

    .height-adjust {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: 60px;
        /* Adjust based on your content */
    }

    .text11 {
        margin-top: 22px;
    }

    @media screen and (max-width:768px) {
        .form-container {
            margin-right: -5px !important;
            margin-top: 2px;
        }



    }
</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 container-element">
                        {{-- Ideal Staff configuration --}}
                        <div class="col-md-7 pagetitle" style="display: flex; justify-content:start !important; align-items:center">
                            <h5 class="card-title">Ideal Staff Registration</h5>
                        </div>


                        <div class="col-md-2"></div>
                        <div class="col-md-3 col-sm-12">
                            <input type="hidden" id="location_id_hidden" name="location_id_hidden" value="">
                            <select class="selUser form-select" id="location_id_master" name="location_id_master" data-placeholder="Location" autocomplete="off" required="">
                                {{-- <option value=""></option>
                                        <option value="0">All</option> --}}

                                {{--
                                        @foreach ($location as $details)
                                        <option value="{{ $details->id }}">{{ $details->kitchen_name }}</option>
                                @endforeach --}}

                                @if ($location !== 0 && !empty($location))
                                @foreach ($location as $locationKey => $details)
                                <option value="{{ $details['id'] }}">{{ $details['kitchen_name'] }}</option>
                                @endforeach
                                @endif
                            </select>
                            <span id="error_location_ids"></span>
                        </div>
                    </div>
                </div>
            </div>

            <section class="section dashboard ">
                <div class="card ideal-container form-container ">
                    <div class="card-body">
                        <div class="row justify-content-center">

                            <div class="col-12 ">
                                {{-- <h3 class="card-title" style="color: #ba434d;">Ideal Dashboard</h3> --}}
                            </div>

                            <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12">
                                <div class="card xxd sales-card" data-target="#serviceDetails" id="service_table" style="background: #c77dff; border: 1px solid #c77dff; color:#3e3e3e !important; border-radius:10px !important">
                                    <div class="card-body height-adjust">
                                        <h6 class="card-title text-center text11" style="color:#3e3e3e">Ideal <br>
                                            <span style="font-size: 14px;" class="text-color" id="ideal"></span>
                                        </h6>
                                    </div>
                                </div>
                            </div>

                            <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12">
                                <div class="card xxd sales-card" data-target="#kitchenDetails" id="kitchen_table" style="background: #d9a441; border: 1px solid #d9a441; color:#3e3e3e !important;border-radius:10px !important">
                                    <div class="card-body height-adjust">
                                        <h6 class="card-title text-center text11" style="color:#3e3e3e">Current <br>
                                            <span style=" font-size: 14px;" class="text-color" id="current"></span>
                                        </h6>
                                    </div>
                                </div>
                            </div>

                            <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12">
                                <div class="card xxd sales-card" data-target="#kstDetails" id="kst_table" style="background: #ba434d; border: 1px solid #ba434d; color:#3e3e3e !important;border-radius:10px !important">
                                    <div class="card-body height-adjust">
                                        <h6 class="card-title text-center text11" style="color:#3e3e3e">Gap <br>
                                            <span style=" font-size: 14px;" class="text-color" id="gap"></span>
                                        </h6>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="card p-0 m-0 report-container" style="overflow: auto;">
                    <div style="height: fit-content;" class="card-body p-1" style="overflow-x:auto;">
                        <div id="serviceDetails" class="detail-section">
                            <div class="row" id="dashboard_excel">
                                <div class="col-md-3 pagetitle">

                                </div>
                                <div class="col-md-3">
                                </div>

                            </div>
                            <div class="row" id="all_service_table">

                                <div class="container" id="tpb-card-container">

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

                {{-- <div class="card-container">
                <div class="">

                </div>>
            </div> --}}
            </section>
        </div>
    </main><!-- End #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();

            update_hidden_location();

        });



        function update_hidden_location() {
            var selectedLocation = document.getElementById('location_id_master').value;
            document.getElementById('location_id_hidden').value = selectedLocation;
        }

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





        function retrive_dashboard_data() {

            var data = {};
            var location_name = $('#location_id_master option:selected').text();
            var selected_id = $('#location_id_master').val();
            // console.log(selectedText);  
            if (selected_id) {
                $("#pageloader").fadeIn();

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


                        if (arr != 0) {
                            services_table(location, designation, department);

                        } else {
                            alert('No data Found');
                            $('#service_text_color_tpb').html('');

                        }

                    }
                });
            }
        }


        function services_table(locations, designation, departments) {
            var card_container = $('#tpb-card-container');
            card_container.empty();

            function generateSelectOptions(designation) {
                let options = '<option value="">Add Designation</option>';
                $.each(designation, function(key, val) {
                    options += `<option value="${val.id}">${val.designation}</option>`;
                });
                return options;
            }


            function generateCardHtml(location, designationOptions, departments) {

                let tableHeader = '';
                let selectCells = '';
                let rowContent = '';
                $.each(departments, function(index, department) {
                    let departmentColor = index % 2 === 0 ? '#E6B8B7' : '#B8CCE4';
                    tableHeader += `<th style="background-color: ${departmentColor};">${department.department} <input type="hidden" id="department_${department.id}" value="${department.id}"></th>`;
                    selectCells += `<th><select class="form-select select-cell" id="department_${department.id}_${location.id}">
                                    ${designationOptions}
                                </select></th>`;
                    rowContent += `<td class="department_${department.id}_${location.id}"></td>`;
                });



                return `
                <div class="col-lg-12">
                    <div class="card p-0">
                        <div style="height: fit-content;" class="card-body">
                            <div class="row justify-content-center">
                                <div style="height: fit-content;" class="card-body card-height">
                                    <div class="scrollable-content" style="overflow-x: auto;">
                                        <table class="table table-bordered" style="border: 1px solid black;width:100%;">
                                            <thead>
                                                <tr>
                                                    <th style="background-color: #FDE9D9" colspan="${departments.length}">
                                                        ${location.location}
                                                        <input type="hidden" id="location_${location.id}" value="${location.id}">
                                                    </th>
                                                </tr>
                                                <tr id="ideal_${location.id}" style="color:red;font-weight:900">
                                                     ${rowContent}
                                                </tr>
                                                <tr id="current_${location.id}" style="color:green;font-weight:900">
                                                    ${rowContent}
                                                </tr>
                                                <tr id="difference_${location.id}" style="color:black;font-weight:900">
                                                     ${rowContent}
                                                </tr>
                                                <tr>
                                                    ${tableHeader}
                                                </tr>
                                                <tr>
                                                    ${selectCells}
                                                </tr>
                                            </thead>
                                            <tbody id="tbody_${location.id}">
                                                <!-- Rows generated by update_selection_box will go here -->
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            `;
            }

            var designationOptions = generateSelectOptions(designation);

            $.each(locations, function(id, location) {
                var cardHtml = generateCardHtml(location, designationOptions, departments);
                card_container.append(cardHtml);
            });




            $('.form-select').on('change', function() {
                var selectId = $(this).attr('id'); // Get selected element id
                console.log("Select ID:", selectId);

                var parts = selectId.split('_');
                var departmentId = parts[1];
                var locationId = parts[2];
                var selectedDesignationId = $(this).val();
                console.log("Selected Designation ID:", selectedDesignationId);
                console.log("Department ID:", departmentId);
                console.log("Location ID:", locationId);

                if (locationId != 'master') {



                    var data = {
                        'location_id': locationId,
                        'designation_id': selectedDesignationId,
                        'department_id': departmentId,
                        'column_type': selectId,
                        '_token': "{{ csrf_token() }}"
                    };

                    $.ajax({
                        url: 'insert_ideal_report_data',
                        type: 'POST',
                        data: data,
                        success: function(response) {
                            var response = jQuery.parseJSON(response);
                            if (response.arr === "inserted") {
                                retrive_ideal_datas();
                                $(`#${selectId}`).val('');
                            }
                        },
                        error: function(error) {
                            console.error('Error sending data:', error);
                        }
                    });

                }


            });



            function retrive_ideal_datas() {
                var data = {};
                var location = $('#location_id_master').val();
                if (location) {

                    data['location_id'] = location

                    data['_token'] = "{{ csrf_token() }}";
                    $.ajax({
                        url: 'retrive_ideal_data',
                        type: 'POST',
                        data: data,
                        success: function(response) {
                            var response = jQuery.parseJSON(response);
                            var location = response.location
                            var ideal = response.ideal
                            var department = response.department
                            // console.log(response);
                            // return;
                            if (Array.isArray(ideal)) {
                                update_selection_box(ideal, departments, locations);
                                retrive_current_and_ideal();

                            }
                        },
                        error: function(error) {
                            console.error('Error retrieving data:', error);
                        }
                    });
                }
            }

            function update_selection_box(data, departments, locations) {
                // Clear the table body for each location
                $.each(locations, function(locationIndex, location) {
                    let tbody = $(`#tbody_${location.id}`);
                    tbody.empty(); // Clear existing rows for the location

                    // Prepare to create rows for each location
                    let rows = [];

                    // Organize data for each department and location
                    $.each(data, function(index, item) {
                        if (item.location_id == location.id) { // Only consider data for this location
                            let departmentId = item.department_id;
                            let columnType = item.column_type;
                            let designationId = item.designation_id;
                            let id = item.id;

                            // Ensure we have an array for the department column
                            if (!rows[departmentId]) {
                                rows[departmentId] = [];
                            }

                            // Generate select HTML for the current item
                            let selectHtml = generateSelectHtml(designationId, location.id, columnType, id);
                            rows[departmentId].push(selectHtml);
                        }
                    });

                    // Create rows by iterating through each department
                    let maxRows = Math.max(...Object.values(rows).map(row => row.length)); // Find the maximum row count

                    // Create a row for each location
                    for (let i = 0; i < maxRows; i++) {
                        let rowHtml = '<tr>'; // Start a new row

                        // Loop through each department and append data in the respective column
                        $.each(departments, function(departmentIndex, department) {
                            let departmentColumnId = `department_${department.id}_${location.id}`;
                            let columnData = rows[department.id] && rows[department.id][i] ? rows[department.id][i] : '';

                            // Add a cell for the department
                            rowHtml += `<td id="${departmentColumnId}">
                                            ${columnData}
                                        </td>`;
                        });

                        rowHtml += '</tr>'; // End the row
                        tbody.append(rowHtml); // Append the row to the table body
                    }
                });
            }

            function generateSelectHtml(designationId, locationId, columnType, id) {
                let options = generateSelectOptionsFromRetrievedData(designationId);

                return `
                    <div class="select-container" style="display: flex; align-items: center;">
                        <select style="background-color:#F2F2F2;" class="form-select select-cell" id="department_${id}_${locationId}" 
                                onchange="update_row(${locationId}, '${columnType}', ${id}, this)">
                            ${options}
                        </select>
                        <button class="btn btn-danger btn-sm" style="margin-left: 10px;" 
                                onclick="delete_row(${locationId}, '${columnType}', ${id})">X</button>
                    </div>
                `;
            }

            function generateSelectOptionsFromRetrievedData(designationId) {
                let options = '<option value="">Add Designation</option>';
                $.each(designation, function(key, val) {
                    const selected = (val.id === designationId) ? 'selected' : '';
                    options += `<option value="${val.id}" ${selected}>${val.designation}</option>`;
                });
                return options;
            }



            window.delete_row = function(locationId, columnType, id) {
                var data = {
                    'location_id': locationId,
                    'column_type': columnType,
                    'id': id,
                    '_token': "{{ csrf_token() }}"
                };

                $.ajax({
                    url: 'delete_ideal_report_data_dashboard',
                    type: 'POST',
                    data: data,
                    success: function(response) {
                        var response = jQuery.parseJSON(response);
                        if (response === "delete") {
                            retrive_ideal_datas();
                        }
                    },
                    error: function(error) {
                        console.error('Error deleting row:', error);
                    }
                });
            };




            window.update_row = function(locationId, columnType, id, selectElement) {
                var selectedValue = $(selectElement).val();

                var data = {
                    'location_id': locationId,
                    'designation_id': selectedValue,
                    'column_type': columnType,
                    'id': id,
                    '_token': "{{ csrf_token() }}"
                };

                $.ajax({
                    url: 'update_ideal_report_data_dashboard',
                    type: 'POST',
                    data: data,
                    success: function(response) {
                        var response = jQuery.parseJSON(response);
                        if (response === "updated") {
                            retrive_ideal_datas();
                        }
                    },
                    error: function(error) {
                        console.error('Error updating data:', error);
                    }
                });
            };


            function retrive_current_and_ideal() {
                var data = {};

                var selectedText = $('#location_id_master').val();
                if (selectedText) {
                    data['location_id'] = selectedText;
                    data['_token'] = "{{ csrf_token() }}";
                    $.ajax({
                        url: 'get_current_and_ideal_data',
                        type: 'POST',
                        data: data,
                        success: function(response) {
                            var data = jQuery.parseJSON(response);

                            var ideal = data['ideal'];
                            var current = data['current'];
                            var difference = data['difference'];
                            var all = data['all'];
                            // console.log(all);

                            $('#ideal').html(ideal);
                            $('#current').html(current);
                            $('#gap').html(difference);

                            if (Array.isArray(all)) {

                                $.each(all, function(index, item) {
                                    var column_type = item.column_type;
                                    var current_count = item.current_count; // check this child class
                                    var ideal_count = item.ideal_count;
                                    var location_id = item.location_id;
                                    var diff_count = item.diff_count;
                                    // console.log(column_type);
                                    $(`#ideal_${location_id}`).each(function() {
                                        var cells = $(this).children('td');
                                        cells.each(function(index) {
                                            var cell = $(this);
                                            var cellClass = cell.attr('class');
                                            if (cellClass === column_type) {
                                                cell.text(ideal_count);
                                            }

                                        });

                                    })



                                    $(`#current_${location_id}`).each(function() {
                                        var cells = $(this).children('td');
                                        cells.each(function(index) {
                                            var cell = $(this);
                                            var cellClass = cell.attr('class');
                                            if (cellClass === column_type) {
                                                cell.text(current_count);
                                            }

                                        });

                                    })


                                    $(`#difference_${location_id}`).each(function() {
                                        var cells = $(this).children('td');
                                        cells.each(function(index) {
                                            var cell = $(this);
                                            var cellClass = cell.attr('class');
                                            if (cellClass === column_type) {
                                                cell.text(diff_count);
                                            }

                                        });

                                    })

                                })
                            }





                        }
                    });
                }
            }



            retrive_current_and_ideal();
            retrive_ideal_datas();

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