@extends('layouts.app')

@section('header-title')
    Airways Directory: Airports
@endsection

@section('nav')
    <nav class="for-desk">
        <ul>
            <li><a href="#top"><img src="{{ asset('images/airways-logo.svg') }}" alt="logo" /></a></li>
            <li><a href="#search"><img src="{{ asset('images/icons/searchW.svg') }}" alt="search" /><p>Search</p></a></li>
            @foreach ($regions as $region)
                <li>
                    <a href="{{ route('countries') }}#region-{{ $region->id }}">
                        <img src="{{ asset('images/icons/' . $region->light_icon) }}" alt="{{ $region->name }}" />
                        <p>{{ $region->name }}</p>
                    </a>
                </li>
            @endforeach
        </ul>
    </nav>
    <nav class="for-mobile">
        <ul>
            <li><a href=""><img src="{{ asset('images/icons/language.png') }}" alt="switch-language" />Edit Language</a></li>
            <li><a href=""><img src="{{ asset('images/icons/share.svg') }}" alt="share" />Share <span>(99)</span></a></li>
            <li><a href="javascript:void(0)"><img src="{{ asset('images/icons/searchW.svg') }}" alt="search"/><img src="{{ asset('images/icons/search.svg') }}" alt="smart-search" />Smart Search</a></li>
        </ul>
    </nav>
@endsection

@section('content')
    <div class="content-wrap">
        <div class="cities airports">
            <div class="search-inside">
                <div class="title-bar">
                    <h2>
                        <i class="ttl-icon"><img src="{{asset('images/icons/airport.svg')}}"></i> Airports in
                    </h2>
                </div>
                <div class="searchInput">
                    <div class="title-bar">
                        <h2>
                            <i class="ttl-icon">
                                <img class="countryFlag" src="https://flagcdn.com/w40/{{ strtolower($country->iso_code) }}.png" alt="{{ $country->iso_code }} Flag">
                            </i>
                            <div class="editable">
                                <span class="country-label">{{ $country->name }}</span>
                                <input type="search" title="countrySearch" id="countrySearch" class="countrySearch" placeholder="Search countries..." autocomplete="off" value="{{ $country->name }}" style="display: none;">
                                <span class="editIcon"></span>
                            </div>
                        </h2>
                    </div>
                    <div class="resultBox">
                        <ul id="countryList" class="countryList">
                            @foreach($countries as $countryItem)
                                <li data-country="{{ strtolower($countryItem->name) }}" data-slug="{{ $countryItem->url_identifier }}">
                                    <i><img src="{{ asset('images/icons/country-search.svg') }}" alt="{{ $countryItem->iso_code }} Flag"/></i>
                                    {{ $countryItem->name }}
                                </li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
            <div class="search mb-24 mt-0">
                <h2>Search airport</h2>
                <form>
                    <input id="airportSearch" type="search" title="search" placeholder="Type airport name...">
                    <input type="submit" value="" disabled>
                </form>
            </div>
            <div class="after_page_search_bar">
            </div>
            <div class="title-bar pt-24">
                <h3><span id="airport-count"></span> Airports</h3>
            </div>
            <div class="no-results-message" style="display: none; padding: 1rem; color: #555; font-weight: bold; text-align: center; background-color: #f9f9f9; border: 1px solid #ddd; border-radius: 8px; margin-top: 1rem;">
                Sorry, no airports found.
            </div>
            <div class="airports-list" id="airportList">
            </div>
        </div>

        <div class="after_list_section">
        </div>

        
    </div>
@endsection

@push('scripts')
<script>
    window.baseImageUrl = @json(config('app.base_image_url'));
    const ADMIN_IMAGE_PATH = "{{ config('constants.ADMIN_IMAGE_PATH') }}";
    const code = '{{ $country->iso_code }}';
    const lang_code = '{{ $country->language_code }}';
    function fetchPageData(languageCode = 'en') {
        loadPageContent('lists', "airports", languageCode);
    }

    document.addEventListener("DOMContentLoaded", function () {
        const editable = document.querySelector(".editable");
        const label = editable.querySelector(".country-label");
        const input = editable.querySelector("#countrySearch");
        const editIcon = editable.querySelector(".editIcon");

        function activateInput() {
            label.style.display = "none";
            input.style.display = "inline-block";
            editIcon.style.display = "none";

            input.focus();
            const val = input.value;
            input.value = '';
            input.value = val;
        }

        function deactivateInput() {
            if (input.value.trim() !== "") {
                label.textContent = input.value;
            }
            input.style.display = "none";
            label.style.display = "inline-block";
            editIcon.style.display = "inline-block";
        }

        label.addEventListener("click", activateInput);
        editIcon.addEventListener("click", activateInput);

        input.addEventListener("blur", function () {
            setTimeout(deactivateInput, 150);
        });
    });

    $(function () {
        const $searchInput = $('.countrySearch');
        const $listItems = $('.countryList').children('li');
        const $searchBox = $('.searchInput');
        const $label = $('.country-label');
        const $countryFlag = $('.countryFlag');
        const $listWrapper = $('.airports-list');
        const $noResultsMsg = $('.no-results-message');
        const $airportCount = $('#airport-count');

        let lastSelectedCountry = {
            name: $searchInput.val().trim()
        };

        setTimeout(function () {
            fetchAndRenderAirports(code);
            fetchStats();
            fetchWeather('country', code);
            fetchPageData();
        }, 500);

        let userMadeSelection = false;

        $searchInput.on('focus input', function () {
            const keyword = $(this).val().toLowerCase().trim();

            if (keyword.length === 0) {
                $listItems.show();
            } else {
                $listItems.each(function () {
                    const name = $(this).data('country');
                    $(this).toggle(name.startsWith(keyword));
                });
            }

            $searchBox.addClass('active');
            userMadeSelection = false;
        });

        $searchInput.on('blur', function () {
            setTimeout(function () {
                if (!userMadeSelection) {
                    $searchInput.val(lastSelectedCountry.name);
                    $label.text(lastSelectedCountry.name);

                    $searchBox.removeClass('active');
                }
            }, 100);
        });

        $listItems.on('mousedown', function (e) {
            e.preventDefault();

            const countryName = $(this).text().trim();
            const countrySlug = $(this).data('slug');
            const countryCode = countrySlug.split('-')[0].toLowerCase();

            $searchInput.val(countryName);
            $label.text(countryName);

            lastSelectedCountry.name = countryName;
            userMadeSelection = true;

            const newFlagUrl = `https://flagcdn.com/w40/${countryCode}.png`;
            $countryFlag.attr('src', newFlagUrl).attr('alt', `${countryCode.toUpperCase()} Flag`);

            $searchBox.removeClass('active');

            if (countrySlug) {
                window.history.replaceState({}, '', `/airports/${countrySlug}`);

                fetchAndRenderAirports(countryCode);
            }
        });

        function fetchAndRenderAirports(countryCode) {
            searchAirports({
                countryCode,
                sort: {
                    column: 'number_of_routes',
                    direction: 'DESC',
                }
            }).then(res => {
                $listWrapper.empty();
                $noResultsMsg.hide();

                const airports = res.data || [];

                $airportCount.html(airports.length);

                if (airports.length === 0) {
                    $noResultsMsg.show();
                    return;
                }

                airports.forEach(airport => {
                    $listWrapper.append(`
                        <div class="airport-list-item" data-city-name="${airport.cityName}" data-airport-name="${airport.name}" data-airport-code="${airport.iata_code}">
                            <a href="/airport/${airport.url_identifier}">
                                <img class="bg" src="/images/airport-bg.png" alt="airport-bg">
                                <div class="list-container">
                                    <div class="list-header">
                                        <div class="flag-img">
                                            <img src="${window.baseImageUrl}/country/${airport.iso2_countrycode.toLowerCase()}.png" alt="${airport.iso2_countrycode}">
                                        </div>
                                        <div class="list-ttl">${airport.cityName} ${airport.iata_code}</div>
                                    </div>
                                    <div class="list-content">
                                        <p class="airportName">${airport.name}</p>
                                        <p class="airportName">${airport.second_name ?? ''}</p>
                                    </div>
                                    <div class="list-footer">
                                        <p class="tody-flt">Today ${airport.number_of_routes} Flights</p>
                                    </div>
                                </div>
                            </a>
                        </div>
                    `);
                });
            });
        }
    });

    document.addEventListener('DOMContentLoaded', function () {
        document.querySelectorAll('.search').forEach(searchSection => {
            const input = searchSection.querySelector('input[id="airportSearch"]');

            if (!input) return;

            const container = searchSection.closest('.desktop, .mobile') || document;
            const noResultsMsg = container.querySelector('.no-results-message');
            const clearBtn = searchSection.querySelector('.clear-search');

            input.addEventListener('input', function () {
                const query = this.value.toLowerCase().trim();
                const cards = container.querySelectorAll('.airport-list-item');

                if (query.length < 1) {
                    document.getElementById('airport-count').innerHTML = cards.length.toString();
                    cards.forEach(card => card.style.display = '');
                    if (noResultsMsg) noResultsMsg.style.display = 'none';
                    return;
                }

                let matchCount = 0;

                cards.forEach(card => {
                    const cityName = card.dataset.cityName?.toLowerCase() || '';
                    const airportName = card.dataset.airportName?.toLowerCase() || '';
                    const airportCode = card.dataset.airportCode?.toLowerCase() || '';

                    if (
                        cityName.includes(query) ||
                        airportName.includes(query) ||
                        airportCode.includes(query)
                    ) {
                        card.style.display = '';
                        matchCount++;
                    } else {
                        card.style.display = 'none';
                    }
                });

                document.getElementById('airport-count').innerHTML = matchCount.toString();

                if (noResultsMsg) {
                    noResultsMsg.style.display = matchCount === 0 ? '' : 'none';
                }
            });

            if (clearBtn) {
                clearBtn.addEventListener('click', function () {
                    input.value = '';
                    const cards = container.querySelectorAll('.airport-list-item');
                    cards.forEach(card => card.style.display = '');
                    if (noResultsMsg) noResultsMsg.style.display = 'none';
                });
            }
        });
    });

    function loadPageContent(type, code, langCode = 'en') {
            fetchPageContent({
                type,
                code,
                langCode,
                onSuccess: function (response) {
                    const data = response.data;
                    var initializedKeys = {};
                    $.each(data, function (className, contents) {
                        let htmlData= "";
                        $.each(contents, function (key, content) {
                            var replaceKey = className.toLowerCase();
                            if(content.displayWidth == "Footer-links"){
                                replaceKey = "footer-links"
                            }
                            var $target = $("." + replaceKey);
                            if ($target.length) {
                                if (!initializedKeys[replaceKey]) {
                                    $target.empty();
                                    initializedKeys[replaceKey] = true;
                                }
                                if (Array.isArray(content) && content.length > 0 && content[0]?.displayWidth) {
                                    if (content[0].displayWidth === "hero") {
                                       htmlData = rendorSliderHtml(content);
                                    } else if (content[0].displayWidth === "ad") {
                                        htmlData = rendorAdvHtml(content);
                                    } else {
                                        htmlData = rendorSectionHtml(content);
                                    }
                                } else {
                                    if(content.displayWidth === "hero"){
                                        htmlData = rendorSliderHtml(content);
                                    }else if(content.displayWidth === "ad"){
                                        htmlData = rendorAdvHtml(content);
                                    }else{
                                        htmlData = rendorSectionHtml(content);
                                    }
                                }
                                $target.append(htmlData);
                            }
                        });
                    });
                },
                onError: function () {
                    console.error("Error loading page content");
                }
            });
        }

</script>
@endpush