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

{% block content %}
        <div class="">
            <div class="card">
                <div class="card-header">Register Place</div>
                <div class="card-body">
                    {# {% if error %}
                        <div id="error">{{ error }}</div>
                    {% endif %} #}
                    <form action="{{ path('store') }}" method="post" role="form">
                        <div class="form-group">
                            <input type="text" name="name" class="form-control" placeholder="Name">
                        </div>
                        <div class="form-group">
                            <input type="email" name="email" class="form-control" placeholder="Email">
                        </div>
                        <div class="form-group">
                            <input type="text" name="phone" class="form-control" placeholder="Phone">
                        </div>
                        <div class="form-group">
                            <input type="text" id="address" name="address" class="form-control" placeholder="Address">
                            <input type="hidden" id="longitude" name="longitude" class="form-control">
                            <input type="hidden" id="latitude" name="latitude" class="form-control">
                        </div>
                        {% set types = {
                            'restaurant': 'Restaurant',
                            'eatery': 'Eatery',
                            'fastfood': 'Fast Food',
                            'cafe': 'Cafe',
                            'mamaput': 'Mama Put', 
                            'hotel': 'Hotel',
                            'bar': 'Bar',
                            'streetfood': 'Street Food',
                            'online': 'Delivery Only'
                        }
                        
                        %}
                        <div class="form-group">
                            <label>Type</label>
                            <div class="place-types" style="display: flex; align-items: center; flex-wrap: wrap; margin-bottom: 10px;">
                                {% for type, name in types %}
                                    <div class="form-check form-check-inline" style="display: flex; align-items: center; margin-left: .75rem;">
                                        <input id="{{ type }}" name="type" type="radio" value="{{ type }}" style="height: inherit;">
                                        <label style="padding-left: 10px; margin-bottom: 0;" for="{{ type }}">{{ name }}</label>
                                    </div>
                                {% endfor %}
                                {# <div class="form-check form-check-inline" style="display: flex; align-items: center; margin-left: .75rem;">
                                    <input id="restaurant" name="type" type="radio" value="restaurant" style="height: inherit;">
                                    <label style="padding-left: 10px; margin-bottom: 0;" for="restaurant">Restaurant</label>
                                </div>
                                <div class="form-check form-check-inline" style="display: flex; align-items: center; margin-left: .75rem;">
                                    <input id="eatery" name="type" type="radio" value="eatery" style="height: inherit;">
                                    <label style="padding-left: 10px; margin-bottom: 0;" for="eatery">Eatery</label>
                                </div>
                                <div class="form-check form-check-inline" style="display: flex; align-items: center; margin-left: .75rem;">
                                    <input id="fastfood" name="type" type="radio" value="fastfood" style="height: inherit;">
                                    <label style="padding-left: 10px; margin-bottom: 0;" for="fastfood">Fast Food</label>
                                </div>
                                <div class="form-check form-check-inline" style="display: flex; align-items: center; margin-left: .75rem;">
                                    <input id="cafe" name="type" type="radio" value="cafe" style="height: inherit;">
                                    <label style="padding-left: 10px; margin-bottom: 0;" for="cafe">Eatery</label>
                                </div>
                                <div class="form-check form-check-inline" style="display: flex; align-items: center; margin-left: .75rem;">
                                    <input id="mamaput" name="type" type="radio" value="mamaput" style="height: inherit;">
                                    <label style="padding-left: 10px; margin-bottom: 0;" for="mamaput">Mama Put</label>
                                </div>

                                <div class="form-check form-check-inline" style="display: flex; align-items: center; margin-left: .75rem;">
                                    <input id="hotel" name="type" type="radio" value="hotel" style="height: inherit;">
                                    <label style="padding-left: 10px; margin-bottom: 0;" for="hotel">Hotel</label>
                                </div>
                                <div class="form-check form-check-inline" style="display: flex; align-items: center; margin-left: .75rem;">
                                    <input id="bar" name="type" type="radio" value="bar" style="height: inherit;">
                                    <label style="padding-left: 10px; margin-bottom: 0;" for="bar">Bar</label>
                                </div>
                                <div class="form-check form-check-inline" style="display: flex; align-items: center; margin-left: .75rem;">
                                    <input id="streetfood" name="type" type="radio" value="streetfood" style="height: inherit;">
                                    <label style="padding-left: 10px; margin-bottom: 0;" for="streetfood">Street Food</label>
                                </div>
                                <div class="form-check form-check-inline" style="display: flex; align-items: center; margin-left: .75rem;">
                                    <input id="online" name="type" type="radio" value="online" style="height: inherit;">
                                    <label style="padding-left: 10px; margin-bottom: 0;" for="online">Delivery Only</label>
                                </div> #}
                            </div>
                        </div>
                        <button class="btn btn-other">Register</button>
                    </form>

                </div>
            </div>
        </div>
        <script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyAJsPhI-fGmDBIUh9yLu_MiUj4hZ2nlWU8"></script>
{% endblock %}

{% block extrajs %}
  <script>
    try {
			var ne = new google.maps.LatLng(parseFloat(6.944694), parseFloat(5.158188));
			var sw = new google.maps.LatLng(parseFloat(6.371805), parseFloat(2.712062));
			var bounds = new google.maps.LatLngBounds(sw, ne);
		} catch (err) {
			console.log(err.message)
		}

		/**
		 * Address autocomplete powered by google maps 
		 * @param {HTMLElement} input input element to apply autocomplete on
		 */
		function autocomplete(input) {
			try {
				const dropdown = new google.maps.places.Autocomplete(input, { bounds: bounds, 'strictBounds': true })
				console.log({dropdown})
				dropdown.addListener('place_changed', () => {
					const place = dropdown.getPlace();
					console.log({place})
					console.log({compo: place.address_components[2]});
					if (place.geometry) {
						var longitude = place.geometry.location.lng()
						var latitude = place.geometry.location.lat()
						document.getElementById('longitude').value = longitude
						document.getElementById('latitude').value = latitude
					}else{
						reject("Error Occured")
					}
				})
			} catch (err) {
				console.log(err.message)
			}
		}

		autocomplete(document.getElementById('address'));
  </script>
{% endblock extrajs %}