<?php $themeHelper = $this->helper('MGS\StoreLocator\Helper\Data'); ?>
<?php if($themeHelper->getStoreConfig('locator/general/store_api_key')){
	$apikey = $themeHelper->getStoreConfig('locator/general/store_api_key');
}else{
	$apikey = 'AIzaSyD11c9ZFjYyFvKmbp2eKkpRuiqkjkAUIG0';
}
?>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=<?php echo $apikey ?>&libraries=places&sensor=false"></script>
<style type="text/css">
    #locator_form_map{height:500px; border:1px solid #ddd;<?php if (!$this->getRequest()->getParam('id')): ?>display:none<?php endif ?>}
</style>

<script type="text/javascript">

    require([
        "jquery",
        "jquery/ui"
    ], function ($) {
        $('#getmap_address').click(function () {
            getMapbyAddress();
        });
        $('#getmap_location').click(function () {
            getMapByLocation();
        });
        function getMapbyAddress() {
            var streetValue = $('#locator_street_address').val();
            var countryValue = $('#locator_country').val();
            var stateValue = $('#locator_state').val();
            var cityValue = $('#locator_city').val();
            var zipcodeValue = $('#locator_zipcode').val();
            $('#locator_form_map').show();
            $('#locator_form_map').html('<div data-role="spinner"  class="admin__data-grid-loading-mask" style="display: block;">'
                    + '<div class="spinner">'
                    + '<span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>'
                    + '</div></div>');
            var address = streetValue + " " + cityValue + " " + stateValue + " " + zipcodeValue + " " + countryValue;

            $.ajax({
                type: "GET",
                dataType: "json",
                url: "http://maps.googleapis.com/maps/api/geocode/json",
                data: {'address': address, 'sensor': false},
                success: function (data) {
                    if (data.results.length) {
                        var latitude = data.results[0].geometry.location.lat;
                        var longitude = data.results[0].geometry.location.lng;

                        $('#locator_lat').val(latitude);
                        $('#locator_lng').val(longitude);

                        getMap(latitude, longitude);
                    }
                }
            });
        }

        function getMapByLocation() {
            $('#locator_form_map').show();
            $('#locator_form_map').html('<div data-role="spinner"  class="admin__data-grid-loading-mask" style="display: block;">'
                    + '<div class="spinner">'
                    + '<span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>'
                    + '</div></div>');
            latitude = $('#locator_lat').val();
            longitude = $('#locator_lng').val();
            getMap(latitude, longitude);
        }

        function getMap(latitude, longitude) {

            var nameValue = $('#locator_name').val();
            if (nameValue != '') {
                nameValue = '<h2>' + nameValue + '</h2>';
            }

            var locations = [
                [nameValue, latitude, longitude, 2]
            ];

            var map = new google.maps.Map(document.getElementById('locator_form_map'), {
                zoom: 15,
                scrollwheel: false,
                navigationControl: true,
                mapTypeControl: false,
                scaleControl: false,
                draggable: true,
                center: new google.maps.LatLng(latitude, longitude),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });

            var infowindow = new google.maps.InfoWindow();

            var marker, i;

            for (i = 0; i < locations.length; i++) {
                marker = new google.maps.Marker({
                    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                    map: map,
                    icon: ''
                });

                google.maps.event.addListener(marker, 'click', (function (marker, i) {
                    return function () {
                        infowindow.setContent(locations[i][0]);
                        infowindow.open(map, marker);
                    };
                })(marker, i));
            }


            google.maps.event.addListener(map, "click", function (e) {
                $('#locator_lat').val(e.latLng.lat());
                $('#locator_lng').val(e.latLng.lng());
                getMap(e.latLng.lat(), e.latLng.lng());

            });
        }

        <?php if ($this->getRequest()->getParam('id')): ?>
            getMapByLocation();
        <?php endif ?>
    });
</script>