{% 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-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,
	.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 1px 3px rgb(0 0 0 / 90%);
		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: 1;
		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: rgb(23,130,195);
    background: linear-gradient(357deg, rgb(23 130 195 / 94%) 0%, rgb(0 93 150 / 25%) 100%);
    box-shadow: 1px 4px 12px #02020299;
    font-weight: bold;
	}
</style>


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

	<div class="form-container">
		
			<form id="booking-form" method="POST" action="{{path('ajaxPreviewMission')}}" data-turbo="false">
				<div class="row" style="max-width:300px;margin:auto;">
					{% for singleVehicleType in shippingVehicleTypes %}
						<div class="col text-center">

							<div data-id="{{singleVehicleType.id}}" class=" vehicle-type {% if singleVehicleType == shippingVehicleTypes|first   %}selected{% endif %}">
								<img alt="{{singleVehicleType.name}}" style="height:35px;" src="/uploads/{{ settings.get.assetFolderName|lower ~"/"~ singleVehicleType.icon}}"/>
								<span>{{singleVehicleType.name}}</span>
							</div>
						</div>
					{% endfor %}


				</div>

				<div class="row mt-2" style="max-width:700px;margin:auto;">

					<div class="col-12 text-center canBelineSupportMoreBagsField">


						Estimez-vous qu'une berline peut supporter plus de 4 bagages ?
						<div style="position: relative;top: 8px;padding:0 0 0 8px;" class="toggle toggle-modern d-inline-block canBelineSupportMoreBags"></div>
						<input class="checkme  canBelineSupportMoreBags"  style="display:none;" name="canBelineSupportMoreBags" type="checkbox"/>
					</div>

				</div>

				<div class="row mt-3">

					<div class="col-6 col-xl-3">
						<div class="form-group">
							<select name="missions[0][collectCityRegion]" class="form-control select2" data-related-index="1">
								<option value="0">Lieu/ville de départ</option>
								{% for singleCityRegion in cityRegions %}
									<option value="{{singleCityRegion.id}}" {% if singleCityRegion == defaultCityRegion %} selected {% endif %}>{{singleCityRegion.name}}</option>
								{% endfor %}
							</select>
							<i class="fa fa-location-dot"></i>
							<span data-index="0" class="switch-location">
								<i class="fa-solid fa-repeat field-trigger"></i>
							</span>
						</div>
					</div>

					<div class="col-6 col-xl-3">
						<div class="form-group">
							<select name="missions[0][shippingCityRegion]" class="form-control select2" data-related-index="1">
								<option value="0">Lieu/ville d'arrivée</option>
								{% for singleCityRegion in cityRegions %}
									<option value="{{singleCityRegion.id}}">{{singleCityRegion.name}}</option>
								{% endfor %}
							</select>
							<i class="fa fa-location-dot field-trigger"></i>
						</div>
					</div>
					<div class="col-6 col-md-3 col-xl-2">
						<div class="form-group changed">
							<input type="text" name="missions[0][datePickup]" data-dd-opt-expanded-default="true" data-dd-opt-custom-class="datedropper-taxiciel" class="form-control" data-dd-opt-default-date="{{"tomorrow"|date('Y-m-d')}}" value="{{"tomorrow"|date('d/m/Y')}}"/>
							<i class="fa fa-calendar-days field-trigger"></i>
						</div>
					</div>
					<div class="col-6 col-md-3 col-xl-1">
						<div class="form-group smallfont changed">
							<select name="missions[0][timePickup]" class="form-control select2">
								{{render(url("ajaxGetTime"))}}
							</select>
							<i class="fa-solid fa-clock field-trigger"></i>
						</div>
					</div>
					<div class="col-4 col-md-2 col-xl-1">
						<div class="form-group smallfont">
							<select name="missions[0][nbrAdults]" class="form-control select2 checkPassengers mission_0 nbrAdults">
								<option value="0">Adultes</option>
								<option value="1">1 Adulte(s)</option>
								<option value="2">2 Adulte(s)</option>
								<option value="3">3 Adulte(s)</option>
								<option value="4">4 Adulte(s)</option>
								<option value="5">5 Adulte(s)</option>
								<option value="6">6 Adulte(s)</option>
								<option value="7">7 Adulte(s)</option>
								<option value="8">8 Adulte(s)</option>
							</select>
							<i class="fa-solid fa-children field-trigger"></i>
						</div>
					</div>
					<div class="col-4 col-md-2 col-xl-1">
						<div class="form-group smallfont">
							<select name="missions[0][nbrChildrens]" class="form-control select2 checkPassengers mission_0 nbrChildrens">
								<option value="0">Enfants</option>
								<option value="1">1 Enfant(s)</option>
								<option value="2">2 Enfant(s)</option>
								<option value="3">3 Enfant(s)</option>
								<option value="4">4 Enfant(s)</option>
								<option value="5">5 Enfant(s)</option>
								<option value="6">6 Enfant(s)</option>
								<option value="7">7 Enfant(s)</option>
								<option value="8">8 Enfant(s)</option>
							</select>
							<i style="font-size:0.9rem;" class="fa-solid fa-children field-trigger"></i>
						</div>
					</div>
					<div class="col-4 col-md-2 col-xl-1">
						<div class="form-group smallfont">
							<select name="missions[0][nbrBags]" class="form-control select2 ">
								<option value="0">Bagages</option>
								<option value="1">1 Bagage(s)</option>
								<option value="2">2 Bagage(s)</option>
								<option value="3">3 Bagage(s)</option>
								<option value="4">4 Bagage(s)</option>
								<option value="5">5 Bagage(s)</option>
								<option value="6">6 Bagage(s)</option>
								<option value="7">7 Bagage(s)</option>
								<option value="8">8 Bagage(s)</option>
							</select>
							<i class="fa-solid fa-suitcase field-trigger"></i>
						</div>
					</div>

				</div>
				<div class="col-12 text-center">


						Programmer un retour ?
						<div style="position: relative;top: 8px;padding:0 0 0 8px;" class="toggle toggle-modern scheduleReturn d-inline-block"></div>
						<input class="checkme  scheduleReturn" style="display:none;" name="scheduleReturn" type="checkbox"/>
					</div>
				<div class="row mt-3 bookReturnForm"  style="display:none;">

					<div class="col-6 col-xl-3">
						<div class="form-group">
							<select name="missions[1][collectCityRegion]" class="form-control select2" data-related-index="0">
								<option value="0">Lieu/ville de départ</option>
								{% for singleCityRegion in cityRegions %}
									<option value="{{singleCityRegion.id}}">{{singleCityRegion.name}}</option>
								{% endfor %}
							</select>
							<i class="fa fa-location-dot"></i>
							<span data-index="1" class="switch-location">
								<i class="fa-solid fa-repeat field-trigger"></i>
							</span>
						</div>
					</div>

					<div class="col-6 col-xl-3">
						<div class="form-group">
							<select name="missions[1][shippingCityRegion]" class="form-control select2" data-related-index="0">
								<option value="0">Lieu/ville d'arrivée</option>
								{% for singleCityRegion in cityRegions %}
									<option value="{{singleCityRegion.id}}" {% if singleCityRegion == defaultCityRegion %} selected {% endif %}>{{singleCityRegion.name}}</option>
								{% endfor %}
							</select>
							<i class="fa fa-location-dot field-trigger"></i>
						</div>
					</div>
					<div class="col-6 col-md-3 col-xl-2">
						<div class="form-group changed">
							<input type="text" name="missions[1][datePickup]" data-dd-opt-expanded-default="true" data-dd-opt-custom-class="datedropper-taxiciel" class="form-control" data-dd-opt-default-date="{{"tomorrow"|date('Y-m-d')}}" value="{{"tomorrow"|date('d/m/Y')}}"/>
							<i class="fa fa-calendar-days field-trigger"></i>
						</div>
					</div>
					<div class="col-6 col-md-3 col-xl-1">
						<div class="form-group smallfont changed">
							<select name="missions[1][timePickup]" class="form-control select2">
								{{render(url("ajaxGetTime"))}}
							</select>
							<i class="fa-solid fa-clock field-trigger"></i>
						</div>
					</div>
					<div class="col-4 col-md-2 col-xl-1">
						<div class="form-group smallfont">
							<select name="missions[1][nbrAdults]" class="form-control select2 checkPassengers mission_1 nbrAdults ">
								<option value="0">Adultes</option>
								<option value="1">1 Adulte(s)</option>
								<option value="2">2 Adulte(s)</option>
								<option value="3">3 Adulte(s)</option>
								<option value="4">4 Adulte(s)</option>
								<option value="5">5 Adulte(s)</option>
								<option value="6">6 Adulte(s)</option>
								<option value="7">7 Adulte(s)</option>
								<option value="8">8 Adulte(s)</option>
							</select>
							<i class="fa-solid fa-children field-trigger"></i>
						</div>
					</div>
					<div class="col-4 col-md-2 col-xl-1">
						<div class="form-group smallfont">
							<select name="missions[1][nbrChildrens]" class="form-control select2 checkPassengers mission_1 nbrChildrens">
								<option value="0">Enfants</option>
								<option value="1">1 Enfant(s)</option>
								<option value="2">2 Enfant(s)</option>
								<option value="3">3 Enfant(s)</option>
								<option value="4">4 Enfant(s)</option>
								<option value="5">5 Enfant(s)</option>
								<option value="6">6 Enfant(s)</option>
								<option value="7">7 Enfant(s)</option>
								<option value="8">8 Enfant(s)</option>
							</select>
							<i style="font-size:0.9rem;" class="fa-solid fa-children field-trigger"></i>
						</div>
					</div>
					<div class="col-4 col-md-2 col-xl-1">
						<div class="form-group smallfont">
							<select name="missions[1][nbrBags]" class="form-control select2 ">
								<option value="0">Bagages</option>
								<option value="1">1 Bagage(s)</option>
								<option value="2">2 Bagage(s)</option>
								<option value="3">3 Bagage(s)</option>
								<option value="4">4 Bagage(s)</option>
								<option value="5">5 Bagage(s)</option>
								<option value="6">6 Bagage(s)</option>
								<option value="7">7 Bagage(s)</option>
								<option value="8">8 Bagage(s)</option>
							</select>
							<i class="fa-solid fa-suitcase field-trigger"></i>
						</div>
					</div>

				</div>


				<div class="row mt-4">
					<div class="col-12 text-center">
						<input name="isBookingValid" type="hidden"/>
						<button type="button" id="btn-get-price" class="btn btn-primary" href="#" disabled>Votre tarif</button>
						<button type="submit" id="btn-book-now" class="btn btn-success" style="display:none;">Réserver
							<span class="price">0</span>€</button>

					</div>
				</div>

				<input type="hidden" name="vehicleType"/>
			</form>
		
	</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").fadeOut(200);
	//$("#btn-get-price").fadeOut(200);
	$(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().fadeOut(200);
} else {
$(".vehicle-type[data-id='1']").trigger("click");
$(".vehicle-type[data-id='1']").parent().fadeIn(200);
$
}
if ((nbrPassengerMission_0 && isReturnFormActive == false) > 0 || (nbrPassengerMission_0 && nbrPassengerMission_1 > 0 && isReturnFormActive ) ) {
$("#btn-get-price").attr("disabled", false);
$("#btn-get-price").fadeIn(200);

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


$("#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").fadeOut(200);


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").fadeIn(200);
$("#btn-book-now .price").text(result.fees);

} else if(result.message){
$("#btn-book-now").fadeOut(200);


$.toast({
                                            heading: 'Attention !',
                                            text: result.message,
                                            showHideTransition: 'slide',
                                            hideAfter:10000,
                                            icon: 'warning',
                                            //loaderBg: '#1ca5df', 
                                            position:"top-right",
                                            allowToastClose: true,
                                            stack: true
                                    });

$("#btn-book-now .price").text("0");
}
},
error: function (result) {
$("#btn-book-now").fadeOut(200);

$.toast({
                                            heading: 'Attention !',
                                            text: "Aucun tarif pour les choix sélectionnés",
                                            showHideTransition: 'slide',
                                            hideAfter:10000,
                                            icon: 'warning',
                                            //loaderBg: '#1ca5df', 
                                            position:"top-right",
                                            allowToastClose: true,
                                            stack: true
                                    });
$("#btn-book-now .price").text("0");
$(".mask-loading").fadeOut(200);
}
});

});


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

$.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").fadeOut(200);
$(".vehicle-type").not(this).removeClass("selected");
$(this).addClass("selected");
$("input[name='vehicleType']").val($(this).attr("data-id"));
if($(this).attr("data-id") != "1"){
$(".canBelineSupportMoreBagsField").fadeOut(200);
}else{
	$(".canBelineSupportMoreBagsField").fadeIn(200);
}
});

// 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();
});


$('select.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").fadeOut(200);
  if (active) {
    console.log('Toggle is now ON!');
	$(".bookReturnForm").fadeIn(200);
  } else {
    console.log('Toggle is now OFF!');
	$(".bookReturnForm").fadeOut(200);
  }
});


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


});
});
</script>