@extends('layouts.front')
@section('content')
    <div class="container-xxl flex-grow-1 container-p-y">
        <div class="row">
            <div class="col-lg-12 mb-4 order-0">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex align-items-center justify-content-center">
                            <h2>Répresentations diplomatiques</h2>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12 stretch-card grid-margin mb-4">
                    <div class="card">
                        <div class="card-body">
                            <div class="mb-3">
                                <label for="exampleFormControlSelect1" class="form-label">Selectionner un pays</label>
                                <select class="form-select js-example-basic-single">
                                    <option selected>Sélectionner un pays</option>
                                    <option value="AF, Afghanistan">Afghanistan</option>
                                    <option value="ZA, Afrique du Sud">Afrique du Sud</option>
                                    <option value="AL, Albanie">Albanie</option>
                                    <option value="DZ, Algérie">Algérie</option>
                                    <option value="DE, Allemagne">Allemagne</option>
                                    <option value="AD, Andorre">Andorre</option>
                                    <option value="AO, Angola">Angola</option>
                                    <option value="AG, Antigua et Barbuda">Antigua et Barbuda</option>
                                    <option value="SA, Arabie saoudite">Arabie saoudite</option>
                                    <option value="AR, Argentine">Argentine</option>
                                    <option value="AM, Arménie">Arménie</option>
                                    <option value="AU, Australie">Australie</option>
                                    <option value="AT, Autriche">Autriche</option>
                                    <option value="AZ, Azerbaidjan">Azerbaidjan</option>
                                    <option value="BS, Bahamas">Bahamas</option>
                                    <option value="BH, Bahreïn">Bahreïn</option>
                                    <option value="BD, Bangladesh">Bangladesh</option>
                                    <option value="BB, Barbade">Barbade</option>
                                    <option value="BY, Belarus">Belarus</option>
                                    <option value="BE, Belgique">Belgique</option>
                                    <option value="BZ, Belize">Belize</option>
                                    <option value="BJ, Bénin">Bénin</option>
                                    <option value="MM, Birmanie">Birmanie</option>
                                    <option value="BO, Bolivie">Bolivie</option>
                                    <option value="BA, Bosnie-Herzégovine">Bosnie-Herzégovine</option>
                                    <option value="BW, Botswana">Botswana</option>
                                    <option value="BR, Brésil">Brésil</option>
                                    <option value="BN, Brunei">Brunei</option>
                                    <option value="BG, Bulgarie">Bulgarie</option>
                                    <option value="BF, Burkina Faso">Burkina Faso</option>
                                    <option value="BI, Burundi">Burundi</option>
                                    <option value="KH, Cambodge">Cambodge</option>
                                    <option value="CM, Cameroun">Cameroun</option>
                                    <option value="CA, Canada">Canada</option>
                                    <option value="CV, Cap-Vert">Cap-Vert</option>
                                    <option value="CL, Chili">Chili</option>
                                    <option value="CN, Chine">Chine</option>
                                    <option value="CY, Chypre">Chypre</option>
                                    <option value="VA, Cite du Vatican">Cite du Vatican</option>
                                    <option value="CO, Colombie">Colombie</option>
                                    <option value="KM, Comores">Comores</option>
                                    <option value="CG, Congo">Congo</option>
                                    <option value="CG, Congo (Brazzaville)">Congo (Brazzaville)</option>
                                    <option value="CD, Congo (Republique democratique)">Congo (Republique democratique)
                                    </option>
                                    <option value="CG, Congo (Republique)">Congo (Republique)</option>
                                    <option value="KP, Corée du Nord">Corée du Nord</option>
                                    <option value="KR, Corée du Sud">Corée du Sud</option>
                                    <option value="CR, Costa Rica">Costa Rica</option>
                                    <option value="CI, Cote d Ivoire">Cote d Ivoire</option>
                                    <option value="HR, Croatie">Croatie</option>
                                    <option value="CU, Cuba">Cuba</option>
                                    <option value="DK, Danemark">Danemark</option>
                                    <option value="DJ, Djibouti">Djibouti</option>
                                    <option value="DM, Dominique">Dominique</option>
                                    <option value="EC, Ecuador">Ecuador</option>
                                    <option value="EG, Égypte">Égypte</option>
                                    <option value="SV, El Salvador">El Salvador</option>
                                    <option value="AE, Émirats arabes unis">Émirats arabes unis</option>
                                    <option value="EC, Équateur">Équateur</option>
                                    <option value="ER, Érythrée">Érythrée</option>
                                    <option value="ES, Espagne">Espagne</option>
                                    <option value="EE, Estonie">Estonie</option>
                                    <option value="SZ, Eswatini">Eswatini</option>
                                    <option value="US, Etats Unis">Etats Unis</option>
                                    <option value="ET, Éthiopie">Éthiopie</option>
                                    <option value="FJ, Fidji">Fidji</option>
                                    <option value="FI, Finlande">Finlande</option>
                                    <option value="FR, France">France</option>
                                    <option value="GA, Gabon">Gabon</option>
                                    <option value="GM, Gambie">Gambie</option>
                                    <option value="GE, Georgie">Georgie</option>
                                    <option value="GH, Ghana">Ghana</option>
                                    <option value="GR, Grèce">Grèce</option>
                                    <option value="GD, Grenade">Grenade</option>
                                    <option value="GT, Guatemala">Guatemala</option>
                                    <option value="GN, Guinée">Guinée</option>
                                    <option value="GW, Guinee Bissau">Guinee Bissau</option>
                                    <option value="GQ, Guinée équatoriale">Guinée équatoriale</option>
                                    <option value="GW, Guinée-Bissau">Guinée-Bissau</option>
                                    <option value="GY, Guyana">Guyana</option>
                                    <option value="GF, Guyane">Guyane</option>
                                    <option value="HT, Haiti">Haiti</option>
                                    <option value="HN, Honduras">Honduras</option>
                                    <option value="HU, Hongrie">Hongrie</option>
                                    <option value="CK, Îles Cook">Îles Cook</option>
                                    <option value="MH, Îles Marshall">Îles Marshall</option>
                                    <option value="SB, îles Salomon">îles Salomon</option>
                                    <option value="IN, Inde">Inde</option>
                                    <option value="ID, Indonésie">Indonésie</option>
                                    <option value="BS, Irak">Irak</option>
                                    <option value="IR, Iran">Iran</option>
                                    <option value="BS, Irlande">Irlande</option>
                                    <option value="IS, Islande">Islande</option>
                                    <option value="IL, Israël">Israël</option>
                                    <option value="IT, Italie">Italie</option>
                                    <option value="JM, Jamaique">Jamaique</option>
                                    <option value="JP, Japon">Japon</option>
                                    <option value="JO, Jordanie">Jordanie</option>
                                    <option value="KZ, Kazakhstan">Kazakhstan</option>
                                    <option value="KE, Kenya">Kenya</option>
                                    <option value="KG, Kirghizistan">Kirghizistan</option>
                                    <option value="KI, Kiribati">Kiribati</option>
                                    <option value="KW, Koweït">Koweït</option>
                                    <option value="LA, Laos">Laos</option>
                                    <option value="LS, Lesotho">Lesotho</option>
                                    <option value="LV, Lettonie">Lettonie</option>
                                    <option value="LB, Liban">Liban</option>
                                    <option value="LR, Liberia">Liberia</option>
                                    <option value="LY, Libye">Libye</option>
                                    <option value="LY, Liechtenstein">Liechtenstein</option>
                                    <option value="LT, Lituanie">Lituanie</option>
                                    <option value="LU, Luxembourg">Luxembourg</option>
                                    <option value="MK, Macédoine du Nord">Macédoine du Nord</option>
                                    <option value="MG, Madagascar">Madagascar</option>
                                    <option value="MY, Malaisie">Malaisie</option>
                                    <option value="MW, Malawi">Malawi</option>
                                    <option value="MV, Maldives">Maldives</option>
                                    <option value="ML, Mali">Mali</option>
                                    <option value="MT, Malte">Malte</option>
                                    <option value="MA, Maroc">Maroc</option>
                                    <option value="MU, Maurice">Maurice</option>
                                    <option value="MR, Mauritanie">Mauritanie</option>
                                    <option value="MX, Mexique">Mexique</option>
                                    <option value="FM, Micronésie">Micronésie</option>
                                    <option value="MD, Moldavie">Moldavie</option>
                                    <option value="MC, Monaco">Monaco</option>
                                    <option value="MN, Mongolie">Mongolie</option>
                                    <option value="ME, Monténégro">Monténégro</option>
                                    <option value="MZ, Mozambique">Mozambique</option>
                                    <option value="MM, Myanmar">Myanmar</option>
                                    <option value="NA, Namibie">Namibie</option>
                                    <option value="NR, Nauru">Nauru</option>
                                    <option value="MX, Népal">Népal</option>
                                    <option value="NI, Nicaragua">Nicaragua</option>
                                    <option value="NE, Niger">Niger</option>
                                    <option value="NG, Nigeria">Nigeria</option>
                                    <option value="NU, Niue">Niue</option>
                                    <option value="NO, Norvège">Norvège</option>
                                    <option value="NZ, Nouvelle Zelande">Nouvelle Zelande</option>
                                    <option value="OM, Oman">Oman</option>
                                    <option value="UG, Ouganda">Ouganda</option>
                                    <option value="UZ, Ouzbékistan">Ouzbékistan</option>
                                    <option value="PK, Pakistan">Pakistan</option>
                                    <option value="PW, Palaos">Palaos</option>
                                    <option value="PS, Palestine">Palestine</option>
                                    <option value="PA, Panamá">Panamá</option>
                                    <option value="PG, Papouasie Nouvelle Guinee">Papouasie Nouvelle Guinee</option>
                                    <option value="PY, Paraguay">Paraguay</option>
                                    <option value="NL, Pays-Bas">Pays-Bas</option>
                                    <option value="PE, Pérou">Pérou</option>
                                    <option value="PH, Philippines">Philippines</option>
                                    <option value="PL, Pologne">Pologne</option>
                                    <option value="PT, Portugal">Portugal</option>
                                    <option value="QA, Qatar">Qatar</option>
                                    <option value="CF, République centrafricaine">République centrafricaine</option>
                                    <option value="DO, Republique Dominicaine">Republique Dominicaine</option>
                                    <option value="CZ, République tchèque">République tchèque</option>
                                    <option value="RO, Roumanie">Roumanie</option>
                                    <option value="GB, Royaume Uni">Royaume Uni</option>
                                    <option value="NE, Russie">Russie</option>
                                    <option value="RW, Rwanda">Rwanda</option>
                                    <option value="KN, Saint-Christophe-et-Niévès">Saint-Christophe-et-Niévès</option>
                                    <option value="SM, Saint-Marin">Saint-Marin</option>
                                    <option value="VC, Saint-Vincent-et-les Grenadines">Saint-Vincent-et-les Grenadines
                                    </option>
                                    <option value="LC, Sainte-Lucie">Sainte-Lucie</option>
                                    <option value="SV, Salvador">Salvador</option>
                                    <option value="WS, Samoa">Samoa</option>
                                    <option value="ST, Sao Tome et Principe">Sao Tome et Principe</option>
                                    <option value="SN, Sénégal">Sénégal</option>
                                    <option value="RS, Serbie">Serbie</option>
                                    <option value="SC, Seychelles">Seychelles</option>
                                    <option value="SL, Sierra Leone">Sierra Leone</option>
                                    <option value="SG, Singapour">Singapour</option>
                                    <option value="SK, Slovaquie">Slovaquie</option>
                                    <option value="SI, Slovénie">Slovénie</option>
                                    <option value="SO, Somalie">Somalie</option>
                                    <option value="SD, Soudan">Soudan</option>
                                    <option value="SS, Soudan du Sud">Soudan du Sud</option>
                                    <option value="LK, Sri Lanka">Sri Lanka</option>
                                    <option value="SE, Suède">Suède</option>
                                    <option value="SR, Suriname">Suriname</option>
                                    <option value="SY, Syrie">Syrie</option>
                                    <option value="TJ, Tadjikistan">Tadjikistan</option>
                                    <option value="TW, Taiwan">Taiwan</option>
                                    <option value="TZ, Tanzanie">Tanzanie</option>
                                    <option value="TD, Tchad">Tchad</option>
                                    <option value="TH, Thaïlande">Thaïlande</option>
                                    <option value="TL, Timor oriental">Timor oriental</option>
                                    <option value="TG, Togo">Togo</option>
                                    <option value="TO, Tonga">Tonga</option>
                                    <option value="TT, Trinité-et-Tobago">Trinité-et-Tobago</option>
                                    <option value="TN, Tunisie">Tunisie</option>
                                    <option value="TM, Turkménistan">Turkménistan</option>
                                    <option value="TV, Tuvalu">Tuvalu</option>
                                    <option value="TR, Turquie">Turquie</option>
                                    <option value="UA, Ukraine">Ukraine</option>
                                    <option value="UY, Uruguay">Uruguay</option>
                                    <option value="VU, Vanuatu">Vanuatu</option>
                                    <option value="VA, Vatican">Vatican</option>
                                    <option value="VE, Venezuela">Venezuela</option>
                                    <option value="VN, Viêt Nam">Viêt Nam</option>
                                    <option value="YE, Yémen">Yémen</option>
                                    <option value="ZM, Zambie">Zambie</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="data-container mb-4">
                <div class="row">
                    <div id="loading-indicator" style="display: none;">
                        <p>Chargement...</p>
                    </div>
                    <div class="col-md-6" id="column-1"></div>
                    <div class="col-md-6" id="column-2"></div>
                </div>
            </div>
            <div class="col-lg-12 mb-4 order-0 text-center">
                @php
                    echo @file_get_contents('uploads/multiple/trombinos/diplo/' . $dataByClefs['code_country'] . '.svg');
                @endphp
            </div>


        </div>

        <!-- / Content -->
    </div>
@endsection

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        $('.js-example-basic-single').on('change', function() {
            var selectedCountry = $(this).val();

            // Show the loading indicator while the request is in progress
            $('#loading-indicator').show();

            // Make an AJAX request to fetch data based on the selected country
            $.ajax({
                url: '{{ route('getData', ':country') }}'.replace(':country', selectedCountry),
                method: 'GET',
                success: function(response) {
                    // Hide the loading indicator once the request is complete
                    $('#loading-indicator').hide();

                    // Handle the response and update your UI with the fetched data
                    console.log(response);
                    var dataContainer = $('#data-container');

                    // Check if there is data in the response
                    if (response.length > 0) {
                        // Initialize empty HTML variables for each column
                        var htmlColumn1 = '';
                        var htmlColumn2 = '';

                        // Loop through each object in the response
                        $.each(response, function(index, data) {
                            // Generate the slug using JavaScript
                            var slug = data.libelle
                                .toLowerCase()
                                .normalize("NFD")
                                .replace(/[\u0300-\u036f]/g, "")
                                .replace(/[^a-z0-9 -]/g, "")
                                .replace(/ /g, '-');

                            // Generate the URL for the route
                            var routeUrl =
                                "{{ route('select.entity', ['id' => ':id', 'slug' => ':slug']) }}"
                                .replace(':id', data.id)
                                .replace(':slug', slug); // Use the generated slug

                            // Create an HTML structure to display the data for each object
                            var html = `
                            <div class="card">
                                <div class="card-body d-flex">
                                    <img src="https://backoffice.africaverify.com/cdn/uploads/logos/${data.logo}"
                                        alt="" width="55" height="auto" class="mr-3 align-self-start">
                                    <a href="${routeUrl}" class="child ms-3 me-3" style="color: #566a7f">${data.libelle}</a>
                                    <img src="https://backoffice.africaverify.com/cdn/uploads/logos/${data.drapeau_droite}"
                                        alt="" width="55" height="auto" class="ml-3 align-self-start">
                                </div>
                            </div>
                        `;

                            // Distribute the data between the two columns alternately
                            if (index % 2 === 0) {
                                htmlColumn1 += html;
                            } else {
                                htmlColumn2 += html;
                            }
                        });

                        // Update the columns with the generated HTML
                        $('#column-1').html(htmlColumn2);
                        $('#column-2').html(htmlColumn1);
                    } else {
                        // Handle the case where there is no data
                        dataContainer.html(
                            '<p>No data available for the selected country.</p>');
                    }

                },
                error: function(xhr, status, error) {
                    // Hide the loading indicator in case of an error
                    $('#loading-indicator').hide();

                    // Handle errors here
                    console.error(xhr.responseText);
                }
            });
        });
    });
</script>