{% extends 'base.html.twig' %}

{% block body %}
	<!-- BEGIN: Subheader -->
    <div class="m-subheader">
        <div class="d-flex align-items-center">
            <div class="mr-auto">
                <h3 class="m-subheader__title">
                Test Map
                </h3>
            </div>
        </div>
    </div>
    <!-- END: Subheader -->
    <div class="m-content">
        <!--Begin::Section-->
        <div class="row">
            <div class="col-xl-12">
                <div class="m-portlet m-portlet--tab">
                    <div class="m-portlet__head">
                        <div class="m-portlet__head-caption">
                            <div class="m-portlet__head-title">
                                <span class="m-portlet__head-icon m--hide">
                                    <i class="la la-gear"></i>
                                </span>
                                <h3 class="m-portlet__head-text">
                                    Input Customer Location
                                </h3>
                            </div>
                        </div>
                    </div>
                    <div class="m-portlet__body">
                        <form class="form-inline margin-bottom-10" action="#">
                            <input type="hidden" id="map_lat" name="latitude" value="">
                            <input type="hidden" id="map_lng" name="longitude" value="">
                            <div class="input-group">
                                <input type="text" class="form-control" id="m_gmap_address" placeholder="Search">
                                <span class="input-group-btn">
                                    <button class="btn btn-primary" id="m_gmap_btn">
                                        <i class="fa fa-search"></i>
                                    </button>
                                </span>
                            </div>
                        </form>
                        <div id="m_gmap" style="height:600px;"></div>
                    </div>
                </div>
			</div>
		</div>
	</div>
{% endblock %}

{% block scripts %}
<script src="//maps.google.com/maps/api/js?key={{ gmaps_api_key }}" type="text/javascript"></script>
<script src="/assets/vendors/custom/gmaps/gmaps.js" type="text/javascript"></script>
<script>

function selectPoint(map, latlng) {
    var lat = latlng.lat();
    var lng = latlng.lng();

    // show it in map
    map.removeMarkers();
    map.setCenter(lat, lng);
    map.addMarker({
        lat: lat,
        lng: lng
    });

    // set value in hidden input
    $('#map_lat').val(lat);
    $('#map_lng').val(lng);
}

var map = new GMaps({
    div: '#m_gmap',
    lat: 14.6091,
    lng: 121.0223,
    click: function(e) {
        // handle click in map
        selectPoint(map, e.latLng);
        e.stop();
    }
});
var handleAction = function() {
    var text = $.trim($('#m_gmap_address').val());
    GMaps.geocode({
        address: text,
        callback: function(results, status) {
            map.removeMarkers();
            if (status == 'OK') {
                selectPoint(map, results[0].geometry.location);
            }
        },
        region: 'ph'
    });
}

$('#m_gmap_btn').click(function(e) {
    e.preventDefault();
    handleAction();
});

$("#m_gmap_address").keypress(function(e) {
    var keycode = (e.keyCode ? e.keyCode : e.which);
    if (keycode == '13') {
        e.preventDefault();
        handleAction();
    }
});

</script>
{% endblock %}