<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Tracking | Ben Goldsworthy</title>

        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css"
            integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
            crossorigin=""/>
        <script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"
            integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=="
            crossorigin=""></script>
        <link rel="stylesheet" href="/css/app.css" />
    </head>

    <body>

        <header>
            <h1 class="page-title">{{ $trip->name }}</h1>
            <nav class="other-links">
                <ul>
                    <li><p><a href="/">Current trip</a></p></li>
                    <li><p><a href="/past-trips">Past trips</a></p></li>
                </ul>
            </nav>

            <section class="trip-meta">
                <p>
                    <span>Tracking started: {{ date('j M Y (G:H)', strtotime($trip->date_start)) }}</span> |
                    <span>Tracking Ended: {{ date('j M Y (G:H)', strtotime($trip->updated_at)) }}</span>
                </p>
            </section>
        </header>

        <main id="routeContainer">
            <div id="map"></div>
            <section id="checkinList">
            <ol reversed>
                @foreach(array_reverse($trip->checkins) as $checkin)
@if($checkin->id != 2607)
                <li>
                    <details id="{{ $checkin->id }}" ontoggle="toggleCheckin(this.open, this.id)">
                        <summary><h2>{{ $checkin->title ?? "[No title]" }}</h2> <span>{{ date('j M Y (G:H)', strtotime($checkin->date)) }}</span></summary>
                        {{ $checkin->note ?? "[No note]" }}
@if($checkin->image_url)
<img class="popup__image" loading="lazy" src="{{ $checkin->image_url }}">
@endif
                    </details>
                </li>
@endif
                @endforeach
            </ol>
            </section>
        </main>

        <footer>
            <script>
                var map = L.map('map').setView([{{ end($trip->locations)->latitude }}, {{ end($trip->locations)->longitude }}], 7);
                L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                    maxZoom: 19,
                    attribution: 'OpenStreetMap'
                }).addTo(map);

                var routePoints = L.polyline([
                    @foreach($trip->locations as $location)
                    [{{ $location->latitude }}, {{ $location->longitude }}],
                    @endforeach
                ]).addTo(map);

                var checkinMarkers = [];
                
                var marker = null, popupMarkup = null;
                @foreach($trip->checkins as $checkin)
                    @if($checkin->id != 2602)
                marker = L.marker([{{ $checkin->location->latitude }}, {{ $checkin->location->longitude }}]).addTo(map);
                
                popupMarkup = '<h2 class="popup__title">{{ $checkin->title ?? "No Title" }}</h2>';
                popupMarkup += `<p class="popup__note">{{ $checkin->note }}</p>`;
                popupMarkup += '<img class="popup__image" src="{{ $checkin->image_url }}">';
                marker.bindPopup(popupMarkup).openPopup();
                
                checkinMarkers[{{ $checkin->id }}] = marker;
                @endif
                @endforeach

                var currLocation = L.marker(
                    [{{ end($trip->locations)->latitude }}, {{ end($trip->locations)->longitude }}], 
                ).addTo(map).setZIndexOffset(1000);
                currLocation.bindPopup('<p>Current location</p>').openPopup();
                
                function toggleCheckin(isOpen, checkinId) {
                    if (isOpen) {
                        var checkins = document.querySelectorAll('details');

                        checkinMarkers[checkinId].openPopup();

                        checkins.forEach(checkin => {
                            if (checkin.id != checkinId && checkin.open) checkin.open = false;
                        });
                    } else {
                        checkinMarkers[checkinId].closePopup();
                    }
                }
            </script>
        </footer>
    </body>
</html>