@extends('templates.frontend')

{{-- TODO: extract the map and common functionality to non themed partial --}}

@section('includes')
    <link href="{{ asset('css/themes/pdhp/interactive-map.css') }}" rel="stylesheet" />
    <script src="{{ asset('libraries/openlayers/openlayers-v5.3.0.min.js') }}"></script>
    <link href="{{ asset('libraries/openlayers/openlayers-v5.3.0.min.css') }}" rel="stylesheet" />
@stop

@section('style')
    <style>
@foreach($markers as $marker)
    @if($icon_url = $marker->icon)
        #marker_{{ $marker->id }} {
            background-image: url('{{ $icon_url }}');
        }
    @endif
@endforeach
    </style>
@stop

@section('content')

<div class="interactive-map">
    <div class="filters">
        <a id="toggle_search_filters_button" href="#" onclick="$('.interactive-map .drawer').toggleClass('open'); return false;">Toggle Search Filters</a>
        <div class="drawer">
            <h2 class="first">Search</h2>
            <input type="text" name="text_search" id="text_search" maxlength="128" onkeyup="filter();"/>
            <form id="tag_form" style="width: 215px;" onchange="filter();">
        @foreach($taxonomy_names as $taxonomy)
            @if(isset($taxonomies[$taxonomy]))
                <h2 class="not-first">{{ $taxonomy }}</h2>
                @foreach($taxonomies[$taxonomy] as $tag)
                    <label>
                        <input type="checkbox" name="{{ $taxonomy }}_checkbox_{{ $tag->id }}" id="{{ $taxonomy }}_checkbox_{{ $tag->id }}" value="{{ $tag->id }}" />
                        {{ $tag->name }}
                    </label>
                    <br />
                @endforeach
            @endif
        @endforeach
            </form>
            <input id="reset_button" type="button" onclick="resetFilters();" value="Clear Search" />
        </div>
    </div>
    <div class="results">
        <div id="map" class="map search-results"></div>
        <table id="list_view" style="position:relative;">
            <thead>
            <tr>
                <th>Image</th>
                <th>Location</th>
                @foreach($taxonomy_names as $taxonomy)
                    <th>{{ $taxonomy }}</th>
                @endforeach
            </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>
<div class="markers"></div>
@stop

@push('scripts')
<script>
    window.__MARKER_REPOSITORY = {!! $markers !!};
    window.MARKER_REPOSITORY = [];
    // window.ACTIVE_MARKER_IDS = [2, 9, 10, 15, 17];
    window.ALL_MARKER_IDS = {!! $markers->pluck('id') !!};
    window.POPUP = null;
    window.MARKER_MARKUP = [];
    window.POPUP_MARKUP = [];
    window.DEFAULT_ZOOM = {{ Setting::get('initial-map-zoom') }};

    function onMarkerClick(element)
    {
        $('#map .marker.show-popup').removeClass('show-popup');
        $(element).toggleClass('show-popup');
        $('.ol-overlay-container').removeClass('bring-to-front');
        $(element).closest('.ol-overlay-container').addClass('bring-to-front');
    }

    function onMarkerTrClick(element)
    {
        //TODO: this is thrashing back to the original position for some reason
        // $("html, body").animate({
        //     scrollTop: $('#map').offset().top
        // }, 500);

        var markerId = $(element).closest('tr').data('marker-id');
        var marker = window.MARKER_REPOSITORY[markerId];
        var $markerOverlay = $('#marker_' + markerId);

        var center = ol.proj.fromLonLat([
            parseFloat(marker.longitude),
            parseFloat(marker.latitude)
        ]);
        map.getView().setCenter(center);
        map.getView().setZoom(DEFAULT_ZOOM);

        $('#map .marker.show-popup').removeClass('show-popup');
        $markerOverlay.addClass('show-popup');
        $('.ol-overlay-container').removeClass('bring-to-front');
        $markerOverlay.closest('.ol-overlay-container').addClass('bring-to-front');

        return false;
    }

    function onMarkerClose(element)
    {
        $('#map .marker.show-popup').removeClass('show-popup');
    }

    function resetFilters()
    {
        $('#text_search').val('');
        $('#tag_form :checked').prop('checked', false);
        filter();
    }

    function filter()
    {
        var searchText = $('#text_search').val().toLowerCase();
        var tagIds = $('#tag_form :checked').toArray().map(function(checkbox, index)
        {
            return parseInt(checkbox.value);
        });

        var activeMarkers = window.MARKER_REPOSITORY.filter(function(marker)
        {
            var isActive = true;
            if(searchText) {
                isActive = isActive && (marker.searchableText.indexOf(searchText) >= 0);
            }
            if(tagIds.length > 0) {
                isActive = isActive && containsSubset(marker.tagIds, tagIds);
            }

            return isActive;
        });
        window.ACTIVE_MARKER_IDS = activeMarkers.map(function(marker)
        {
            return marker.id;
        });
        renderMarkers();
    }

    function initializeMarkers()
    {
        window.POPUP = new ol.Overlay({
            element: document.getElementById('popup')
        });
        map.addOverlay(window.POPUP);

        window.ACTIVE_MARKER_IDS = [];
        window.__MARKER_REPOSITORY.forEach(function(marker)
        {
            if(!marker) {
                console.error("Marker at index " + i + " is malformed!");
                console.error(marker);
            }
            if(!marker.latitude || !marker.longitude) {
                console.error("Marker #" + marker.id + " is missing lat/lng and will not be displayed on map!");
                console.error(marker);
            }
            marker.searchableText = marker.name.toLowerCase();
            marker.tagIds = marker.tags.map(function(tag)
            {
                return tag.id;
            });
            @foreach($taxonomy_names as $taxonomy)
                marker['{{ $taxonomy }}'] = marker.tags.filter(function(tag) { return tag.type === '{{ $taxonomy }}'; }).map(function(tag) { return tag.name.en; }).join(', ');
            @endforeach

            marker.overlay = null;
            window.MARKER_REPOSITORY[marker.id] = marker;
            window.ACTIVE_MARKER_IDS.push(marker.id);

            /* Generate OL Map Marker Overlay */
            var leftColumn = '';
            if(marker.image)
            {
                leftColumn =
                    "<div class='left'>" +
                        "<img src='" + marker.image + "' />" +
                    "</div>"
                ;
            }

            var button = '';
            if(marker.url) {
                button = "<a class='button' href='" + marker.url + "'>Learn More</a>";
            }

            var tagline = '';
            if(marker.extras.tagline) {
                tagline = "<div class='tagline'>" + marker.extras.tagline + "</div>";
            }

            window.MARKER_MARKUP[marker.id] =
                "<div id='marker_" + marker.id + "' class='marker' onclick='onMarkerClick(this)'>" +
                    "<div class='popup'>" +
                        "<div class='content'>" +
                            "<div class='close' onclick='onMarkerClose(this);event.stopPropagation();'></div>" +
                            leftColumn +
                            "<div class='right'>" +
                                "<div class='title'>" + marker.name + "</div>" +
                                tagline +
                                "<div class='main'>" + (marker.description ? marker.description : '') + "</div>" +
                                "<a class='address' href='" + marker.googleMapsAddressUrl + "'>" +
                                    "<div>" + marker.address[1] + "</div><div>" + marker.address[2] + "</div>" +
                                "</a>" +
                                button +
                            "</div>" +
                        "</div>" +
                    "</div>" +
                "</div>"
            ;

            window.POPUP_MARKUP[marker.id] =
                "<div id='marker_popup_" + marker.id + "' class='marker-popup'>" +
                    "ID: " + marker.id +
                "</div>"
            ;

            var trString =
                '<tr id="marker_tr_' + marker.id + '" class="list-view-marker" data-marker-id="' + marker.id + '">' +
                    '<td class="image">' +
                        '<a href="#" onclick="onMarkerTrClick(this);" style="background-image: url(' + marker.image + ')"></a>' +
                    '</td>' +
                    '<td class="name">' +
                        '<h3 style="margin:0;">' +
                            '<a href="#" onclick="onMarkerTrClick(this);">' + marker.name + '</a>' +
                        '</h3>' +
                    '</td>'
            ;
            @foreach($taxonomy_names as $taxonomy)
                trString += '<td class="{{ $taxonomy }}">' + marker['{{ $taxonomy }}'] + '</td>';
            @endforeach
                trString += '</tr>';
            $('table#list_view tbody').append(trString);
        });
    }

    function renderMarkers()
    {
        removeAllMarkerOverlays();
        hideAllMarkerTrs();

        window.ACTIVE_MARKER_IDS.forEach(function(markerId)
        {
            if(!markerId) {
                console.error("Invalid active markerID!");
            }
            var marker = window.MARKER_REPOSITORY[markerId];
            if(!marker) {
                console.error("Marker #" + markerId + " is missing from repository!");
                return;
            }

            if(marker.overlay) {
                return;
            }

            $('.markers').append(window.MARKER_MARKUP[markerId]);
            var overlayDiv = document.getElementById('marker_' + markerId);

            window.MARKER_REPOSITORY[markerId].overlay = new ol.Overlay({
                position: ol.proj.fromLonLat([
                    parseFloat(marker.longitude),
                    parseFloat(marker.latitude)
                ]),
                positioning: 'center-center',
                element: overlayDiv,
                stopEvent: false
            });

            map.addOverlay(window.MARKER_REPOSITORY[markerId].overlay);

            $('#marker_tr_' + markerId).addClass('active')
        });
    }

    function removeAllMarkerOverlays()
    {
        for(var i = 0; i < window.ALL_MARKER_IDS.length; i++)
        {
            var markerId = window.ALL_MARKER_IDS[i];
            if(!markerId) {
                console.error("Invalid active markerID");
            }
            if(!window.MARKER_REPOSITORY[markerId]) {
                console.error("Marker #" + markerId + " is missing from repository!");
                return;
            }

            if(window.MARKER_REPOSITORY[markerId].overlay) {
                map.removeOverlay(window.MARKER_REPOSITORY[markerId].overlay);
                window.MARKER_REPOSITORY[markerId].overlay = null;
            }
        }
    }

    function hideAllMarkerTrs()
    {
        $('table#list_view tbody tr').removeClass('active');
    }

    var layer = new ol.layer.Tile({
        source: new ol.source.OSM()
    });

    var map = new ol.Map({
        layers: [layer],
        target: 'map',
        view: new ol.View({
            center: ol.proj.fromLonLat([{{ Setting::get('initial-map-longitude') }}, {{ Setting::get('initial-map-latitude') }}]),
            zoom: {{ Setting::get('initial-map-zoom') }}
            // zoom: 9
        })
    });

    /* TODO: use Bounds?
    * https://stackoverflow.com/questions/15910968/openlayers-display-all-markers-on-screen
    * */
    $(document).ready(function()
    {
        initializeMarkers();
        renderMarkers();
    });
</script>
@endpush