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

        .card-title {
            /* color: #fff; */
            padding-top: 12px;
        }

        #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: #ff6014;
            border-radius: 10px;
            box-shadow: 8px 8px 1px #00000030;
            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;
        }

        .card-title {
            color: white;
        }

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

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

        }

        #chartpie {
            display: flex;
            margin-top: 1%;
            margin-left: 2%;
        }

        @media screen and (max-width: 500px) {
            #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;
            }

            #chartpie {
                display: flex;
                margin-top: 1%;
                margin-left: -15%;
            }

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


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


            }


        }

        @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 black;
            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;
            font-family: "Poppins", sans-serif;
            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;
        }


      
    </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:0%;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">
                                {{-- Ideal Staff configuration --}}
                                <div class="col-md-7 pagetitle" style="margin-top: 30px;">
                                    <h1 style="font-weight: bold;">Ideal Staff Registration</h1>
                                </div>

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

            <div class="card">
                <div class="card-body">
                    <div class="row">
            
                        <div class="col-12 pt-4 pl-2">
                            {{-- <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">
                                <div class="card-body height-adjust" style="background: #DA9694; border: 1px solid #303773;">
                                    <h6 class="card-title text-center text11">Ideal <br> 
                                        <span style="font-family: 'Courier New', Courier, monospace; 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">
                                <div class="card-body height-adjust" style="background: #C4D79B; border: 1px solid #303773;">
                                    <h6 class="card-title text-center text11">Current <br> 
                                        <span style="font-family: 'Courier New', Courier, monospace; 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">
                                <div class="card-body height-adjust" style="background: #FABF8F; border: 1px solid #303773;">
                                    <h6 class="card-title text-center text11">Gap <br> 
                                        <span style="font-family: 'Courier New', Courier, monospace; font-size: 14px;" class="text-color" id="gap"></span>
                                    </h6>
                                </div>
                            </div>
                        </div>
            
                    </div>
                </div>
            </div>
            
            

          

           

                            <div class="card">
                                <div style="height: fit-content;" class="card-body" 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>
    </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">
                        <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>