@extends('layouts.app')

@section('header-title')
    Airways Directory: Airlines <span id="header-count">({{ $airlines->count() }})</span>
@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>
        </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 airlines">
            <div class="search">
                <h2>Search airline</h2>
                <form>
                    <input type="text" placeholder="Type airline 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 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 airlines match your search text. Please try again.
                </div>
            </div>
            <div class="after_page_search_bar"></div>
            
            <div class="title-bar pt-24">
                <h3><span id="airline-count">{{ $airlines->count() }}</span> Airlines</h3>
            </div>
            <div class="airlines-list">
                @foreach ($airlines as $airline)
                    <div class="airline-list-item" data-iata-code="{{ $airline->iata_code }}" data-name="{{ $airline->name }}" data-country-name="{{ $airline->country }}">
                        <a href="{{ route('airline.show', ['slug' => $airline->url_identifier]) }}">
                            <img class="bg" src="{{ config('app.base_image_url') }}/airlines/{{ strtolower($airline->iata_code) }}.png" alt="{{ $airline->name }}">
                            <div class="airline-cta">
                                <div class="tody-flt">Today <span>{{ $airline->flights_every_day}}</span> Flights</div>
                            </div>
                        </a>
                    </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', "airlines", languageCode);
        }
        document.addEventListener('DOMContentLoaded', function () {
            document.querySelectorAll('.search').forEach(searchSection => {
                const input = searchSection.querySelector('input[type="text"]');
                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 airlineCards = container.querySelectorAll('.airline-list-item');
                    const accordionItems = container.querySelectorAll('.accordion-item');

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

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

                    airlineCards.forEach(card => {
                        const iataCode = card.dataset.iataCode?.toLowerCase() || '';
                        const name = card.dataset.name?.toLowerCase() || '';
                        const countryName = card.dataset.countryName?.toLowerCase() || '';
                        const regionDiv = card.closest('.accordion-item');

                        if (
                            iataCode.includes(query) ||
                            name.includes(query) ||
                            countryName.includes(query)
                        ) {
                            card.style.display = '';
                            regionHasMatch.set(regionDiv, true);
                            matchCount++;
                        } else {
                            card.style.display = 'none';
                        }
                    });

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

                    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 airlineCards = container.querySelectorAll('.airline-list-item');
                        const accordionItems = container.querySelectorAll('.accordion-item');
                        airlineCards.forEach(card => card.style.display = '');
                        accordionItems.forEach(card => card.style.display = '');
                        if (noResultsMsg) noResultsMsg.style.display = 'none';
                    });
                }
            });
        });

        $(function () {
            setTimeout(function () {
                fetchStats();
                fetchPageData();
            }, 500);
        });

        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