<?php
/**
 * MAP
 *
 * @package Expliciet
 * @subpackage Expl-theme
 */

$arg = array(
    'post_type' => 'locations',
    'post_status' => 'publish',
    'orderby' => 'date',
    'order' => 'DESC',
    'posts_per_page' => 0,
);
$query = new WP_Query( $arg );
if( $query->have_posts() ) {
    while( $query->have_posts() ) {
        $query->the_post();
        $companies[] = get_field('name');
        $locations[] = get_field('adress');
    }
    wp_reset_postdata();
}

// TESTING VARS BEGIN
//var_dump($companies);
//foreach( $locations as $i=>$location) {
//    echo 'Title: ';
//    echo $location['title'];
//}
//foreach( $locations as $i=>$location) {
//    echo 'Company: ';
//    echo $companies[$i];
//    echo '<br/>';
//    echo 'Lat: ';
//    echo $location['lat'];
//    echo '<br/>';
//    echo 'Lng: ';
//    echo $location['lng'];
//    echo '<br/>';echo '<br/>';
//}
// TESTING VARS ENDS

?>

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=<?php the_field( 'google_map_api', 'option' ); ?>"></script> <!-- Vergeet geen API-sleutel aan te maken! (js?key=) -->

<script>

    google.maps.event.addDomListener(window, 'load', init);

    function init() {
        var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
        var isDraggable = w > 1024 ? true : false;

        var mapOptions = {
            scrollwheel: false,
            draggable: isDraggable,
            streetViewControl: false,
            styles:  [
                {"featureType":"landscape","elementType":"labels","stylers":[{"visibility":"off"}]},
                {"featureType":"landscape","elementType":"all","stylers":[{"color":"#e9e9e9"}]},
                {"featureType":"transit","elementType":"labels","stylers":[{"visibility":"off"}]},
                {"featureType":"poi","elementType":"labels","stylers":[{"visibility":"off"}]},
                {"featureType":"water","elementType":"labels","stylers":[{"visibility":"off"}]},
                {"featureType":"road","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"stylers":[{"hue":"#000"},{"saturation":-100},{"lightness":10}]},
                {"featureType":"road","elementType":"labels.text.fill","stylers":[{"visibility":"on"},{"lightness":24}]},
                {"featureType":"road","elementType":"geometry","stylers":[{"lightness":10}]}
            ]
        };

        var mapElement = document.querySelector('.dealersmap');
        var map = new google.maps.Map(mapElement, mapOptions);

        //var infowindow = new google.maps.InfoWindow();
        var bounds = new google.maps.LatLngBounds();

        var icon = {
            path: "M192 96c-52.935 0-96 43.065-96 96s43.065 96 96 96 96-43.065 96-96-43.065-96-96-96zm0 160c-35.29 0-64-28.71-64-64s28.71-64 64-64 64 28.71 64 64-28.71 64-64 64zm0-256C85.961 0 0 85.961 0 192c0 77.413 26.97 99.031 172.268 309.67 9.534 13.772 29.929 13.774 39.465 0C357.03 291.031 384 269.413 384 192 384 85.961 298.039 0 192 0zm0 473.931C52.705 272.488 32 256.494 32 192c0-42.738 16.643-82.917 46.863-113.137S149.262 32 192 32s82.917 16.643 113.137 46.863S352 149.262 352 192c0 64.49-20.692 80.47-160 281.931z",
            fillColor: '#3371d9',
            fillOpacity: 1,
            strokeWeight: 0,
            scale: 0.075
        }
        var iconHover = {
            path: "M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z",
            fillColor: '#00b4aa',
            fillOpacity: 1,
            strokeWeight: 0,
            scale: 0.075
        }

        var markers = []
        var location = '';

        <?php foreach( $locations as $i=>$location) : ?>

        var infoWindow = new google.maps.InfoWindow({
            content: '<?= $companies[$i];?>',
        });
        marker = new google.maps.Marker({
            map:map,
            icon: icon,
            clickable: true,
            title: '<?= $companies[$i]; ?>',
            position: new google.maps.LatLng(<?= $location['lat']; ?>, <?= $location['lng']; ?>)
        });

        google.maps.event.addListener(marker, 'click', function() {
            infoWindow.open(map, marker);
        });

        bounds.extend(marker.position);
        markers.push(marker);


        <?php endforeach; ?>



        map.fitBounds(bounds);

        // var listener = google.maps.event.addListener(map, "idle", function () {
        //     map.setZoom(11);
        //     google.maps.event.removeListener(listener);
        // });

        if ( document.querySelector( '.locations') ) {

            [...markers].forEach( marker => {

                marker.addListener( 'mouseover', function(e) {
                    location = marker.title;
                    marker.setIcon( iconHover );
                    document.querySelector( `[data-location=${location}]`).dataset.active = true;
                });

                marker.addListener( 'mouseout', function(e) {
                    location = marker.title;
                    marker.setIcon( icon );
                    delete document.querySelector( `[data-location=${location}]`).dataset.active;
                });
            })
        }

    }

</script>
<div class="dealersmap"></div>