@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">
            <h2 class="for-desk">Bookmarked Flights</h2>             
            @if(!empty($bookmarks))
                <ul>
                    <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>
                    </li>
                    @foreach(json_decode($bookmarks, true) as $bookmark)
                    <li>
                        <div class="clmn dt-tm">
                            <div class=""> {{ date('d-m-Y', strtotime($bookmark['item']['departure_date'])) }}</div>
                            <div>{{ $bookmark['item']['arrival_time'] }}</div>
                        </div>
                        <div class="flit-airln">
                            <div class="clmn flightN"><a href="{{ url('/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="{{ !empty($bookmark['origin_url']) ? '/airport/'.$bookmark['origin_url'].'/departures' : '#' }}">{{ $bookmark['origin'] }}</a></div>
                                <div class="clmn tmlC">
                                    <span>
                                        @if(!empty($bookmark['item']['departure_terminal']) && $bookmark['item']['departure_terminal'] !== 'null')
                                            T-{{ $bookmark['item']['departure_terminal'] }}
                                        @else
                                            -
                                        @endif
                                    </span>
                                </div>
                            </div>
                            <div class="desti-tml">
                                <div class="clmn desti-stat"><a href="{{ !empty($bookmark['destination_url']) ? '/airport/'.$bookmark['destination_url'].'/arrivals' : '#' }}">{{ $bookmark['destination'] }}</a></div>
                                <div class="clmn tmlC">
                                    <span>
                                        @if(!empty($bookmark['item']['arrival_terminal']) && $bookmark['item']['arrival_terminal'] !== 'null')
                                            T-{{ $bookmark['item']['arrival_terminal'] }}
                                        @else
                                            -
                                        @endif
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="clmn dt-tm">
                            <div class=""> {{ date('d-m-Y', strtotime($bookmark['item']['arrival_date'])) }}</div>
                            <div>{{ $bookmark['item']['departure_time'] }}</div>
                        </div>                              
                    </li>
                    @endforeach
                </ul>
            @else
                <p>No bookmarks found.</p>
                @endif
        </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() {
            updateBookmarkCount();
        });
    </script>
@endpush