@extends('layouts.app')

@section('header-title')
    Airways Directory: Cities
@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">
            <div class="search-inside">
                <div class="title-bar">
                    <h2>
                        <i class="ttl-icon"><img src="{{asset('images/icons/city.svg')}}"></i> Cities 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 city</h2>
                <form>
                    <input id="citySearch" type="search" title="search" placeholder="Type city name...">
                    <input type="submit" value="" disabled>
                </form>
            </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 cities found.
            </div>
            <div class="after_page_search_bar"></div>
            <div class="city-grid" id="cityList">
            </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 }}';

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

        $(document).ready(function () {
            const $searchInput = $('.countrySearch');
            const $listItems = $('.countryList').children('li');
            const $searchBox = $('.searchInput');
            const $label = $('.country-label');
            const $countryFlag = $('.countryFlag');
            const $listWrapper = $('#cityList');
            const $noResultsMsg = $('.no-results-message');

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

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

            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({}, '', `/cities/${countrySlug}`);

                    fetchAndRenderCities(countryCode);
                }
            });

            function fetchAndRenderCities(countryCode) {
                searchCities({
                    countryCode
                }).then(res => {
                    $listWrapper.empty();
                    $noResultsMsg.hide();

                    const cities = res.data || [];

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

                    cities.forEach(city => {
                        $listWrapper.append(`<div class="city-grid-item" data-city-name="${city.name}" data-iata-code="${city.iata_code}">
                            <a class="item-link" href="/city/${city.url_identifier}">
                                <div class="city-name">${city.name}</div>
                                <div class="mt-5"><span>${city.number_of_routes} routes</span></div>
                            </a>
                            <div class="flights-link">
                                <a href="/city/${city.url_identifier}/departures/">
                                    <i class=""><img src="/images/icons/departure-plane.png"></i>
                                    Departures
                                </a>
                                <a href="/city/${city.url_identifier}/arrivals/">
                                    <i class=""><img src="/images/icons/arrival-plane.png"></i>
                                    Arrivals
                                </a>
                            </div>
                        </div>`);
                    });
                });
            }

            $(document).on('click', function (e) {
                if (!$(e.target).closest('.searchInput').length) {
                    $('.searchInput').removeClass('active');
                }
            });

            function fetchPageData(languageCode = 'en') {
                loadPageContent('lists', "cities", languageCode);
            }
            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>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            document.querySelectorAll('.search').forEach(searchSection => {
                const input = searchSection.querySelector('input[type="search"]');
                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 cityCards = container.querySelectorAll('.city-grid-item');

                    if (query.length < 1) {
                        cityCards.forEach(card => card.style.display = '');
                        if (noResultsMsg) noResultsMsg.style.display = 'none';
                        return;
                    }

                    let matchCount = 0;

                    cityCards.forEach(card => {
                        const cityName = card.dataset.cityName?.toLowerCase() || '';
                        const iataCode = card.dataset.iataCode?.toLowerCase() || '';

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

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

                if (clearBtn) {
                    clearBtn.addEventListener('click', function () {
                        input.value = '';
                        const cityCards = container.querySelectorAll('.city-grid-item');
                        cityCards.forEach(card => card.style.display = '');
                        if (noResultsMsg) noResultsMsg.style.display = 'none';
                    });
                }
            });
        });
    </script>
@endpush