@extends('layouts.app')

@section('header-title')
    Airways Directory: Countries
@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="#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="countries">
            <div class="search">
                <h2>Search country</h2>
                <form>
                    <input type="text" placeholder="Type country name...">
                    <button type="button" class="clear-search"><i class=""><img src="{{asset('images/icons/closeB.svg')}}" title="Clear"></i></button>
                    <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 countries match your search text. Please try again.
            </div>
            <div class="after_page_search_bar"></div>
            <div class="accordion">
                @foreach ($regions as $region)
                    <div class="accordion-item">
                        <div id="region-{{ $region->id }}"></div>
                        <button class="accordion-header active">
                            <h2><i class="ttl-icon"><img src="images/icons/{{$region->dark_icon}}"></i>{{ $region->name}}</h2>
                            <span class="arrow"><img src="{{asset('images/icons/arrow-down.svg')}}"></span>
                        </button>
                        <div class="accordion-content open">
                            <div class="country-grid">
                                @foreach ($countriesGrouped[$region->code] ?? [] as $country)
                                    <div class="country-card">
                                        <div class="country-image">
                                            <img src="{{ 'https://image.nisoproducts.com/countries-image/' . $country->image_file_lang2 }}" alt="{{ $country->name }}">
                                        </div>
                                        <h3 class="country-title">{{ $country->name }}</h3>
                                        <p class="country-description">{{ $country->list_description }}</p>
                                        <div class="cta-footer">
                                            <div class="cta-inside">
                                                <a href="{{ url('/cities/' . $country->url_identifier) }}">{{ $country->number_of_cities }} cities</a>
                                                <a href="{{ url('/airports/' . $country->url_identifier) }}">{{ $country->number_of_airports }} airports</a>
                                            </div>
                                            <a href="{{ url('/country/' . $country->url_identifier) }}" class="border-btn">Flight Schedule</a>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
        <div class="after_list_section"></div>
        
    </div>
@endsection

@push('scripts')
    <script>
        const ADMIN_IMAGE_PATH = "{{ config('constants.ADMIN_IMAGE_PATH') }}";
        
        function fetchPageData(languageCode = 'en') {
            loadPageContent('lists', "countries", languageCode);
        }
        $(function () {
            setTimeout(function () {
                fetchPageData();
            }, 500);
        });

        document.addEventListener('DOMContentLoaded', function () {
            document.querySelectorAll('.search').forEach(searchSection => {
                const input = searchSection.querySelector('input[type="text"]');
                if (!input) return;

                // Get the parent container (desktop or mobile wrapper)
                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 countryCards = container.querySelectorAll('.country-card');
                    const accordionItems = container.querySelectorAll('.accordion-item');

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

                    const regionHasMatch = new Map();
                    let matchCount = 0;

                    countryCards.forEach(card => {
                        const countryName = card.querySelector('.country-title')?.textContent?.toLowerCase() || '';
                        const regionDiv = card.closest('.accordion-item');
                        if (countryName.includes(query)) {
                            card.style.display = '';
                            regionHasMatch.set(regionDiv, true);
                            matchCount++;
                        } else {
                            card.style.display = 'none';
                        }
                    });

                    accordionItems.forEach(item => {
                        item.style.display = regionHasMatch.has(item) ? '' : 'none';
                    });

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

                if (clearBtn) {
                    clearBtn.addEventListener('click', function () {
                        input.value = '';
                        const countryCards = container.querySelectorAll('.country-card');
                        const accordionItems = container.querySelectorAll('.accordion-item');
                        countryCards.forEach(card => card.style.display = ''); // show all
                        accordionItems.forEach(card => card.style.display = ''); // show all
                        if (noResultsMsg) noResultsMsg.style.display = 'none'; // hide "no results"
                    });
                }
            });
        });
    </script>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            document.querySelectorAll('.country-card').forEach(card => {
                card.addEventListener('click', function (e) {
                    // Prevent inner links/buttons from hijacking the click
                    if (e.target.closest('a, button')) return;

                    const url = this.dataset.url;
                    if (url) {
                        window.location.href = url;
                    }
                });
            });
        });

        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