{% extends '@Flexy/FrontBundle/Themes/Mutaweef/templates/layout.html.twig' %}



{% block body %}

	<style>


	.choice-transport img{
		width:45px;
		height:45px;
	}

	.transport-choices p{
		white-space:nowrap;
		margin-top:10px;
	}
		.choice-transport{
		display:inline-block;
		width: 120px;
		padding: 30px;
    	border: 1px solid #ddd;
    	font-size: 40px;
    	border-radius: 10px;
    	color: #ababab;
		cursor:pointer;
		}
	.choice-transport.selected{
		border: 1px solid #086d7b;
		font-size: 40px;
		border-radius: 10px;
		color: #086d7b;
		background: #f0f0f0;
		}
	</style>
	<div class="container">

		
        

		



			<div class="row">
                
				
				
				<div class="col-lg-8 offset-lg-2 col-12">
				<div id="checkout-form">
				{{form_start(editForm,{attr:{"data-turbo":"false"}})}}

					{% include "@Flexy/FrontBundle/Themes/Mutaweef/templates/missions/small-includes/_steps.html.twig"  %}

					 <div class="container text-center mb-5" >
						<h5>Transport</h5>
						<p style="text-align:center"> Veuillez choisir une option de prise en charge </p>
					</div>

					<div class="row transport-choices" style="margin:20px auto 60px;max-width:600px;"  class="text-center">
						

						
				 
						<div class="col-4 offset-2  text-center" >
							<a class="choice-transport selected" data-show-transport="true">
							<!--<i class="fa-solid fa-truck-plane"></i>-->
							<img src="{{asset('themes/' ~settings.get.assetFolderName ~'/images/icons/Vector.svg')}}" />
							
							
							 
						</a>
						<p>Assistance transport</p>
						</div>
						
						<div class="col-4  text-center" >
						<a class="choice-transport">
							<!--<i class="fa-solid fa-truck-plane"></i>-->
							<img src="{{asset('themes/' ~settings.get.assetFolderName ~'/images/icons/Maskgroup.svg')}}"  /> 
							 
						</a>
						<p>Prise en charge à Makkah</p>
						</div>
						
					
						 
						  
						
						
					 
						 
						
					</div>
					 
					<div style="margin:20px auto;max-width:400px;" >
						
					
					{{form_widget(editForm.children.orderItems.children|first)}}


					{{form_rest(editForm)}}
					
					</div>
					
					
					
					
					<div class="container text-center" >
						<button  class="btn" type="submit" >Continuer</button>
					</div>
					{{form_end(editForm)}}
					
				</div>
				</div>
				
			</div>
			
		
						

		

	</div>

{% endblock %}


{% block javascripts %}
{{parent()}}

<script>
document.addEventListener("turbo:load",function(){
		$(document).ready(function(){
		$(".choice-transport").click(function(){
			$(this).addClass("selected");
			$(".choice-transport").not(this).removeClass("selected");

			if($(this).attr("data-show-transport")=="true"){
				$("#order_transport_orderItems_0").show();
			}else{
				$("#order_transport_orderItems_0").hide();
			}

		});
	});
});
</script>

{% endblock %}