@extends('layouts.app')

@section('header-title')
    Bookmarks
@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>
            <li><a href="#flights"><img src="{{ asset('images/icons/departureW.svg') }}"/><p>All Flights</p></a></li>
            <li><a href="#radar"><img src="{{ asset('images/icons/radar-chartW.svg') }}"/><p>Live Radar</p></a></li>
            <li><a href="#videos"><img src="{{ asset('images/icons/video.svg') }}"/><p>Videos</p></a></li>
            <li><a href="#articles"><img src="{{ asset('images/icons/blogW.svg') }}"/><p>Articles</p></a></li>
            <li><a href="#routes"><img src="{{ asset('images/icons/directionsW.svg') }}"/><p>Routes</p></a></li>
        </ul>
</nav>
 <nav class="for-mobile">
        <ul>
            <li><a href=""><img src="{{ asset('images/icons/language.png') }}" alt="switch-language" />Edit Language</a></li>
            <li><a href=""><img src="{{ asset('images/icons/share.svg') }}" alt="share" />Share <span>(99)</span></a></li>
            <li><a href="javascript:void(0)"><img src="{{ asset('images/icons/searchW.svg') }}" alt="search"/><img src="{{ asset('images/icons/search.svg') }}" alt="smart-search" />Smart Search</a></li>
        </ul>
    </nav>
@endsection

@section('content')
    <div class="content-wrap">
        <div class="bookmarked-flights">            
            <div><a class="add-more icon-cta" href="#"><img src="{{asset('images/icons/share.svg')}}" /> Share</a></div>
        </div>

        @include('layouts.partials.ad', ['class' => 'adsection3', 'image' => asset('images/ad/ad3.jpeg')])
    </div>
@endsection  

@push('scripts')    
    <script>
        document.getElementById("bookmarksLink").addEventListener("click", function(e) {
            e.preventDefault();

            let bookmarks = localStorage.getItem("bookmarks");
            if (!bookmarks) bookmarks = "[]"; // default empty

            document.getElementById("bookmarksInput").value = bookmarks;
            document.getElementById("bookmarksForm").submit();
        });

        function updateBookmarkCount() {
            let bookmarks = JSON.parse(localStorage.getItem('bookmarks') || '[]');
            $('#bookmark-count').text(bookmarks.length);
        }

        // Call on page load
        $(document).ready(function() {
            renderBookmarks();
            updateBookmarkCount();
        });
    </script>

     <script>
        $(function() {
            $('.icon-cta').on('click', function (e) {
                e.preventDefault();

                const stored = localStorage.getItem("bookmarks");
                if (!stored) {
                    alert("No bookmarks to share.");
                    return;
                }

                const bookmarks = JSON.parse(stored);

                $.ajax({
                    url: "{{ route('share-bookmarks') }}",
                    type: "POST",
                    data: {
                        bookmarks: bookmarks,
                        _token: "{{ csrf_token() }}"
                    },
                    success: function (res) {
                        if (res.url) {
                            navigator.clipboard.writeText(res.url).then(() => {
                                alert("Share link copied:\n" + res.url);
                            });
                        } else {
                            alert("Something went wrong. Try again.");
                        }
                    },
                    error: function (xhr) {
                        console.error(xhr.responseText);
                        alert("Error saving bookmarks.");
                    }
                });
            });
        });        
    </script>

    <script>
        function renderBookmarks() {
            let container = $('.bookmarked-flights');
            let bookmarks = JSON.parse(localStorage.getItem('bookmarks') || '[]');

            container.find('ul').remove(); // clear any old UL
            container.find('p.no-data').remove();

            if (bookmarks.length === 0) {
                container.append('<p class="no-data">No bookmarks saved.</p>');
                $('#bookmark-count').text('0');
                return;
            }

            // Create UL + header row
            let ul = $('<ul></ul>');
            ul.append(`
                <li class="header-bar">
                    <div class="clmn dt-tm">Dep. Date/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 dt-tm">Arr. Date/Time</div>
                    <div class="clmn remove-book"></div>
                </li>
            `);

            // Loop bookmarks and render each <li>
            bookmarks.forEach((bookmark, i) => {        
                let li = $(`
                    <li data-flight='${JSON.stringify(bookmark.item)}'>
                        <div class="clmn dt-tm">
                            <div>${bookmark.item.departure_date? (() => {
                                    let d = bookmark.item.departure_date.split("-");
                                    return d[2] + "-" + d[1] + "-" + d[0];
                                    })() 
                                : ''}
                            </div>
                            <div>${bookmark.item.departure_time || ''}</div>
                        </div>
                        <div class="flit-airln">
                            <div class="clmn flightN">
                                <a href="/flight/${bookmark.item?.flightLink || '#'}">${bookmark.item.flightCode}</a>
                            </div>
                            <div class="clmn flg-img">
                                <a href="${bookmark.item?.airlineUrl || '#'}">
                                    <img src="https://liveairways.com/public/flight-image/${bookmark.item?.airlineCode || ''}.png" alt="${bookmark.item?.airlineName || ''}" />
                                </a>
                            </div>
                        </div>
                        <div class="ori-dest">
                            <div class="ori-tml">
                                <div class="clmn originC">
                                    <a href="${bookmark.origin_url ? `airport/${bookmark.origin_url}/departures` : '#'}">${bookmark.origin || ''}</a>
                                </div>
                                <div class="clmn tmlC"><span>${bookmark.item.departure_terminal ? 'T-' + bookmark.item.departure_terminal : '-'}</span></div>
                            </div>
                            <div class="desti-tml">
                                <div class="clmn desti-stat">
                                    <a href="${bookmark.destination_url ? `airport/${bookmark.destination_url}/arrivals` : '#'}">${bookmark.destination || ''}</a>
                                </div>
                                <div class="clmn tmlC"><span>${bookmark.item.arrival_terminal !== null? 'T-' + bookmark.item.arrival_terminal : '-'}</span></div>
                            </div>
                        </div>
                        <div class="clmn dt-tm">
                            <div>${bookmark.item.arrival_date? (() => {
                                let d = bookmark.item.arrival_date.split("-");
                                return d[2] + "-" + d[1] + "-" + d[0];
                                })() 
                                : ''}
                            </div>
                            <div>${bookmark.item.arrival_time || ''}</div>
                        </div>
                        <div class="clmn remove-book">
                            <a href="javascript:void(0)" class="delete-bookmark">
                                <div class="trash">
                                    <svg viewBox="0 0 24 24" class="trash-icon" xmlns="http://www.w3.org/2000/svg">
                                        <path class="lid" d="M8 3h8c.6 0 1 .4 1 1v1h3c.6 0 1 .4 1 1v1c0 .6-.4 1-1 1H4c-.6 0-1-.4-1-1V6c0-.6.4-1 1-1h3V4c0-.6.4-1 1-1z" fill="white" />
                                        <path class="body" d="M6 9h12l-1.2 10.5c-.1.9-.8 1.5-1.7 1.5H8.9c-.9 0-1.6-.6-1.7-1.5L6 9z" fill="white" />
                                        <path class="line" d="M10 12v7" stroke="black" stroke-width="1.5" stroke-linecap="round" />
                                        <path class="line" d="M14 12v7" stroke="black" stroke-width="1.5" stroke-linecap="round" />
                                    </svg>
                                </div>
                            </a>
                        </div>
                    </li>
                `);

                ul.append(li);
            });

            container.prepend(ul);

            // Update counter
            $('#bookmark-count').text(bookmarks.length);
        }

        $(document).ready(function () {
            $(document).on('click', '.delete-bookmark', function (e) {
                e.preventDefault();
                e.stopPropagation();

                var $row = $(this).closest('li');
                if ($row.length === 0) return;

                var raw = $row.attr('data-flight');
                var flightData = null;
                try { flightData = raw ? JSON.parse(raw) : null; } catch (err) { flightData = null; }

                var bookmarks = [];
                try { bookmarks = JSON.parse(localStorage.getItem('bookmarks') || '[]'); } catch (err) { bookmarks = []; }

                var index = -1;
                for (var i = 0; i < bookmarks.length; i++) {
                    var b = bookmarks[i];                    
                    if (flightData
                        && b.item.flightCode === flightData.flightCode
                        && b.item.gridCity === (flightData.gridCity || '')
                        && b.item.gridTime === (flightData.gridTime || '')) {
                        index = i;
                        break;
                    }
                }

                if (index > -1) {
                    bookmarks.splice(index, 1);
                    try { localStorage.setItem('bookmarks', JSON.stringify(bookmarks)); } catch (err) {}

                    // ✅ Update hidden input (but don’t submit form)
                    $('#bookmarksInput').val(JSON.stringify(bookmarks));

                    // Remove row visually
                    $row.remove();

                    // Update counter (DOM only)
                    if (typeof updateBookmarkCount === 'function') {
                        renderBookmarks();
                        updateBookmarkCount();
                    } else {
                        $('#bookmark-count').text(bookmarks.length);
                    }

                    // Empty message if none left
                    if (bookmarks.length === 0 && $('.bookmarked-flights ul').length) {
                        if ($('.bookmarked-flights p:contains("No bookmarks saved.")').length === 0) {
                            $('.bookmarked-flights ul').after('<p>No bookmarks saved.</p>');
                        }
                    }
                }
            });

            // Prevent hidden form from auto-submitting
            $(document).on('submit', 'form.all-flights', function (e) {
                e.preventDefault();
                return false;
            });

            document.addEventListener("DOMContentLoaded", function () {
                let ls = localStorage.getItem('bookmarks');
                if (ls) {
                    let bookmarks = JSON.parse(ls);
                    // render them into DOM if $bookmarks was empty
                    if (bookmarks.length && document.querySelectorAll('.bookmark-item').length === 0) {
                        // loop and append HTML rows
                    }
                }
            });
        });
    </script>
@endpush