@extends('layouts.app')
 @section('content')
<div class="page-content">
    <div class="page-subheading page-subheading-md">
        <ol class="breadcrumb">
            <li><a href="javascript:;">Dashboard</a></li>
            <li class="active"><a href="javascript:;">City</a></li>
            <li class="active"><a href="javascript:;">{{ $city->name }}</a></li>
            <li class="active"><a href="javascript:;">Creation  Dashboard</a></li>
        </ol>
    </div>
    <div class="page-heading page-heading-md">
        <h2>{{ $city->name }} Creation  Dashboard</h2>
    </div>

    <div class="container-fluid-md">
        <ul class="nav nav-tabs">
            <li class="active"><a data-toggle="tab" href="#tab1-1">Basic Deatils</a></li>
            @php
                $ContentTabs = false;
                $videoTabs = false;
                $articleTabs = false;
                $seoTabs = false;

                foreach ($creation as $data) {
                    if ($data->entity_code == $city->iata_code) {
                        if ($data->is_content_creator == 1) {
                            $ContentTabs = true;
                        }
                        if ($data->is_video_creator == 1) {
                            $videoTabs = true;
                        }
                        if ($data->is_article_creator == 1) {
                            $articleTabs = true;
                        }
                        if ($data->is_seo_creator == 1) {
                            $seoTabs = true;
                        }
                    }
                }
            @endphp

            @if($ContentTabs)
            <li><a data-toggle="tab" href="#contenttab1-1">Add Content</a></li>
            <li><a data-toggle="tab" href="#contenttab1-2">Draft Content</a></li>
            <li><a data-toggle="tab" href="#contenttab1-3">Assign Content</a></li>
            <li><a data-toggle="tab" href="#contenttab1-4">Edit Content</a></li>
            @endif
            @if($videoTabs)
            <li><a data-toggle="tab" href="#videotab1-1">Add Video</a></li>
            <li><a data-toggle="tab" href="#videotab1-2">Draft Video</a></li>
            <li><a data-toggle="tab" href="#videotab1-3">Assign Video</a></li>
            <li><a data-toggle="tab" href="#videotab1-3">Edit Video</a></li>
            @endif @if($articleTabs)
            <li><a data-toggle="tab" href="#articletab1-1">Add Article</a></li>
            <li><a data-toggle="tab" href="#articletab1-2">Draft Article</a></li>
            <li><a data-toggle="tab" href="#articletab1-3">Assign Article</a></li>
            <li><a data-toggle="tab" href="#articletab1-4">Edit Article</a></li>
            @endif @if($seoTabs)
            <li><a data-toggle="tab" href="#seotab1-1">Edit Seo</a></li>
            @endif 
        </ul>
        <div class="tab-content">
            <div id="tab1-1" class="tab-pane active">
                <div class="row">
                    <div class="col-md-12">
                        <div class="panel panel-default">
                            <div class="panel-body" style="#fbfbfb">
                                <table class="table">
                                    <tbody>
                                        <tr>
                                            <td class="fw-bolder">City Name</td>
                                            <td>{{$city->name }}</td>
                                        </tr>
                                        <tr>
                                            <td class="font-weight-bold">IATA Code</td>
                                            <td>{{ $city->iata_code }}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div id="contenttab1-1" class="tab-pane">
                <h1>Add Content</h1>
            </div>
            <div id="contenttab1-2" class="tab-pane">
                <h1>Draft Content</h1>
            </div>
            <div id="contenttab1-3" class="tab-pane">
                <h1>Assign Content</h1>
            </div>
            <div id="contenttab1-4" class="tab-pane">
                <h1>Edit Content</h1>
            </div>
            <!------Video -------------------------->
            <div id="videotab1-1" class="tab-pane">
                <h1>Add Video</h1>
            </div>
            <div id="videotab1-2" class="tab-pane">
                <h1>Dreaft Video</h1>
            </div>
            <div id="videotab1-3" class="tab-pane">
                <h1>Assign Video</h1>
            </div>
            <div id="videotab1-4" class="tab-pane">
                <h1>Edit Video</h1>
            </div>
            <!---------Article ------------------->
            <div id="articletab1-1" class="tab-pane">
                <h1>Add Article</h1>
            </div>
            <div id="articletab1-2" class="tab-pane">
                <h1>Dreaft Article</h1>
            </div>
            <div id="articletab1-3" class="tab-pane">
                <h1>Assign Article</h1>
            </div>
             <div id="articletab1-4" class="tab-pane">
                <h1>Edit Article</h1>
            </div>
            <!----------Seo ------------------>
            <div id="seotab1-1" class="tab-pane">
                <h1>Edit Seo</h1>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            function updatePermissions() {
                let selectedRoles = [];
                document.querySelectorAll('.role-checkbox:checked').forEach(function (checkbox) {
                    selectedRoles.push(checkbox.value);
                });
        
                document.querySelectorAll('.permission-checkbox').forEach(function (permissionDiv) {
                    let roleIds = permissionDiv.getAttribute('data-role-ids').split(',');
        
                    let hasPermission = roleIds.some(roleId => selectedRoles.includes(roleId));
                    permissionDiv.style.display = hasPermission ? 'block' : 'none';
                });
        
                updateContentCreatorTab();
            }
        
            function updateContentCreatorTab() {
            
                let backendAdminSelected = false;
                let contentCreatorSelected = false;
        
                document.querySelectorAll('.role-checkbox:checked').forEach(function (checkbox) {
                    if (checkbox.nextElementSibling.innerText.trim() === 'backend_user') {
                        backendAdminSelected = true;
                    }
                });
        
                let contentCountrySelected = false;
                let contentCitySelected = false;
                let contentAirportSelected = false;
                let contentAirlineSelected = false;
                document.querySelectorAll('.permission-checkbox-input:checked').forEach(function (checkbox) {
                    let label = checkbox.nextElementSibling?.innerText.trim().toLowerCase();
                    if (label === 'country') {
                        contentCountrySelected = true;
                    }
                    if (label === 'city') {
                        contentCitySelected = true;
                    }
                    if (label === 'airport') {
                        contentAirportSelected = true;
                    }
                    if (label === 'airline') {
                        contentAirlineSelected = true;
                    }
                });
                document.getElementById('countryTab').style.display = (backendAdminSelected && contentCountrySelected) ? 'block' : 'none';
                document.getElementById('cityTab').style.display = (backendAdminSelected && contentCitySelected) ? 'block' : 'none';
                document.getElementById('airportTab').style.display = (backendAdminSelected && contentAirportSelected) ? 'block' : 'none';
                document.getElementById('airlineTab').style.display = (backendAdminSelected && contentAirlineSelected) ? 'block' : 'none';
            }
        
            document.querySelectorAll('.role-checkbox, .permission-checkbox-input').forEach(function (checkbox) {
                checkbox.addEventListener('change', function () {
                    updatePermissions();
                    updateContentCreatorTab();
                });
            });
            
            updatePermissions();
        
            // Country Search and Assign
            let searchInput = document.getElementById('countrySearch');
            let suggestionsDiv = document.getElementById('countrySuggestions');
            let selectedCountryId = document.getElementById('selectedCountryId');
            let selectedCountryISOCode = document.getElementById('selectedCountryISOCode');
            let assignCountryForm = document.getElementById('assignCountryForm');
            let assignedCountriesList = document.getElementById('assignedCountriesList');
            let userId = document.getElementById('userId').value;
            let citySearchInput = document.getElementById('citySearch');
            let citySuggestionsDiv = document.getElementById('citySuggestions');
            let selectedCityId = document.getElementById('selectedCityId');
            let selectedCityIataCode = document.getElementById('selectedCityIataCode');
            let airportSearchInput = document.getElementById('airportSearch');
            let airportSuggestionsDiv = document.getElementById('airportSuggestions');
            let selectedAirportId = document.getElementById('selectedAirportId');
            let selectedAirportIatacode = document.getElementById('selectedAirportIatacode');
            let airlineSearchInput = document.getElementById('airlineSearch');
            let airlineSuggestionsDiv = document.getElementById('airlineSuggestions');
            let selectedAirlineId = document.getElementById('selectedAirlineId');
            let selectedAirlineIatacode = document.getElementById('selectedAirlineIatacode');
        
            searchInput.addEventListener('input', function () {
                let query = searchInput.value.trim();
        
                if (query.length < 2) {
                    suggestionsDiv.innerHTML = '';
                    return;
                }
                var pathname = window.location.pathname.split('/');
                var baseFolder = pathname[1]; // "online-airline"
                var baseUrl = window.location.origin + '/' + baseFolder;
                fetch(`${baseUrl}/public/admin/user_role_permission/search-countries?query=${query}`)
                    .then(response => response.json())
                    .then(countries => {
                        suggestionsDiv.innerHTML = '';
        
                        countries.forEach(country => {
                            let countryItem = document.createElement('a');
                            countryItem.classList.add('list-group-item', 'list-group-item-action');
                            countryItem.textContent = country.name;
                            countryItem.dataset.id = country.id;
        
                            countryItem.addEventListener('click', function () {
                                searchInput.value = country.name;
                                selectedCountryId.value = country.id;
                                selectedCountryISOCode.value = country.iso_code;
                                suggestionsDiv.innerHTML = '';
                            });
        
                            suggestionsDiv.appendChild(countryItem);
                        });
                    });
            });
        
            assignCountryForm.addEventListener('submit', function (e) {
                e.preventDefault();
                let formData = new FormData(assignCountryForm);
                var pathname = window.location.pathname.split('/');
                var baseFolder = pathname[1]; // "online-airline"
                var baseUrl = window.location.origin + '/' + baseFolder;
                fetch(`${baseUrl}/public/admin/user_role_permission/assign-country/${userId}`, {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('input[name=_token]').value
                    }
                })
                .then(response => response.json())
                .then(data => {
                    alert(data.message);
                    searchInput.value = '';
                    selectedCountryId.value = '';
                    selectedCountryISOCode.value = '';
                    fetchAssignedCountries(); // Refresh the assigned countries list
                })
                .catch(error => console.error('Error:', error));
            });
        
            // Fetch and display assigned countries
            function fetchAssignedCountries() {
        
                var pathname = window.location.pathname.split('/');
                var baseFolder = pathname[1]; // "online-airline"
                var baseUrl = window.location.origin + '/' + baseFolder;
                fetch(`${baseUrl}/public/admin/user_role_permission/get-assigned-countries/${userId}`)
                
                .then(response => response.json())
                .then(data => {
                    let tableBody = document.getElementById('assignedCountriesTableBody');
                    tableBody.innerHTML = ''; // Clear previous data
                    
                        data.forEach(country => {
                        let row = document.createElement('tr');
                       console.log(country);
                        row.innerHTML = `
                            <td>${country.name}</td>
                            <td>${country.sub_entity_access ? 'Yes' : 'No'}</td>
                             <td>${country.is_content_view_list ? 'Yes' : 'No'}</td>
                            <td>${country.is_content_creator ? 'Yes' : 'No'}</td>
                            <td>${country.is_content_approval ? 'Yes' : 'No'}</td>
                            <td>${country.is_seo_view_list ? 'Yes' : 'No'}</td>
                            <td>${country.is_seo_creator ? 'Yes' : 'No'}</td>
                            <td>${country.is_seo_approval ? 'Yes' : 'No'}</td>
                            <td>${country.is_video_view_list ? 'Yes' : 'No'}</td>
                            <td>${country.is_video_creator ? 'Yes' : 'No'}</td>
                            <td>${country.is_video_approval ? 'Yes' : 'No'}</td>
                            <td>${country.is_article_view_list ? 'Yes' : 'No'}</td>
                            <td>${country.is_article_creator ? 'Yes' : 'No'}</td>
                            <td>${country.is_article_approval ? 'Yes' : 'No'}</td>
                            <td>
                                <button onclick="deleteCountry(${country.id})" class="delete-btn">Delete</button>
                            </td>
                        `;
        
                        tableBody.appendChild(row);
                    });
                    })
                    .catch(error => console.error('Error fetching assigned countries:', error));
            }
        
            citySearchInput.addEventListener('input', function () {
                let cityQuery = citySearchInput.value.trim();
               
                if (cityQuery.length < 2) {
                    citySuggestionsDiv.innerHTML = '';
                    return;
                }
                var pathname = window.location.pathname.split('/');
                var baseFolder = pathname[1]; // "online-airline"
                var baseUrl = window.location.origin + '/' + baseFolder;
                fetch(`${baseUrl}/public/admin/user_role_permission/search-cities?query=${cityQuery}`)
                    .then(response => response.json())
                    .then(cities => {
                        citySuggestionsDiv.innerHTML = '';
        
                        cities.forEach(city => {
                            let cityItem = document.createElement('a');
                            cityItem.classList.add('list-group-item', 'list-group-item-action');
                            cityItem.textContent = city.name;
                            cityItem.dataset.id = city.id;
        
                            cityItem.addEventListener('click', function () {
                                citySearchInput.value = city.name;
                                selectedCityId.value = city.id;
                                selectedCityIataCode.value=city.iata_code;
                                citySuggestionsDiv.innerHTML = '';
                            });
        
                            citySuggestionsDiv.appendChild(cityItem);
                        });
                    });
            });
        
            assignCityForm.addEventListener('submit', function (e) {
                e.preventDefault();
                let cityFormData = new FormData(assignCityForm);
        
                var pathname = window.location.pathname.split('/');
                var baseFolder = pathname[1]; // "online-airline"
                var baseUrl = window.location.origin + '/' + baseFolder;
                fetch(`${baseUrl}/public/admin/user_role_permission/assign-city/${userId}`, {
                    method: 'POST',
                    body: cityFormData,
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('input[name=_token]').value
                    }
                })
                .then(response => response.json())
                .then(data => {
                    alert(data.message);
                    citySearchInput.value = '';
                    selectedCityId.value = '';
                    selectedCityIataCode ='';
                    fetchAssignedCities(); // Refresh the assigned countries list
                })
                .catch(error => console.error('Error:', error));
            });
        
            function fetchAssignedCities() {
             
                var pathname = window.location.pathname.split('/');
                var baseFolder = pathname[1]; // "online-airline"
                var baseUrl = window.location.origin + '/' + baseFolder;
               fetch(`${baseUrl}/public/admin/user_role_permission/get-assigned-cities/${userId}`)
               
               .then(response => response.json())
               .then(data => {
                   let cityTableBody = document.getElementById('assignedCitiesTableBody');
                   cityTableBody.innerHTML = ''; // Clear previous data
        
                       data.forEach(city => {
                       let row = document.createElement('tr');
        
                       row.innerHTML = `
                           <td>${city.name}</td>                   
                           <td>${city.is_content_view_list ? 'Yes' : 'No'}</td>
                            <td>${city.is_content_creator ? 'Yes' : 'No'}</td>
                            <td>${city.is_content_approval ? 'Yes' : 'No'}</td>
                            <td>${city.is_seo_view_list ? 'Yes' : 'No'}</td>
                            <td>${city.is_seo_creator ? 'Yes' : 'No'}</td>
                            <td>${city.is_seo_approval ? 'Yes' : 'No'}</td>
                            <td>${city.is_video_view_list ? 'Yes' : 'No'}</td>
                            <td>${city.is_video_creator ? 'Yes' : 'No'}</td>
                            <td>${city.is_video_approval ? 'Yes' : 'No'}</td>
                            <td>${city.is_article_view_list ? 'Yes' : 'No'}</td>
                            <td>${city.is_article_creator ? 'Yes' : 'No'}</td>
                            <td>${city.is_article_approval ? 'Yes' : 'No'}</td>
                           <td>
                                <button onclick="deleteCity(${city.id})" class="delete-btn">Delete</button>
                            </td>
                       `;
        
                       cityTableBody.appendChild(row);
                   });
                   })
                   .catch(error => console.error('Error fetching assigned cities:', error));
           }
        
        /////Airport code
        airportSearchInput.addEventListener('input', function () {
                let airportQuery = airportSearchInput.value.trim();
               
                if (airportQuery.length < 2) {
                    airportSuggestionsDiv.innerHTML = '';
                    return;
                }
        
                var pathname = window.location.pathname.split('/');
                var baseFolder = pathname[1]; // "online-airline"
                var baseUrl = window.location.origin + '/' + baseFolder;
                fetch(`${baseUrl}/public/admin/user_role_permission/search-airports?query=${airportQuery}`)
                    .then(response => response.json())
                    .then(cities => {
                        airportSuggestionsDiv.innerHTML = '';
        
                        cities.forEach(airport => {
                            let airportItem = document.createElement('a');
                            airportItem.classList.add('list-group-item', 'list-group-item-action');
                            airportItem.textContent = airport.name;
                            airportItem.dataset.id = airport.id;
        
                            airportItem.addEventListener('click', function () {
                                airportSearchInput.value = airport.name;
                                selectedAirportId.value = airport.id;
                                selectedAirportIatacode.value = airport.iata_code;
                                airportSuggestionsDiv.innerHTML = '';
                            });
        
                            airportSuggestionsDiv.appendChild(airportItem);
                        });
                    });
            });
        
            assignAirportForm.addEventListener('submit', function (e) {
                e.preventDefault();
        
                let airportFormData = new FormData(assignAirportForm);
                var pathname = window.location.pathname.split('/');
                var baseFolder = pathname[1]; // "online-airline"
                var baseUrl = window.location.origin + '/' + baseFolder;
                fetch(`${baseUrl}/public/admin/user_role_permission/assign-airport/${userId}`, {
                    method: 'POST',
                    body: airportFormData,
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('input[name=_token]').value
                    }
                })
                .then(response => response.json())
                .then(data => {
                    alert(data.message);
                    airportSearchInput.value = '';
                    selectedAirportId.value = '';
                    selectedAirportIatacode.value = '';
                    fetchAssignedAirports(); // Refresh the assigned countries list
                })
                .catch(error => console.error('Error:', error));
            });
        
            function fetchAssignedAirports() {
             
                var pathname = window.location.pathname.split('/');
                var baseFolder = pathname[1]; // "online-airline"
                var baseUrl = window.location.origin + '/' + baseFolder;
               fetch(`${baseUrl}/public/admin/user_role_permission/get-assigned-airports/${userId}`)
               
               .then(response => response.json())
               .then(data => {
                   let airportTableBody = document.getElementById('assignedAirportsTableBody');
                   airportTableBody.innerHTML = ''; // Clear previous data
        
                       data.forEach(airport => {
                       let row = document.createElement('tr');
        
                       row.innerHTML = `
                           <td>${airport.name}</td>                   
                            <td>${airport.is_content_view_list ? 'Yes' : 'No'}</td>
                            <td>${airport.is_content_creator ? 'Yes' : 'No'}</td>
                            <td>${airport.is_content_approval ? 'Yes' : 'No'}</td>
                            <td>${airport.is_seo_view_list ? 'Yes' : 'No'}</td>
                            <td>${airport.is_seo_creator ? 'Yes' : 'No'}</td>
                            <td>${airport.is_seo_approval ? 'Yes' : 'No'}</td>
                            <td>${airport.is_video_view_list ? 'Yes' : 'No'}</td>
                            <td>${airport.is_video_creator ? 'Yes' : 'No'}</td>
                            <td>${airport.is_video_approval ? 'Yes' : 'No'}</td>
                            <td>${airport.is_article_view_list ? 'Yes' : 'No'}</td>
                            <td>${airport.is_article_creator ? 'Yes' : 'No'}</td>
                            <td>${airport.is_article_approval ? 'Yes' : 'No'}</td>
                           <td>
                                <button onclick="deleteAirport(${airport.id})" class="delete-btn">Delete</button>
                            </td>
                       `;
        
                       airportTableBody.appendChild(row);
                   });
                   })
                   .catch(error => console.error('Error fetching assigned airports:', error));
           }
        
        ////end of airport code
        
        /////Airline code
        airlineSearchInput.addEventListener('input', function () {
                let airlineQuery = airlineSearchInput.value.trim();
               
                if (airlineQuery.length < 2) {
                    airlineSuggestionsDiv.innerHTML = '';
                    return;
                }
        
                var pathname = window.location.pathname.split('/');
                var baseFolder = pathname[1]; // "online-airline"
                var baseUrl = window.location.origin + '/' + baseFolder;
                fetch(`${baseUrl}/public/admin/user_role_permission/search-airlines?query=${airlineQuery}`)
                    .then(response => response.json())
                    .then(cities => {
                        airlineSuggestionsDiv.innerHTML = '';
        
                        cities.forEach(airline => {
                            let airlineItem = document.createElement('a');
                            airlineItem.classList.add('list-group-item', 'list-group-item-action');
                            airlineItem.textContent = airline.name;
                            airlineItem.dataset.id = airline.id;
        
                            airlineItem.addEventListener('click', function () {
                                airlineSearchInput.value = airline.name;
                                selectedAirlineId.value = airline.id;
                                selectedAirlineIatacode.value =airline.iata_code;
                                airlineSuggestionsDiv.innerHTML = '';
                            });
        
                            airlineSuggestionsDiv.appendChild(airlineItem);
                        });
                    });
            });
        
            assignAirlineForm.addEventListener('submit', function (e) {
                e.preventDefault();
        
                let airlineFormData = new FormData(assignAirlineForm);
        
                var pathname = window.location.pathname.split('/');
                var baseFolder = pathname[1]; // "online-airline"
                var baseUrl = window.location.origin + '/' + baseFolder;
                fetch(`${baseUrl}/public/admin/user_role_permission/assign-airline/${userId}`, {
                    method: 'POST',
                    body: airlineFormData,
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('input[name=_token]').value
                    }
                })
                .then(response => response.json())
                .then(data => {
                    alert(data.message);
                    airlineSearchInput.value = '';
                    selectedAirlineId.value = '';
                    selectedAirlineIatacode.value= '';
                    fetchAssignedAirlines(); // Refresh the assigned countries list
                })
                .catch(error => console.error('Error:', error));
            });
        
            function fetchAssignedAirlines() {
        
                var pathname = window.location.pathname.split('/');
                var baseFolder = pathname[1]; // "online-airline"
                var baseUrl = window.location.origin + '/' + baseFolder;
               fetch(`${baseUrl}/public/admin/user_role_permission/get-assigned-airlines/${userId}`)
               
               .then(response => response.json())
               .then(data => {
                   let airlineTableBody = document.getElementById('assignedAirlinesTableBody');
                   airlineTableBody.innerHTML = ''; // Clear previous data
        
                       data.forEach(airline => {
                       let row = document.createElement('tr');
        
                       row.innerHTML = `
                           <td>${airline.name}</td>                   
                            <td>${airline.is_content_view_list ? 'Yes' : 'No'}</td>
                            <td>${airline.is_content_creator ? 'Yes' : 'No'}</td>
                            <td>${airline.is_content_approval ? 'Yes' : 'No'}</td>
                            <td>${airline.is_seo_view_list ? 'Yes' : 'No'}</td>
                            <td>${airline.is_seo_creator ? 'Yes' : 'No'}</td>
                            <td>${airline.is_seo_approval ? 'Yes' : 'No'}</td>
                            <td>${airline.is_video_view_list ? 'Yes' : 'No'}</td>
                            <td>${airline.is_video_creator  ? 'Yes' : 'No'}</td>
                            <td>${airline.is_video_approval ? 'Yes' : 'No'}</td>
                            <td>${airline.is_article_view_list ? 'Yes' : 'No'}</td>
                            <td>${airline.is_article_creator  ? 'Yes' : 'No'}</td>
                            <td>${airline.is_article_approval ? 'Yes' : 'No'}</td>
                           <td>
                                <button onclick="deleteAirline(${airline.id})" class="delete-btn">Delete</button>
                            </td>
                       `;
        
                       airlineTableBody.appendChild(row);
                   });
                   })
                   .catch(error => console.error('Error fetching assigned airlines:', error));
           }
        
        ////end of airline code
        // function deleteAirline(airlineId) {
        //     if (confirm('Are you sure you want to delete this airline?')) {
        //         fetch(`/onlineairports/public/user_role_permission/delete-airline/${airlineId}/${userId}`, {
        //             method: 'DELETE',
        //             headers: { 'Content-Type': 'application/json' }
        //         })
        //         .then(response => {
        //             if (response.ok) {
        //                 fetchAssignedAirlines(); // Refresh the table
        //             } else {
        //                 console.error('Failed to delete airline');
        //             }
        //         })
        //         .catch(error => console.error('Error deleting airline:', error));
        //     }
        
        
            // Fetch assigned countries on page load
            fetchAssignedCountries();
            fetchAssignedCities();
            fetchAssignedAirports();
            fetchAssignedAirlines();
        });
    </script>

    @endsection