{% extends '@Flexy/FrontBundle/Themes/' ~ settings.get.assetFolderName|capitalize ~ '/templates/layout.html.twig' %}

{% form_theme editForm 'bootstrap_4_layout.html.twig' %}


{% block body %}


	<div class="container p-lg-5 pt-5 pb-5">

		
        

	

			<div class="row">
                <div class="col-lg-6 offset-lg-3 col-8 offset-2 text-center mb-5">
                
                        {% include "@Flexy/FrontBundle/Themes/" ~ settings.get.assetFolderName|capitalize ~ "/templates/missions/small-includes/_steps.html.twig" with {invoice:invoice} %}

                </div>
				<div class="col-12 col-lg-5 col-md-12 mb-5">
					{% include "@Flexy/FrontBundle/Themes/" ~ settings.get.assetFolderName|capitalize ~ "/templates/missions/small-includes/_ticket.html.twig" with {invoice:invoice,missions:missions} %}
				</div>
				
				<div class="col-lg-7 col-12 col-md-12">
				{{form_start(editForm,{"attr":{"id":"checkout-form","data-turbo":"false"},'action': path('completeBookingForm',{id:invoice.id})} )}}
					<div class="row">
						
						{% for singleOrderItemForm in editForm.children["orders"] %}

							
							
                            <div class="col-12" >
                            <h4 class="" style="text-align: center;color: #02b6ff;">
								{% if singleOrderItemForm == editForm.children["orders"]|first %}
                                    Programmer votre aller
								{% else %}
									Programmer votre retour
								{% endif %}
							</h4>
                            </div>

							
                           
						    {% for singleShipmentField in singleOrderItemForm.children["shipment"] %}
							
                            <div class="col-6">
                            
                                {{form_row(singleShipmentField)}}
								{{form_rest(singleShipmentField)}}
                            </div>
                            

                            {% endfor %}
                            
							
						{% endfor %}
                    </div>
					

					
					{{form_widget(editForm)}}
					<button class="btn btn-primary">Continuer</button>
					
					{{form_end(editForm)}}
				</div>
				<div class="col-12 d-none">
					<a class="btn btn-success d-none" href="{{path('front_home')}}">
						Reserver a nouveau</a>
				</div>
			</div>


		

	</div>

{% endblock %}





{% block javascripts %}
{{parent()}}
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBFliT4Ug0Ugto5davRC7krsyMhTfkI-L4&libraries=places"></script>
<script>

document.addEventListener("turbo:load",function(){

	{#
		$(document).ready(function(){
			var inputCollectAddress = document.getElementById('order_orderItems_0_shipmentItem_collectAddress');
		var inputShippingAddress = document.getElementById('order_orderItems_0_shipmentItem_shippingAddress');
		
			var options = {
			//types: ['(cities)'],
			componentRestrictions: {country: 'fr'}
			};
			var autocompleteCollect = new google.maps.places.Autocomplete(inputCollectAddress, options);
			var autocompleteShipping = new google.maps.places.Autocomplete(inputShippingAddress, options);
			google.maps.event.addListener(autocompleteCollect, 'place_changed', function() {
				
				console.log(autocompleteCollect.getPlace().geometry.location.lng());
				var lng = autocompleteCollect.getPlace().geometry.location.lng();
				var lat = autocompleteCollect.getPlace().geometry.location.lat();

				
			});
		});
	   #}
});

</script>

{% endblock %}