@extends('layouts.app')

@section('header-title')
    Search Result
@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="bookmarked-flights">
            <div class="title-bar">
                <h2>Search result
                    <a href="#" class="showReslt for-desk"><span class="editIcon ms-0"></span></a>
                    <a href="#" class="showReslt for-mobile"><span class="editIcon ms-0"></span></a>
                </h2>
            </div>
            <div class="showReslt">
                <div class="resultAbt" id="search-summary">
                </div>
                <div class="codeshare">
                    <div class="form-group">
                        <input type="checkbox" id="codeshare">
                        <label for="codeshare">Include Codeshare</label>
                    </div>
                </div>
            </div>
            <ul id="flight-list">
                <li class="header-bar">
                    <div class="clmn only-tm">Dep. Time</div>
                    <div class="flit-airln for-desk">
                        <div class="clmn flightN">Flight</div>
                        <div class="clmn flg-img">Airline</div>
                    </div>
                    <div class="clmn flit-airln for-mobile">Flight/Airline</div>
                    <div class="ori-dest for-desk">
                        <div class="ori-tml">
                            <div class="clmn originC">Origin</div>
                            <div class="clmn tmlC">Tml</div>
                        </div>
                        <div class="desti-tml">
                            <div class="clmn desti-stat">Destination</div>
                            <div class="clmn tmlC">Tml</div>
                        </div>
                    </div>
                    <div class="clmn ori-dest for-mobile">Origin/Destination</div>
                    <div class="clmn only-tm">Arr. Time</div>
                    <div class="clmn statusC">Status</div>
                    <div class="clmn flight-bookmark"></div>
                </li>
            </ul>
            <div><a class="add-more icon-cta" href="javascript:void(0);">Load more</a></div>
        </div>

        <div class="count">
            <div class="content-left">
                <h3>World’s Largest Live Airports Directory</h3>
                <p>Real-Time Flight Information 24×7</p>
            </div>
            <ul>
                <li>
                    <h6>700+</h6><b>Airlines</b>
                </li>
                <li>
                    <h6>40K</h6><b>Airports</b>
                </li>
                <li>
                    <h6>100K+</h6><b>Routes</b>
                </li>
                <li><b>Powered by</b><img src="{{ asset('images/airways-logo.svg') }}" alt="{{ config('app.name') }}" /></li>
            </ul>
        </div>

        <div class="ad">
            <h3>sponsored</h3>
            <div class="adsection3"><img src="images/ad/ad3.jpeg" /></div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
    let currentPage = 0;
    const $flightList = $('#flight-list');
    const $loadMoreBtn = $('.add-more');
    const $isCodeShare = $('#codeshare');

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

        setTimeout(function () {
            currentPage = 0;
            loadFlights(true);
        }, 1000);
    });

    $loadMoreBtn.on('click', function () {
        currentPage++;
        loadFlights();
    });


    $isCodeShare.on('change', function () {
        currentPage = 0;
        loadFlights(true);
    });

    $(document).on('change input', '[data-sync], [data-sync-display]', updateSearchSummary);

    function preFillFilters() {
        const today = new Date();
        const pad = (n) => n.toString().padStart(2, '0');
        const todayStr = `${today.getFullYear()}-${pad(today.getMonth() + 1)}-${pad(today.getDate())}`;

        $('[data-sync="smart-search-date"]').each(function () {
            if (!$(this).val()) {
                $(this).val(todayStr).trigger('input');
            }
        });

        const startOfDay = '00:00:00';
        const endOfDay = '23:59:59';

        $('[data-sync="smart-search-time-from"]').each(function () {
            if (!$(this).val()) {
                $(this).val(startOfDay).trigger('input');
            }
        });

        $('[data-sync="smart-search-time-till"]').each(function () {
            if (!$(this).val()) {
                $(this).val(endOfDay).trigger('input');
            }
        });

        const segments = getUrlSegments();

        if (segments.from) {
            fetchExactMatch(segments.from.type, segments.from.identifier, item => fillSmartSearch('from', item));
        }
        if (segments.to) {
            fetchExactMatch(segments.to.type, segments.to.identifier, item => fillSmartSearch('to', item));
        }
        if (segments.airline) {
            fetchExactMatch(segments.airline.type, segments.airline.identifier, item => fillSmartSearch('airline', item));
        }

        if (segments.date) {
            fillSmartSearchField('date', segments.date);
        }

        if (segments.timeRange) {
            const [fromHour, toHour] = segments.timeRange.split('-').map(Number);
            const pad = n => n.toString().padStart(2, '0');
            const from = `${pad(fromHour)}:00:00`;
            const till = `${pad(toHour)}:59:59`;
            fillSmartSearchField('time_from', from);
            fillSmartSearchField('time_till', till);
        }
    }

    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 fillSmartSearch(prefix, item) {
        if (!item) return;

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

        const fields = [
            { name: prefix, value: item.displayName || item.name || '' },
            { name: `${prefix}_code`, value: item.code || '' },
            { name: `${prefix}_type`, value: item.type || prefix },
            { name: `${prefix}_url`, value: item.url_identifier || '' }
        ];

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

    function getUrlSegments() {
        const path = window.location.pathname;

        const fromMatch = path.match(/\/from\/(country|city|airport)\/([a-z0-9-]+)/i);
        const toMatch = path.match(/\/to\/(country|city|airport)\/([a-z0-9-]+)/i);
        const airlineMatch = path.match(/\/airline\/([a-z0-9-]+)/i);
        const dateMatch = path.match(/\/on\/([0-9]{4}-[0-9]{2}-[0-9]{2})/i);
        const timeMatch = path.match(/\/at\/([0-9]{1,2}-[0-9]{1,2})/i);

        return {
            from: fromMatch ? {type: fromMatch[1], identifier: fromMatch[2]} : null,
            to: toMatch ? {type: toMatch[1], identifier: toMatch[2]} : null,
            airline: airlineMatch ? {type: 'airline', identifier: airlineMatch[1]} : null,
            date: dateMatch ? dateMatch[1] : null,
            timeRange: timeMatch ? timeMatch[1] : null
        };
    }

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

    function parseTimeRange(range) {
        const [fromHour, toHour] = range.split('-').map(Number);
        const pad = n => n.toString().padStart(2, '0');
        return {
            from: `${pad(fromHour)}:00:00`,
            till: `${pad(toHour)}:59:59`
        };
    }

    function updateSearchSummary() {
        const fromDisplay = $('[data-sync-display="smart-search-from"]').val() || 'Anywhere';
        const toDisplay = $('[data-sync-display="smart-search-to"]').val() || 'Anywhere';
        const airlineDisplay = $('[data-sync-display="smart-search-airline"]').val() || 'All Airlines';
        const dateRaw = $('[data-sync="smart-search-date"]').val() || '';
        const timeFromRaw = $('[data-sync="smart-search-time-from"]').val() || '';
        const timeTillRaw = $('[data-sync="smart-search-time-till"]').val() || '';

        const formattedDate = dateRaw
            ? new Date(dateRaw).toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' })
            : '';

        const formatTime = t => t ? t.slice(0, 5) : '';
        const formattedTimeFrom = formatTime(timeFromRaw);
        const formattedTimeTill = formatTime(timeTillRaw);

        let summary = `Showing <span id="flight-count"></span> flights from <span>${fromDisplay}</span> to <span>${toDisplay}</span>`;
        summary += ` across <span>${airlineDisplay}</span>`;
        if (formattedDate) {
            summary += ` for <span>${formattedDate}</span>`;
        }
        if (formattedTimeFrom && formattedTimeTill) {
            summary += ` between <span>${formattedTimeFrom}</span> and <span>${formattedTimeTill}</span>`;
        }

        $('#search-summary').html(summary);
    }

    function getFilterParams() {
        const hiddenForm = $('form[name="smart-search-hidden"]');
        const formData = hiddenForm.serializeArray();

        const params = {};
        formData.forEach(({name, value}) => {
            params[name] = value;
        });

        return params;
    }

    function loadFlights(reset = false) {
        const params = getFilterParams();
        params['page'] = currentPage;
        params['is_code_share'] = document.getElementById('codeshare').checked;

        if (reset) {
            $flightList.find('li:not(.header-bar)').remove();
        }

        showSkeleton($flightList);

        $.ajax({
            url: `{{ route('schedules.search') }}`,
            type: 'POST',
            data: params,
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            success: function (response) {
                $flightList.find('.skeleton').remove();

                if (response.status && response.data && response.data.length) {
                    response.data.forEach(flight => {
                        $flightList.append(flightHTML(flight));
                    });

                    document.getElementById('flight-count').innerHTML = response.total.toString();

                    $loadMoreBtn.toggle(response.hasMore === true);
                } else {
                    if (currentPage === 0) {
                        $flightList.append(`<li class="no-flights" style="width:100%; text-align:center; list-style:none;">No flights available.</li>`);
                    } else if ($flightList.find('.no-flights').length === 0) {
                        $flightList.append(`<li class="no-flights" style="width:100%; text-align:center; list-style:none;">No more flights available.</li>`);
                    }
                    $loadMoreBtn.hide();
                }
            },
            error: function (xhr) {
                console.error('Error loading flights:', xhr);
                $flightList.find('.skeleton').remove();
                $flightList.append(`<li class="no-flights" style="width:100%; text-align:center; list-style:none;">Error loading flights. Please try again.</li>`);
                $loadMoreBtn.hide();
            }
        });
    }

    function flightHTML(flight) {
        return (`
                <li>
                    <div class="clmn only-tm"><div>${flight.departureTime}</div></div>
                    <div class="flit-airln">
                        <div class="clmn flightN"><a href="${flight.flightLink}">${flight.flightNo}</a></div>
                        <div class="clmn flg-img"><a href="${flight.airlineLink}"><img src="https://liveairways.com/public/flight-image/${flight.airlineCode}.png" alt="${flight.airlineName}" /></a></div>
                    </div>
                    <div class="ori-dest">
                        <div class="ori-tml">
                            <div class="clmn originC"><a href="${flight.departureLink}">${flight.departureDisplayTitle}</a></div>
                            <div class="clmn tmlC"><span>${flight.departureTerminal ?? '-'}</span></div>
                        </div>
                        <div class="desti-tml">
                            <div class="clmn desti-stat"><a href="${flight.arrivalLink}">${flight.arrivalDisplayTitle}</a></div>
                            <div class="clmn tmlC"><span>${flight.arrivalTerminal ?? '-'}</span></div>
                        </div>
                    </div>
                    <div class="clmn only-tm"><div>${flight.departureTime}</div></div>
                    <div class="clmn statusC">${flight.scheduleStatus}</div>
                    <div class="clmn flight-bookmark">
                        <span class="for-desk">
                            <img
                                src="/images/icons/bookmarkW.png"
                                alt="bookmark"
                                class="bookmark-icon"
                                data-flight='${JSON.stringify(flight)}'
                            />
                            <sup></sup>
                        </span>
                        <span class="for-mobile">
                            <img src="/images/icons/more-options.svg" alt="more-option" />
                            <b></b>
                        </span>
                    </div>
                </li>
            `);
    }
</script>
@endpush