@extends('layouts.app')

@section('header-title')
{{ $airport->name }} {{ $airport->city->name }} <b>&#8226;</b> <span>{{ $airport->iata_code }}</span>
<br>{{ isset($secondaryLanguage) && $secondaryLanguage != 'en' ? Arr::get($translations, mb_strtolower($airport->name)) : '' }}
<div class="search-form">
    <label>
        <input id="global-search-field" type="search" class="search-field" placeholder="Search..." name="Search" />
    </label>
    <div class="editAirp" id="search-results-container">
        <div class="resultBox">
            <ul id="search-results"></ul>
        </div>
    </div>
</div>
@endsection

@section('nav')
    <nav class="for-desk">
        <ul>
            <li><a href="#top"><img src="{{ asset('images/airways-logo.svg') }}"/></a></li>
            <li><a href="#search"><img src="{{ asset('images/icons/searchW.svg') }}"/><p>Search</p></a></li>
            <li><a href="#flights"><img src="{{ asset('images/icons/departureW.svg') }}"/><p>All Flights</p></a></li>
            <li><a href="#radar"><img src="{{ asset('images/icons/radar-chartW.svg') }}"/><p>Live Radar</p></a></li>
            <li><a href="#videos"><img src="{{ asset('images/icons/video.svg') }}"/><p>Videos</p></a></li>
            <li><a href="#articles"><img src="{{ asset('images/icons/blogW.svg') }}"/><p>Articles</p></a></li>
            <li><a href="#routes"><img src="{{ asset('images/icons/directionsW.svg') }}"/><p>Routes</p></a></li>
        </ul>
    </nav>
    <nav class="for-mobile">
        <ul>
            @if (isset($secondaryLanguage) && $secondaryLanguage != 'en')
                <li>
                    <a href="javascript:void(0);" class="language-switch" data-language="{{ $secondaryLanguage }}">
                        <img src="{{ asset('images/icons/language.png') }}" alt="language"/>Edit Language
                    </a>
                </li>
            @endif
            <li>
                <a href="javascript:void(0);">
                    <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="searchW"/>
                    <img src="{{ asset('images/icons/search.svg') }}" alt="search"/>
                    Smart Search
                </a>
            </li>
        </ul>
    </nav>
@endsection

@section('content')
@include('layouts.partials.flights')

<div class="content-wrap">
    <div class="after_flight_row"></div>

    @include('layouts.partials.videos')
    <div class="after_video_section"></div>

    @include('layouts.partials.articles')
    <div class="after_article_section"></div>

    @include('layouts.partials.routes')
    <div class="after_busiest_routes"></div>

</div>
@endsection

@push('scripts')
    <script>
        const code = '{{ $airport->iata_code }}';
        const ADMIN_IMAGE_PATH = "{{ config('constants.ADMIN_IMAGE_PATH') }}";

        function fetchPageData(languageCode = 'en') {
            fetchArticles({type: 'airport', code, language: languageCode, limit: 6}, renderArticles);
            loadPageContent('airport', code, languageCode);
        }

        $(function () {
            setTimeout(function () {
                fetchWeather('airport', code);
                fetchStats('airport', code);
                fetchBusiestRoute('airport', code);
                fetchVideos('airport', code);
                fetchArticles({type: 'airport', code, language: 'en', limit: 6}, renderArticles);
                fetchPageData()
            },500);

            const $input = $('#global-search-field');
            const $list = $('#search-results');
            const $searchResultContainer = $('#search-results-container');
            const apiUrl = "{{ route('search.index') }}";
            const headerSearchExcept = [];

            const detailRoutes = {
                airport: '/airport/',
                city: '/city/',
                country: '/country/',
                airline: '/airline/',
            };

            let typingTimer;

            $input.on('blur', function () {
                setTimeout(function () {
                    $input.val('');
                    $list.empty();
                    $searchResultContainer.removeClass('active');
                }, 300);
            });

            $input.on('input', function () {
                clearTimeout(typingTimer);

                const query = $input.val().trim();

                $searchResultContainer.removeClass('active');

                if (this.value === '') {
                    $list.empty();
                }

                $searchResultContainer.removeClass('active');

                typingTimer = setTimeout(function () {
                    fetchSearchResults({
                        apiUrl,
                        query,
                        headerSearchExcept,
                        onSuccess: function (response) {
                            $list.empty();

                            const data = response.data;

                            if (!Array.isArray(data) || data.length === 0) {
                                $list.append("<li>No results found</li>");
                                return;
                            }

                            $searchResultContainer.addClass('active');

                            data.forEach(function (item) {
                                const logo = logoMap[item.type] || airportLogo;
                                const baseUrl = detailRoutes[item.type] || '/';
                                const href = baseUrl + encodeURIComponent(item.url_identifier);

                                const li = $(`<li class="search-item" data-type="${item.type}" data-code="${item.code}">
                                    <a href="${href}">
                                        <img src="${logo}" class="search-icon" alt="search-icon" />
                                        ${item.displayName}
                                    </a>
                                </li>`);

                                li.find("a").on("mousedown touchstart", function (e) {
                                    e.preventDefault();
                                    window.location.href = this.href;
                                });

                                $list.append(li);
                            });
                        },
                        onError: function () {
                            $list.html("<li>Error fetching results</li>");
                        }
                    });
                }, 300);
            });

        $('#global-search-form').on('submit', function(e) {
            e.preventDefault();
        });
    });

        function renderArticles(articles) {
            const articleList = $('#articleList');
            articleList.empty();
            let rows = '';
            
            $.each(articles, function (index, article) {
                rows += `<li>
                    <div class="article-img"><img src="{{ config('app.cms_image_url') }}/imagesArticle/${article.image}" alt=""></div>
                     <a href="{{ url('article/') }}/${article.url_identifier}"><p>${article.title}</p></a>
                    <h6>${article.cms_category?.name ?? ''}</h6>
                </li>`;
            });

            articleList.append(rows);
        }

    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