<?php
	include 'views/admin/header.php';
	include 'views/admin/sidebar.php';
?>	
<?php if ($tenant_vehicles) { ?>
<style>
	.unavailable_vehicle.disabled {
		pointer-events: none;
		background: no-repeat;
		box-shadow: none;
		}
	.lightpick__toolbar {
		position: absolute;
		right: 0px;
		top: -22px;
		}
	@media (max-width: 576px) {
		.lightpick--2-columns .lightpick__months {
		grid-template-columns: 1fr;
		}
		}
	.text-grey{
	    color: #6d808f;
		}
	.is_required .app_selector_plus {
		background: #ff6692 !important;
		}
	.is_required, .is_required .text-grey{
		color:#ff6692 !important;
		}
	.is_required .click_select{
		color:#ff6692 !important;
		}
	.is_required .selector_icon svg{
		color:#ff6692 !important;
		}
	.is_required .app_selector_arrow {
		border-top: 5px solid #ff6692;
		}	
	.is_required .selector_hstack {
		outline: 1px solid #ff6692;
		border-radius: 5px;
		}
	.is_required .flatpickr-day.selected.startRange, .flatpickr-day.startRange.startRange, .flatpickr-day.endRange.startRange {
		color: #393939;
		}
		.flatpickr-day.selected.endRange,
		.flatpickr-day.endRange.endRange {
		position: relative; /* so the ::before arrow can be absolutely positioned */
		}
	.flatpickr-day.selected.endRange::before, .flatpickr-day.endRange.endRange::before {
		content: "";
		position: absolute;
		top: 50%;
		left: -1px;
		transform: translateY(-50%);
		border-top: 6px solid transparent;
		border-bottom: 6px solid transparent;
		border-left: 7px solid var(--bs-primary-bg-subtle);
		}
	.app_selector_plus {
		right: -20px;
		}
	svg.fs-2-small-picker {
		width: 16px;
		position: relative;
		top: -2px;
		left: -2px;
		}
	.scrollmenu {
		white-space: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		-ms-overflow-style: none; 
		scrollbar-width: none; 
		}
	.scrollmenu::-webkit-scrollbar {
		display: none;
		}
	.scrollmenu span {
		display: inline-block;
		padding: 8px 16px;
		margin-right: 5px;
		box-shadow: 0px 2px 4px -1px rgba(175, 182, 201, 0.2);
		height: 33px;
		text-align: center;
		text-decoration: none;
		}
	
	.scrollmenu span:last-of-type {
		margin-right: 0;
		}
	#datepicker-container.is_required {
		outline: 1px solid #ff6692 !important;
		border-radius: 5px;
		}
	#mobile_cal_show #datepicker-container.is_required {
		outline: 1px solid white !important;
		}

	.lightpick__month {
		padding: 5px 20px;
		width: 288px;
		}
	.flatpickr-month.MoveThisClone {
		display: none;
		}
	@media (max-width: 769px) {
		#datepicker-container{
		display:none;
		}
	.flatpickr-month.MoveThisClone {
        display: block;
        margin-top: 15px;
        position: absolute;
        height: 0px;
        width: 100%;
		}
	.flatpickr-days {
        display: block;
        margin-top: -40px;
		}
	.flatpickr-month.MoveThis {
		display: none;
		}
	.flatpickr-month.MoveThis {
		display: none;
		}
	.flatpickr-months {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: block;
		}
	.flatpickr-weekdaycontainer:nth-of-type(2) {
		display: none;
		}
		.dayContainer {
		margin-top:40px;
		}
	.dynamic_spinner {
		text-align: center;
		}
</style>

	<div class="body-wrapper add_order_template">
		<div class="container-fluid pt-0">
			<div class="container-fluid p-0 px-3">
				<div class="row mb-3">
					<?php if(isset($_SESSION['msg'])) { ?> 
						<div class="alert mb-3 alert-<?=$_SESSION['msg']['status']?> alert-dismissible bg-<?=$_SESSION['msg']['status']?> text-white border-0 fade show" role="alert">
							<button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Close"></button>
							<?=$_SESSION['msg']['msg']?>
						</div>
					<?php unset($_SESSION['msg']);} ?>
					<div class="col p-0 ">
						<h2><?=getLabel('sis_add_new_boking') ?: 'Add new booking'  ?></h2>
						<!-- Trigger button -->
					</div> 
				</div>
			</div>
			<div class="col-lg-12 d-flex align-items-stretch">
				<div class="container p-2">
					<form action="/admin/order/controller/1/<?=$oid?>" method="POST" class="needs-validation" novalidate="">
						<div class="row">
							<div class="col-sm-12 px-2 mb-3">
								<div id="openVehicleSelect" class="app_selector top-align"> 
									<div class="selector_hstack">
										<div>
											<div class="selector_icon"><svg  viewBox="0 0 42.89 37.63" xmlns="http://www.w3.org/2000/svg"><path id="Path_1" data-name="Path 1" d="M34.76,5.5l1.67,7.19H6.46L8.12,5.5a2.288,2.288,0,0,1,.35-.83,2.84,2.84,0,0,1,.65-.69,3.954,3.954,0,0,1,.74-.43,2.4,2.4,0,0,1,.89-.18H32.14a2.4,2.4,0,0,1,.89.18,3.588,3.588,0,0,1,.73.43,2.882,2.882,0,0,1,.66.69,2.273,2.273,0,0,1,.34.83ZM33.96.35A5.163,5.163,0,0,0,32.14,0H10.75A5.26,5.26,0,0,0,8.92.35,6.806,6.806,0,0,0,7.16,1.39a6.1,6.1,0,0,0-1.3,1.47,7.493,7.493,0,0,0-.85,1.89L3.06,13.4l-.2.12c-.23.14-.44.28-.64.43a6.3,6.3,0,0,0-.56.5A6.231,6.231,0,0,0,.42,16.39,5.891,5.891,0,0,0,0,18.61v7.25a6.332,6.332,0,0,0,.44,2.28,5.656,5.656,0,0,0,1.22,1.88l.01.01a5.443,5.443,0,0,0,1.82,1.29,5.717,5.717,0,0,0,2.22.45l2.35.01v3.54a2.758,2.758,0,0,0,.27,1.19,1.866,1.866,0,0,0,.69.78l.01.01a1.8,1.8,0,0,0,1.01.33,1.684,1.684,0,0,0,.86-.24,2.108,2.108,0,0,0,.68-.65,2.024,2.024,0,0,0,.35-1.11V31.77H30.95v3.86a2.024,2.024,0,0,0,.35,1.11,2.108,2.108,0,0,0,.68.65,1.712,1.712,0,0,0,.86.24,1.834,1.834,0,0,0,1.02-.33l.01-.01a1.844,1.844,0,0,0,.68-.78,2.633,2.633,0,0,0,.28-1.19V31.78h2.34a5.964,5.964,0,0,0,2.23-.46,5.306,5.306,0,0,0,1.81-1.29l.02-.01a5.633,5.633,0,0,0,1.21-1.88,6.135,6.135,0,0,0,.45-2.28V18.61a5.891,5.891,0,0,0-.42-2.22,6.54,6.54,0,0,0-1.25-1.96c-.18-.17-.36-.33-.55-.48s-.42-.29-.65-.43l-.19-.12L37.87,4.75a7.157,7.157,0,0,0-.85-1.89,6.063,6.063,0,0,0-1.29-1.47A6.7,6.7,0,0,0,33.96.35ZM38.1,28.19a2.71,2.71,0,0,1-1.03.21H5.82a2.721,2.721,0,0,1-1.04-.21,2.009,2.009,0,0,1-.76-.56,2.5,2.5,0,0,1-.75-1.77V18.61a2.9,2.9,0,0,1,.19-1.03,2.584,2.584,0,0,1,.57-.86,2.986,2.986,0,0,1,.79-.55,2.114,2.114,0,0,1,.89-.21H37.17a2.079,2.079,0,0,1,.89.21,3.223,3.223,0,0,1,.8.55,2.594,2.594,0,0,1,.75,1.89v7.25a2.33,2.33,0,0,1-.2.96,2.5,2.5,0,0,1-.54.81,1.968,1.968,0,0,1-.77.56ZM10.05,20.24a1.821,1.821,0,0,0-1.33.58,2.013,2.013,0,0,0-.56,1.41,1.861,1.861,0,0,0,1.89,1.89,1.855,1.855,0,0,0,1.33-.58,2.032,2.032,0,0,0,.55-1.41,1.838,1.838,0,0,0-.54-1.34A1.9,1.9,0,0,0,10.05,20.24Zm24.12.58a1.838,1.838,0,0,0-1.33-.58,1.922,1.922,0,0,0-1.35.55,1.879,1.879,0,0,0-.54,1.34,2.04,2.04,0,0,0,.56,1.41,1.838,1.838,0,0,0,1.33.58,1.861,1.861,0,0,0,1.89-1.89,2.058,2.058,0,0,0-.56-1.41Z"></path></svg></div>
										</div>
										<div class="over_hidden">
											<div class="text-side-container">
												<span id="nameUpdate">
													<strong><?=getLabel('sis_any_available_vehicle') ?: 'Any available vehicle'  ?></strong></span>
													<br>
												<span id="PlatesUpdate" class="fs-2 text-muted"><?=getLabel('sis_based_free_dates') ?: 'On selected dates' ?></span>
											</div>
										</div>
										<div class="app_selector_arrow_container">
											<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="m112 184l144 144l144-144"></path></svg>
										</div>
									</div>
								</div>
								<input type="hidden" id="vehicleSelect" value="0" name="vehicle">
							</div>
						</div>
						<div class="row">
							<div class="col-sm-12 px-2 desktop_hide mb-4">
								<div  id="MobileDateModal" class="app_selector top-align"> 
									<div class="selector_hstack">
										<div>
											<div class="selector_icon">
												<svg class="fs-10 text-primary" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none"><path stroke="currentColor" stroke-width="1.5" d="M2 12c0-3.771 0-5.657 1.172-6.828S6.229 4 10 4h4c3.771 0 5.657 0 6.828 1.172S22 8.229 22 12v2c0 3.771 0 5.657-1.172 6.828S17.771 22 14 22h-4c-3.771 0-5.657 0-6.828-1.172S2 17.771 2 14z"></path><path stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M7 4V2.5M17 4V2.5M2.5 9h19"></path><path fill="currentColor" d="M18 17a1 1 0 1 1-2 0a1 1 0 0 1 2 0m0-4a1 1 0 1 1-2 0a1 1 0 0 1 2 0m-5 4a1 1 0 1 1-2 0a1 1 0 0 1 2 0m0-4a1 1 0 1 1-2 0a1 1 0 0 1 2 0m-5 4a1 1 0 1 1-2 0a1 1 0 0 1 2 0m0-4a1 1 0 1 1-2 0a1 1 0 0 1 2 0"></path></g></svg>
											</div>
										</div>
										<div class="over_hidden">
											<div class="text-side-container">
												<div id="live_dates_container" class="hstack gap-2 mt-1" style="display:none">
													<div id="visual_start_date" class="dc-flex align-items-center gap-2 over_hidden_noflex fw-bold">
														Location here
													</div>	
													<div class="dc-flex align-items-center gap-2 text-nowrap ">
														<iconify-icon icon="humbleicons:arrow-right" class="final_total_green"></iconify-icon>
													</div>
													<div id="visual_end_date"  class="dc-flex align-items-center gap-2 over_hidden_noflex fw-bold">
														Location here
													</div>	
												</div>				
												<div id="live_dates_unset" class="hstack gap-2 mt-1">
													<div class="dc-flex align-items-center gap-2 over_hidden_noflex fw-bold">
														<?=getLabel('sis_select_vehicle_date_range') ?: 'Select a date range' ?>
													</div>	
												</div>
												<span class="fs-2 text-nowrap text-grey"><?=getLabel('sis_select_booking_dates') ?: 'Booking dates' ?></span>
											</div>
										</div>
										<div class="app_selector_arrow_container">
											<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="m112 184l144 144l144-144"></path></svg>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="row mt-2">
							<div class="col-sm-6 ">
								<div class="dots_pickups">
									<div class="location_dot"></div>
									<div class="location_main_line"></div>
								</div>
								<div id="openPikupTime" class="place_holder_loc pickup_loc cursor_pointer px-2">
									<div class="hstack gap-9 mt-0 mt-md-0">
										<div class="dc-flex align-items-center gap-1">
											<span class="text-nowrap card-subtitle"><?=getLabel('sis_add_pickup') ?: 'Pickup' ?></span>
										</div>
									</div>
									<div class="hstack gap-2 mt-1 ">
										<div id="pickup_update_address" class="dc-flex align-items-center gap-2 over_hidden_noflex">
											<b><?=getLabel('sis_add_pickup_where_recieve') ?: 'Select pickup location and time' ?></b>
										</div>	
										<div class="dc-flex align-items-center gap-2 text-nowrap time_pickup_unset" style="display:none">
											<iconify-icon icon="humbleicons:arrow-right" class="final_total_green"></iconify-icon><span id="pickup_time_update"><b>00:00</b> pm</span>
										</div>
										<div class="loc_pic_arrow">
											<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="m112 184l144 144l144-144"></path></svg>
										</div>
									</div>
									<div class="hstack mt-0 mt-md-0 line_seperator_dash">
										<div class="dc-flex dry_item_middle">
											<span id="pickup_update_country" class="text-nowrap text-grey"><?=getLabel('sis_add_click_select') ?: 'Click to select' ?></span>
										</div>
									</div>
									<input type="text" id="pick_loc"  style="display:none" class="form-control" name="pick_loc" required>
									<input type="text" id="pick_time" style="display:none" class="form-control"  name="pick_time" required>
								</div>
							</div>
							<div class="col-sm-6">
								<div class="dots_pickups">
									<div class="location_dot"></div>
									<div class="location_grey_line"></div>
								</div>
								<div id="openDropoffTime" class="place_holder_loc dropoff_loc cursor_pointer px-2">
									<div class="hstack gap-9 mt-0 mt-md-0">
										<div class="dc-flex align-items-center gap-1">
											<span class="text-nowrap card-subtitle"><?=getLabel('sis_add_dropoff') ?: 'Dropoff' ?></span>
										</div>
									</div>
									<div class="hstack gap-2 mt-1 mobile_justify">
										<div id="dropoff_update_address" class="dc-flex align-items-center gap-2 over_hidden_noflex">
											<b><?=getLabel('sis_add_dropoff_where_return') ?: 'Select dropoff location and time' ?></b>
										</div>	
										<div class="dc-flex align-items-center gap-2 text-nowrap time_dropoff_unset" style="display:none">
											<iconify-icon icon="humbleicons:arrow-right" class="final_total_green"></iconify-icon><span id="dropoff_time_update"><b>00:00</b> pm</span>
										</div>
										<div class="loc_pic_arrow">
											<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="m112 184l144 144l144-144"></path></svg>
										</div>
									</div>
									<div class="hstack mt-0 mt-md-0">
										<div class="dc-flex dry_item_middle">
											<span id="dropoff_update_country"  class="text-nowrap text-grey"><?=getLabel('sis_add_click_select') ?: 'Click to select' ?></span>
										</div>
									</div>
									<input type="text" id="drop_loc"  style="display:none" class="form-control"  name="drop_loc" required>
									<input type="text" id="drop_time" style="display:none" class="form-control"  name="drop_time" required>
								</div>
							</div>
						</div>
						<div class="row mb-4">
							<div class="container">
								<div id="datepicker-container" style="position: relative;">
									<div class="spinner-container hiddenSpinner">
										<div class="spinner-border text-primary" role="status">
											<span class="visually-hidden"><?=getLabel('sis_loading_dots') ?: 'Loading...'?></span>
										</div>
									</div>
									<div id="cal-render-block">
										<div id="cal-render" class="flatpickr-input"></div>
									</div>
								</div>
								<input type="hidden" id="range-date" hidden readonly>
							</div>
						</div> 
						<div class="desktop_hide">
							<div class="row px-2">
								<div class="mobi_days mb-3">
									<div class="hstack justify-content-between">
										<span class="inside_counter_text fs-2"><?=getLabel('sis_total_days') ?: 'Total days' ?><</span>
										<span class="mobi_total_days fw-bold">0</span>
									</div>
								</div>
							</div>
						</div>
						<div class="row mb-4">
							<div class="col-sm-12">
								<div id="openProducts" class="place_holder_loc cursor_pointer px-3">
									<div class="hstack gap-2 mt-1 ">
										<svg class="text-primary me-1" style="width:30px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M256 256v128m64-64H192M80 176a16 16 0 0 0-16 16v216c0 30.24 25.76 56 56 56h272c30.24 0 56-24.51 56-54.75V192a16 16 0 0 0-16-16Zm80 0v-32a96 96 0 0 1 96-96h0a96 96 0 0 1 96 96v32"></path></svg>
										<div class="">
											<span id="products_update" class="text-nowrap text-dark fw-bold"><?=getLabel('sis_add_extra_paid_products') ?: 'Add extra paid products' ?></span></br>
											<span id="products_update_sub" class="text-nowrap text-grey"><?=getLabel('sis_add_click_select') ?: 'Click to select' ?></span>
										</div>	
										<div class="app_selector_arrow_container">
											<div class="app_selector_plus">
												<svg class="fs-2" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12.75 7.75h-10m5-5v10"></path></svg>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="clear"></div>				
						<div class="row">
							<div class="container respo_data desktop_hide"> 
								<div class="container_spiner" style="display: none;">
									<div class="spinner-border text-primary" role="status"></div>
								</div>
								<div class="row_mobile_data">
									<table>
										<tr class="line_seperator_dash">
										</tr>	
										<tr class="line_seperator_dash">
											<td width="99%" class="text-grey"><?=getLabel('sis_add_total_vehicle') ?: 'Total vehicle' ?></td><td class="fw-bold"> <?=$tenant_currency?> <span class="final_total_price_mobile">0.00</span></td>
										</tr>
										<tr class="line_seperator_dash">
											<td width="99%" class="text-grey"><?=getLabel('sis_add_total_products') ?: 'Total products' ?></td><td class="fw-bold"> <?=$tenant_currency?> <span class="final_total_products_mobile">0.00</span></td>
										</tr>
										<tr>
											<td width="99%" class="text-grey"><?=getLabel('sis_add_required_deposit') ?: 'Required deposit' ?></td><td class="fw-bold"> <?=$tenant_currency?>  <span class="final_total_deposit_mobile">0.00</span></td>
										</tr>
										<tr>
											<td class="p-0" colspan="2">
												<div class="discount_mobile_container"> 
												</div>
											</td>
										</tr>
										<tr>
											<td width="99%" class="text-grey"><?=getLabel('sis_add_total_to_be_paid') ?: 'Total to be paid' ?></td><td class="fw-bold final_total_green  fs-4"><?=$tenant_currency?>  <span class="final_total_discounted_mobile">0.00</span></td>
										</tr>
									</table>
								</div>
								<button type="submit" class="btn btn-primary px-4 mt-3 mb-3 btn fullwidth"><?=getLabel('sis_add_continue') ?: 'Continue' ?></button> 
							</div>
						</div>
						<div class="clear"></div>
						<div class="row">
							<div class="container respo_hide">
								<div class="card ps-0">
									<div class="d-flex flex-row">
										<div id="success_days" class="plain_days">
											<div class="single_days">
												<div class="days_calculator inside_counter_text fs-2 uppercase"><?=getLabel('sis_add_calc_days') ?: 'Days'?></div>
												<h5 class="total_days_container inside_counter_text">0</h5>
											</div>
										</div>
										<div style="display:none" class="col-md-8 mt-2 me-2 ms-3 dynamic_spinner">
											<div class="spinner-border text-primary fs-2 mt-2" role="status"></div>
										</div>
										<div class="col-md-auto mt-2 me-2 ms-3">
											<div class="price_liner pt-1 dynamic_display">
												<div class="price_calculator fs-2"><?=getLabel('sis_add_total_vehicle') ?: 'Total vehicle' ?></div>
												<h5 class="pricer_currency"><?=$tenant_currency?>
												<span class="final_total_price">0.00</span> </h5>
											</div>
										</div>
										<div class="col-md-auto ms-2 mt-2 me-3">
											<div class="price_liner_deposit pt-1 dynamic_display">
												<div class="price_calculator fs-2"><?=getLabel('sis_add_total_products') ?: 'Total products' ?></div>
												<h5 class="pricer_currency"><?=$tenant_currency?>
												<span class="final_total_products">0.00</span> </h5>
											</div>
											</div>			<div class="col-md-auto ms-2 mt-2 me-3">
											<div class="price_liner_deposit pt-1 dynamic_display">
												<div class="price_calculator fs-2"><?=getLabel('sis_add_required_deposit') ?: 'Required deposit'?></div>
												<h5 class="pricer_currency"><?=$tenant_currency?>
												<span class="final_total_deposit">0.00</span> </h5>
											</div>
										</div>
										<div class="col-md-auto mt-2 me-3 price_liner pt-1 dynamic_display" > 
											<div class="discount_desktop_container" > 
												<?php if($_SESSION["rentex_app_user"]['xgroup'] != 'user') {?> 
													<div class="input-group  mt-1"> <span class="input-group-text fs-2"><?=getLabel('sis_add_discount') ?: 'Discount'?></span> <input type="number" name="discount" id="discountInput" value="0" class="form-control border_input_custom" pattern="^\d+(\.\d{1,2})?$" step="0.1" min="0"> </div>
													<?php } else {?> 
													<input type="hidden" name="discount_price" id="discountInput" value="0" disabled> 
												<?php } ?> 
											</div>
										</div>
										<div class="col mt-2">
											<div class="price_liner pt-1 fs-2 dynamic_display" ><?=getLabel('sis_add_total_to_be_paid') ?: 'Total to be paid'?></br>
												<h5 class="pricer_currency final_total_green"><?=$tenant_currency?>
												<span class="final_total_discounted final_total_green">0.00</span></h5>
											</div>
										</div>
										<div class="col-md-auto mt-3 me-3 mb-3 "> <button type="submit" class="btn btn-primary px-4 btn fullwidth"><?=getLabel('sis_add_continue') ?: 'Continue' ?></button> </div>
									</div>
								</div>
							</div>
						</div> 
						<!-------------START PRODUCTS ---------->
						<div id="AddPoroducts" class="custom-fullscreen-modal">
							<div class="custom-modal-content">
								<button type="button" class="btn-close custom-close-modal"></button>
								<div class="custom-modal-data">
									<div class="row p-0 mb-2">
										<div class="col-sm-12">
											<h2 class="mb-4"><?=getLabel('sis_add_extra_paid_products') ?: 'Add extra paid products' ?></h2>
											<?php if ($tenant_products) { ?>
												<div class="row g-2">
													<div class="col-12 mb-3">
														<div class="position-relative">
															<div class="position-relative"> <input type="text" class="form-control search-chat py-2 ps-5" id="product-search" placeholder="<?=getLabel('sis_search') ? :'Search'?>"> <i class="ti ti-search position-absolute top-50 start-0 translate-middle-y fs-5 text-dark ms-3"></i> </div>
														</div>
													</div>
												</div>
											</div>
											<div class="clear"></div>
											<div id="product-list">
												<div class="product-list-seperator"> <?php foreach ($tenant_products as $product) { 
													// Create a unique ID for each checkbox
													$checkboxId = 'product_' . $product['id']; 
													?> <div class="product-item" data-product-id="<?=$product['id']?>">
													<!-- Add data-product-id -->
													<div class="d-flex product-item-row">
														<!-- Added align-items-center for alignment -->
														<div class="form-check"> <input type="checkbox" id="<?=$checkboxId?>" data-product-price="<?=$product['price']?>" data-product-model="<?=$product['price_model']?>" class="form-check-input product-checkbox" value="<?=$product['id']?>" name="products[<?=$product['id']?>][name]"> </div> <label for="<?=$checkboxId?>" class="form-check-label product-label ms-2">
															<!-- Added ms-2 for spacing --> <span class="text-dark"><?=getLabel($product['label']) ?: $product['name'] ?></span> <span class="card-title">(<?=getLabel('sis_add_'.$product['price_model'])?>)</span> <span class="out-of-stock-msg" style="color:#ff6692; display:none;"><?=getLabel('sis_add_product_out_of_stock')?></span> <!-- Hidden span for out-of-stock message -->
														</label>
														<div class="ms-auto flex-shrink-0"> <span class="text-muted prc_<?=$product['price_model']?>">1 X</span> <span class="card-title green_text_price px-1"><?=$product['price']?></span> </div>
													</div>
												</div> <?php } ?> </div>
											</div>
										</div>
										<div class="row">
											<div class="col-md-auto mb-3">
												<button type="button" class="btn btn-primary px-5 respo_fullwidth prod_cancel">OK</button>
											</div>
											<div class="col-md-auto mb-2">
												<button type="button" class="btn px-0 respo_fullwidth prod_cancel"><?=getLabel('sis_cancel') ?: 'Cancel' ?></button>
											</div>
										</div>
										<?php } else { ?>
										<div class="col-lg-12">
											<div class="text-center">
												<div class="row justify-content-md-center mb-1">
													<div class="col-md-8">
														<span class="text-muted display-6">
															<iconify-icon icon="ion:bag-remove-outline" class="mb-3"></iconify-icon>
														</span>
														<h2 class="mb-4"><?= getLabel('sis_no_products_yet_starter_title') ?: 'You dont have any products' ?> </h2>
														<p class="fw-normal card-subtitle mb-6"> 
															<?= getLabel('sis_no_products_yet_starter') ?: 'First you must create at least one product to be able to include it as a extra paid product in orders' ?>
														</p><br>
													</div>
												</div>
												<div class="justify-content-center">
													<a href="/admin/products/add" class="mb-2 btn btn-rounded btn-primary respo_full_width_button pe-4">
													<i class="ti ti-plus fs-4 me-2"></i><?=getLabel('sis_product_add') ?: 'Add product' ?></a>
												</div>
											</div>
										</div> 
									<?php } ?>
								</div>
							</div>
						</div>
						<!-------------END PRODUCTS ---------->
						<input type="text" style="display:none" name="from" id="fromInput" class="form-control mt-1" required> 
						<input type="text" style="display:none" name="to" id="toInput" class="form-control mt-1" required>
					</form>
				</div>
			</div>
		</div>
	</div>
</div>
		<div class="modal fade" id="errModal" tabindex="-1" aria-labelledby="vertical-center-modal">
			<div class="modal-dialog modal-dialog-centered">
				<div class="modal-content">
					<div class="modal-header d-flex align-items-center">
						<h4 class="modal-title" id="myLargeModalLabel">
							<?= getLabel('sis_add_dates_conflict_modal') ?: 'Conflict in dates range' ?>
						</h4>
						<!-- Close button inside header -->
						<button type="button" class="btn-close okCloseBtn" data-bs-dismiss="modal" aria-label="Close"></button>
					</div>
					<div class="modal-body-custom">
						<p id="cal_error_message"><b></b></p>
					</div>
					<!-- Footer with OK button -->
					<div class="text-center mb-4">
						<div class="text-center">
							<button type="button"  data-bs-dismiss="modal" class="btn bg-primary-subtle text-primary okCloseBtn">OK</button>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--////////// START SELECT VEHICLE     -->
		<div id="vehicleSelectDynamic" class="custom-fullscreen-modal">
			<div class="custom-modal-content">
				<button type="button" class="btn-close custom-close-modal"></button>
				<div class="custom-modal-data">
					<div class="row  p-0 mb-0">
						<div class="col-md-8">
							<div class="row ">
								<div class="clear"></div>
								<div class="col-sm-12">
									<h2 class="mb-4"><?= getLabel('sis_select_vehicle') ?: 'Select vehicle' ?></h2>
									<div class="row g-2">
										<div class="col-12 mb-3"> 
											<div class="desktop_hide scrollmenu mb-3">
												<span class="vehicle-filter-btn fs-2 active" data-filter="all"><?= getLabel('sis_all_female') ?: 'All' ?></span>
												<?php 
													$categories = array_filter(array_unique(array_column($tenant_vehicles, 'category')), function ($category) {
														return !empty($category); // Ensure the category is not empty
													});
													foreach ($categories as $category) { ?>
													<span class="vehicle-filter-btn fs-2" data-filter="<?= htmlspecialchars($category) ?>"><?= ucfirst(htmlspecialchars($category)) ?></span>
												<?php } ?>
											</div>
											<div class="position-relative"> 
												<input type="text" class="form-control search-chat ps-5 px-2" id="LiveSearchVeh" placeholder="Search"> 
												<i class="ti ti-search position-absolute top-50 translate-middle-y fs-6 text-dark ms-3"></i> 
											</div>
										</div>
									</div>
								</div>
								<div class="clear"></div>
								<div class="col-12">
									<div class="dc-flex align-items-start gap-2 search_vehicle_container dynamic_selector vhcl_selector" data-vehicle="0" data-category="all">
										<div class="dry_item_start">
											<span class="dynamic_selector_image">
												<div class="selector_icon"><svg  viewBox="0 0 42.89 37.63" xmlns="http://www.w3.org/2000/svg"><path id="Path_1" data-name="Path 1" d="M34.76,5.5l1.67,7.19H6.46L8.12,5.5a2.288,2.288,0,0,1,.35-.83,2.84,2.84,0,0,1,.65-.69,3.954,3.954,0,0,1,.74-.43,2.4,2.4,0,0,1,.89-.18H32.14a2.4,2.4,0,0,1,.89.18,3.588,3.588,0,0,1,.73.43,2.882,2.882,0,0,1,.66.69,2.273,2.273,0,0,1,.34.83ZM33.96.35A5.163,5.163,0,0,0,32.14,0H10.75A5.26,5.26,0,0,0,8.92.35,6.806,6.806,0,0,0,7.16,1.39a6.1,6.1,0,0,0-1.3,1.47,7.493,7.493,0,0,0-.85,1.89L3.06,13.4l-.2.12c-.23.14-.44.28-.64.43a6.3,6.3,0,0,0-.56.5A6.231,6.231,0,0,0,.42,16.39,5.891,5.891,0,0,0,0,18.61v7.25a6.332,6.332,0,0,0,.44,2.28,5.656,5.656,0,0,0,1.22,1.88l.01.01a5.443,5.443,0,0,0,1.82,1.29,5.717,5.717,0,0,0,2.22.45l2.35.01v3.54a2.758,2.758,0,0,0,.27,1.19,1.866,1.866,0,0,0,.69.78l.01.01a1.8,1.8,0,0,0,1.01.33,1.684,1.684,0,0,0,.86-.24,2.108,2.108,0,0,0,.68-.65,2.024,2.024,0,0,0,.35-1.11V31.77H30.95v3.86a2.024,2.024,0,0,0,.35,1.11,2.108,2.108,0,0,0,.68.65,1.712,1.712,0,0,0,.86.24,1.834,1.834,0,0,0,1.02-.33l.01-.01a1.844,1.844,0,0,0,.68-.78,2.633,2.633,0,0,0,.28-1.19V31.78h2.34a5.964,5.964,0,0,0,2.23-.46,5.306,5.306,0,0,0,1.81-1.29l.02-.01a5.633,5.633,0,0,0,1.21-1.88,6.135,6.135,0,0,0,.45-2.28V18.61a5.891,5.891,0,0,0-.42-2.22,6.54,6.54,0,0,0-1.25-1.96c-.18-.17-.36-.33-.55-.48s-.42-.29-.65-.43l-.19-.12L37.87,4.75a7.157,7.157,0,0,0-.85-1.89,6.063,6.063,0,0,0-1.29-1.47A6.7,6.7,0,0,0,33.96.35ZM38.1,28.19a2.71,2.71,0,0,1-1.03.21H5.82a2.721,2.721,0,0,1-1.04-.21,2.009,2.009,0,0,1-.76-.56,2.5,2.5,0,0,1-.75-1.77V18.61a2.9,2.9,0,0,1,.19-1.03,2.584,2.584,0,0,1,.57-.86,2.986,2.986,0,0,1,.79-.55,2.114,2.114,0,0,1,.89-.21H37.17a2.079,2.079,0,0,1,.89.21,3.223,3.223,0,0,1,.8.55,2.594,2.594,0,0,1,.75,1.89v7.25a2.33,2.33,0,0,1-.2.96,2.5,2.5,0,0,1-.54.81,1.968,1.968,0,0,1-.77.56ZM10.05,20.24a1.821,1.821,0,0,0-1.33.58,2.013,2.013,0,0,0-.56,1.41,1.861,1.861,0,0,0,1.89,1.89,1.855,1.855,0,0,0,1.33-.58,2.032,2.032,0,0,0,.55-1.41,1.838,1.838,0,0,0-.54-1.34A1.9,1.9,0,0,0,10.05,20.24Zm24.12.58a1.838,1.838,0,0,0-1.33-.58,1.922,1.922,0,0,0-1.35.55,1.879,1.879,0,0,0-.54,1.34,2.04,2.04,0,0,0,.56,1.41,1.838,1.838,0,0,0,1.33.58,1.861,1.861,0,0,0,1.89-1.89,2.058,2.058,0,0,0-.56-1.41Z"></path></svg></div>
											</span>
										</div>
										<div class="dry_item_middle">
											<div class="wh_holder_data search_able_item">
												<div class="wh_holder_data_details">
													<div class="search_able">
														<div class="hstack gap-9 mt-1">
															<div data-vehicle-name="<?=getLabel('sis_any_available_vehicle') ?: 'Any available vehicle' ?>" class="dc-flex align-items-center gap-2 text-nowrap ">
															<?=getLabel('sis_any_available_vehicle') ?: 'Any available vehicle' ?></div>
														</div>
													</div>
													<div class="hstack gap-9 mt-0 mt-md-0">
														<div class="dc-flex align-items-center gap-2">
															<span data-vehicle-plates="On selected dates" class="text-nowrap text-grey fs-2"><?=getLabel('sis_based_free_dates') ?: 'On selected dates' ?></span>
														</div>
													</div>
												</div>
											</div> 
											<div class="wh_holder_data_details respo_hide ms-3">
												<div class="hstack gap-9 mt-0 mt-md-0">
													<div class="dc-flex align-items-center gap-2">
													</div>
												</div>
											</div>
										</div>
									</div>
									<?php foreach ($tenant_vehicles as $vehicle) { 
										$vehicle_id = $vehicle['id'];
										$vehicle_image_url = $GLOBALS['cdn_url'] . '/uploads/vehicles/thumbs/';
										$vehicle_image_url_onerror = $GLOBALS['sdk_url'] . '/' . $GLOBALS['sdk_bucket'] . '/uploads/vehicles/thumbs/';
										if (isset($images_by_vehicle[$vehicle_id]) && $images_by_vehicle[$vehicle_id] !== '') {
											$vehicle_image = 'thumb_'. $images_by_vehicle[$vehicle_id];
											} else {
											$vehicle_image = 'no_vh_image.png';
											$vehicle_image_url = '/uploads/vehicles/thumbs/';
										}
									?>
									<div class="dc-flex align-items-start gap-2 search_vehicle_container dynamic_selector vhcl_selector" data-vehicle="<?=$vehicle['id']?>" data-category="<?=$vehicle['category']?>">
										<div class="dry_item_start">
											<span class="dynamic_selector_image">
												<?php if (isset($images_by_vehicle[$vehicle_id]) && $images_by_vehicle[$vehicle_id] !== '') { ?>
													<img src="<?=$GLOBALS['cdn_url']?>/uploads/vehicles/thumbs/<?=$vehicle_image?>" 
													onerror="this.onerror=null; this.src='<?=$GLOBALS['sdk_url']?>/<?=$GLOBALS['sdk_bucket']?>/uploads/vehicles/thumbs/<?=$vehicle_image ?>';" 
													alt="<?=$this_tenant['company_name']?>">
													<?php } else { ?>
													<img src="<?=$GLOBALS['cdn_url']?>/uploads/vehicles/thumbs/no_vh_image.png" 
													onerror="this.onerror=null; this.src='/uploads/vehicles/thumbs/no_vh_image.png';" 
													alt="<?=$this_tenant['company_name']?>">
												<?php } ?> 
											</span>
										</div>
										<div class="dry_item_middle">
											<div class="wh_holder_data search_able_item">
												<div class="wh_holder_data_details">
													<div class="search_able">
														<div class="hstack gap-9 mt-1">
															<div data-vehicle-name="<?=$vehicle['name']?> &#183; <?=$vehicle['model']?>" class="dc-flex align-items-center gap-2 text-nowrap ">
																<p class="m-0"><?=$vehicle['name']?> &#183; <?=$vehicle['model']?></p>
															</div>
														</div>
													</div>
													<div class="hstack gap-9 mt-0 mt-md-0">
														<div class="dc-flex align-items-center gap-2">
															<span data-vehicle-plates="<?= !empty($vehicle['registration']) ? $vehicle['registration'] : (getLabel('sis_db_vhcl_no_plates') ?: 'Missing plates') ?>"  class="text-nowrap text-grey fs-2"><?= !empty($vehicle['registration']) ? $vehicle['registration'] : (getLabel('sis_db_vhcl_no_plates') ?: 'Missing plates') ?></span>
														</div>
													</div>
												</div>
											</div> 
											<div class="wh_holder_data_details respo_hide ms-3">
												<div class="hstack gap-9 mt-0 mt-md-0">
													<div class="dc-flex align-items-center gap-2">
													</div>
												</div>
											</div>
										</div>
										<div class="is_available"></div>  
									</div>
									<?php } ?>			
									<br>
								</div>
							</div>
						</div>
						<div class="respo_hide col-4 ps-0 mb-3">
							<h2 class="mb-4"><?= getLabel('sis_types') ?: 'Types' ?></h2>
							<div id="vehicleFilter">
								<span class="vehicle-filter-btn active" data-filter="all"><?= getLabel('sis_all_female') ?: 'All' ?></span>
								<?php foreach (array_unique(array_column($tenant_vehicles, 'category')) as $category): ?>
								<span class="vehicle-filter-btn" data-filter="<?= $category ?>"><?= ucfirst($category) ?></span>
								<?php endforeach; ?>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div id="PickupTiming" class="custom-fullscreen-modal">
			<div class="custom-modal-content">
				<button type="button" class="btn-close custom-close-modal"></button>
				<div class="custom-modal-data">
					<div class="row  p-0 mb-3">
						<div class="col-8">
							<div class="row ">
								<div class="clear"></div>
								<div class="col-sm-12">
									<h2><?= getLabel('sis_add_pickup_loc') ?: 'Pickup location' ?></h2>
								</div>
								<div class="clear"></div>
								<div class="col-12">
								</div>
							</div>
						</div>
						<div class="col-4 ps-0">
							<h2><?= getLabel('sis_types') ?: 'Types' ?></h2>
						</div>
					</div>
					<div id="errorAlertPickup" class="alert bg-danger show text-white mt-2 custom_modal_danger alert-dismissible" role="alert" style="display: none;">
						<span><?= getLabel('sis_add_loc_errors') ?: 'Please select both, location and time' ?></span>
					</div>
					<div class="row  p-0 mb-0">
						<div class="col-8">
							<div class="row ">
								<div class="clear"></div>
								<div class="col-sm-12">
									<div class="row g-2">
										<div class="col-12 mb-3"> 
											<div class="position-relative"> 
												<input type="text" class="form-control search-chat ps-5 px-2" id="LiveSearchPick" placeholder="Search"> 
												<i class="ti ti-search position-absolute top-50 translate-middle-y fs-6 text-dark ms-3"></i> 
											</div>
										</div>
									</div>
								</div>
								<div class="clear"></div>
								<div class="col-12">
									<?php foreach ($tenant_locations as $location) { ?>
										<div class="dc-flex align-items-start gap-2 search_pickup_container dynamic_selector pick_selector" data-pickup-loc="<?=$location['id']?>">
											<div class="dry_item_start respo_hide">
												<div class="iconer_left bg-success">
													<iconify-icon icon="iconamoon:location-pin-light" class="text-white"></iconify-icon>
												</div>
											</div>	
											<div class="dry_item_start desktop_hide">
												<iconify-icon icon="iconamoon:location-pin-light" class="pt-1 fs-5"></iconify-icon>
											</div>
											<div class="dry_item_middle">
												<div class="wh_holder_data search_able_item">
													<div class="wh_holder_data_details">
														<div class="search_able">
															<div class="hstack gap-9">
																<div data-pickup-address="<?= !empty($location['busines_address']) ? strip_tags($location['busines_address']) : (getLabel('sis_branches_no_adress_yet') ?: 'No address provided yet'); ?>" class="dc-flex align-items-center gap-2 text-nowrap ">
																	<?= !empty($location['busines_address']) ? strip_tags($location['busines_address']) : (getLabel('sis_branches_no_adress_yet') ?: 'No address provided yet'); ?>
																</div>
															</div>
														</div>
														<div class="hstack gap-9 mt-0 mt-md-0">
															<div class="dc-flex align-items-center gap-2">
																<span data-pickup-country="<?= !empty($location['busines_city']) ? $location['busines_city'] . ', ' : '' ?><?=$country_names[$location['busines_state']]?>" class="text-nowrap fs-2 text-grey"><?= !empty($location['busines_city']) ? $location['busines_city'] . ', ' : '' ?><?=$country_names[$location['busines_state']]?></span>
															</div>
														</div>
													</div>
												</div> 
												<div class="wh_holder_data_details respo_hide ms-3">
													<div class="hstack gap-9 mt-0 mt-md-0">
														<div class="dc-flex align-items-center gap-2">
														</div>
													</div>
												</div>
											</div>
										</div>
									<?php } ?>	
									<?php  if(!$tenant_locations) { ?>
										<div class="col-lg-12">
											</br>
											<div class="text-center">
												<div class="row justify-content-md-center mb-1">
													<div class="col-md-8">
														<span class="text-muted display-6">
															<iconify-icon icon="iconamoon:location-pin-off-light" class="mb-3"></iconify-icon>
														</span>
														<h2 class="mb-4"><?= getLabel('sis_branches_missing_start_title') ?: 'You dont have any active branches' ?> </h2>
														<p class="fw-normal card-subtitle mb-6"> 
															<?= getLabel('sis_branches_missing_start_desc') ?: 'You must have at least one active branch where your clients will pickup and dropoff vehicles to be able to create bookings' ?>
														</p><br>
													</div>
												</div>
												<div class="justify-content-center">
													<a href="/admin/branches/add" class="mb-2 btn btn-rounded btn-primary respo_full_width_button pe-4">
													<i class="ti ti-plus fs-4 me-2"></i><?= getLabel('sis_branches_add_new') ?: 'Add new branch' ?></a>
												</div>
											</div>
										</div> 
									<?php } ?>	
									<br>
								</div>
							</div>
						</div>
						<div class="col-4 ps-0">
							<div class="time_type mb-3">
								<?php if ($thisUser == 'us' ) { ?>
									<div class="time_type_switch">
										<ul>
											<li class="am_toggle active">AM</li>
											<li class="pm_toggle">PM</li>
										</ul>
									</div>
									<!-- AM Group -->
									<div class="am_group">
										<div class="time-picker-container">
											<div data-pickup-time="01:00" class="time-box">01:00</div>
											<div data-pickup-time="02:00" class="time-box">02:00</div>
											<div data-pickup-time="03:00" class="time-box">03:00</div>
											<div data-pickup-time="04:00" class="time-box">04:00</div>
											<div data-pickup-time="05:00" class="time-box">05:00</div>
											<div data-pickup-time="06:00" class="time-box">06:00</div>
											<div data-pickup-time="07:00" class="time-box">07:00</div>
											<div data-pickup-time="08:00" class="time-box">08:00</div>
											<div data-pickup-time="09:00" class="time-box">09:00</div>
											<div data-pickup-time="10:00" class="time-box">10:00</div>
											<div data-pickup-time="11:00" class="time-box">11:00</div>
											<div data-pickup-time="00:00" class="time-box">12:00</div>
										</div>
									</div>
									<!-- PM Group -->
									<div class="pm_group" style="display: none;">
										<div class="time-picker-container">
											<div data-pickup-time="13:00" class="time-box">01:00</div>
											<div data-pickup-time="14:00" class="time-box">02:00</div>
											<div data-pickup-time="15:00" class="time-box">03:00</div>
											<div data-pickup-time="16:00" class="time-box">04:00</div>
											<div data-pickup-time="17:00" class="time-box">05:00</div>
											<div data-pickup-time="18:00" class="time-box">06:00</div>
											<div data-pickup-time="19:00" class="time-box">07:00</div>
											<div data-pickup-time="20:00" class="time-box">08:00</div>
											<div data-pickup-time="21:00" class="time-box">09:00</div>
											<div data-pickup-time="22:00" class="time-box">10:00</div>
											<div data-pickup-time="23:00" class="time-box">11:00</div>
											<div data-pickup-time="12:00" class="time-box">12:00</div>
										</div>
									</div>
									<?php } else { ?>
									<div class="time-picker-container">
										<div data-pickup-time="00:00" class="time-box">00:00</div>
										<div data-pickup-time="01:00" class="time-box">01:00</div>
										<div data-pickup-time="02:00" class="time-box">02:00</div>
										<div data-pickup-time="03:00" class="time-box">03:00</div>
										<div data-pickup-time="04:00" class="time-box">04:00</div>
										<div data-pickup-time="05:00" class="time-box">05:00</div>
										<div data-pickup-time="06:00" class="time-box">06:00</div>
										<div data-pickup-time="07:00" class="time-box">07:00</div>
										<div data-pickup-time="08:00" class="time-box">08:00</div>
										<div data-pickup-time="09:00" class="time-box">09:00</div>
										<div data-pickup-time="10:00" class="time-box">10:00</div>
										<div data-pickup-time="11:00" class="time-box">11:00</div>			
										<div data-pickup-time="12:00" class="time-box">12:00</div>
										<div data-pickup-time="13:00" class="time-box">13:00</div>
										<div data-pickup-time="14:00" class="time-box">14:00</div>
										<div data-pickup-time="15:00" class="time-box">15:00</div>
										<div data-pickup-time="16:00" class="time-box">16:00</div>
										<div data-pickup-time="17:00" class="time-box">17:00</div>
										<div data-pickup-time="18:00" class="time-box">18:00</div>
										<div data-pickup-time="19:00" class="time-box">19:00</div>
										<div data-pickup-time="20:00" class="time-box">20:00</div>
										<div data-pickup-time="21:00" class="time-box">21:00</div>
										<div data-pickup-time="22:00" class="time-box">22:00</div>
										<div data-pickup-time="23:00" class="time-box">23:00</div>
									</div>
								<?php } ?>
							</div>
						</div>
					</div>
					<?php  if($tenant_locations) { ?>
						<div class="row">
							<div class="col-md-auto mb-3">
								<button id="pass_pickup" type="button" class="btn btn-primary px-5 respo_fullwidth">OK</button>
							</div>
						</div>
					<?php } ?>
				</div>
			</div>
		</div>
		<div id="DropoffTiming" class="custom-fullscreen-modal">
			<div class="custom-modal-content">
				<button type="button" class="btn-close custom-close-modal"></button>
				<div class="custom-modal-data">
					<div class="row  p-0 mb-3">
						<div class="col-8">
							<div class="row ">
								<div class="clear"></div>
								<div class="col-sm-12">
									<h2><?= getLabel('sis_add_dropoff_loc') ?: 'Dropoff location' ?></h2>
								</div>
								<div class="clear"></div>
								<div class="col-12">
								</div>
							</div>
						</div>
						<div class="col-4 ps-0">
							<h2><?= getLabel('sis_types') ?: 'Types' ?></h2>
						</div>
					</div>
					<div id="errorAlertDropoff" class="alert bg-danger show text-white mt-2 custom_modal_danger alert-dismissible" role="alert" style="display: none;">
						<span><?= getLabel('sis_add_loc_errors') ?: 'Please select both, location and time' ?></span>
					</div>
					<div class="row p-0 mb-0">
						<div class="col-8">
							<div class="row">
								<div class="clear"></div>
								<div class="col-sm-12">
									<div class="row g-2">
										<div class="col-12 mb-3">
											<div class="position-relative">
												<input type="text" class="form-control search-chat ps-5 px-2" id="LiveSearchDrop" placeholder="Search">
												<i class="ti ti-search position-absolute top-50 translate-middle-y fs-6 text-dark ms-3"></i>
											</div>
										</div>
									</div>
								</div>
								<div class="clear"></div>
								<div class="col-12">
									<?php foreach ($tenant_locations as $location) { ?>
										<div class="dc-flex align-items-start gap-2 search_dropoff_container dynamic_selector drop_selector" data-dropoff-loc="<?= $location['id'] ?>">
											<div class="dry_item_start respo_hide">
												<div class="iconer_left bg-success">
													<iconify-icon icon="ion:reload" class="text-white"></iconify-icon>
												</div>
											</div>
											<div class="dry_item_start desktop_hide">
												<iconify-icon icon="ion:reload" class="pt-1 fs-4"></iconify-icon>
											</div>
											<div class="dry_item_middle">
												<div class="wh_holder_data search_able_item">
													<div class="wh_holder_data_details">
														<div class="search_able">
															<div class="hstack gap-9">
																<div data-dropoff-address="<?= !empty($location['busines_address']) ? strip_tags($location['busines_address']) : 'No address provided yet'; ?>" class="dc-flex align-items-center gap-2 text-nowrap">
																	<?= !empty($location['busines_address']) ? strip_tags($location['busines_address']) : 'No address provided yet'; ?>
																</div>
															</div>
														</div>
														<div class="hstack gap-9 mt-0 mt-md-0">
															<div class="dc-flex align-items-center gap-2">
																<span data-dropoff-country="<?= !empty($location['busines_city']) ? $location['busines_city'] . ', ' : '' ?><?= $country_names[$location['busines_state']] ?>" class="text-nowrap fs-2 text-grey"><?= !empty($location['busines_city']) ? $location['busines_city'] . ', ' : '' ?><?= $country_names[$location['busines_state']] ?></span>
															</div>
														</div>
													</div>
												</div>
											</div>
										</div>
									<?php } ?>
									<br>
								</div>
							</div>
						</div>
						<div class="col-4 ps-0">
							<div class="time_type mb-3">
								<?php if ($thisUser == 'us' ) { ?>
									<div class="time_type_switch">
										<ul>
											<li class="am_toggle_ret active">AM</li>
											<li class="pm_toggle_ret">PM</li>
										</ul>
									</div>
									<!-- AM Group -->
									<div class="am_group_ret">
										<div class="time-picker-container">
											<div data-dropoff-time="01:00" class="time-box-ret">01:00</div>
											<div data-dropoff-time="02:00" class="time-box-ret">02:00</div>
											<div data-dropoff-time="03:00" class="time-box-ret">03:00</div>
											<div data-dropoff-time="04:00" class="time-box-ret">04:00</div>
											<div data-dropoff-time="05:00" class="time-box-ret">05:00</div>
											<div data-dropoff-time="06:00" class="time-box-ret">06:00</div>
											<div data-dropoff-time="07:00" class="time-box-ret">07:00</div>
											<div data-dropoff-time="08:00" class="time-box-ret">08:00</div>
											<div data-dropoff-time="09:00" class="time-box-ret">09:00</div>
											<div data-dropoff-time="10:00" class="time-box-ret">10:00</div>
											<div data-dropoff-time="11:00" class="time-box-ret">11:00</div>
											<div data-dropoff-time="00:00" class="time-box-ret">12:00</div>
										</div>
									</div>
									<!-- PM Group -->
									<div class="pm_group_ret" style="display: none;">
										<div class="time-picker-container">
											<div data-dropoff-time="13:00" class="time-box-ret">01:00</div>
											<div data-dropoff-time="14:00" class="time-box-ret">02:00</div>
											<div data-dropoff-time="15:00" class="time-box-ret">03:00</div>
											<div data-dropoff-time="16:00" class="time-box-ret">04:00</div>
											<div data-dropoff-time="17:00" class="time-box-ret">05:00</div>
											<div data-dropoff-time="18:00" class="time-box-ret">06:00</div>
											<div data-dropoff-time="19:00" class="time-box-ret">07:00</div>
											<div data-dropoff-time="20:00" class="time-box-ret">08:00</div>
											<div data-dropoff-time="21:00" class="time-box-ret">09:00</div>
											<div data-dropoff-time="22:00" class="time-box-ret">10:00</div>
											<div data-dropoff-time="23:00" class="time-box-ret">11:00</div>
											<div data-dropoff-time="12:00" class="time-box-ret">12:00</div>
										</div>
									</div>
									<?php } else { ?>
									<div class="time-picker-container">
										<div data-dropoff-time="00:00" class="time-box-ret">00:00</div>
										<div data-dropoff-time="01:00" class="time-box-ret">01:00</div>
										<div data-dropoff-time="02:00" class="time-box-ret">02:00</div>
										<div data-dropoff-time="03:00" class="time-box-ret">03:00</div>
										<div data-dropoff-time="04:00" class="time-box-ret">04:00</div>
										<div data-dropoff-time="05:00" class="time-box-ret">05:00</div>
										<div data-dropoff-time="06:00" class="time-box-ret">06:00</div>
										<div data-dropoff-time="07:00" class="time-box-ret">07:00</div>
										<div data-dropoff-time="08:00" class="time-box-ret">08:00</div>
										<div data-dropoff-time="09:00" class="time-box-ret">09:00</div>
										<div data-dropoff-time="10:00" class="time-box-ret">10:00</div>
										<div data-dropoff-time="11:00" class="time-box-ret">11:00</div>			
										<div data-dropoff-time="12:00" class="time-box-ret">12:00</div>
										<div data-dropoff-time="13:00" class="time-box-ret">13:00</div>
										<div data-dropoff-time="14:00" class="time-box-ret">14:00</div>
										<div data-dropoff-time="15:00" class="time-box-ret">15:00</div>
										<div data-dropoff-time="16:00" class="time-box-ret">16:00</div>
										<div data-dropoff-time="17:00" class="time-box-ret">17:00</div>
										<div data-dropoff-time="18:00" class="time-box-ret">18:00</div>
										<div data-dropoff-time="19:00" class="time-box-ret">19:00</div>
										<div data-dropoff-time="20:00" class="time-box-ret">20:00</div>
										<div data-dropoff-time="21:00" class="time-box-ret">21:00</div>
										<div data-dropoff-time="22:00" class="time-box-ret">22:00</div>
										<div data-dropoff-time="23:00" class="time-box-ret">23:00</div>
									</div>
								<?php } ?>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-md-auto mb-3">
							<button id="pass_dropoff" type="button" class="btn btn-primary px-5 respo_fullwidth">OK</button>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div id="CustomMobileDateModal" class="custom-fullscreen-modal">
			<div class="custom-modal-content">
				<button type="button" class="btn-close custom-close-modal"></button>
				<div class="custom-modal-data">
					<h2><?=getLabel('sis_select_vehicle_date_range') ?: 'Select a date range'?></h2>
					<div id="errorAlertDate" class="alert bg-danger show text-white mt-3 mb-0 alert-dismissible" role="alert" style="display: none;">
						<span><?=getLabel('sis_select_vehicle_date_range_error') ?: 'You must select a date range'?></span>
					</div>
					<div id="mobile_cal_show" class="mt-3" style="position: relative;">
						<div class="spinner-container hiddenSpinner" >
							<div class="spinner-border text-primary" role="status">
								<span class="visually-hidden"><?=getLabel('sis_loading_dots') ?: 'Loading...'?></span>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-md-auto mb-3 mt-3">
							<button  type="button" class="btn btn-primary px-5 respo_fullwidth select_date_range">OK</button>
						</div>	
					</div>
				</div>
			</div>
		</div>
		<?php } else { ?>
		<div class="body-wrapper add_order_template">
			<div class="container-fluid container_measure pt-0">
				<div class="container-fluid p-0 px-3">
					<div class="row mb-3">
						<div class="col p-0 ">
							<h2><?=getLabel('sis_add_new_boking') ?: 'Add new booking'  ?></h2> <!-- Trigger button -->
						</div> 
					</div>
					<div class="row mb-3">
						<div class="card rounded-2 p-3">
							<div class="text-center">
								<div class="row justify-content-md-center mb-1">
									<div class="col-md-8">
										<span class="text-muted display-6">
											<iconify-icon icon="fluent:vehicle-car-16-regular" class="fs-10 mb-3 mt-3 text-primary"></iconify-icon>
											<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><path fill="currentColor" d="M6 9a.749.749 0 1 1-1.498 0A.749.749 0 0 1 6 9m4.749.749a.749.749 0 1 0 0-1.498a.749.749 0 0 0 0 1.498M3.034 6.074L3.044 6H2.5a.5.5 0 0 1 0-1h.673l.162-1.256A2 2 0 0 1 5.32 2h5.36a2 2 0 0 1 1.984 1.747L12.823 5h.677a.5.5 0 0 1 0 1h-.549l.01.072A1.5 1.5 0 0 1 14 7.5v3a1.5 1.5 0 0 1-1.5 1.5h-.003v1.25a.75.75 0 1 1-1.5 0V12H5v1.25a.75.75 0 0 1-1.5 0V12A1.5 1.5 0 0 1 2 10.5v-3a1.5 1.5 0 0 1 1.034-1.426m1.293-2.202L4.052 6h7.891l-.272-2.127A1 1 0 0 0 10.68 3H5.32a1 1 0 0 0-.992.872M12.5 11a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-9a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5z"></path></svg>
										</span>
										<h2 class="mb-4"><?= getLabel('sis_add_vehicle_missing_add_order_title') ?: 'No vehicles available' ?></h2>
										<p class="fw-normal card-subtitle mb-6"> 
											<?= getLabel('sis_add_vehicle_missing_add_order') ?: 'You must add at least one active vehicle to be able to proceed with bookings' ?>
										</p><br>
									</div>
								</div>
								<div class="justify-content-center">
									<a href="/admin/vehicles/add" class="mb-2 btn btn-rounded btn-primary respo_full_width_button pe-4">
									<i class="ti ti-plus fs-4 me-2"></i><?=getLabel('sis_add_vehicle_add_short') ?: 'Add vehicle' ?></a>
								</div>
							</div>
						</div>
					</div>	
				</div>
			</div>
		</div>
	<?php } ?>
	<script>
		$(document).ready(function () {
			// Get references to containers
			const desktopContainer = document.querySelector('.discount_desktop_container');
			const mobileContainer = document.querySelector('.discount_mobile_container');
			const discountInput = document.getElementById('discountInput'); // The input field to move
			function handleResponsiveDiscount() {
				if (window.innerWidth >= 769) {
					// Move to desktop container
					if (!desktopContainer.contains(discountInput)) {
						desktopContainer.appendChild(discountInput.parentElement); // Move the entire input-group
					}
					} else {
					// Move to mobile container
					if (!mobileContainer.contains(discountInput)) {
						mobileContainer.appendChild(discountInput.parentElement); // Move the entire input-group
					}
				}
			}
			// Initial check on page load
			handleResponsiveDiscount();
			// Re-check on window resize
			$(window).resize(function () {
				handleResponsiveDiscount();
			});
		});
		// DEFINE GLOBALS
		function getCurrentTime() 
		{
			const now = new Date();
			const hours = String(now.getHours()).padStart(2, '0');
			const minutes = String(now.getMinutes()).padStart(2, '0');
			return `${hours}:${minutes}`;
		}
		let selectedVehicleId = 0;
		let selectedStart = '';
		let selectedEnd = '';
		let TotalDays = 1;
		let disabledDates = '';
		let PickupLocation = '';
		let PickupTime = getCurrentTime();
		let DropoffTime = '23:59';	
		let DropoffLocation = '';
		let RequiredDeposit = 0;
		let TotalDiscount = 0;
		let TotalNoDiscount = 0;
		let TotalVehicle = 0;
		let TotalToBePaid = 0;
		let blockedDaysCount = 0;
		let today = new Date();
		let bookedDates = []; 
		let displayedYear = null;
		let displayedMonth = null;
		let tenantId = <?=$this_tenant['id']?>; // Assuming this is populated from PHP
		let ProductTotalPrice = 0;
		let productCount = 0; // Counter for selected products
		var customLocale = {
			firstDayOfWeek: <?=$startDay?>, // Start week on Sunday
			weekdays: {
				shorthand: [
				getLabel('weekday_sunday'),
				getLabel('weekday_monday'),
				getLabel('weekday_tuesday'),
				getLabel('weekday_wednesday'),
				getLabel('weekday_thursday'),
				getLabel('weekday_friday'),
				getLabel('weekday_saturday'),
				],
				longhand: [
				getLabel('weekday_sunday'),
				getLabel('weekday_monday'),
				getLabel('weekday_tuesday'),
				getLabel('weekday_wednesday'),
				getLabel('weekday_thursday'),
				getLabel('weekday_friday'),
				getLabel('weekday_saturday'),
				],
			},
			months: {
				shorthand: [
				getLabel('month_january_short'),
				getLabel('month_february_short'),
				getLabel('month_march_short'),
				getLabel('month_april_short'),
				getLabel('month_may_short'),
				getLabel('month_june_short'),
				getLabel('month_july_short'),
				getLabel('month_august_short'),
				getLabel('month_september_short'),
				getLabel('month_october_short'),
				getLabel('month_november_short'),
				getLabel('month_december_short'),
				],
				longhand: [
				getLabel('month_january'),
				getLabel('month_february'),
				getLabel('month_march'),
				getLabel('month_april'),
				getLabel('month_may'),
				getLabel('month_june'),
				getLabel('month_july'),
				getLabel('month_august'),
				getLabel('month_september'),
				getLabel('month_october'),
				getLabel('month_november'),
				getLabel('month_december'),
				],
			},
			rangeSeparator: ' - ', // Separator for range mode
		};
		function getLabel(key) {
			const labels = {
				'prev': '‹',
				'next': '›',
				'close': '×',
				'reset': '<?=getLabel('sis_reset'); ?>',
				'apply': '<?=getLabel('sis_apply'); ?>',
				'not_allowed': '<?=getLabel('sis_not_allowed'); ?>',
				'day_one': '<?=getLabel('sis_sis_day'); ?>',
				'day_other': '<?=getLabel('sis_sis_days'); ?>',
				'day_few': '<?=getLabel('sis_sis_days'); ?>',
				'weekday_sunday': '<?=getLabel('sis_sunday_short'); ?>',
				'weekday_monday': '<?=getLabel('sis_monday_short'); ?>',
				'weekday_tuesday': '<?=getLabel('sis_tuesday_short'); ?>',
				'weekday_wednesday': '<?=getLabel('sis_wednesday_short'); ?>',
				'weekday_thursday': '<?=getLabel('sis_thursday_short'); ?>',
				'weekday_friday': '<?=getLabel('sis_friday_short'); ?>',
				'weekday_saturday': '<?=getLabel('sis_saturday_short'); ?>',
				'week_prefix': '---',
				'month_january': '<?=getLabel('sis_january'); ?>',
				'month_february': '<?=getLabel('sis_february'); ?>',
				'month_march': '<?=getLabel('sis_march'); ?>',
				'month_april': '<?=getLabel('sis_april'); ?>',
				'month_may': '<?=getLabel('sis_may'); ?>',
				'month_june': '<?=getLabel('sis_june'); ?>',
				'month_july': '<?=getLabel('sis_july'); ?>',
				'month_august': '<?=getLabel('sis_august'); ?>',
				'month_september': '<?=getLabel('sis_september'); ?>',
				'month_october': '<?=getLabel('sis_october'); ?>',
				'month_november': '<?=getLabel('sis_november'); ?>',
				'month_december': '<?=getLabel('sis_december'); ?>',
				'month_january_short': '<?=getLabel('sis_january_short'); ?>',
				'month_february_short': '<?=getLabel('sis_february_short'); ?>',
				'month_march_short': '<?=getLabel('sis_march_short'); ?>',
				'month_april_short': '<?=getLabel('sis_april_short'); ?>',
				'month_may_short': '<?=getLabel('sis_may_short'); ?>',
				'month_june_short': '<?=getLabel('sis_june_short'); ?>',
				'month_july_short': '<?=getLabel('sis_july_short'); ?>',
				'month_august_short': '<?=getLabel('sis_august_short'); ?>',
				'month_september_short': '<?=getLabel('sis_september_short'); ?>',
				'month_october_short': '<?=getLabel('sis_october_short'); ?>',
				'month_november_short': '<?=getLabel('sis_november_short'); ?>',
				'month_december_short': '<?=getLabel('sis_december_short'); ?>',
			};
			return labels[key] || key;
		}
		function yourPluralizationFunction(i, locale) {
			if (i === 1) return locale.one;
			if (i >= 2 && i <= 4) return locale.few;
			return locale.other;
		}
		<!---- *****IMPORTANT SHOW CALENDAR*****------>
		ShowFlatpicker();
		<!---- *****IMPORTANT SHOW CALENDAR*****------>
		function formatDateLocal(date) {
			const year = date.getFullYear();
			const month = String(date.getMonth() + 1).padStart(2, "0"); // Month is 0-based
			const day = String(date.getDate()).padStart(2, "0");
			return `${year}-${month}-${day}`;
		}
		<!------ WHERE TO RENDER CALENDAR ------------>
		document.addEventListener('DOMContentLoaded', function() {
			updateCalendarContainer();
			// Handle window resize to dynamically update calCount and reinitialize the picker
			$(window).resize(function() {
				updateCalendarContainer();
				cloneMonthMobile();
			});
		});
		function updateCalendarContainer() {
			const datepickerContainer = document.getElementById('cal-render-block');
			const desktopContainer = document.getElementById('datepicker-container');
			const mobileContainer = document.getElementById('mobile_cal_show');
			// Validate that datepickerContainer exists
			if (!datepickerContainer) {
				
				return;
			}
			// Ensure desktopContainer and mobileContainer exist
			if (!desktopContainer || !mobileContainer) {
				
				return;
			}
			if (window.innerWidth >= 769) {
				// Move to desktop container
				if (!desktopContainer.contains(datepickerContainer)) {
					desktopContainer.appendChild(datepickerContainer); // Safely append
					$('#datepicker-container').show(); // Show desktop container
				}
				} else {
				// Move to mobile container
				if (!mobileContainer.contains(datepickerContainer)) {
					mobileContainer.appendChild(datepickerContainer); // Safely append
					$('#datepicker-container').hide(); // Hide desktop container
				}
			}
		}
		// Initial check on page load
		document.addEventListener('DOMContentLoaded', () => {
			updateCalendarContainer();
			window.addEventListener('resize', updateCalendarContainer);
		});
		<!---------- START VEHICLE SELECT ------------>
		$(document).ready(function () {
			// When a row is clicked, store the vehicle ID
			$('.search_vehicle_container').on('click', function () {
				selectedVehicleId = $(this).data('vehicle'); // Get the vehicle ID from the row
				$('.search_vehicle_container').removeClass('dynamic_active'); // Remove active class from all
				$(this).addClass('dynamic_active'); // Add active class to the selected row
			});
			// On "OK confirm" button click
			$('.vhcl_selector').on('click', function () {
				if (selectedVehicleId !== null && selectedVehicleId !== "") {
					$('input[name="vehicle"]').val(selectedVehicleId);
					const vehicleName = $(`.search_vehicle_container[data-vehicle="${selectedVehicleId}"] [data-vehicle-name]`).data('vehicle-name');
					const vehiclePlates = $(`.search_vehicle_container[data-vehicle="${selectedVehicleId}"] [data-vehicle-plates]`).data('vehicle-plates');
					const vehicleImageSrc = $(`.search_vehicle_container[data-vehicle="${selectedVehicleId}"] .dynamic_selector_image img`).attr('src');
					$('#nameUpdate').html('<strong>' + vehicleName + '</strong>');
					$('#PlatesUpdate').text(vehiclePlates);
					// Replace SVG with the selected vehicle image
					const imgUpdateContainer = $('#openVehicleSelect .selector_icon');
					if (selectedVehicleId != 0){
						SinglevehiclePrice();
						updateCalendar(selectedVehicleId);
						if (imgUpdateContainer.find('svg').length > 0) {
							imgUpdateContainer.empty(); // Remove the SVG
							$('#openVehicleSelect .text-side-container').css('border', 'none');
							imgUpdateContainer.append(`<img id="imgUpdate" src="${vehicleImageSrc}" alt="Selected Vehicle Image">`);
							} else {
							// Update the src if the image already exists
							$('#imgUpdate').attr('src', vehicleImageSrc);
						}
						} else if (selectedVehicleId == 0){
						updateCalendar(0);
						$('#openVehicleSelect .text-side-container').css('border-left', '1px solid #dedede');
						imgUpdateContainer.empty(); // Remove the SVG
						imgUpdateContainer.append('<svg  viewBox="0 0 42.89 37.63" xmlns="http://www.w3.org/2000/svg"><path id="Path_1" data-name="Path 1" d="M34.76,5.5l1.67,7.19H6.46L8.12,5.5a2.288,2.288,0,0,1,.35-.83,2.84,2.84,0,0,1,.65-.69,3.954,3.954,0,0,1,.74-.43,2.4,2.4,0,0,1,.89-.18H32.14a2.4,2.4,0,0,1,.89.18,3.588,3.588,0,0,1,.73.43,2.882,2.882,0,0,1,.66.69,2.273,2.273,0,0,1,.34.83ZM33.96.35A5.163,5.163,0,0,0,32.14,0H10.75A5.26,5.26,0,0,0,8.92.35,6.806,6.806,0,0,0,7.16,1.39a6.1,6.1,0,0,0-1.3,1.47,7.493,7.493,0,0,0-.85,1.89L3.06,13.4l-.2.12c-.23.14-.44.28-.64.43a6.3,6.3,0,0,0-.56.5A6.231,6.231,0,0,0,.42,16.39,5.891,5.891,0,0,0,0,18.61v7.25a6.332,6.332,0,0,0,.44,2.28,5.656,5.656,0,0,0,1.22,1.88l.01.01a5.443,5.443,0,0,0,1.82,1.29,5.717,5.717,0,0,0,2.22.45l2.35.01v3.54a2.758,2.758,0,0,0,.27,1.19,1.866,1.866,0,0,0,.69.78l.01.01a1.8,1.8,0,0,0,1.01.33,1.684,1.684,0,0,0,.86-.24,2.108,2.108,0,0,0,.68-.65,2.024,2.024,0,0,0,.35-1.11V31.77H30.95v3.86a2.024,2.024,0,0,0,.35,1.11,2.108,2.108,0,0,0,.68.65,1.712,1.712,0,0,0,.86.24,1.834,1.834,0,0,0,1.02-.33l.01-.01a1.844,1.844,0,0,0,.68-.78,2.633,2.633,0,0,0,.28-1.19V31.78h2.34a5.964,5.964,0,0,0,2.23-.46,5.306,5.306,0,0,0,1.81-1.29l.02-.01a5.633,5.633,0,0,0,1.21-1.88,6.135,6.135,0,0,0,.45-2.28V18.61a5.891,5.891,0,0,0-.42-2.22,6.54,6.54,0,0,0-1.25-1.96c-.18-.17-.36-.33-.55-.48s-.42-.29-.65-.43l-.19-.12L37.87,4.75a7.157,7.157,0,0,0-.85-1.89,6.063,6.063,0,0,0-1.29-1.47A6.7,6.7,0,0,0,33.96.35ZM38.1,28.19a2.71,2.71,0,0,1-1.03.21H5.82a2.721,2.721,0,0,1-1.04-.21,2.009,2.009,0,0,1-.76-.56,2.5,2.5,0,0,1-.75-1.77V18.61a2.9,2.9,0,0,1,.19-1.03,2.584,2.584,0,0,1,.57-.86,2.986,2.986,0,0,1,.79-.55,2.114,2.114,0,0,1,.89-.21H37.17a2.079,2.079,0,0,1,.89.21,3.223,3.223,0,0,1,.8.55,2.594,2.594,0,0,1,.75,1.89v7.25a2.33,2.33,0,0,1-.2.96,2.5,2.5,0,0,1-.54.81,1.968,1.968,0,0,1-.77.56ZM10.05,20.24a1.821,1.821,0,0,0-1.33.58,2.013,2.013,0,0,0-.56,1.41,1.861,1.861,0,0,0,1.89,1.89,1.855,1.855,0,0,0,1.33-.58,2.032,2.032,0,0,0,.55-1.41,1.838,1.838,0,0,0-.54-1.34A1.9,1.9,0,0,0,10.05,20.24Zm24.12.58a1.838,1.838,0,0,0-1.33-.58,1.922,1.922,0,0,0-1.35.55,1.879,1.879,0,0,0-.54,1.34,2.04,2.04,0,0,0,.56,1.41,1.838,1.838,0,0,0,1.33.58,1.861,1.861,0,0,0,1.89-1.89,2.058,2.058,0,0,0-.56-1.41Z"></path></svg>');
					}
					$('#vehicleSelectDynamic').removeClass('show');
				}
				
			});
			// Open vehicle modal
			$('#openVehicleSelect').click(function () {
				$('#vehicleSelectDynamic').addClass('show');
				$('.vehicle-filter-btn').removeClass('active');
				$('.vehicle-filter-btn[data-filter="all"]').addClass('active');
				$('.search_vehicle_container').show();
			});
			// Filter vehicles by type
			$('.vehicle-filter-btn').click(function () {
				const filter = $(this).data('filter');
				$('.vehicle-filter-btn').removeClass('active');
				$(this).addClass('active');
				$('.search_vehicle_container').each(function () {
					const category = $(this).data('category');
					if (filter === 'all' || filter === category) {
						$(this).show();
						} else {
						$(this).hide();
					}
				});
			});
			// Live vehicle search
			$('#LiveSearchVeh').on('input', function () {
				const searchVal = $(this).val().toLowerCase();
				$('.search_vehicle_container').each(function () {
					const text = $(this).text().toLowerCase();
					const category = $(this).data('category');
					const activeFilter = $('.vehicle-filter-btn.active').data('filter');
					if (
					(text.includes(searchVal) && activeFilter === 'all') || 
					(text.includes(searchVal) && category === activeFilter)
					) {
						$(this).show();
						} else {
						$(this).hide();
					}
				});
			});
			// Close vehicle modal
			$('.custom-close-modal, .vhcl_selector, #vehicleSelectDynamic').click(function (event) {
				// Separate logic for modal background and specific close buttons
				if (event.target.id === 'vehicleSelectDynamic' || $(event.target).hasClass('custom-close-modal') || $(event.target).hasClass('modCancel')) {
					$('#LiveSearchPick').val(''); // Clear the search input
					$('.vehicle-filter-btn').removeClass('active'); // Remove active state from all buttons
					$('.vehicle-filter-btn[data-filter="all"]').addClass('active'); // Set 'all' as active filter
					$('.search_vehicle_container').show(); // Show all items
					$('#vehicleSelectDynamic').removeClass('show'); // Close modal
					$('.vhcl_selector').removeClass('dynamic_active'); // Remove dynamic_active from all dynamic_selector elements
				}
			});
		});
		<!---------------START PICKUP LOC AND  TIME----------->
		$(document).ready(function () {
			// Open modal
			$('#openPikupTime').click(function () {
				$('#PickupTiming').addClass('show');
			});
			// Close modal
			$('.custom-close-modal, #PickupTiming').click(function (event) {
				if (event.target.id === 'PickupTiming' || $(event.target).hasClass('custom-close-modal')) {
					// Reset search and show all containers
					//$('#LiveSearchPick').val(''); // Clear the search input per meomentin kshtu
					//  $('.search_pickup_container').show(); // Show all items
					$('#PickupTiming').removeClass('show');
				}
			});
			// Live search for pickup locations
			$('#LiveSearchPick').on('keyup', function () {
				const searchText = $(this).val().toLowerCase();
				$('.search_pickup_container').each(function () {
					const itemText = $(this).find('.search_able_item').text().toLowerCase();
					if (itemText.includes(searchText)) {
						$(this).show(); // Show matching items
						} else {
						$(this).hide(); // Hide non-matching items
					}
				});
			});
			// Toggle AM and PM groups
			$('.am_toggle').on('click', function () {
				$('.am_toggle').addClass('active'); // Activate AM toggle
				$('.pm_toggle').removeClass('active'); // Deactivate PM toggle
				$('.am_group').show(); // Show AM group
				$('.pm_group').hide(); // Hide PM group
			});
			$('.pm_toggle').on('click', function () {
				$('.pm_toggle').addClass('active'); // Activate PM toggle
				$('.am_toggle').removeClass('active'); // Deactivate AM toggle
				$('.pm_group').show(); // Show PM group
				$('.am_group').hide(); // Hide AM group
			});
		});
		$(document).ready(function () {
			let selectedLocationText = '';
			let selectedLocationCountry = '';
			let selectedTimeText = '';
			let selectedLocationId = '';
			let selectedTimeRaw = '';
			// Handle location selection
			$('.pick_selector').on('click', function () {
				$('.pick_selector').removeClass('dynamic_active'); // Remove active class from all selectors
				$(this).addClass('dynamic_active'); // Add active class to the clicked selector
				selectedLocationId = $(this).data('pickup-loc'); // Location ID
				selectedLocationText = $(this).find('[data-pickup-address]').text().trim(); // Location address
				selectedLocationCountry = $(this).find('[data-pickup-country]').text().trim(); // Country text
				
			});
			// Handle time box selection
			$('.time-box').on('click', function () {
				$('.time-box').removeClass('time_active'); // Remove active class from all time-box elements
				$(this).addClass('time_active'); // Add active class to the clicked time-box
				selectedTimeRaw = $(this).data('pickup-time'); // Time in 24-hour format
				<?php if ($thisUser == 'us') { ?>
					if (selectedTimeRaw) {
						const [hours, minutes] = selectedTimeRaw.split(':');
						const ampm = hours >= 12 ? 'PM' : 'AM';
						const formattedHours = hours % 12 || 12; // Convert 0 to 12 for 12 AM
						selectedTimeText = `${formattedHours}:${minutes} ${ampm}`;
						
					} 
					<?php } else { ?>
					selectedTimeText = selectedTimeRaw; // Keep the time in 24-hour format
				<?php } ?>
			});
			// Pass data only when the OK button is clicked
			$('#pass_pickup').on('click', function () {
				if (selectedLocationText && selectedTimeRaw) {
					PickupTime = selectedTimeRaw;
					getDisabledDates(selectedVehicleId, PickupTime, DropoffTime);
					// Update the readonly inputs
					$('#pick_loc').val(selectedLocationId);
					$('#pick_time').val(selectedTimeRaw);
					// Update the text elements
					$('#pickup_update_address').text(selectedLocationText); // Update address
					$('#pickup_update_country').text(selectedLocationCountry); // Update country
					$('#pickup_time_update').html('<b>' + selectedTimeText + '</b>'); // Update time
					$('.time_pickup_unset').css('display', 'flex');
					// Close modal after selection
					$('#PickupTiming').removeClass('show');
					pickupTime = selectedTimeRaw || '00:00'; // Capture the return time, default to '00:00' if not set
					if (selectedStart && selectedEnd) {
						GetDisabledvehicles();
					};
					SinglevehiclePrice()
					updateCalendar();
					$('#openPikupTime').removeClass('is_required');
					$('#errorAlertPickup').hide();
					} else {
					// Show the alert
					$('#errorAlertPickup').show();
					$('#PickupTiming').animate({ scrollTop: 0 }, 'fast');
				}
			});
			// Close modal without passing data
			$('.custom-close-modal, .pickup_cancel').on('click', function () {
				$('#PickupTiming').removeClass('show');
				$('#errorAlertPickup').hide();
			});
		});
		<!---------------END PICKUP LOC AND  TIME----------->
		<!---------------START DROPOFF TIME AND LOCATION ----------->
		$(document).ready(function () {
			let selectedDropoffLocationText = '';
			let selectedDropoffLocationCountry = '';
			let selectedDropoffTimeText = '';
			let selectedDropoffLocationId = '';
			let selectedDropoffTimeRaw = '';
			// Open Dropoff Modal
			$('#openDropoffTime').click(function () {
				$('#DropoffTiming').addClass('show');
			});
			// Close Dropoff Modal
			$('.custom-close-modal, .dropoff_cancel').click(function () {
				$('#DropoffTiming').removeClass('show');
				$('#errorAlertDropoff').hide();
			});
			// Live search for dropoff locations
			$('#LiveSearchDrop').on('keyup', function () {
				const searchText = $(this).val().toLowerCase();
				$('.search_dropoff_container').each(function () {
					const itemText = $(this).find('.search_able_item').text().toLowerCase();
					if (itemText.includes(searchText)) {
						$(this).show(); // Show matching items
						} else {
						$(this).hide(); // Hide non-matching items
					}
				});
			});
			// Toggle AM and PM groups
			$('.am_toggle_ret').on('click', function () {
				$('.am_toggle_ret').addClass('active'); // Activate AM toggle
				$('.pm_toggle_ret').removeClass('active'); // Deactivate PM toggle
				$('.am_group_ret').show(); // Show AM group
				$('.pm_group_ret').hide(); // Hide PM group
			});
			$('.pm_toggle_ret').on('click', function () {
				$('.pm_toggle_ret').addClass('active'); // Activate PM toggle
				$('.am_toggle_ret').removeClass('active'); // Deactivate AM toggle
				$('.pm_group_ret').show(); // Show PM group
				$('.am_group_ret').hide(); // Hide AM group
			});
			$(document).on('click', '.drop_selector', function () {
				$('.drop_selector').removeClass('dynamic_active');
				$(this).addClass('dynamic_active');
				selectedDropoffLocationId = $(this).data('dropoff-loc');
				selectedDropoffLocationText = $(this).find('[data-dropoff-address]').text().trim();
				selectedDropoffLocationCountry = $(this).find('[data-dropoff-country]').text().trim();
			});
			$(document).on('click', '.time-box-ret', function () {
				$('.time-box-ret').removeClass('time_active');
				$(this).addClass('time_active');
				selectedDropoffTimeRaw = $(this).data('dropoff-time');
				<?php if ($thisUser == 'us') { ?>
					if (selectedDropoffTimeRaw) {
						const [hours, minutes] = selectedDropoffTimeRaw.split(':');
						const ampm = hours >= 12 ? 'PM' : 'AM';
						const formattedHours = hours % 12 || 12;
						selectedDropoffTimeText = `${formattedHours}:${minutes} ${ampm}`;
					}
					<?php } else { ?>
					selectedDropoffTimeText = selectedDropoffTimeRaw;
				<?php } ?>
			});
			// Pass data only when the OK button is clicked
			$('#pass_dropoff').on('click', function () {

				if (selectedDropoffLocationText && selectedDropoffTimeRaw) {
					DropoffTime = selectedDropoffTimeRaw;
					getDisabledDates(selectedVehicleId, PickupTime, DropoffTime);
						$('#drop_loc').val(selectedDropoffLocationId);
						$('#drop_time').val(selectedDropoffTimeRaw);
						
						// Update the text elements
						$('#dropoff_update_address').text(selectedDropoffLocationText); // Update address
						$('#dropoff_update_country').text(selectedDropoffLocationCountry); // Update country
						$('#dropoff_time_update').html('<b>' + selectedDropoffTimeText + '</b>'); // Update time
						
						// Close modal after selection
						$('.time_dropoff_unset').css('display', 'flex');
						$('#DropoffTiming').removeClass('show');
					returnTime = selectedDropoffTimeRaw || '00:00'; // Capture the return time, default to '00:00' if not set
					if (selectedStart && selectedEnd) {
						GetDisabledvehicles();
					}
					SinglevehiclePrice()
					updateCalendar();
					$('#errorAlertDropoff').hide();
					$('#openDropoffTime').removeClass('is_required');
					} else {
						// Show the alert
					$('#errorAlertDropoff').show();
					$('#DropoffTiming').animate({ scrollTop: 0 }, 'fast');
				}
			});
		});
		<!---------------END DROPOFF TIME AND LOCATION ----------->
		<!--------------- MOBILE DATE MODAL  ----------->
		$(document).ready(function() {
			// Open modal
			$('#MobileDateModal').click(function() {
				$('#CustomMobileDateModal').addClass('show');
			});
			// Close modal
			$('.custom-close-modal, #CustomMobileDateModal').click(function(event) {
				// Close only when clicking outside modal-content or on the close button
				if (event.target.id === 'CustomMobileDateModal' || $(event.target).hasClass('custom-close-modal')) {
					$('#CustomMobileDateModal').removeClass('show');
					$('#errorAlertDate').hide(); 
				}
			});
			$('.custom-cancel-modal, #CustomMobileDateModal').click(function(event) {
				// Close only when clicking outside modal-content or on the close button
				if (event.target.id === 'CustomMobileDateModal' || $(event.target).hasClass('custom-cancel-modal')) {
					$('#CustomMobileDateModal').removeClass('show');
					$('#errorAlertDate').hide(); 
				}
			});
			$('.select_date_range').click(function () {
				var fromValue = $('#fromInput').val();
				var toValue = $('#toInput').val();
				// Check if either of the values is missing
				if (!fromValue || !toValue) {
					// Show the error alert and scroll to the top
					$('#errorAlertDate').show();
					$('#CustomMobileDateModal').animate({ scrollTop: 0 }, 'fast');
					} else {
					// Hide the modal if both inputs have values
					$('#errorAlertDate').hide(); // Optional: hide the error if it was previously shown
					$('#CustomMobileDateModal').removeClass('show');
				}
			});
		});
		<!--- CONFLICT MODAL CLOSE ----> 
		<!--- MASTER CALENDAR PDATE BOOKED ELEMENTS ----> 
		function updateCalendar() {
			if (selectedVehicleId && selectedVehicleId != 0){
				showSpinner();
				getDisabledDates(selectedVehicleId, PickupTime, DropoffTime).then(disabledDates => {
					bookedDates = disabledDates; 
					// Check if start and end dates are set
					if (selectedStart && selectedEnd) {
						const currentRange = getDatesInRange(selectedStart, selectedEnd);
						// Trigger logic for current range
						// Optionally check for overlaps
						if (blockedDaysCount > 0) {
							$('#CustomMobileDateModal').removeClass('show'); // Close calendar  modal to show error
							const errModal = new bootstrap.Modal(document.getElementById('errModal')); // Initialize modal instance
							document.getElementById('cal_error_message').textContent =
							'<?= getLabel('sis_sel_block') ?: 'You have selected'?> ' + blockedDaysCount + ' <?= getLabel('sis_sel_block') ?: 'days in the blocked range.'?>';
							errModal.show(); // Show the modal
							// Attach event listeners to all buttons with class 'okCloseBtn'
							const okCloseButtons = document.getElementsByClassName('okCloseBtn');
							for (let i = 0; i < okCloseButtons.length; i++) {
								okCloseButtons[i].addEventListener('click', function () {
									errModal.hide(); // Hide the modal when 'OK' is clicked
								});
							}
							// Reset picker selection
							calendar.clear();
							selectedStart = '';
							selectedEnd = '';
							} else {
						}
						} else {
					}
					calendar.redraw(); // Redraw the calendar to apply changes
					updateNextDayClasess();
					cloneMonthMobile();
					hideSpinner();
				});
				} else{
						bookedDates = [];
						calendar.redraw(); // Redraw the calendar to apply changes
						updateNextDayClasess();
						cloneMonthMobile();
						hideSpinner();
			}
		}
		function ShowFlatpicker() {
			// *****  INITIALIZE FLATPICKER CALENDAR **********//
			calendar = flatpickr("#cal-render", {
				mode: "range", // Enable range selection
				inline: true, // Show the picker inline
				disable: bookedDates,
				ariaDateFormat: "Y-m-d", // Accessible format for screen readers
				prevArrow: "<i class='ti ti-chevron-left'></i>",
				nextArrow: "<i class='ti ti-chevron-right'></i>",
				dateFormat: "Y-m-d", // Format for selected dates
				showMonths: 2, // Display 2 months side by side
				minDate: new Date(), // Ensure no selection for past dates
				locale: customLocale,
				onDayCreate: function(dObj, dStr, fp, dayElem) {
					const date = dayElem.dateObj.toISOString().split("T")[0]; // Format date as 'YYYY-MM-DD'
					// Adjust bookedDates: Remove the last day and add one day at the beginning
					const adjustedBookedDates = [...bookedDates];
					if (adjustedBookedDates.length > 0) {
						const firstDate = new Date(adjustedBookedDates[0]);
						if (!isNaN(firstDate)) {
							firstDate.setDate(firstDate.getDate() - 1);
							adjustedBookedDates.unshift(firstDate.toISOString().split("T")[0]);
							adjustedBookedDates.pop();
							} else {
							console.error("Invalid:", adjustedBookedDates[0]);
						}
					}
					// Check if the current date is in the adjusted bookedDates
					if (adjustedBookedDates.includes(date)) {
						dayElem.classList.add("booked"); // Add custom 'booked' class
					}
				},
				onReady: function (selectedDates, dateStr, instance) {
					cloneMonthMobile();
					// Handle two-month view initialization
					displayedYear = instance.currentYear;
					displayedMonth = instance.currentMonth;
					// Ensure the calendar initializes at the correct view (for the first visible month)
					if (displayedYear !== null && displayedMonth !== null) {
						// Jump to the first month of the two-month view
						instance.jumpToDate(new Date(displayedYear, displayedMonth, 1));
					}
				},
				onMonthChange: function(selectedDates, dateStr, instance) {
					// Keep track of the month user is looking at
					displayedYear = instance.currentYear;
					displayedMonth = instance.currentMonth;
					updateNextDayClasess();
					cloneMonthMobile();
				},
				onChange: function (selectedDates) {
					if (selectedDates.length === 2) {
						const [start, end] = selectedDates;
						// Use the helper function to format dates in local time
						selectedStart = formatDateLocal(start);
						selectedEnd = formatDateLocal(end);
						const blockedDaysCount = checkOverlappingRanges(start, end);
						if (blockedDaysCount > 0) {
							// Show warning
							$('#CustomMobileDateModal').removeClass('show'); // Close calcar  modal to show error
							document.getElementById("cal_error_message").textContent =
							document.getElementById('cal_error_message').textContent = '<?= getLabel('sis_sel_block') ?: 'You have selected'?> ' + (blockedDaysCount) +' <?= getLabel('sis_sel_block_days_range') ?: 'days in the blocked range.'?> ';
							const errModal = new bootstrap.Modal(
							document.getElementById("errModal")
							);
							errModal.show();
							// Reset picker selection
							calendar.clear();
							selectedStart = '';
							selectedEnd = '';
							} else {
							<?php if ($allowSameDayBooking != 1){ ?>
								// IF SAME DATE ADD ONE MORE
								if (selectedStart === selectedEnd) {
									// Increment selectedEnd by one day
									selectedEnd = new Date(selectedEnd).fp_incr(1);
									// Alert the new selected end date in YYYY-MM-DD format
									const formattedDate = flatpickr.formatDate(selectedEnd, "Y-m-d");
									// Find the day element in the rendered calendar and add the class
									const dayElements = document.querySelectorAll(".flatpickr-day"); // Get all day elements
									dayElements.forEach((dayElem) => {
										const ariaLabel = dayElem.getAttribute("aria-label"); // Get the aria-label attribute
										// Convert aria-label to a Date for comparison
										if (ariaLabel) {
											const cellDate = new Date(ariaLabel); // Parse the date from aria-label
											if (
											cellDate.getFullYear() === selectedEnd.getFullYear() &&
											cellDate.getMonth() === selectedEnd.getMonth() &&
											cellDate.getDate() === selectedEnd.getDate()
											) {
												dayElem.classList.add("endRange"); // Add your custom class
												} else {
												dayElem.classList.remove("endRange"); // Remove the class from other days
											}
										}
									});
									// NEE ADD ONE MORE ASSIGN 
									selectedEnd = formattedDate;
								}
							<?php } ?>
							// Update UI and trigger actions
							$('#fromInput').val(selectedStart);
							$('#toInput').val(selectedEnd);
							$('#MobileDateModal').removeClass('is_required');
							$('#datepicker-container').removeClass('is_required');
							// Define short month names using the existing getLabel function
							const shortMonthNames = [
								getLabel('month_january_short'),
								getLabel('month_february_short'),
								getLabel('month_march_short'),
								getLabel('month_april_short'),
								getLabel('month_may_short'),
								getLabel('month_june_short'),
								getLabel('month_july_short'),
								getLabel('month_august_short'),
								getLabel('month_september_short'),
								getLabel('month_october_short'),
								getLabel('month_november_short'),
								getLabel('month_december_short'),
								];
							// Format the start and end dates
							const start = new Date(selectedStart);
							const end = new Date(selectedEnd);
							const startDay = String(start.getDate()).padStart(2, '0');
							const startMonth = shortMonthNames[start.getMonth()];
							const startYear = start.getFullYear();
							const endDay = String(end.getDate()).padStart(2, '0');
							const endMonth = shortMonthNames[end.getMonth()];
							const endYear = end.getFullYear();
							
							<?php if ($thisUser == 'us' ) { ?>
								const displayStartDate = `${startMonth} ${startDay}, ${startYear}`;
								const displayEndDate = `${endMonth} ${endDay}, ${endYear}`;
								<?php }else{ ?>
								const displayStartDate = `${startDay} ${startMonth} ${startYear}`;
								const displayEndDate = `${endDay} ${endMonth} ${endYear}`;
							<?php }?>
							
							// Update UI elements
							$('#visual_start_date').text(displayStartDate);
							$('#visual_end_date').text(displayEndDate);
							$('#live_dates_unset').hide();
							$('#live_dates_container').show();
							SinglevehiclePrice();
							GetDisabledvehicles();
							fetchDisabledProducts();
						}
						} else {
						// Incomplete selection
						$('#fromInput').val('');
						$('#toInput').val('');
						selectedStart = '';
						selectedEnd = '';
					}
					cloneMonthMobile();
				}
			});
		}
		<!--  CRITICAL ADJUST MONTHS BENEATH FIRST MONTH VIEW ONLY -->
		function cloneMonthMobile() {
			if (window.innerWidth <= 769) {
				setTimeout(function() {
					let $secondMonth = $('.flatpickr-months .flatpickr-month').eq(1);
					$('.flatpickr-month').eq(1).addClass('MoveThis');
					var $clone = $('.MoveThis').clone().addClass('MoveThisClone').removeClass('MoveThis');;
					$('.flatpickr-days .dayContainer').eq(0).addClass('MoveHere');
					$('.MoveHere').after($clone);
				}, 0);
			}
		}
		<!--  CRITICAL ADJUST PREV NEXT 2 MONTHS MOVE  -->
		const prevMonthButton = calendar.prevMonthNav;
		const nextMonthButton = calendar.nextMonthNav;
		prevMonthButton.addEventListener("click", function (e) {
			e.stopPropagation();
			calendar.changeMonth(-2);
		});
		nextMonthButton.addEventListener("click", function (e) {
			e.stopPropagation();
			calendar.changeMonth(2);
		});
		function getSecondMonth(year, month) {
			let secondMonth = month + 1;
			let secondYear = year;
			if (secondMonth > 11) {
				secondMonth = 0; // January
				secondYear += 1;
			}
			return { year: secondYear, month: secondMonth };
		}
		function checkOverlappingRanges(start, end) {
			const validBookedDates = bookedDates.filter(dateStr => {
				const date = new Date(dateStr);
				return !isNaN(date);
			});
			const startTime = start.getTime();
			const endTime = end.getTime();
			return validBookedDates.reduce((count, dateStr) => {
				const bookedTime = new Date(dateStr).getTime();
				if (bookedTime >= startTime && bookedTime <= endTime) {
					count++;
				}
				return count;
			}, 0);
		}
		// Helper function to get all dates in a range
		function getDatesInRange(start, end) {
			const dates = [];
			let currentDate = new Date(start);
			while (currentDate <= end) {
				dates.push(currentDate.toISOString().split("T")[0]);
				currentDate.setDate(currentDate.getDate() + 1);
			}
			return dates;
		}
		<!-- SECOND FUNCTION TO ADD CLASESS TO NEXT EACHOTHER - THERE IS DIFFERENT ONE FOR CHANGING ENDDATE AS IT SHOULD --->
		function updateNextDayClasess() {
			<?php if ($allowSameDayBooking != 1){ ?>
				// Ensure selectedStart and selectedEnd are set
				if (selectedStart && selectedEnd) {
					const startDate = new Date(selectedStart);
					const endDate = new Date(selectedEnd);
					// Calculate the difference in days between startDate and endDate
					const differenceInTime = endDate.getTime() - startDate.getTime();
					const differenceInDays = differenceInTime / (1000 * 3600 * 24); // Convert milliseconds to days
					// Only apply class if the range is exactly 2 days or less
					if (differenceInDays <= 1) {
						const oneDayLater = new Date(startDate);
						oneDayLater.setDate(startDate.getDate() + 1);
						// Find all calendar day elements
						const dayElements = document.querySelectorAll(".flatpickr-day");
						dayElements.forEach((dayElem) => {
							const ariaLabel = dayElem.getAttribute("aria-label"); // Get the aria-label attribute
							if (ariaLabel) {
								const cellDate = new Date(ariaLabel); // Parse the date from aria-label
								// Add the class if the cellDate matches oneDayLater
								if (
								cellDate.getFullYear() === oneDayLater.getFullYear() &&
								cellDate.getMonth() === oneDayLater.getMonth() &&
								cellDate.getDate() === oneDayLater.getDate()
								) {
									dayElem.classList.add("endRange"); // Add the class
									} else {
									dayElem.classList.remove("endRange"); // Remove the class if not matching
								}
							}
						});
					} 
				}
			<?php } ?>
		}
		function getDisabledDates(selectedVehicleId, PickupTime = '', DropoffTime = '') {
			const tenantId = <?=$this_tenant['id']?>;
			let url = `/vehicle/get/dates/${tenantId}/${selectedVehicleId}`;
			// Append query parameters if available
			if (PickupTime) {
				url += `?pickup=${PickupTime}`;
			}
			if (DropoffTime) {
				url += (PickupTime ? '&' : '?') + `dropoff=${DropoffTime}`;
			}
			return fetch(url)
			.then(response => {
				if (!response.ok) {
					throw new Error(`HTTP error! Status: ${response.status}`);
				}
				return response.json();
			})
			.then(data => {
				// Validate the structure of the response
				if (data && Array.isArray(data.disabledDates)) {
					disabledDates = data.disabledDates; 
					return data.disabledDates; // Directly return the array of dates
					} else {
					throw new Error("Data does not contain the expected structure");
				}
			})
			.catch(error => {
				
				return []; // Return an empty array in case of an error
			})
			.finally(() => {
			});
		}
		<!--- CALCULATE SINGLE VEHICLE PRICE ------->
		function SinglevehiclePrice() {
			const url = `/vehicle/get/prices/${tenantId}/${selectedVehicleId || 0}?start_date=${selectedStart}&end_date=${selectedEnd}&start_time=${PickupTime}&end_time=${DropoffTime}`;
			fetch(url)
			.then(response => response.json())
			.then(data => {
				TotalVehicle = data.total_price;
				RequiredDeposit = data.total_deposit;
				calculateProducts();
				calculateTotal();
			})
			.catch(error => {
				
			});
		}
		<!--  CHECK BOOKED VEHICLES AND APPLY TO SELECTOR  HEAVY LOAD -->
		function GetDisabledvehicles() {
			const url = '/vehicle/get/orders/' + tenantId + '/' + selectedStart + '/' + selectedEnd+'?start_time='+PickupTime+'&end_time='+DropoffTime;
			// Fetch data from the server
			fetch(url)
			.then(response => {
				if (!response.ok) {
					throw new Error('Network response was not ok');
				}
				return response.json();
			})
			.then(data => {
				// Iterate through all vehicle containers in the modal
				$('.search_vehicle_container').each(function () {
					const vehicleId = $(this).data('vehicle'); // Get the vehicle ID from the container
					if (data.bookedVehicleIds.includes(vehicleId)) {
						// If the vehicle is booked, add the 'unavailable_vehicle' class and disable pointer events
						$(this).addClass('unavailable_vehicle disabled');
						$(this).find('.is_available').html('<div class="hstack  gap-2 mt-0 mt-md-0 text-danger"><span class="respo_hide text-danger fs-2 mt-2"><?= getLabel('sis_add_booked_these_days') ?: 'Booked on these days'?></span> <span class="d-block flex-shrink-0 round-10 rounded-circle issue-status-dot bg-danger mt-2"></span></div>'); 
						} else {
						// If the vehicle is available, remove the 'unavailable_vehicle' class and re-enable pointer events
						$(this).removeClass('unavailable_vehicle disabled');
						$(this).find('.is_available').html('<div class="hstack  gap-2 mt-0 mt-md-0 text-danger"><span class="respo_hide text-success fs-2 mt-2"><?= getLabel('sis_avaliable') ?: 'Avaliable'?></span> <span class="d-block flex-shrink-0 round-10 rounded-circle issue-status-dot bg-success mt-2"></span></div>'); 
						// Ensure click functionality is enabled for available vehicles
						$(this).on('click', function () {
							$(this).addClass('dynamic_active').siblings().removeClass('dynamic_active');
						});
					}
				});
				TotalDays = data.total_days;
				document.querySelector('.total_days_container').innerHTML = TotalDays;
				document.querySelector('.mobi_total_days').innerHTML = TotalDays;
				calculateProducts();
				calculateTotal();
			})
			.catch(error => {
			});
		}
		<!--  TRIGGER OPEN PRODUCT MODAL -->
		$('#openProducts').click(function () {
			$('#AddPoroducts').addClass('show');
		});
		// Close Dropoff Modal
		$('.custom-close-modal, .prod_cancel').click(function () {
			$('#AddPoroducts').removeClass('show');
			calculateProducts();
			$('#errorAlertDropoff').hide();
		});
		<!-- GET PRODUCT AVALIBILITY AND APPLY IN VIEW  -->
		function fetchDisabledProducts() {
			const url = `/prducts/get/disabled/${tenantId}?date=${selectedStart}&end_date=${selectedEnd}&start_time=${PickupTime}&end_time=${DropoffTime}`;
			// Step 1: Reset all checkboxes and hide out-of-stock messages before fetching new data
			document.querySelectorAll('.product-item').forEach(productItem => {
				const checkbox = productItem.querySelector('input[type="checkbox"]');
				const outOfStockMsg = productItem.querySelector('.out-of-stock-msg');
				// Re-enable the checkbox and hide the out-of-stock message
				checkbox.disabled = false;
				outOfStockMsg.style.display = 'none';
			});
			// Step 2: Fetch the out-of-stock products for the selected date range
			fetch(url)
			.then(response => response.json())
			.then(data => {
				if (data && Array.isArray(data.disabledProducts)) {
					// Loop through the out-of-stock products and disable the appropriate checkboxes
					data.disabledProducts.forEach(product => {
						const productItem = document.querySelector(`[data-product-id="${product.product_id}"]`);
						if (productItem) {
							const checkbox = productItem.querySelector('input[type="checkbox"]');
							const outOfStockMsg = productItem.querySelector('.out-of-stock-msg');
							// Disable the checkbox and show the out-of-stock message
							checkbox.disabled = true;
							outOfStockMsg.style.display = 'inline';
						}
					});
					} else {
					
				}
			})
			.catch(error => {
			});
		}
	</script>
	<script>
	// Function to check required fields and add 'is_required' class
		function validateRequiredFields() {
			// Check "from" and "to" fields
			if (!$('#fromInput').val() || !$('#toInput').val()) {
				$('#MobileDateModal').addClass('is_required');
				$('#datepicker-container').addClass('is_required');
				} else {
				$('#MobileDateModal').removeClass('is_required');
				$('#datepicker-container').removeClass('is_required');
			}
			// Check "pick_loc" and "pick_time" fields
			if (!$('#pick_loc').val() || !$('#pick_time').val()) {
				$('#openPikupTime').addClass('is_required');
				} else {
				$('#openPikupTime').removeClass('is_required');
			}
			// Check "drop_loc" and "drop_time" fields
			if (!$('#drop_loc').val() || !$('#drop_time').val()) {
				$('#openDropoffTime').addClass('is_required');
				} else {
				$('#openDropoffTime').removeClass('is_required');
			}
			// Scroll to the first "is_required" element
			const firstRequired = $('.is_required').first();
			if (firstRequired.length) {
				$('html, body').animate({
					scrollTop: firstRequired.offset().top - 50 // Adjust offset for better visibility
				}, 200); 
			}
		}
		// Run the validation on form submission only
		$('.needs-validation').on('submit', function (event) {
			validateRequiredFields(); // Custom validation logic
			if (!this.checkValidity()) { // Built-in Bootstrap validation
				event.preventDefault(); // Prevent form submission
				event.stopPropagation();
			}
			$(this).addClass('was-validated'); // Add Bootstrap validation classes
		});
		// OPTIONAL: To remove validation hints when users fix inputs
		$('.needs-validation input').on('input', function () {
			$(this).removeClass('is-invalid'); // Reset invalid styling on change
		});

		function showSpinner() {
			const spinners = document.querySelectorAll('.spinner-container');
			spinners.forEach(spinner => {
				spinner.classList.remove('hiddenSpinner'); // Remove the 'hidden' class to show the spinner
			});
		}
		function hideSpinner() {
			const spinners = document.querySelectorAll('.spinner-container');
			spinners.forEach(spinner => {
				spinner.classList.add('hiddenSpinner'); // Add the 'hidden' class to hide the spinner
			});
		}
		function calculateProducts() {
			ProductTotalPrice = 0;
			let productCount = 0; // Initialize product count
			const calculatedDays = TotalDays || 0; // Default to 0 if undefined
			// Loop through all product checkboxes
			document.querySelectorAll('.product-checkbox').forEach(function (checkbox) {
				const productPrice = parseFloat(checkbox.getAttribute('data-product-price')) || 0;
				const productModel = checkbox.getAttribute('data-product-model');
				const productItem = checkbox.closest('.product-item'); // Get the parent container for this product
				// Handle daily products
				if (productModel === 'daily') {
					const multiplier = calculatedDays > 0 ? calculatedDays : 1; // Use calculatedDays or default to 1
					const prcDailySpan = productItem.querySelector('.prc_daily');
					if (prcDailySpan) {
						prcDailySpan.textContent = `${multiplier} X`; // Update the daily multiplier
					}
					if (checkbox.checked) {
						ProductTotalPrice += productPrice * multiplier;
						productCount++;
					}
				}
				// Handle non-daily (full) products
				else {
					const prcFullSpan = productItem.querySelector('.prc_full');
					if (prcFullSpan) {
						prcFullSpan.textContent = `1 X`; // Always 1 X for full-price products
					}
					if (checkbox.checked) {
						ProductTotalPrice += productPrice;
						productCount++;
					}
				}
			});
			// Update spans based on the product count and total price
			const productsUpdate = document.getElementById('products_update');
			const productsUpdateSub = document.getElementById('products_update_sub');
			if (productCount > 0) {
				ProductTotalPrice = ProductTotalPrice;
				productsUpdate.textContent = `<?= getLabel('sis_prod_there_are') ?: 'There are'?> ${productCount} <?= getLabel('sis_prod_there_are_included') ?: 'products included'?>`;
				productsUpdateSub.textContent = `<?= getLabel('sis_prod_there_are_for') ?: 'for'?> ${calculatedDays} <?= getLabel('sis_prod_there_are_for_days') ?: 'days'?>`;
				const ProductTotalPriceFormatted = ProductTotalPrice.toLocaleString('en-US', { 
					minimumFractionDigits: 2, 
					maximumFractionDigits: 2 
				});
				document.querySelector('.final_total_products').innerHTML = ProductTotalPriceFormatted;
				document.querySelector('.final_total_products_mobile').innerHTML = ProductTotalPriceFormatted;
				} else {
				ProductTotalPrice = 0;
				productsUpdate.textContent = '<?=getLabel('sis_add_extra_paid_products') ?: 'Add extra paid products' ?>';
				productsUpdateSub.textContent = '<?=getLabel('sis_add_click_select') ?: 'Click to select' ?>';
			}
			calculateTotal();  // If any changes, recalculate final of couse
		}
		// No other calculation inside this, becuse may be loop
		// Always first update procucts then final calculate
		function calculateTotal(){
			const DeposidFormatted = RequiredDeposit.toLocaleString('en-US', { 
				minimumFractionDigits: 2, 
				maximumFractionDigits: 2 
			});
			document.querySelector('.final_total_deposit').innerHTML = DeposidFormatted;
			document.querySelector('.final_total_deposit_mobile').innerHTML = DeposidFormatted;
			const TotalVehicleFormatted = TotalVehicle.toLocaleString('en-US', { 
				minimumFractionDigits: 2, 
				maximumFractionDigits: 2 
			});
			document.querySelector('.final_total_price').innerHTML = TotalVehicleFormatted;
			document.querySelector('.final_total_price_mobile').innerHTML = TotalVehicleFormatted;
			TotalDiscount = parseFloat(document.getElementById('discountInput').value) || 0;  // Default to 0 if invalid
			TotalToBePaid  = (TotalVehicle + RequiredDeposit + ProductTotalPrice) - TotalDiscount;
			if (TotalToBePaid < 0) {
				TotalToBePaid = 0;
			}
			const TotalToBePaidFormatted = TotalToBePaid.toLocaleString('en-US', { 
				minimumFractionDigits: 2, 
				maximumFractionDigits: 2 
			});
			document.querySelector('.final_total_discounted').innerHTML = TotalToBePaidFormatted;
			document.querySelector('.final_total_discounted_mobile').innerHTML = TotalToBePaidFormatted;
		}
		$("#discountInput").click(function() {
			$(this).val('');
		});
		document.getElementById('discountInput').addEventListener('input', calculateTotal); 
	</script>
<?php
	include 'views/admin/footer.php';
?>																																																																																																																																																																																																				