@extends('layouts.app')

@section('header-title')
    Videos
@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="videos">
            <div class="title-bar">
                <h2>Editors Choice</h2>
                <p>Specially curated videos for you by Live Airways</p>
            </div>
            <div class="videos video-wrap">
                <ul class="video-list">
                    @foreach ($editorsChoiceVideos as $video)
                        @php
                        preg_match('/src="([^"]+)"/', $video->youtube_url, $matches);
                             $videoSrc = isset($matches[1]) ? $matches[1] : '';
                        @endphp
                        @php
                            $staticIcon = 'https://yt3.ggpht.com/ytc/AIdro_lMcPFMQAWfvTbHqJ_cZB6RLJN0Oyp2jcP6LXgYBfcSEEQ=s48-c-k-c0x00ffffff-no-rj';
                            $staticName = 'Live Airways';
                            $staticViews = '1.5M';
                            $staticAge = $video->created_at ?? '10 months ago';
                        @endphp
                        <li class="video-card editor-video" data-youtube-id="{{ $video->youtube_id }}">
                            <div class="video-thumb-wrap">
                                <a href="{{ $videoSrc }}" target="_blank">
                                    <iframe src="{{ $videoSrc }}" frameborder="0"
                                        referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
                                    <span class="play-btn"></span>
                                </a>
                            </div>
                            <div class="video-meta">
                                <h4 class="video-title">{{ $video->title }} | {{ $video->title_lang2 }}</h4>
                                <img class="channel-icon" src="{{ $staticIcon }}" alt="{{ $staticName }}"
                                    style="width:40px;height:40px;" />
                                <p class="channel-name">{{ $staticName }}</p>
                                <p>
                                    <span class="views">{{ $staticViews }}</span> &#8226;
                                    <span class="howold">{{ $staticAge }}</span>
                                </p>
                                <div class="clear"></div>
                            </div>
                        </li>
                    @endforeach
                </ul>
            </div>
        </div>
        <div class="after_editor_choice"></div>
        <div class="video-categories">
            <div class="sort-filter-wrap desktop-filter for-desk">
                <h2>Search Video <b>•</b> <span>Filter</span></h2>
                <form action="{{ route('videos.index') }}" method="GET">
                    <div class="sort-filter">
                        <div class="searchInput">
                            <input id="searchInput" name="search" placeholder="Search..." class="search-input"
                                value="{{ request()->input('search') }}">
                        </div>

                        <div class="searchInput">
                            <input type="text" id="countrySearchDesktop" name="countryCode" class="countrySearch"
                                placeholder="Type country..." autocomplete="off"
                                value="{{ request()->input('countryCode') }}">
                            <input type="hidden" id="selectedCountryId" name="countryCode"
                                value="{{ request()->input('countryCode') }}">

                            <div class="resultBox">
                                <ul id="countryListDesktopVideos" class="countryList"></ul>
                            </div>
                        </div>

                        <div class="searchInput">
                            <input type="text" id="citySearchDesktop" class="citySearch" placeholder="Type city..."
                                autocomplete="off" value="{{ request()->input('cityCode') }}">
                            <input type="hidden" id="selectedCityId" name="cityCode"
                                value="{{ request()->input('cityCode') }}">
                            <div class="resultBox">
                                <ul id="cityListDesktopVideos" class="cityList"></ul>
                            </div>
                        </div>

                        <div class="searchInput">
                            <input type="text" id="airportSearchDesktop" class="airportSearch"
                                placeholder="Type airport..." autocomplete="off"
                                value="{{ request()->input('airportCode') }}">
                            <input type="hidden" id="selectedAirportId" name="airportCode"
                                value="{{ request()->input('airportCode') }}">

                            <div class="resultBox">
                                <ul id="airportListDesktopVideos" class="airportList"></ul>
                            </div>
                        </div>

                        <div class="searchInput">
                            <input type="text" id="airlineSearchDesktop" class="airlineSearch"
                                placeholder="Type airline..." autocomplete="off"
                                value="{{ request()->input('airlineCode') }}">
                            <input type="hidden" id="selectedAirlineId" name="airlineCode"
                                value="{{ request()->input('airlineCode') }}">

                            <div class="resultBox">
                                <ul id="airlineListDesktopVideos" class="airlineList"></ul>
                            </div>
                        </div>

                        <div class="searchInput">
                            <select id="videoType" name="videoType" class="search-input">
                                <option value="">Type of video</option>
                                @foreach ($categoriesWithVideoCounts as $category)
                                    <option value="{{ $category->id }}" data-slug="{{ Str::slug($category->name) }}"
                                        {{ request()->input('videoType') == $category->id ? 'selected' : '' }}>
                                        {{ $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">Name</li>
                                    <li data-sort="most-viewed">Most Viewed</li>
                                </ul>
                            </div>
                        </div>

                        <button type="button" class="clear-btn"><i class=""><img
                                    src="{{ asset('images/icons/closeB.svg') }}"></i> Clear all</button>
                    </div>
                </form>
            </div>
            <div class="sort-filter-wrap mobile-filter for-mobile">
                <div class="mobile-filter-actions sort-filter">
                    <input type="text" placeholder="Search..." class="mobile-search">
                    <div class="sort-filter">
                        <button type="button" class="filter-btn sf applied">
                            Filter <i><img src="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="images/icons/sort.svg" alt="Sort"></i>
                        </button>
                        <button type="button" class="clear-btn">
                            <i class=""><img src="images/icons/closeB.svg"></i> Clear
                        </button>
                    </div>
                </div>
                <div class="sort-dropdown">
                    <ul>
                        <li data-sort="name">Name</li>
                        <li data-sort="most-viewed">Most Viewed</li>
                    </ul>
                </div>

                <div class="filter-panel">
                    <div class="filter-panel-content">
                        <button class="close-filter"><img src="images/icons/close.svg"></button>
                        <div class="searchInput">
                            <input type="text" id="countrySearchMobile" placeholder="Type country" autocomplete="off">
                            <input type="hidden" id="selectedCountryIdMobile" value="">
                            <div class="resultBox">
                                <ul id="countryListMobileVideos" class="countryList"></ul>
                            </div>
                        </div>

                        <div class="searchInput">
                            <input type="text" id="citySearchMobile" placeholder="Type city" autocomplete="off">
                            <input type="hidden" id="selectedCityIdMobile" value="">
                            <div class="resultBox">
                                <ul id="cityListMobileVideos" class="cityList"></ul>
                            </div>
                        </div>

                        <div class="searchInput">
                            <input type="text" id="airportSearchMobile" placeholder="Type airport" autocomplete="off">
                            <input type="hidden" id="selectedAirportIdMobile" value="">
                            <div class="resultBox">
                                <ul id="airportListMobileVideos" class="airportList"></ul>
                            </div>
                        </div>

                        <div class="searchInput">
                            <input type="text" id="airlineSearchMobile" placeholder="Type airline" autocomplete="off">
                            <input type="hidden" id="selectedAirlineIdMobile" value="">
                            <div class="resultBox">
                                <ul id="airlineListMobileVideos" class="airlineList"></ul>
                            </div>
                        </div>
                        <select>
                            <option>Type of video</option>
                            <option>Category 1</option>
                            <option>Category 2</option>
                            <option>Category 3</option>
                        </select>
                        <div class="filter-cta">
                            <button class="btn w-100 mt-24 mb-0">Aply</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">
                <div class="video-wrap">
                    <div class="accordion">
                        @foreach ($categoriesWithVideoCounts as $category)
                            <div class="accordion-item category-section"
                                data-category-slug="{{ Str::slug($category->name) }}">
                                <button class="accordion-header title-bar" id="accordion-cat-{{ $category->id }}">
                                    <h2>{{ $category->name }}</h2>
                                    <div class="back-btn border-btn" style="display:none;">Back to all categories </div>
                                    <span class="arrow">
                                        <img src="{{ asset('images/icons/arrow-down.svg') }}">
                                    </span>
                                </button>

                                <div class="accordion-content">
                                    <ul class="video-list video-container" id="cat{{ $category->id }}"
                                        data-category-id="{{ $category->id }}"
                                        data-category-slug="{{ Str::slug($category->name) }}" data-offset="5">
                                        <li id="load-more-{{ $category->id }}" data-target="cat{{ $category->id }}"
                                            data-category="{{ $category->id }}">
                                            <div class="view-all-block" data-category="{{ $category->id }}">
                                                View All
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
        <div class="after_list_section"></div>
    </div>
@endsection

@push('scripts')
    <script>
        function fetchVideos(categoryId, offset = 0, limit = 5, countryCode = '', cityCode = '', airportCode = '',
            airlineCode = '', keyword = '') {
            const $container = $('#cat' + categoryId);

            if ($container.length === 0) return;

            let $loading = $container.find('.loading');
            if ($loading.length === 0) {
                $loading = $('<li class="loading">Loading...</li>');

                $container.find('#load-more-' + categoryId).before($loading);
            }
            $loading.show();

            $.ajax({
                url: '{{ route('videos.search') }}',
                method: 'GET',
                data: {
                    offset: offset,
                    limit: limit,
                    category_id: categoryId,
                    countryCode,
                    cityCode,
                    airportCode,
                    airlineCode,
                    keyword: keyword
                },
                success: function(response) {
                    $loading.hide();

                    const items = response.data || [];

                    items.forEach(video => {
                        const ytId = video.youtube_id || '';

                        const videoHtml = `<li class="video-card category-video" data-youtube-id="${ytId}">
                            <div class="video-thumb-wrap">
                                ${video.youtube_url || ''}
                                <span class="play-btn"></span>
                            </div>
                            <div class="video-meta">
                                <h4 class="video-title">${(video.title || '')} | ${(video.title_lang2 || '')}</h4>
                                <img class="channel-icon" src="${video.channelIcon}" alt="${video.channelName}" style="width:40px;height:40px;" />
                                <p class="channel-name">${video.channelName}</p>
                                <p>
                                    <span class="views">${video.viewCount}</span> &#8226;
                                    <span class="howold">${video.videoAge}</span>
                                </p>
                                <div class="clear"></div>
                            </div>
                        </li>`;

                        const $inserted = $(videoHtml);
                        $container.find('#load-more-' + categoryId).before($inserted);
                    });

                    const prevLoaded = parseInt($container.attr('data-loaded') || '0', 10);
                    $container.attr('data-loaded', prevLoaded + items.length);

                    const hasMore = (typeof response.hasMore !== 'undefined') ? response.hasMore : (items
                        .length === limit);
                    const $viewAllBtn = $container.find('#load-more-' + categoryId).find('.view-all-block');

                    if (!hasMore) {
                        $viewAllBtn.hide();
                    } else {
                        const isExpanded = $container.closest('.accordion-item').siblings(':hidden').length > 0;
                        $viewAllBtn.prop('disabled', false)
                            .show()
                            .text(isExpanded ? 'Load More' : 'View All');
                    }

                    openAccordionByCategory(categoryId);

                    try {
                        if (window.__preserveScrollCategory && window.__preserveScrollCategory == categoryId &&
                            typeof window.__preserveScroll !== 'undefined') {
                            $(window).scrollTop(window.__preserveScroll);
                            window.__preserveScroll = undefined;
                            window.__preserveScrollCategory = undefined;
                        }
                    } catch (e) {

                    }
                },
                error: function() {
                    $loading.text('Error loading videos. Please try again.');
                    const $viewAllBtn = $container.find('#load-more-' + categoryId).find('.view-all-block');
                    const isExpanded = $container.closest('.accordion-item').siblings(':hidden').length > 0;
                    $viewAllBtn.prop('disabled', false)
                        .text(isExpanded ? 'Load More' : 'View All');
                }
            });
        }

        $(document).ready(function() {
            setTimeout(function() {
                $('.category-section').each(function() {
                    const $ul = $(this).find('.video-list');
                    const categoryId = $ul.data('category-id');
                    if (!categoryId) return;

                    const existingCount = $ul.find('li').not('#load-more-' + categoryId).length;
                    $ul.attr('data-loaded', existingCount);

                    if (existingCount === 0) {
                        fetchVideos(categoryId, 0, 5);
                    }
                });
            }, 500);

            $('form[action="{{ route('videos.index') }}"]').on('submit', function(e) {
                e.preventDefault();
                applyFiltersAndFetch();
            });

            $('.filter-panel .filter-cta .btn').on('click', function(e) {
                e.preventDefault();
                applyFiltersAndFetch();
                $('.filter-panel').removeClass('open');
            });

            const categorySlugToId = {};
            $('.category-section').each(function() {
                const $sec = $(this);
                const slug = $sec.data('category-slug') || $sec.find('.video-list').data('category-slug');
                const id = $sec.find('.video-list').data('category-id');
                if (slug && id) categorySlugToId[slug] = id;
            });

            function applyFiltersAndFetch() {

                const searchVal = $('#searchInput').val();
                const countryCodeVal = $('#selectedCountryId').val() || $('#countrySearchDesktop').val();
                const cityCodeVal = $('#selectedCityId').val() || $('#citySearchDesktop').val();
                const airportCodeVal = $('#selectedAirportId').val() || $('#airportSearchDesktop').val();
                const airlineCodeVal = $('#selectedAirlineId').val() || $('#airlineSearchDesktop').val();

                if (countryCodeVal) {
                    selectedFilters.country = selectedFilters.country || {};
                    selectedFilters.country.code = countryCodeVal;
                }

                if (cityCodeVal) {
                    selectedFilters.city = selectedFilters.city || {};
                    selectedFilters.city.code = cityCodeVal;
                }

                if (airportCodeVal) {
                    selectedFilters.airport = selectedFilters.airport || {};
                    selectedFilters.airport.code = airportCodeVal;
                }

                if (airlineCodeVal) {
                    selectedFilters.airline = selectedFilters.airline || {};
                    selectedFilters.airline.code = airlineCodeVal;
                }

                if (searchVal) pushToOrder('search');
                const selTypeSlug = $('#videoType option:selected').data('slug');
                if (selTypeSlug) pushToOrder('type');

                updateURL();

                $('.video-list').each(function() {
                    const $container = $(this);
                    const categoryId = $container.data('category-id');
                    if (!categoryId) return;

                    $container.find('li').not('#load-more-' + categoryId).remove();
                    $container.attr('data-loaded', 0);
                    $container.find('#load-more-' + categoryId).show();
                });

                const filters = {
                    countryCode: selectedFilters.country?.code || '',
                    cityCode: selectedFilters.city?.code || '',
                    airportCode: selectedFilters.airport?.code || '',
                    airlineCode: selectedFilters.airline?.code || '',
                    keyword: $('#searchInput').val() || ''
                };

                const selectedTypeSlug = $('#videoType option:selected').data('slug');
                const selectedCategoryId = selectedTypeSlug ? categorySlugToId[selectedTypeSlug] : null;

                if (selectedCategoryId) {

                    $('.category-section').each(function() {
                        const $sec = $(this);
                        const $ul = $sec.find('.video-list');
                        const categoryId = $ul.data('category-id');
                        if (!categoryId) return;
                        if (categoryId != selectedCategoryId) {
                            $sec.hide();
                        } else {
                            $sec.show();
                        }
                    });

                    fetchVideos(selectedCategoryId, 0, 5,
                        filters.countryCode,
                        filters.cityCode,
                        filters.airportCode,
                        filters.airlineCode,
                        filters.keyword
                    );
                } else {
                    $('.category-section').each(function() {
                        const $ul = $(this).find('.video-list');
                        const categoryId = $ul.data('category-id');
                        if (!categoryId) return;

                        fetchVideos(categoryId, 0, 5,
                            filters.countryCode,
                            filters.cityCode,
                            filters.airportCode,
                            filters.airlineCode,
                            filters.keyword
                        );
                    });
                }
            }

            const $countryInput = $('#countrySearchDesktop');
            const $countrySearchInput = $countryInput.closest('.searchInput');
            const $countryResultBox = $('#countryListDesktopVideos').parent();
            const $countryListItems = $('#countryListDesktopVideos').children('li');
            const $countryFlagIcon = $countrySearchInput.find('.ttl-icon');
            const $countryFlag = $countrySearchInput.find('.countryFlag');
            const $selectedCountryId = $('#selectedCountryId');
            const $cityInput = $('#citySearchDesktop');
            const $citySearchInput = $cityInput.closest('.searchInput');
            const $cityResultBox = $('#cityListDesktopVideos').parent();
            const $cityListItems = $('#cityListDesktopVideos').children('li');
            const $cityIcon = $citySearchInput.find('.ttl-icon');

            const $airportInput = $('#airportSearchDesktop');
            const $airportSearchInput = $airportInput.closest('.searchInput');
            const $airportResultBox = $('#airportListDesktopVideos').parent();
            const $airportListItems = $('#airportListDesktopVideos').children('li');
            const $airportIcon = $airportSearchInput.find('.ttl-icon');

            const $airlineInput = $('#airlineSearchDesktop');
            const $airlineSearchInput = $airlineInput.closest('.searchInput');
            const $airlineResultBox = $('#airlineListDesktopVideos').parent();
            const $airlineListItems = $('#airlineListDesktopVideos').children('li');
            const $airlineIcon = $airlineSearchInput.find('.ttl-icon');

            const $countryInputMobile = $('#countrySearchMobile');
            const $countrySearchInputMobile = $countryInputMobile.closest('.searchInput');
            const $countryListMobile = $('#countryListMobileVideos');
            const $selectedCountryIdMobile = $('#selectedCountryIdMobile');

            const $cityInputMobile = $('#citySearchMobile');
            const $citySearchInputMobile = $cityInputMobile.closest('.searchInput');
            const $cityListMobile = $('#cityListMobileVideos');
            const $selectedCityIdMobile = $('#selectedCityIdMobile');

            const $airportInputMobile = $('#airportSearchMobile');
            const $airportSearchInputMobile = $airportInputMobile.closest('.searchInput');
            const $airportListMobile = $('#airportListMobileVideos');
            const $selectedAirportIdMobile = $('#selectedAirportIdMobile');

            const $airlineInputMobile = $('#airlineSearchMobile');
            const $airlineSearchInputMobile = $airlineInputMobile.closest('.searchInput');
            const $airlineListMobile = $('#airlineListMobileVideos');
            const $selectedAirlineIdMobile = $('#selectedAirlineIdMobile');

            let selectedFilters = {
                country: null,
                city: null,
                airport: null,
                airline: null
            };

            let selectedOrder = [];

            function pushToOrder(key) {
                const idx = selectedOrder.indexOf(key);
                if (idx !== -1) selectedOrder.splice(idx, 1);
                selectedOrder.push(key);
            }

            function removeFromOrder(key) {
                const idx = selectedOrder.indexOf(key);
                if (idx !== -1) selectedOrder.splice(idx, 1);
            }

            function closeOtherSearchInputs($current) {

                if (!$current) {
                    $('.searchInput').each(function() {
                        $(this).removeClass('active');
                        $(this).find('.resultBox ul li').hide();
                    });
                    return;
                }

                $('.searchInput').not($current).each(function() {
                    $(this).removeClass('active');
                    $(this).find('.resultBox ul li').hide();
                });
            }

            const serverSegments = @json(request()->segments());

            function updateURL() {
                const urlParts = [];

                if (selectedFilters.country && selectedFilters.country.slug) {
                    urlParts.push(`country/${selectedFilters.country.slug}`);
                }

                if (selectedFilters.city && selectedFilters.city.slug) {
                    urlParts.push(`city/${selectedFilters.city.slug}`);
                }

                if (selectedFilters.airport && selectedFilters.airport.slug) {
                    urlParts.push(`airport/${selectedFilters.airport.slug}`);
                }

                if (selectedFilters.airline && selectedFilters.airline.slug) {
                    urlParts.push(`airline/${selectedFilters.airline.slug}`);
                }

                const videoTypeVal = $('#videoType').val();
                if (videoTypeVal) {
                    const opt = $(`#videoType option[value="${videoTypeVal}"]`);
                    const slug = opt.data('slug') || videoTypeVal;
                    urlParts.push(`type/${slug}`);
                }

                const searchText = $('#searchInput').val();
                if (searchText) urlParts.push(`search/${encodeURIComponent(searchText)}`);

                const basePath = '/' + (window.location.pathname.split('/')[1] || 'videos');
                const newUrl = basePath + (urlParts.length ? ('/' + urlParts.join('/')) : '');
                window.history.replaceState({}, '', newUrl);
            }

            function restoreFromURL() {
                function toTitleCase(str) {
                    return str.replace(/\w\S*/g, function(txt) {
                        return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
                    });
                }

                function prettifySlug(slug) {
                    if (!slug) return '';
                    const parts = String(slug).split('-').filter(Boolean);
                    if (parts.length === 0) return '';
                    if (parts.length === 1) return toTitleCase(parts[0].replace(/[-_]/g, ' '));
                    const code = parts[0].toUpperCase();
                    const name = parts.slice(1).join(' ');
                    return `${toTitleCase(name.replace(/[-_]/g, ' '))} (${code})`;
                }
                const pathParts = (serverSegments && serverSegments.length) ? serverSegments : window.location
                    .pathname.split('/').filter(Boolean);

                const startIndex = pathParts[0] === 'videos' ? 1 : 0;

                for (let i = startIndex; i < pathParts.length; i += 2) {
                    const filterType = pathParts[i];
                    const filterValue = pathParts[i + 1];

                    if (!filterType || !filterValue) continue;

                    switch (filterType) {
                        case 'country':
                            selectedFilters.country = {
                                slug: filterValue,
                                code: filterValue,
                                name: ''
                            };

                            $.ajax({
                                url: "{{ route('search.countries') }}",
                                method: 'GET',
                                dataType: 'json',
                                data: {
                                    query: filterValue,
                                    limit: 1
                                },
                                success: function(res) {
                                    const item = (res.data && res.data[0]) ? res.data[0] : null;
                                    const name = item ? item.displayName : prettifySlug(filterValue) ||
                                        filterValue;
                                    $('#countrySearchDesktop').val(name);
                                    $('#selectedCountryId').val(item ? item.code : filterValue);
                                    
                                    $('#countrySearchMobile').val(name);
                                    $('#selectedCountryIdMobile').val(item ? item.code : filterValue);
                                    selectedFilters.country.name = name;
                                },
                                error: function() {
                                    $('#countrySearchDesktop').val(filterValue);
                                    $('#selectedCountryId').val(filterValue);
                                }
                            });
                            pushToOrder('country');
                            break;

                        case 'city':
                            selectedFilters.city = {
                                slug: filterValue,
                                code: filterValue,
                                name: ''
                            };
                            $.ajax({
                                url: "{{ route('search.cities') }}",
                                method: 'GET',
                                dataType: 'json',
                                data: {
                                    query: filterValue,
                                    limit: 1
                                },
                                success: function(res) {
                                    const item = (res.data && res.data[0]) ? res.data[0] : null;
                                    const name = item ? item.displayName : prettifySlug(filterValue) ||
                                        filterValue;
                                    $('#citySearchDesktop').val(name);
                                    $('#selectedCityId').val(item ? item.code : filterValue);
                                    
                                    $('#citySearchMobile').val(name);
                                    $('#selectedCityIdMobile').val(item ? item.code : filterValue);
                                    selectedFilters.city.name = name;
                                },
                                error: function() {
                                    $('#citySearchDesktop').val(filterValue);
                                    $('#selectedCityId').val(filterValue);
                                }
                            });
                            pushToOrder('city');
                            break;

                        case 'airport':
                            selectedFilters.airport = {
                                slug: filterValue,
                                code: filterValue,
                                name: ''
                            };
                            $.ajax({
                                url: "{{ route('search.airports') }}",
                                method: 'GET',
                                dataType: 'json',
                                data: {
                                    query: filterValue,
                                    limit: 1
                                },
                                success: function(res) {
                                    const item = (res.data && res.data[0]) ? res.data[0] : null;
                                    const name = item ? item.displayName : prettifySlug(filterValue) ||
                                        filterValue;
                                    $('#airportSearchDesktop').val(name);
                                    $('#selectedAirportId').val(item ? item.code : filterValue);
                                    
                                    $('#airportSearchMobile').val(name);
                                    $('#selectedAirportIdMobile').val(item ? item.code : filterValue);
                                    selectedFilters.airport.name = name;
                                },
                                error: function() {
                                    $('#airportSearchDesktop').val(filterValue);
                                    $('#selectedAirportId').val(filterValue);
                                }
                            });
                            pushToOrder('airport');
                            break;

                        case 'airline':
                            selectedFilters.airline = {
                                slug: filterValue,
                                code: filterValue,
                                name: ''
                            };
                            $.ajax({
                                url: "{{ route('search.airlines') }}",
                                method: 'GET',
                                dataType: 'json',
                                data: {
                                    query: filterValue,
                                    limit: 1
                                },
                                success: function(res) {
                                    const item = (res.data && res.data[0]) ? res.data[0] : null;
                                    const name = item ? item.displayName : prettifySlug(filterValue) ||
                                        filterValue;
                                    $('#airlineSearchDesktop').val(name);
                                    $('#selectedAirlineId').val(item ? item.code : filterValue);
                             
                                    $('#airlineSearchMobile').val(name);
                                    $('#selectedAirlineIdMobile').val(item ? item.code : filterValue);
                                    selectedFilters.airline.name = name;
                                },
                                error: function() {
                                    $('#airlineSearchDesktop').val(filterValue);
                                    $('#selectedAirlineId').val(filterValue);
                                }
                            });
                            pushToOrder('airline');
                            break;

                        case 'search':
                            $('#searchInput').val(decodeURIComponent(filterValue));
                            pushToOrder('search');
                            break;

                        case 'type':
                            const $option = $('#videoType option').filter(function() {
                                return $(this).data('slug') === filterValue || String($(this).val()) ===
                                    filterValue;
                            });
                            if ($option.length) $('#videoType').val($option.val());
                            pushToOrder('type');
                            break;
                    }
                }

                applyFiltersAndFetch();
            }

            $(document).on('click', '#countryListDesktopVideos li', function() {
                const $item = $(this);
                const name = $item.text().trim();
                const code = $item.data('code');
                const urlIdentifier = $item.data('url_identifier');

                selectedFilters.country = {
                    name,
                    code,
                    slug: urlIdentifier
                };

                $countryInput.val(name);
                $selectedCountryId.val(code);
                $countryFlagIcon.show();
                $countrySearchInput.removeClass('active');
                closeOtherSearchInputs(null);

                if (code && code.length === 2) {
                    $countryFlag.attr('src', `https://flagcdn.com/w40/${code.toLowerCase()}.png`);
                    $countryFlag.attr('alt', `${code.toUpperCase()} Flag`);
                }

                filterDependentLists(code);
                pushToOrder('country');
                updateURL();
            });

            $(document).on('click', '#countryListMobileVideos li', function() {
                const $item = $(this);
                const name = $item.text().trim();
                const code = $item.data('code');
                const urlIdentifier = $item.data('url_identifier');

                selectedFilters.country = { name, code, slug: urlIdentifier };

                $countryInput.val(name);
                $selectedCountryId.val(code);
                $countryInputMobile.val(name);
                $selectedCountryIdMobile.val(code);

                $countrySearchInputMobile.removeClass('active');
                $countryFlagIcon.show();
                if (code && code.length === 2) {
                    $countryFlag.attr('src', `https://flagcdn.com/w40/${code.toLowerCase()}.png`);
                    $countryFlag.attr('alt', `${code.toUpperCase()} Flag`);
                }

                filterDependentLists(code);
                pushToOrder('country');
                updateURL();
            });

            $(document).on('click', '#cityListDesktopVideos li', function() {
                const $item = $(this);
                const name = $item.text().trim();
                const code = $item.data('code');
                const urlIdentifier = $item.data('url_identifier');

                selectedFilters.city = {
                    name,
                    code,
                    slug: urlIdentifier
                };

                $cityInput.val(name);
                $('#selectedCityId').val(code);
                $cityIcon.show();
                $citySearchInput.removeClass('active');
                closeOtherSearchInputs(null);
                pushToOrder('city');
            });

            $(document).on('click', '#cityListMobileVideos li', function() {
                const $item = $(this);
                const name = $item.text().trim();
                const code = $item.data('code');
                const urlIdentifier = $item.data('url_identifier');

                selectedFilters.city = { name, code, slug: urlIdentifier };

                $cityInput.val(name);
                $('#selectedCityId').val(code);
                $cityInputMobile.val(name);
                $selectedCityIdMobile.val(code);

                $citySearchInputMobile.removeClass('active');
                pushToOrder('city');
            });

            $(document).on('click', '#airportListDesktopVideos li', function() {
                const $item = $(this);
                const name = $item.text().trim();
                const code = $item.data('code');
                const urlIdentifier = $item.data('url_identifier');

                selectedFilters.airport = {
                    name,
                    code,
                    slug: urlIdentifier
                };

                $airportInput.val(name);
                $('#selectedAirportId').val(code);
                $airportIcon.show();
                $airportSearchInput.removeClass('active');
                closeOtherSearchInputs(null);
                pushToOrder('airport');
                updateURL();
            });

            $(document).on('click', '#airportListMobileVideos li', function() {
                const $item = $(this);
                const name = $item.text().trim();
                const code = $item.data('code');
                const urlIdentifier = $item.data('url_identifier');

                selectedFilters.airport = { name, code, slug: urlIdentifier };

                $airportInput.val(name);
                $('#selectedAirportId').val(code);
                $airportInputMobile.val(name);
                $selectedAirportIdMobile.val(code);

                $airportSearchInputMobile.removeClass('active');
                pushToOrder('airport');
                updateURL();
            });

            $(document).on('click', '#airlineListDesktopVideos li', function() {
                const $item = $(this);
                const name = $item.text().trim();
                const code = $item.data('code');
                const urlIdentifier = $item.data('url_identifier');

                selectedFilters.airline = {
                    name,
                    code,
                    slug: urlIdentifier
                };

                $airlineInput.val(name);
                $('#selectedAirlineId').val(code);
                $airlineIcon.show();
                $airlineSearchInput.removeClass('active');
                closeOtherSearchInputs(null);
                pushToOrder('airline');
                updateURL();
            });

            $(document).on('click', '#airlineListMobileVideos li', function() {
                const $item = $(this);
                const name = $item.text().trim();
                const code = $item.data('code');
                const urlIdentifier = $item.data('url_identifier');

                selectedFilters.airline = { name, code, slug: urlIdentifier };

                $airlineInput.val(name);
                $('#selectedAirlineId').val(code);
                $airlineInputMobile.val(name);
                $selectedAirlineIdMobile.val(code);

                $airlineSearchInputMobile.removeClass('active');
                pushToOrder('airline');
                updateURL();
            });

            $countryInput.on('focus input', function() {
                const keyword = $(this).val().toLowerCase().trim();
                if (keyword.length === 0) {
                    $countrySearchInput.removeClass('active');
                    $countryListItems.hide();
                    selectedFilters.country = null;
                    $countryFlagIcon.hide();
                    $selectedCountryId.val('');
                    return;
                }
                closeOtherSearchInputs($countrySearchInput);
                $countrySearchInput.addClass('active');

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

                        $('#countryListDesktopVideos').html('');
                        $('#countryListMobileVideos').html('');

                        const data = res.data;

                        $.each(data, function(index, item) {
                            const li = $(`<li
                                class="search-item"
                                data-code="${item.code}"
                                data-url_identifier="${item.url_identifier}">
                                <i><img src="{{ asset('images/icons/country-search.svg') }}" alt="Country Icon"></i>
                                ${item.displayName}
                            </li>`);

                            $('#countryListDesktopVideos').append(li.clone());
                            $('#countryListMobileVideos').append(li);
                        });
                    },
                    error: function(err) {
                        console.error('Filter AJAX error', err);
                    }
                });

                $countryListItems.each(function() {
                    const name = $(this).data('country');
                    $(this).toggle(name.startsWith(keyword));
                });
            });

            $cityInput.on('focus input', function() {
                const keyword = $(this).val().toLowerCase().trim();
                if (keyword.length === 0) {
                    $citySearchInput.removeClass('active');
                    $cityListItems.hide();
                    selectedFilters.city = null;
                    $cityIcon.hide();
                    return;
                }

                closeOtherSearchInputs($citySearchInput);
                $citySearchInput.addClass('active');

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

                        $('#cityListDesktopVideos').html('');
                        $('#cityListMobileVideos').html('');

                        const data = res.data;


                        $.each(data, function(index, item) {
                            const li = $(`<li
                                class="search-item"
                                data-code="${item.code}"
                                data-url_identifier="${item.url_identifier}">
                                <i><img src="{{ asset('images/icons/city-search.svg') }}" alt="City Icon"></i>
                                ${item.displayName}
                            </li>`);

                            $('#cityListDesktopVideos').append(li.clone());
                            $('#cityListMobileVideos').append(li);
                        });
                    },
                    error: function(err) {
                        console.error('Filter AJAX error', err);
                    }
                });

                $cityListItems.each(function() {
                    const name = $(this).data('city');
                    const matchesCountry = !selectedFilters.country || $(this).data('country-id') ==
                        selectedFilters.country.id;
                    $(this).toggle(name.startsWith(keyword) && matchesCountry);
                });
            });

            $airportInput.on('focus input', function() {
                const keyword = $(this).val().toLowerCase().trim();
                if (keyword.length === 0) {
                    $airportSearchInput.removeClass('active');
                    $airportListItems.hide();
                    selectedFilters.airport = null;
                    $airportIcon.hide();
                    return;
                }
                closeOtherSearchInputs($airportSearchInput);
                $airportSearchInput.addClass('active');

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

                        $('#airportListDesktopVideos').html('');
                        $('#airportListMobileVideos').html('');

                        const data = res.data;

                        $.each(data, function(index, item) {
                            const li = $(`<li
                                class="search-item"
                                data-code="${item.code}"
                                data-url_identifier="${item.url_identifier}">
                                <i><img src="{{ asset('images/icons/airport-search.svg') }}" alt="Airport Icon"></i>
                                ${item.displayName}
                            </li>`);

                            $('#airportListDesktopVideos').append(li.clone());
                            $('#airportListMobileVideos').append(li);
                        });
                    },
                    error: function(err) {
                        console.error('Filter AJAX error', err);
                    }
                });

                $airportListItems.each(function() {
                    const name = $(this).data('airport');
                    const matchesCountry = !selectedFilters.country || $(this).data('country-id') ==
                        selectedFilters.country.id;
                    $(this).toggle(name.startsWith(keyword) && matchesCountry);
                });
            });

            $airlineInput.on('focus input', function() {
                const keyword = $(this).val().toLowerCase().trim();
                if (keyword.length === 0) {
                    $airlineSearchInput.removeClass('active');
                    $airlineListItems.hide();
                    selectedFilters.airline = null;
                    $airlineIcon.hide();
                    return;
                }

                closeOtherSearchInputs($airlineSearchInput);
                $airlineSearchInput.addClass('active');

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

                        $('#airlineListDesktopVideos').html('');
                        $('#airlineListMobileVideos').html('');

                        const data = res.data;

                        $.each(data, function(index, item) {

                            const li = $(`<li
                                class="search-item"
                                data-code="${item.code}"
                                data-url_identifier="${item.url_identifier}">
                                <i><img src="{{ asset('images/icons/flight-search.svg') }}" alt="Airline Icon"></i>
                                ${item.displayName}
                            </li>`);
                            console.log('Appending LI:', li);
                            $('#airlineListDesktopVideos').append(li.clone());
                            $('#airlineListMobileVideos').append(li);

                        });
                        
                    },
                    error: function(err) {
                        console.error('Filter AJAX error', err);
                    }
                });

                $airlineListItems.each(function() {
                    const name = $(this).data('airline');
                    const matchesCountry = !selectedFilters.country || $(this).data('country-id') ==
                        selectedFilters.country.id;
                    $(this).toggle(name.startsWith(keyword) && matchesCountry);
                });
            });

            $('.clear-btn').on('click', function(e) {
                e.preventDefault();
                if (window.filterTimeout) {
                    clearTimeout(window.filterTimeout);
                }

                selectedFilters = {
                    country: null,
                    city: null,
                    airport: null,
                    airline: null
                };

                $('#countrySearchDesktop').val('');
                $('#selectedCountryId').val('');
                $('#citySearchDesktop').val('');
                $('#airportSearchDesktop').val('');
                $('#airlineSearchDesktop').val('');

                $('#countrySearchMobile').val('');
                $('#selectedCountryIdMobile').val('');
                $('#citySearchMobile').val('');
                $('#selectedCityIdMobile').val('');
                $('#airportSearchMobile').val('');
                $('#selectedAirportIdMobile').val('');
                $('#airlineSearchMobile').val('');
                $('#selectedAirlineIdMobile').val('');
                $('#searchInput').val('');

                $('.country-search-wrapper .ttl-icon').hide();
                $('.countryFlag').attr('src', '').attr('alt', '');

                $('.country-search-wrapper .searchInput').removeClass('active');

                closeOtherSearchInputs(null);

                $('#countryListDesktopVideos li').show();
                $('#cityListDesktopVideos li').show();
                $('#airportListDesktopVideos li').show();
                $('#airlineListDesktopVideos li').show();
                $('#countryListMobileVideos li').show();
                $('#cityListMobileVideos li').show();
                $('#airportListMobileVideos li').show();
                $('#airlineListMobileVideos li').show();

                window.history.pushState({}, '', window.location.pathname);

                selectedOrder = [];
                $('.category-section').show();

                $('.search-input').val('');

                $('.no-results-message').hide();

                applyFiltersAndFetch();

                updateURL();

                return false;
            });

            $('.sort-filter .sort-btn.sf.sort').on('click', function(e) {
                e.preventDefault();
                applyFiltersAndFetch();
            });

            $('#videoType').on('change', function() {
                const $sel = $(this).find('option:selected');
                const slug = $sel.data('slug');

                if (slug) {
                    $(this).data('pending-slug', slug);
                } else {
                    $(this).removeData('pending-slug');
                }
            });

            let filterTimeout;

            $(document).on('click', '.view-all-block', function() {
                const $btn = $(this);
                const target = $btn.closest('li').data('target') || $btn.data('target');
                const $li = $btn.closest('li');
                const categoryId = $li.data('category') || (target && target.replace('cat', ''));
                if (!categoryId) return;

                const $container = $('#cat' + categoryId);
                const loaded = parseInt($container.attr('data-loaded') || '0', 10);
                const nextOffset = loaded;

                const isExpanded = $container.closest('.accordion-item').siblings(':hidden').length > 0;

                $btn.prop('disabled', true);
                $btn.text('Loading...');

                if (!isExpanded) {

                    try {
                        window.__preserveScroll = $(window).scrollTop();
                        window.__preserveScrollCategory = categoryId;
                    } catch (e) {}

                    const $allVideo = $('.all-listing');
                    const $categoryItem = $container.closest('.accordion-item');

                    $allVideo.find('.accordion-item').not($categoryItem).hide();

                    $categoryItem.find('.back-btn').show();
                    $categoryItem.find('.arrow').hide();

                    openAccordionByCategory(categoryId);

                    $btn.prop('disabled', false).text('Load More');
                    return;
                }
                const pageSize = 6;
                fetchVideos(categoryId, nextOffset, pageSize);
            });

            function filterDependentLists(countryId) {

                if (filterTimeout) {
                    clearTimeout(filterTimeout);
                }

                filterTimeout = setTimeout(() => {
                    if (countryId) {

                        $('#cityListDesktopVideos li').each(function() {
                            $(this).toggle($(this).data('country-id') == countryId);
                        });

                        $('#airportListDesktopVideos li').each(function() {
                            $(this).toggle($(this).data('country-id') == countryId);
                        });

                        $('#airlineListDesktopVideos li').each(function() {
                            $(this).toggle($(this).data('country-id') == countryId);
                        });

                        $('#cityListMobileVideos li').each(function() {
                            $(this).toggle($(this).data('country-id') == countryId);
                        });

                        $('#airportListMobileVideos li').each(function() {
                            $(this).toggle($(this).data('country-id') == countryId);
                        });

                        $('#airlineListMobileVideos li').each(function() {
                            $(this).toggle($(this).data('country-id') == countryId);
                        });
                    } else {
                        $('#cityListDesktopVideos li').show();
                        $('#airportListDesktopVideos li').show();
                        $('#airlineListDesktopVideos li').show();
                        $('#cityListMobileVideos li').show();
                        $('#airportListMobileVideos li').show();
                        $('#airlineListMobileVideos li').show();
                    }
                }, 50);
            }

            restoreFromURL();

            $(document).on('click', function(e) {
                if ($(e.target).closest('.searchInput, .country-search-wrapper, .resultBox').length > 0) {
                    return;
                }
                closeOtherSearchInputs(null);
            });
        });
    </script>

    <script>
        $(document).on('click', '.back-btn', function() {
            const $btn = $(this);
            const $categoryItem = $btn.closest('.accordion-item');
            const $videoList = $categoryItem.find('.video-list');
            const categoryId = $videoList.data('category-id') || $videoList.data('category');

            if (!categoryId) return;

            $btn.hide();
            $('.all-listing').find('.accordion-item').show();
            $('.arrow').show();

            const $container = $('#cat' + categoryId);
            $container.attr('data-loaded', 0);
            $container.find('li').not('#load-more-' + categoryId).remove();

            fetchVideos(categoryId, 0, 5);

            const $allListing = $('.all-listing');
            if ($allListing.length) {
                $('html, body').animate({
                    scrollTop: $allListing.offset().top - 80
                }, 300);
            }
        });

        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", "");
        }
    </script>

    <script>
        $(function() {
            $('.editor-video').each(function() {
                const $li = $(this);
                const videoId = $li.data('youtube-id');
                if (!videoId) return;

                $.ajax({
                    url: '{{ route('videos.search') }}',
                    method: 'GET',
                    data: {
                        videoId
                    },
                    success: function(res) {
                        if (!res || !res.success) return;
                        const $icon = $li.find('.channel-icon');
                        $icon.attr('src',res.channelIcon).show();
                        $li.find('.channel-name').text(res.channelName);
                        $li.find('.views').text(Number(res.viewCount).toLocaleString());
                        $li.find('.howold').text(res.videoAge);
                    },
                    error: function() {

                    }
                });
            });
        });

        const ADMIN_IMAGE_PATH = "{{ config('constants.ADMIN_IMAGE_PATH') }}";
        
        function fetchPageData(languageCode = 'en') {
            loadPageContent('lists', "videos", languageCode);
        }

        $(function () {
            setTimeout(function () {
                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