@extends('layouts.app')

@section('header-title')
    Articles
@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>
            @foreach ($regions as $region)
                <li>
                    <a href="#region-{{ $region->id }}">
                        <img src="images/icons/{{ $region->light_icon }}" />
                        <p>{{ $region->name }}</p>
                    </a>
                </li>
            @endforeach
        </ul>
    </nav>
    <nav class="for-mobile">
        <ul>
            <li><a href=""><img src="{{ asset('images/icons/language.png') }}" />Edit Language</a></li>
            <li><a href=""><img src="{{ asset('images/icons/share.svg') }}" />Share <span>(99)</span></a></li>
            <li><a href="javascript:void(0)"><img src="{{ asset('images/icons/searchW.svg') }}" /><img src="{{ asset('images/icons/search.svg') }}" />Smart Search</a></li>
        </ul>
    </nav>
@endsection

@section('content')
    <div class="content-wrap">
        <div class="articles article-wrap">
            <div class="title-bar">
                <h2>Editors Choice</h2>
                <p>Exclusive Live Airways write ups for travellers to and from Mumbai</p>
            </div>
            <ul class="article-list">
                @foreach ($editorsChoiceArticles as $editorsChoiceArticle)
                    <li>
                        <div class="article-img"><img src="{{ config('app.cms_image_url') . '/imagesArticle/' . $editorsChoiceArticle->image }}" alt="{{ $editorsChoiceArticle->title }}"></div>
                        <p>{{ $editorsChoiceArticle->title }}</p>
                        <h6>{{ $editorsChoiceArticle->cms_category->title ?? '' }}</h6>
                    </li>
                @endforeach
            </ul>
        </div>
        <div class="after_editor_choice"></div>
        <div class="article-categories">
            <form class="hide" name="article-search">
                <input type="hidden" name="search" data-sync="search">
                <input type="hidden" name="country" data-sync="country">
                <input type="hidden" name="country_url" data-sync="country_url">
                <input type="hidden" name="city" data-sync="city">
                <input type="hidden" name="city_url" data-sync="city_url">
                <input type="hidden" name="airport" data-sync="airport">
                <input type="hidden" name="airport_url" data-sync="airport_url">
                <input type="hidden" name="airline" data-sync="airline">
                <input type="hidden" name="airline_url" data-sync="airline_url">
                <input type="hidden" name="type" data-sync="type">
                <input type="hidden" name="sort" data-sync="sort">
            </form>
            <div class="sort-filter-wrap desktop-filter for-desk">
                <h2>Search Articles <b>•</b> <span>Filter</span></h2>
                <form>
                    <div class="sort-filter">
                        <div class="searchInput">
                            <input id="articleSearchDesktop" name="search_display" title="search" placeholder="Search..." class="search-input js-filter-search-desktop" data-sync-display="search">
                        </div>
                        <div class="searchInput">
                            <input id="articleCountryDisplayDesktop" placeholder="Type country" name="country_display" title="country" class="countrySearch" data-sync-display="country">
                            <div class="resultBox"><ul></ul></div>
                        </div>
                        <div class="searchInput">
                            <input id="articleCityDisplayDesktop" placeholder="Type city" name="city_display" title="city" class="citySearch" data-sync-display="city">
                            <div class="resultBox"><ul></ul></div>
                        </div>
                        <div class="searchInput">
                            <input id="articleAirportDisplayDesktop" placeholder="Type airport" name="airport_display" title="airport" class="airportSearch" data-sync-display="airport">
                            <div class="resultBox"><ul></ul></div>
                        </div>
                        <div class="searchInput">
                            <input id="articleAirlineDisplayDesktop" placeholder="Type airline" name="airline_display" title="airline" class="airlineSearch" data-sync-display="airline">
                            <div class="resultBox"><ul></ul></div>
                        </div>
                        <div class="searchInput">
                            <select id="articleTypeDesktop" name="type_display" title="type" class="search-input type js-filter-type-desktop" data-sync-display="type">
                                <option>Type of article</option>
                                @foreach ($categories as $category)
                                    <option value="{{ $category->id }}" data-slug="{{ Str::slug($category->name) }}">
                                        {{ $category->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <input type="submit" value="">
                        <div class="sort-filter">
                            <button type="button" class="sort-btn sf sort">Sort<i><img src="{{ asset('images/icons/sortW.svg') }}" alt="Sort"></i></button>
                            <div class="sort-dropdown">
                                <ul>
                                    <li data-sort="name" data-sync-value="name">Name</li>
                                    <li data-sort="most-viewed" data-sync-value="most-viewed">Most Viewed</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="sort-filter-wrap mobile-filter for-mobile">
                <div class="mobile-filter-actions sort-filter">
                    <input id="articleSearchMobile" title="search" name="search_display" type="text" placeholder="Search..." class="mobile-search js-filter-search-mobile" data-sync-display="search">
                    <div class="sort-filter">
                        <button type="button" class="filter-btn sf applied">Filter
                            <i><img src="{{ asset('images/icons/filter.svg') }}" alt="Filter"></i>
                            <span class="flt-apply"></span>
                        </button>
                        <button type="button" class="sort-btn sf sort">Sort
                            <i><img src="{{ asset('images/icons/sort.svg') }}" alt="Sort"></i>
                        </button>
                    </div>
                </div>
                <div class="filter-panel">
                    <div class="filter-panel-content">
                        <button class="close-filter"><img src="{{ asset('images/icons/close.svg') }}" alt="close"></button>
                        <div class="searchInput">
                            <input id="articleCountryDisplayMobile" placeholder="Type country" name="country_display" title="country_display" class="countrySearch-mobile" data-sync-display="country">
                            <div class="resultBox"><ul></ul></div>
                        </div>
                        <div class="searchInput">
                            <input id="articleCityDisplayMobile" placeholder="Type city" name="city_display" title="city_display" class="citySearch-mobile" data-sync-display="city">
                            <div class="resultBox"><ul></ul></div>
                        </div>
                        <div class="searchInput">
                            <input id="articleAirportDisplayMobile" placeholder="Type airport" name="airport_display" title="airport_display" class="airportSearch-mobile" data-sync-display="airport">
                            <div class="resultBox"><ul></ul></div>
                        </div>
                        <div class="searchInput">
                            <input id="articleAirlineDisplayMobile" placeholder="Type airline" name="airline_display" title="airline_display" class="airlineSearch-mobile" data-sync-display="airline">
                            <div class="resultBox"><ul></ul></div>
                        </div>
                        <div class="searchInput">
                            <select id="articleTypeMobile" name="type_display" title="type_display" class="type js-filter-type-mobile" data-sync-display="type">
                                <option>Type of article</option>
                                @foreach ($categories as $category)
                                    <option value="{{ $category->id }}" data-slug="{{ Str::slug($category->name) }}">
                                        {{ $category->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="filter-cta">
                            <button class="btn w-100 mt-24 mb-0">Apply</button>
                            <button class="border-btn w-100 mt-24 mb-0">Clear</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="after_page_search_bar"></div>
            <div class="all-listing all-article-listing">
                <div class="article-wrap">
                    <div class="accordion">
                        @foreach($categories as $category)
                            <div class="accordion-item" >
                                <button class="accordion-header active" id="accordion-cat-{{ $category->id }}">
                                    <h2>{{ $category->name }}</h2>
                                    <span class="arrow"><img src="{{ asset('images/icons/arrow-down.svg') }}" alt="arrow"></span>
                                </button>
                                <div class="accordion-content open">
                                    <div class="articles">
                                        <ul class="article-list m-0" data-category-id="{{ $category->id }}">
                                            <li><div class="view-all-block" data-category="{{ $category->id }}">View All</div></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
            @foreach($categories as $category)
                <div class="category-wrap" id="cat{{ $category->id }}">
                    <div class="title-bar">
                        <h2>{{ $category->name }}</h2>
                        <div class="back-btn border-btn mb-0">Back to all categories</div>
                    </div>
                    <div class="articles article-wrap">
                        <ul class="article-list m-0" id="fullArticleListCat{{ $category->id }}">
                            <li><div class="load-more-video" data-category="{{ $category->id }}">Load More</div></li>
                        </ul>
                    </div>
                </div>
            @endforeach
        </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', "articles", languageCode);
        }

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

            searchLocation(
                '.countrySearch',
                "{{ route('search.countries') }}",
                "{{ asset('images/icons/country-search.svg') }}",
                'input[name="country"]',
                'input[name="country_url"]'
            );

            searchLocation(
                '.citySearch',
                "{{ route('search.cities') }}",
                "{{ asset('images/icons/city-search.svg') }}",
                'input[name="city"]',
                'input[name="city_url"]'
            );

            searchLocation(
                '.airportSearch',
                "{{ route('search.airports') }}",
                "{{ asset('images/icons/airport-search.svg') }}",
                'input[name="airport"]',
                'input[name="airport_url"]'
            );

            searchLocation(
                '.airlineSearch',
                "{{ route('search.airlines') }}",
                "{{ asset('images/icons/flight-search.svg') }}",
                'input[name="airline"]',
                'input[name="airline_url"]'
            );

            searchLocation(
                '.countrySearch-mobile',
                "{{ route('search.countries') }}",
                "{{ asset('images/icons/country-search.svg') }}",
                'input[name="country"]',
                'input[name="country_url"]'
            );

            searchLocation(
                '.citySearch-mobile',
                "{{ route('search.cities') }}",
                "{{ asset('images/icons/city-search.svg') }}",
                'input[name="city"]',
                'input[name="city_url"]'
            );

            searchLocation(
                '.airportSearch-mobile',
                "{{ route('search.airports') }}",
                "{{ asset('images/icons/airport-search.svg') }}",
                'input[name="airport"]',
                'input[name="airport_url"]'
            );

            searchLocation(
                '.airlineSearch-mobile',
                "{{ route('search.airlines') }}",
                "{{ asset('images/icons/flight-search.svg') }}",
                'input[name="airline"]',
                'input[name="airline_url"]'
            );
        });

        function preFillArticleFilters() {
            const segments = getArticleUrlSegments();

            if (segments.country) {
                fetchExactMatch('country', segments.country, item => fillArticleFilter('country', item));
            }
            if (segments.city) {
                fetchExactMatch('city', segments.city, item => fillArticleFilter('city', item));
            }
            if (segments.airport) {
                fetchExactMatch('airport', segments.airport, item => fillArticleFilter('airport', item));
            }
            if (segments.airline) {
                fetchExactMatch('airline', segments.airline, item => fillArticleFilter('airline', item));
            }

            if (segments.type) {
                fillArticleField('type', segments.type);
            }

            if (segments.search) {
                fillArticleField('search', decodeURIComponent(segments.search));
            }

            if (segments.sort) {
                fillArticleField('sort', segments.sort);
            }
        }

        function fetchExactMatch(type, urlIdentifier, callback) {
            if (!type || !urlIdentifier) {
                callback(null);
                return;
            }

            let searchFn;
            const params = { url_identifier: urlIdentifier };

            switch (type) {
                case 'airline':
                    searchFn = searchAirlines;
                    break;
                case 'airport':
                    searchFn = searchAirports;
                    break;
                case 'city':
                    searchFn = searchCities;
                    break;
                case 'country':
                    searchFn = searchCountries;
                    break;
                default:
                    callback(null);
                    return;
            }

            searchFn(params).done(function (response) {
                let item = null;
                if (response) {
                    if (Array.isArray(response.data)) {
                        item = response.data.find(it => it.url_identifier === urlIdentifier) || null;
                    } else if (response.data) {
                        item = response.data;
                    }
                }
                callback(item);
            }).fail(function () {
                callback(null);
            });
        }

        function getArticleUrlSegments() {
            const path = window.location.pathname.split('/');
            const segments = {};

            for (let i = 0; i < path.length; i++) {
                switch (path[i]) {
                    case 'country':
                        segments.country = path[i + 1];
                        break;
                    case 'city':
                        segments.city = path[i + 1];
                        break;
                    case 'airport':
                        segments.airport = path[i + 1];
                        break;
                    case 'airline':
                        segments.airline = path[i + 1];
                        break;
                    case 'type':
                        segments.type = path[i + 1];
                        break;
                    case 'search':
                        segments.search = path[i + 1];
                        break;
                    case 'sort':
                        segments.sort = path[i + 1];
                        break;
                }
            }
            return segments;
        }

        function fillArticleFilter(field, item) {
            if (!item) return;

            const hidden = $('form[name="article-search"]');

            const fields = [
                { name: field, value: item.code || '' },
                { name: `${field}_url`, value: item.url_identifier || '' }
            ];

            fields.forEach(f => {
                const $field = hidden.find(`[name="${f.name}"]`);
                $field.val(f.value).trigger('input');
            });

            $(`[data-sync-display="${field}"]`).val(item.displayName || item.name || '').trigger('input');
        }

        function fillArticleField(field, value) {
            const hidden = $('form[name="article-search"]');
            hidden.find(`[name="${field}"]`).val(value).trigger('input');
        }

        function openAccordionByCategory(categoryId) {
            const $header = $("#accordion-cat-" + categoryId);
            const $content = $header.closest('.accordion-item').find('.accordion-content');

            $header.addClass("active");
            $content.addClass("open").css("max-height", $content.prop("scrollHeight") + "px");
        }

        function closeAccordionByCategory(categoryId) {
            const $header = $("#accordion-cat-" + categoryId);
            const $content = $header.closest('.accordion-item').find('.accordion-content');

            $header.removeClass("active");
            $content.removeClass("open").css("max-height", "");
        }

        function renderArticleItems(articles, $list, { append = false, keepViewAll = false } = {}) {
            if (!append) {
                if (keepViewAll) {
                    $list.find('li:not(:last)').remove();
                } else {
                    $list.empty();
                }
            }

            $.each(articles, (index, article) => {
                const $li = $(`<li>
                    <div class="article-img"><img src="{{ config('app.cms_image_url') }}/imagesArticle/${article.image}" alt="${article.title}"></div>
                    <p>${article.title}</p>
                    <h6>${article.cms_category?.name ?? ''}</h6>
                </li>`);

                if (keepViewAll) {
                    $li.insertBefore($list.find('.view-all-block').closest('li'));
                } else if ($list.find('.load-more-video').length) {
                    $li.insertBefore($list.find('.load-more-video').closest('li'));
                } else {
                    $list.append($li);
                }
            });
        }

        $(document).on('click', '.view-all-block', function () {
            const categoryId = $(this).data('category');
            const $fullView = $(`#cat${categoryId}`);
            const $list = $fullView.find('.article-list');

            $('.all-listing').addClass('hide');

            $fullView.show();
            $fullView.addClass('active');

            fetchArticles({ category_id: categoryId, limit: 5, offset: 0 }, (articles, hasMore) => {
                renderArticleItems(articles, $list);

                if (hasMore) {
                    $list.append(`<li>
                        <div class="load-more-video" data-category="${categoryId}" data-offset="6">Load More</div>
                    </li>`);
                }
            });
        });

        $(document).on('click', '.load-more-video', function () {
            const $btn = $(this);
            const categoryId = $btn.data('category');
            let offset = parseInt($btn.data('offset'), 10) || 0;
            const $list = $(`#cat${categoryId} .article-list`);

            fetchArticles({ category_id: categoryId, limit: 6, offset: offset }, (articles, hasMore) => {
                renderArticleItems(articles, $list, { append: true });

                if (hasMore) {
                    $btn.data('offset', offset + 6);
                } else {
                    $btn.closest('li').remove();
                }
            });
        });

        $(document).on('click', '.category-wrap .back-btn', function () {
            const $wrap = $(this).closest('.category-wrap');
            const categoryId = $wrap.attr('id').replace('cat', '');

            $('.all-listing').removeClass('hide');

            $wrap.hide();
            $wrap.removeClass('active');

            const $accordionList = $(`.article-list[data-category-id="${categoryId}"]`);
            $accordionList.empty().append(`
                <li>
                    <div class="view-all-block" data-category="${categoryId}">View All</div>
                </li>
            `);

            fetchArticles({ category_id: categoryId, limit: 5, offset: 0 }, (articles) => {
                renderArticleItems(articles, $accordionList, { keepViewAll: true });
            });
        });

        function searchLocation(inputSelector, url, icon, hiddenCodeSelector, hiddenUrlSelector) {
            $(document).on('input', inputSelector, function () {
                const $input = $(this);
                const keyword = $input.val().trim();
                const $wrapper = $input.closest('.searchInput');
                const $resultBox = $wrapper.find('.resultBox ul');

                $('.searchInput').not($wrapper).removeClass('active');

                $resultBox.empty();
                $wrapper.removeClass('active');

                if (!keyword) return;

                $.ajax({
                    url: url,
                    method: 'GET',
                    data: { query: keyword },
                    dataType: 'json',
                    success: function (res) {
                        if (!res.status || !res.data || !res.data.length) return;

                        $.each(res.data, function (index, item) {
                            const li = $(`<li class="search-item"
                                data-code="${item.code}"
                                data-url_identifier="${item.url_identifier}">
                                <i><img src="${icon}" alt="Icon"></i>
                                ${item.displayName}
                            </li>`);

                            li.on("click", function () {
                                $input.val(item.displayName).trigger('input');

                                if (hiddenCodeSelector) {
                                    $(hiddenCodeSelector).val(item.code).trigger('input');
                                }

                                if (hiddenUrlSelector) {
                                    $(hiddenUrlSelector).val(item.url_identifier).trigger('input');
                                }

                                $resultBox.empty();
                                $wrapper.removeClass('active');
                            });

                            $resultBox.append(li);
                        });

                        $wrapper.addClass('active');
                    },
                    error: function (err) {
                        console.error('Filter AJAX error', err);
                    }
                });
            });
        }

        $(document).on('submit', '.desktop-filter form', function(e) {
            e.preventDefault();
            applyArticleFilters();
        });

        $(document).on('click', '.mobile-filter .filter-cta .btn', function(e) {
            e.preventDefault();
            applyArticleFilters();
            $('.filter-panel').removeClass('active');
        });

        function applyArticleFilters() {
            const $hidden = $('form[name="article-search"]');
            const params = {};

            $hidden.find('[data-sync]').each(function() {
                const key = $(this).attr('name');
                const val = $(this).val();
                if (val) params[key] = val;
            });

            updateURL();

            $('.category-wrap').hide().removeClass('active');
            $('.all-listing').removeClass('hide');

            $('.article-list[data-category-id]').each(function() {
                const $list = $(this);
                const categoryId = $list.data('category-id');

                $list.empty().append(`<li><div class="view-all-block" data-category="${categoryId}">View All</div></li>`);

                closeAccordionByCategory(categoryId);
                fetchArticles({ category_id: categoryId, limit: 5, offset: 0, ...params }, (articles) => {
                    if (!articles.length) {
                        $list.closest('.accordion-item').remove();
                        return;
                    }

                    renderArticleItems(articles, $list, { keepViewAll: true });
                    openAccordionByCategory(categoryId);
                });
            });
        }

        function updateURL() {
            const urlParts = [];
            const $hidden = $('form[name="article-search"]');

            const countryUrl = $hidden.find('[name="country_url"]').val();
            if (countryUrl) urlParts.push(`country/${encodeURIComponent(countryUrl)}`);

            const cityUrl = $hidden.find('[name="city_url"]').val();
            if (cityUrl) urlParts.push(`city/${encodeURIComponent(cityUrl)}`);

            const airportUrl = $hidden.find('[name="airport_url"]').val();
            if (airportUrl) urlParts.push(`airport/${encodeURIComponent(airportUrl)}`);

            const airlineUrl = $hidden.find('[name="airline_url"]').val();
            if (airlineUrl) urlParts.push(`airline/${encodeURIComponent(airlineUrl)}`);

            const typeVal = $hidden.find('[name="type"]').val();
            if (typeVal) {
                const opt = $hidden.find(`[name="type"] option[value="${typeVal}"]`);
                const slug = opt.data('slug') || typeVal;
                urlParts.push(`type/${slug}`);
            }

            const searchText = $hidden.find('[name="search"]').val();
            if (searchText) urlParts.push(`search/${encodeURIComponent(searchText)}`);

            const sortVal = $hidden.find('[name="sort"]').val();
            if (sortVal) urlParts.push(`sort/${encodeURIComponent(sortVal)}`);

            const basePath = "{{ route('articles.index') }}";
            const newUrl = basePath + (urlParts.length ? '/' + urlParts.join('/') : '');

            window.history.replaceState({}, '', newUrl);
        }
    </script>
@endpush