{% set defaultCityRegion = null %}

{% if customer %}
	{% set defaultCityRegion = customer.cityRegion %}
{% endif %}
<style>

	.booking-form .col,
	.booking-form .col-1,
	.booking-form .col-10,
	.booking-form .col-11,
	.booking-form .col-12,
	.booking-form .col-2,
	.booking-form .col-3,
	.booking-form .col-4,
	.booking-form .col-5,
	.booking-form .col-6,
	.booking-form .col-7,
	.booking-form .col-8,
	.booking-form .col-9,
	.booking-form .col-auto,
	.booking-form .col-lg,
	.booking-form .col-lg-1,
	.booking-form .col-lg-10,
	.booking-form .col-lg-11,
	.booking-form .col-lg-12,
	.booking-form .col-lg-2,
	.booking-form .col-lg-3,
	.booking-form .col-lg-4,
	.booking-form .col-lg-5,
	.booking-form .col-lg-6,
	.booking-form .col-lg-7,
	.booking-form .col-lg-8,
	.booking-form .col-lg-9,
	.booking-form .col-lg-auto,
	.booking-form .col-md,
	.booking-form .col-md-1,
	.booking-form .col-md-10,
	.booking-form .col-md-11,
	.booking-form .col-md-12,
	.booking-form .col-md-2,
	.booking-form .col-md-3,
	.booking-form .col-md-4,
	.booking-form .col-md-5,
	.booking-form .col-md-6,
	.booking-form .col-md-7,
	.booking-form .col-md-8,
	.booking-form .col-md-9,
	.booking-form .col-md-auto,
	.booking-form .col-sm,
	.booking-form .col-sm-1,
	.booking-form .col-sm-10,
	.booking-form .col-sm-11,
	.booking-form .col-sm-12,
	.booking-form .col-sm-2,
	.booking-form .col-sm-3,
	.booking-form .col-sm-4,
	.booking-form .col-sm-5,
	.booking-form .col-sm-6,
	.booking-form .col-sm-7,
	.booking-form .col-sm-8,
	.booking-form .col-sm-9,
	.booking-form .col-sm-auto,
	.booking-form .col-xl,
	.booking-form .col-xl-1,
	.booking-form .col-xl-10,
	.booking-form .col-xl-11,
	.booking-form .col-xl-12,
	.booking-form .col-xl-2,
	.booking-form .col-xl-3,
	.booking-form .col-xl-4,
	.booking-form .col-xl-5,
	.booking-form .col-xl-6,
	.booking-form .col-xl-7,
	.booking-form .col-xl-8,
	.booking-form .col-xl-9,
	.booking-form .col-xl-auto {
		padding-left: 5px;
		padding-right: 5px;
		margin-bottom: 4px;
	}
	.booking-form p {
		color: white;
	}

	.booking-form .form-group.changed .select2-container--default .select2-selection--single .select2-selection__rendered,
	.booking-form .form-group.changed input
	{
		color:rgb(1 148 209) !important;
	}

	.booking-form .btn {
		box-shadow: 1px 4px 8px #33333330;
		padding-left: 50px !important;
		padding-right: 50px !important;
		border: none;
	}

	.booking-form label {
		display: inline-block;
		font-size: 12px;
		font-weight: bold;
		color: white;
	}
	.form-group {
		position: relative;
	}
	.form-group input,
	.form-group select,
	.select2-container,
	.form-control {

		border: none !important;
		border-radius: 50px !important;
		box-shadow: 0 5px 30px rgb(0 0 0 / 20%);
		background: white !important;
		height: 48px !important;
		font-weight: bold;
		width: 100% !important;
	}
	.select2-container--open {
		    background-color: transparent!important;
    		box-shadow: none;
	}
	.select2-container--default .select2-selection--single .select2-selection__rendered {
		color: #919191;
		line-height: 28px;
		font-size: 12px;
	}
	.select2-container--default .select2-selection--single .select2-selection__arrow b {
		display: none;
	}
	.select2-container .select2-selection--single {
		box-sizing: border-box;
		cursor: pointer;
		display: block;
		padding: 10px 0 0 8px;
		height: 100%;
		user-select: none;
		-webkit-user-select: none;
		border-radius: 50px !important;
	}
	.select2-container--default .select2-results__option--highlighted[aria-selected] {
		background: rgb(3, 181, 255) !important;
		background: linear-gradient(184deg, rgba(3,181,255,1) 0%, rgba(0,147,209,1) 100%) !important;
		color: white;
		border-radius: 8px;
		font-size: 12px;
	}

	.select2-container--default .select2-search--dropdown .select2-search__field {
		border: none;
		border-radius: 50px;
		padding: 0 20px;
	}

	.select2-container--open .select2-dropdown--below {
		border-top: none;
		border-top-left-radius: 0;
		border-top-right-radius: 0;
		padding: 3px;
		border-radius: 8px;
	}

	.select2-container--default .select2-selection--single {
		background-color: #fff;
		border: none;
		border-radius: 4px;
	}

	.select2-results__option[aria-selected] {
		cursor: pointer;
		font-size: 12px;
		white-space: nowrap;
	}

	.form-group.smallfont select {
		padding-left: 10px !important;
		font-size: 10px !important;
	}
	.form-group > svg {
		position: absolute;
		right: 15px;
		top: 16px;
		color: black;
	}

	.form-group.smallfont > i {
		right: 8px;
	}
	.form-group > span.switch-location {
		position: absolute;
		right: -21px;
		top: 6px;
		color: white;
		z-index: 9;
		background: rgb(3, 181, 255) !important;
		background: linear-gradient(184deg, rgba(3,181,255,1) 0%, rgba(0,147,209,1) 100%) !important;
		padding: 4px 9px;
		border-radius: 20px;
		box-shadow: 0 0 4px #333333;
		font-size: 18px;
	}
	.toggle-modern .toggle-on,
	.toggle-modern .toggle-on.active {
		background: linear-gradient(#02b6ff,#02b6ff);
	}

	.vehicle-type {
		color: white;
		padding: 10px 14px !important;
		border-radius: 8px !important;
		white-space: nowrap;
		opacity: 0.4;
		background: #333 !important;
		cursor: pointer;
	}

	.vehicle-type.selected {
		color: white;
		padding: 10px 14px !important;
		border-radius: 8px;
		white-space: nowrap;
		opacity: 1;
		background: rgb(3, 181, 255) !important;
		background: linear-gradient(184deg, rgba(3,181,255,1) 0%, rgba(0,147,209,1) 100%) !important;
	}

	.switch-location {
		cursor: pointer;
	}

	.datedropper-taxiciel {
		--dd-overlay: rgba(0, 0, 0, 0.75) !important;
		--dd-background: #FFFFFF !important;
		--dd-text1: #333333;
		--dd-text2: #FFFFFF;
		--dd-primary: #0f6da1;
		--dd-monthBackground: linear-gradient(184deg, rgba(3,181,255,1) 0%, rgba(0,147,209,1) 100%) !important;
		--dd-confirmButtonBackground: linear-gradient(184deg, rgba(3,181,255,1) 0%, rgba(0,147,209,1) 100%) !important;
		--dd-selectedBackground: linear-gradient(184deg, rgba(3,181,255,1) 0%, rgba(0,147,209,1) 100%) !important;
		--dd-gradient: linear-gradient(45deg, #0f6da1 0%, #108ccf 100%);
		--dd-radius: 0.35em;
		--dd-shadow: 0 0 2.5em rgba(0, 0, 0, 0.1);
		--dd-range: rgba(0, 0, 0, 0.05);
	}

	.form-container{
min-height:250px;
																			border-radius:20px;
																			color:white;
																			padding:30px;
																			font-weight:400;
																background: white;
																box-shadow:1px 4px 12px #dddddd;
																font-weight:bold;
	}
</style>


<div class="booking-form" style="padding:0 0 80px;">

	<div class="form-container">
		
			
		
	</div>

</div>


<script>
	document.addEventListener('turbo:load', function () { // Init

	$(document).ready(function(){






	{% if customer %}
		{% if customer.cityRegion %}

		$("select[name$='missions[0][collectCityRegion]']").val({{customer.cityRegion.id}}).change();
		$("select[name$='missions[1][shippingCityRegion]']").val({{customer.cityRegion.id}}).change();

		$("select[name$='missions[0][collectCityRegion]'],select[name$='missions[1][shippingCityRegion]']").parent().addClass("changed");
		{% endif %}
	{% endif %}
	


var nbrPassengers = 0;
var nbrAdults = 0;
var nbrKids = 0;
var nbrBags = 0;
var nbrPassengerMission_0 = 0
var nbrPassengerMission_1 = 0



$("#booking-form input, #booking-form select").on("change",function() {

	$("#btn-book-now").addClass("d-none");
	$(this).parent().addClass("changed");

});

$(".checkPassengers").change(function () {
nbrPassengers = 0;
nbrAdults = 0;
nbrChildrens = 0;
nbrBags = 0;
nbrPassengerMission_0 = 0
nbrPassengerMission_1 = 0
var isReturnFormActive = $("input[name='scheduleReturn']").prop('checked');



$(".checkPassengers").each(function () {
if ($(this).hasClass("mission_0")) {
nbrPassengerMission_0 = nbrPassengerMission_0 + parseInt($(this).find("option:selected").val());
} else if ($(this).hasClass("mission_1")) {
nbrPassengerMission_1 = nbrPassengerMission_1 + parseInt($(this).find("option:selected").val());
}


});


nbrPassengers = nbrAdults + nbrChildrens;
var avrAdults = nbrAdults / 2;
var avrChildrens = nbrAdults / 2;
nbrPassengers = nbrPassengers / 2;


if (nbrPassengerMission_0 > 4 || nbrPassengerMission_1 > 4 ) {
$(".vehicle-type[data-id='2']").trigger("click");
$(".vehicle-type[data-id='1']").parent().hide();
} else {
$(".vehicle-type[data-id='1']").trigger("click");
$(".vehicle-type[data-id='1']").parent().show();
$
}
if ((nbrPassengerMission_0 && isReturnFormActive == false) > 0 || (nbrPassengerMission_0 && nbrPassengerMission_1 > 0 && isReturnFormActive ) ) {
$("#btn-get-price").attr("disabled", false);

} else {
$("#btn-get-price").attr("disabled", true);

}
});


$("#btn-book-now").click(function () {
$("input[name='isBookingValid']").val(true);
});

$("#btn-get-price").on("click", function (e) {
e.preventDefault();
$(".mask-loading").fadeIn(200);
$("#btn-book-now").addClass("d-none");


const form = $("#booking-form");
const json = form.serializeObject();
console.log(json);

$.ajax({
url:"{{ path('ajaxPreviewMission') }}",
data: json,
method: "POST",

success: function (result) {
console.log(result);
$(".mask-loading").fadeOut(200);
if (result.fees > 0) {
$("#btn-book-now").removeClass("d-none");
$("#btn-book-now .price").text(result.fees);

} else {
$("#btn-book-now").addClass("d-none");
alert("Aucun tarif pour les choix sélectionnés");
$("#btn-book-now .price").text("0");
}
},
error: function (result) {
$("#btn-book-now").addClass("d-none");
alert("Aucun tarif pour les choix sélectionnés");
$("#btn-book-now .price").text("0");
$(".mask-loading").fadeOut(200);
}
});

});


new dateDropper({
lang: "fr",
format: "dd/mm/y",
selector: "input[name$='[datePickup]']",
minDate: "{{ "today"|date("Y-m-d") }}",
customClass: 'datedropper-taxiciel',
expandable: true,
onChange: function (res) {
//$("input[name$='[datePickup]'").trigger("change");
$("#btn-book-now").addClass("d-none");

$.ajax({
url:"{{ path('ajaxGetTime') }}",
data: {
selectedDate: res.output.string
},
success: function (result) {
$("select[name$='[timePickup]']").html(result);
}
});
}

});

// Init value Car
$("input[name='vehicleType']").val($(".vehicle-type.selected").attr("data-id"));

$(".vehicle-type").click(function () {
	$("#btn-book-now").addClass("d-none");
$(".vehicle-type").not(this).removeClass("selected");
$(this).addClass("selected");
$("input[name='vehicleType']").val($(this).attr("data-id"));
if($(this).attr("data-id") != "1"){
$(".canBelineSupportMoreBagsField").hide();
}else{
	$(".canBelineSupportMoreBagsField").show();
}
});

// Icon Trigger from-control
$("i.field-trigger").click(function () {

$(this).parent().find(".form-control").trigger("click");
$(this).parent().find(".form-control").trigger("mousedown");
})

$(".switch-location").click(function () { // var index = $(this).attr("data-index");
var valueCollect_0 = $("select[name$='[0][collectCityRegion]'] option:selected").val();
var valueShipping_0 = $("select[name$='[0][shippingCityRegion]'] option:selected").val();
var valueCollect_1 = $("select[name$='[1][collectCityRegion]'] option:selected").val();
var valueShipping_1 = $("select[name$='[1][shippingCityRegion]'] option:selected").val();
$("select[name$='[0][collectCityRegion]']").val(valueShipping_0).change();
$("select[name$='[0][shippingCityRegion]']").val(valueCollect_0).change();
$("select[name$='[1][collectCityRegion]']").val(valueShipping_1).change();
$("select[name$='[1][shippingCityRegion]']").val(valueCollect_1).change();

});

$("select[name='missions[0][collectCityRegion]']").change(function (event) {
event.stopPropagation();
var relatedIndex = $(this).attr("data-related-index");
var currentValue = $(this).val();
$("select[name='missions[" + relatedIndex + "][shippingCityRegion]']").val(currentValue).change();
});

$("select[name='missions[0][shippingCityRegion]']").change(function (event) {
event.stopPropagation();
var relatedIndex = $(this).attr("data-related-index");
var currentValue = $(this).val();
$("select[name='missions[" + relatedIndex + "][collectCityRegion]']").val(currentValue).change();
});


$('.select2').select2();


$('.toggle.canBelineSupportMoreBags').toggles({
height: 25,
width: 60,
checkbox: $('.checkme.canBelineSupportMoreBags'),
text: {
on: 'Oui', // text for the ON position
off: 'Non' // and off
}

});

$('.toggle.scheduleReturn').toggles({
height: 25,
width: 60,
checkbox: $('.checkme.scheduleReturn'),
text: {
on: 'Oui', // text for the ON position
off: 'Non' // and off
}

});

$('.toggle.scheduleReturn').on('toggle', function(e, active) {
	$("#btn-book-now").addClass("d-none");
  if (active) {
    console.log('Toggle is now ON!');
	$(".bookReturnForm").removeClass("d-none");
  } else {
    console.log('Toggle is now OFF!');
	$(".bookReturnForm").addClass("d-none");
  }
});


$('select.kids').niceSelect('update');


});
});
</script>