<?php
/**
 * Created by PhpStorm.
 * User: etpl-
 * Date: 5/12/17
 * Time: 7:07 PM
 */
?>
<div class="contenido4" style="margin-top: 80px;">
    <div class="container map-wrapper">
<!--            <button class="btn primary" onclick="windo.history.back();">Back</button>-->
            <?php if ($showMap != 1){?>
                <div class="alert alert-info fade in">
                    <a href="#" class="close" data-dismiss="alert">&times;</a>
                    <strong>Info!</strong> Unable to track the order.
                </div>
            <?php }?>
            <div id="map_canvas"></div>
            <input type="hidden" name="userType" id="userType"  value="<?=$userType?>">
            <input type="hidden" name="order_latitude" id="order_latitude"  value="<?=$deliveryLatitude?>">
            <input type="hidden" name="order_longitude" id="order_longitude"  value="<?=$deliveryLongitude?>">
            <input type="hidden" name="restaurant_latitude" id="restaurant_latitude"  value="<?=$restaurant_latitude?>">
            <input type="hidden" name="restaurant_longitude" id="restaurant_longitude"  value="<?=$restaurant_longitude?>">
            <input type="hidden" name="driver_latitude" id="driver_latitude"  value="<?=$driver_latitude?>">
            <input type="hidden" name="driver_longitude" id="driver_longitude"  value="<?=$driver_longitude?>">
    </div>
</div>
<script src="https://maps.googleapis.com/maps/api/js?key=<?=MAP_API_KEY?>"></script>

    <style>
        /* Always set the map height explicitly to define the size of the div
      * element that contains the map. */
        html, body, #map_canvas {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #map_canvas {
            position: relative;
        }
        .map-wrapper {
            position: relative;
            width: 100% !important;
            max-width:100% !important;
            height: calc(100vh - 4em - 64px);
        }
        .cart-container{display: none;}
    </style>
    <script>
        var marker, geocoder, map;
        var infowindow;
        var directionsService = new google.maps.DirectionsService();
        map = new google.maps.Map(document.getElementById('map_canvas'), {
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            center: {lat: -33.87488, lng: 151.198706},
            zoom: 15
        });
        $(document).ready(function(){
            initialize();
        });
        function initialize() {
            //geocodeAddress(decodeURIComponent(getParam("address")),"map");
            //directionsDisplay = new google.maps.DirectionsRenderer({suppressMarkers: true});
            directionsDisplay = new google.maps.DirectionsRenderer();
            directionsDisplay.setMap(map);
            var allRes = <?=$allRes?>;
            if(allRes.length > 0) {
                //var resJson = JSON.parse(allRes);
                console.log(allRes);
                $.each(allRes, function (i, val) {
                    if((val.latitude != "" && val.latitude != "undefined" && val.latitude != null) && (val.longitude != "" && val.longitude != "undefined" && val.longitude != null)) {
                        var content = "<img src='"+val.restaurant_logo_path+"' alt='"+val.restaurant_name+"' title='"+val.restaurant_name+"' style='height: 50px;width: 50px;float: left;margin-right: 15px;border: 1px solid grey;'><div style='float: left;'><b>Business Name: </b>"+val.restaurant_name+"<br/><b>Business Address: </b>"+val.restaurant_streetaddress+"</div>";
                        makeMarker(new google.maps.LatLng(val.latitude, val.longitude), icons.restaurant, val.restaurant_name, map,content);
                    }
                    console.log(val);
                })
            }else {
                calcRoute();
            }
        }
        function makeMarker(position, icon, title, map, content) {
            var marker =  new google.maps.Marker({
                position: position,
                map: map,
                icon: icon,
                title: title
            });
            var infowindow = new google.maps.InfoWindow({
                content: content
            });

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

        }

        var icons = {
            user: new google.maps.MarkerImage(
                // URL
                'https://maps.google.com/mapfiles/ms/micons/blue.png',
                // (width,height)
                new google.maps.Size(44, 32),
                // The origin point (x,y)
                new google.maps.Point(0, 0),
                // The anchor point (x,y)
                new google.maps.Point(22, 32)),
            restaurant: new google.maps.MarkerImage(
        // URL
            '<?=base_url()?>/assets/marker-restaurant.png',
            // (width,height)
            new google.maps.Size(44, 70),
            // The origin point (x,y)
            new google.maps.Point(0, 0),
            // The anchor point (x,y)
            new google.maps.Point(22, 32)),
                    driver: new google.maps.MarkerImage(
        // URL
            'https://maps.google.com/mapfiles/ms/micons/green.png',
            // (width,height)
            new google.maps.Size(44, 32),
            // The origin point (x,y)
            new google.maps.Point(0, 0),
            // The anchor point (x,y)
            new google.maps.Point(22, 32))
                };

        function calcRoute() {
            var userType = $("#userType").val();
            var order_latitude = $("#order_latitude").val();
            var order_longitude = $("#order_longitude").val();

            var restaurant_latitude = $("#restaurant_latitude").val();
            var restaurant_longitude = $("#restaurant_longitude").val();

            var driver_latitude = $("#driver_latitude").val();
            var driver_longitude = $("#driver_longitude").val();

            var waypts = [];
//		stop = new google.maps.LatLng(-39.419, 175.57)
//        waypts.push({
//            location:stop,
//            stopover:true});
            start  = new google.maps.LatLng(restaurant_latitude, restaurant_longitude);
            end = new google.maps.LatLng(order_latitude, order_longitude);
            var request = {
                origin: start,
                destination: end,
                waypoints: waypts,
                optimizeWaypoints: true,
                travelMode: google.maps.DirectionsTravelMode.DRIVING
            };
            directionsService.route(request, function(response, status) {
                console.log(response);
                console.log(status);
                if (status == google.maps.DirectionsStatus.OK) {
                    directionsDisplay.setDirections(response);
                    var route = response.routes[0];
                    var leg = response.routes[0].legs[0];
                    //makeMarker(leg.start_location, icons.start, "title", map);
                    //makeMarker(leg.end_location, icons.end, 'title', map);
                    console.log(route);
                    if(userType == 1)
                    {
                        map.setCenter(new google.maps.LatLng(order_latitude, order_longitude));
                    }else {
                        map.setCenter(new google.maps.LatLng(restaurant_latitude, restaurant_longitude));
                    }
                }else {
                    console.log("DirectionsStatus failed");
                    if(userType == 2)
                    {
                        makeMarker(new google.maps.LatLng(restaurant_latitude, restaurant_longitude), icons.restaurant, "Your Location", map, "Your Location");
                        makeMarker(new google.maps.LatLng(order_latitude, order_longitude), icons.user, "Delivery Location", map, "Delivery Location");
                        map.setCenter(new google.maps.LatLng(restaurant_latitude, restaurant_longitude));
                    }
                    if(userType == 1)
                    {
                        makeMarker(new google.maps.LatLng(restaurant_latitude, restaurant_longitude), icons.restaurant, "Restaurant Location", map, "Restaurant Location");
                        makeMarker(new google.maps.LatLng(order_latitude, order_longitude), icons.user, "Your Location", map, "Your Location");
                        map.setCenter(new google.maps.LatLng(order_latitude, order_longitude));
                    }
                    if(userType == 3)
                    {
                        makeMarker(new google.maps.LatLng(restaurant_latitude, restaurant_longitude), icons.restaurant, "Restaurant Location", map, "Restaurant Location");
                        makeMarker(new google.maps.LatLng(order_latitude, order_longitude), icons.user, "Customer Location", map, "Customer Location");
                        map.setCenter(new google.maps.LatLng(restaurant_latitude, restaurant_longitude));
                    }
                }
            });
        }
        function getParam(name) {
            name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
            var regexS = "[\\?&]" + name + "=([^&#]*)";
            var regex = new RegExp(regexS);
            var results = regex.exec(window.location.href);
            if (results == null)
                return "";
            else
                return results[1];
        }
    </script>