<!DOCTYPE html>
<html lang="en">
<?php include './includes/head.php'; ?>

<body>

	<div id="global-loader">
		<div class="whirly-loader"> </div>
	</div>

	<!-- Main Wrapper -->
	<div class="main-wrapper">

		<?php include './includes/navbar.php'; ?>

		<?php $page = 'add-product';
		include './includes/sidebar.php'; ?>
		<div class="page-wrapper">
			<div class="content">
				<div class="page-header">
					<div class="add-item d-flex">
						<div class="page-title">
							<h4>New Job Card</h4>
							<h6>Create new JobCard</h6>
						</div>
					</div>
					<ul class="table-top-head">
						<li>
							<div class="page-btn">
								<a href="product-list.php" class="btn btn-secondary"><i data-feather="arrow-left" class="me-2"></i>Back to JobCards</a>
							</div>
						</li>
						<li>
							<a data-bs-toggle="tooltip" data-bs-placement="top" title="Collapse" id="collapse-header"><i data-feather="chevron-up" class="feather-chevron-up"></i></a>
						</li>
					</ul>

				</div>
				<form action="php/addCustoms.php" method="post" enctype="multipart/form-data">
					<div class="card">
						<div class="card-body add-product pb-0">
							<div class="accordion-card-one accordion" id="accordionExample">
								<!-- here -->
								<div class="accordion-item">
									<div class="accordion-header" id="headingOne">
										<div class="accordion-button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-controls="collapseOne">
											<div class="addproduct-icon">
												<h5><i data-feather="info" class="add-info"></i><span>Vehicle Information</span></h5>
												<a href="javascript:void(0);"><i data-feather="chevron-down" class="chevron-down-add"></i></a>
											</div>
										</div>
									</div>
									<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
										<div class="accordion-body">
											<div class="row">
												<div class="col-lg-3 col-sm-6 col-12">
													<div class="input-blocks add-product list">
														<label class="form-label">Job Number</label>
														<input type="text" class="jobNumberSearch form-control" placeholder="Search Job">
														<button type="submit" class="btn btn-primaryadd">
															Search Job
														</button>
														<div class="jobNumberSearchResults search-results"></div>
													</div>
												</div>
												<div class="col-lg-3 col-sm-6 col-12">
													<div class="mb-3 add-product">
														<label class="form-label">Job Number</label>
														<input type="text" name="jobNumber" class="form-control">
													</div>
												</div>
												<div class="col-lg-3 col-sm-6 col-12">
													<div class="mb-3 add-product">
														<label class="form-label">Job Date</label>
														<input type="text" name="jobDate" class="form-control">
													</div>
												</div>
												<div class="col-lg-2 col-sm-6 col-12">
													<div class="mb-3 add-product">
														<label class="form-label">Registration Number</label>
														<input type="text" name="registerNumber" class="form-control" placeholder="Enter Vehicle Reg. No.">
													</div>
												</div>
												<div class="col-lg-2 col-sm-6 col-12">
													<div class="mb-3 add-product">
														<label class="form-label">Year</label>
														<input type="text" name="year" class="form-control" placeholder="Enter Vehicle Year">
													</div>
												</div>
												<div class="col-lg-2 col-sm-6 col-12">
													<div class="mb-3 add-product">
														<label class="form-label">Date/ Time In:</label>
														<input type="text" name="dateTimeIn" class="form-control" placeholder="Entrance Date and Time">
													</div>
												</div>
											</div>
											<div class="row">
												<div class="col-lg-3 col-sm-6 col-12">
													<div class="mb-3 add-product">
														<label class="form-label">Millage</label>
														<input type="text" name="millage" class="form-control" placeholder=" Enter Vehicle Millage in km/hr">
													</div>
												</div>
												<div class=" col-lg-3 col-sm-6 col-12">
													<div class="mb-3 add-product">
														<label class="form-label">Vehicle Brand</label>
														<input type="text" name="vehicleBrand" class="form-control" placeholder="Enter Vehicle Brand">
													</div>
												</div>
												<div class="col-lg-2 col-sm-6 col-12">
													<div class="mb-3 add-product">
														<label class="form-label">Vehicle Model</label>
														<input type="text" name="vehicleModel" class="form-control" placeholder="Enter Vehicle Model">
													</div>
												</div>
												<div class="col-lg-2 col-sm-6 col-12">
													<div class="mb-3 add-product">
														<label class="form-label">Vehicle Colour</label>
														<input type="text" name="vehicleColour" class="form-control" placeholder="Enter Vehicle Colour">
													</div>
												</div>
												<div class="col-lg-2 col-sm-6 col-12">
													<div class="mb-3 add-product">
														<label class="form-label">Date/ Time Out:</label>
														<input type="text" name="dateTimeOut" class="form-control" placeholder="Departure Date and Time">
													</div>
												</div>
											</div>
											<div class="row">
												<div class="col-lg-3 col-sm-6 col-12">
													<div class="mb-3 add-product">
														<label class="form-label">Engine No.</label>
														<input type="text" name="engineNumber" class="form-control" placeholder=" Enter Vehicle Engine No.">
													</div>
												</div>
												<div class=" col-lg-3 col-sm-6 col-12">
													<div class="mb-3 add-product">
														<label class="form-label">VIN No.</label>
														<input type="text" name="vinNumber" class="form-control" placeholder="Enter Vehicle VIN No.">
													</div>
												</div>
												<div class=" col-lg-4 col-sm-6 col-12">
													<div class="mb-3 add-product">
														<label class="form-label">Purpose Visit</label>
														<textarea name="purpose" class="form-control"></textarea>
													</div>
												</div>
												<!-- Fuel/Battery Selection -->
												<div class="col-lg-2 col-sm-6 col-12">
													<div class="mb-3 add-product">
														<label class="form-label">Fuel/ Battery Type</label>
														<input type="text" name="fuelBatteryType" class="form-control">
													</div>
												</div>
												<div class=" col-lg-4 col-sm-6 col-12">
													<div class="mb-3 add-product">
														<label class="form-label">Customer Name</label>
														<input type="text" name="customerName" class="form-control" placeholder="Enter Customer Name">
													</div>
												</div>
												<div class="col-lg-4 col-sm-6 col-12">
													<div class="mb-3 add-product">
														<label class="form-label">Contact Number</label>
														<input type="text" name="contactNumber" class="form-control" placeholder="Enter Customer Contact">
													</div>
												</div>
												<div class="col-lg-4 col-sm-6 col-12">
													<div class="mb-3 add-product">
														<label class="form-label">Address</label>
														<input type="text" name="customerAddress" class="form-control" placeholder="Enter Customer Address">
													</div>
												</div>
											</div>
											<!-- Editor -->
											<div class="row">
												<div class="col-lg-6">
													<div class="input-blocks summer-description-box transfer mb-3">
														<label>Reported Defects/Demanded Repairs</label>
														<textarea class="form-control h-100" name="reportedDefects" rows="5"></textarea>
														<p class="mt-1">Maximum 60 Characters</p>
													</div>
												</div>
												<div class="col-lg-6">
													<div class="input-blocks summer-description-box transfer mb-3">
														<label>Completed Actions</label>
														<textarea class="form-control h-100" name="completedAction" rows="5"></textarea>
														<p class="mt-1">Maximum 60 Characters</p>
													</div>
												</div>
											</div>
											<!-- /Editor -->
											<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
											<script>
												$(document).ready(function() {
													$(".jobNumberSearch").on("input", function() {
														let query = $(this).val();
														if (query.length > 0) {
															$.ajax({
																url: "php/searchJob.php",
																method: "GET",
																data: {
																	query: query
																},
																dataType: "json",
																success: function(data) {
																	let dropdown = $(".jobNumberSearchResults");
																	dropdown.empty().show();
																	if (data.length > 0) {
																		data.forEach(job => {
																			dropdown.append(`<div class="dropdown-item job-suggestion">${job}</div>`);
																		});
																	} else {
																		dropdown.hide();
																	}
																}
															});
														} else {
															$(".jobNumberSearchResults").hide();
														}
													});

													// Select job from dropdown
													$(document).on("click", ".job-suggestion", function() {
														let jobNumber = $(this).text();
														$(".jobNumberSearch").val(jobNumber);
														$(".jobNumberSearchResults").hide();

														// Fetch and fill all fields
														$.ajax({
															url: "php/getJobDetails.php",
															method: "GET",
															data: {
																jobNumber: jobNumber
															},
															dataType: "json",
															success: function(data) {
																if (data.status !== "error") {
																	$("input[name='jobNumber']").val(data.job_number);
																	$("input[name='jobDate']").val(data.job_date);
																	$("input[name='registerNumber']").val(data.register_number);
																	$("input[name='year']").val(data.year);
																	$("input[name='millage']").val(data.millage);
																	$("input[name='vehicleBrand']").val(data.vehicle_brand);
																	$("input[name='vehicleModel']").val(data.vehicle_model);
																	$("input[name='vehicleColour']").val(data.vehicle_colour);
																	$("input[name='engineNumber']").val(data.engine_number);
																	$("input[name='vinNumber']").val(data.vin_number);
																	$("input[name='customerName']").val(data.customer_name);
																	$("input[name='contactNumber']").val(data.contact_number);
																	$("input[name='customerAddress']").val(data.customer_address);
																	$("input[name='fuelBatteryType']").val(data.fuelBatteryType == 'battery' ? 'Battery: ' + data.powerValue : 'Fuel: ' + data.powerValue);
																	$("input[name='dateTimeIn']").val(data.dateTimeIn);
																	$("input[name='dateTimeOut']").val(data.dateTimeOut);
																	$("textarea[name='reportedDefects']").val(data.reported_defects);
																	$("textarea[name='completedAction']").val(data.completed_action);
																	$("textarea[name='purpose']").val(data.purposeAll);
																} else {
																	alert("Job details not found!");
																}
															}
														});
													});

													// Hide dropdown when clicking outside
													$(document).click(function(e) {
														if (!$(e.target).closest(".jobNumberSearch, .jobNumberSearchResults").length) {
															$(".jobNumberSearchResults").hide();
														}
													});
												});
											</script>
										</div>
									</div>
								</div>
							</div>
							<!--/here -->
							<div class="accordion-card-one accordion" id="accordionExample2">
								<div class="accordion-item">
									<div class="accordion-header" id="headingTwo">
										<div class="accordion-button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-controls="collapseTwo">
											<div class="text-editor add-list">
												<div class="addproduct-icon list icon">
													<h5><i data-feather="life-buoy" class="add-info"></i><span>Lubricant Details</span></h5>
													<a href="javascript:void(0);"><i data-feather="chevron-down" class="chevron-down-add"></i></a>
												</div>
											</div>
										</div>
									</div>
									<div id="collapseTwo" class="accordion-collapse collapse show" aria-labelledby="headingTwo" data-bs-parent="#accordionExample2">
										<div class="accordion-body">
											<div class="input-blocks add-products">
												<!-- Lubricant All Rows -->
												<?php include './includes/lubricantAllRows.php' ?>
												<!-- /Lubricant All Rows -->

												<div id="lubricantContainer">
													<!-- Original Row -->
													<div class="row lubricantRow">
														<div class="col-lg-3 col-sm-6 col-12">
															<div class="input-blocks add-product">
																<label>Custom Lubricant Type</label>
																<input type="text" name="customLubType[]" class="form-control" placeholder="Enter Custom Lubricant Type">
															</div>
														</div>
														<div class="col-lg-3 col-sm-6 col-12">
															<div class="input-blocks add-product">
																<label>Custom Lubricant Amount</label>
																<input type="number" name="customLubPrice[]" class="form-control customLubricantAmount" value="0" min="0">
															</div>
														</div>
														<div class="col-lg-3 col-sm-6 col-12">
															<div class="input-blocks add-product">
																<label>Discount (in %)</label>
																<input type="number" name="customLubDis[]" class="form-control customLubricantDiscount" value="0" min="0" max="100">
															</div>
														</div>
														<div class="col-lg-2 col-sm-6 col-12">
															<div class="input-blocks add-product">
																<label>Net Amount</label>
																<input type="text" class="form-control customLubricantNetAmount" name="customLubNet[]" value="0" readonly>
															</div>
														</div>
														<!-- Delete Button -->
														<div class="mt-4 col-lg-1 col-sm-6 col-12">
															<button type="button" class="btn btn-danger btn-sm deleteRow">
																<i class="fas fa-trash"></i>
															</button>
														</div>
													</div>
												</div>

												<!-- Toggle Button (Outside the row to avoid cloning) -->
												<div class="mb-3 col-lg-1 col-sm-6 col-12 d-flex align-items-end">
													<button id="toggleCustomButton" type="button" class="btn btn-primary btn-sm">
														<i class="fas fa-plus"></i>
													</button>
												</div>
												<div class="col-lg-5 col-sm-6 col-12">
													<div class="input-blocks add-product">
														<label>Total Net</label>
														<input type="number" class="form-control" name="lubricantBillAmount" value="0" readonly>
														<input type="hidden" id="totalCustomLubricant" value="0">
														<input type="hidden" id="totalLubricantAjax" value="0">
													</div>
												</div>
												<script>
													function updateFinalLubricantBillTotal() {
														let totalCustomLubricant = parseFloat(document.getElementById("totalCustomLubricant").value) || 0;
														let totalLubricantAjax = parseFloat(document.getElementById("totalLubricantAjax").value) || 0;

														let finalLubricantBillAmount = totalCustomLubricant + totalLubricantAjax;

														document.querySelector("[name='lubricantBillAmount']").value = finalLubricantBillAmount.toFixed(2);
													}
												</script>

												<!-- Custom Lubricant Details Script -->
												<?php include './includes/customLubricantDetailsScript.php' ?>
												<!-- /Custom Lubricant Details Script -->

											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="accordion-card-one accordion" id="accordionExample2">
								<div class="accordion-item">
									<div class="accordion-header" id="headingTwo">
										<div class="accordion-button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-controls="collapseTwo">
											<div class="text-editor add-list">
												<div class="addproduct-icon list icon">
													<h5><i data-feather="life-buoy" class="add-info"></i><span>Labour Code Details</span></h5>
													<a href="javascript:void(0);"><i data-feather="chevron-down" class="chevron-down-add"></i></a>
												</div>
											</div>
										</div>
									</div>
									<div id="collapseTwo" class="accordion-collapse collapse show" aria-labelledby="headingTwo" data-bs-parent="#accordionExample2">
										<div class="accordion-body">
											<div class="input-blocks add-products">

												<!-- labourAllRows script -->
												<?php include './includes/labourAllRows.php' ?>
												<!-- /labourAllRows script -->
												<div id="labourContainer">
													<!-- Original Row -->
													<div class="row labourRow">
														<div class="col-lg-3 col-sm-6 col-12">
															<div class="input-blocks add-product">
																<label>Custom Labour Code</label>
																<input type="text" name="customLabourCode[]" class="form-control" placeholder="Custom Labour Code">
															</div>
														</div>
														<div class="col-lg-3 col-sm-6 col-12">
															<div class="input-blocks add-product">
																<label>Custom Labour Amount</label>
																<input type="number" name="customLabourPrice[]" class="form-control customLabourAmount" value="0" min="0">
															</div>
														</div>
														<div class="col-lg-3 col-sm-6 col-12">
															<div class="input-blocks add-product">
																<label>Discount (in %)</label>
																<input type="number" name="customLabourDis[]" class="form-control customLabourDiscount" value="0" min="0" max="100">
															</div>
														</div>
														<div class="col-lg-2 col-sm-6 col-12">
															<div class="input-blocks add-product">
																<label>Net Amount</label>
																<input type="text" class="form-control customLabourNetAmount" name="customLabourNet[]" value="0" readonly>
															</div>
														</div>
														<!-- Delete Button -->
														<div class="mt-4 col-lg-1 col-sm-6 col-12">
															<button type="button" class="btn btn-danger btn-sm deleteLabourRow">
																<i class="fas fa-trash"></i>
															</button>
														</div>
													</div>
												</div>

												<!-- Add Row Button -->
												<div class="mb-3 col-lg-1 col-sm-6 col-12 d-flex align-items-end">
													<button id="addLabourRow" type="button" class="btn btn-primary btn-sm">
														<i class="fas fa-plus"></i>
													</button>
												</div>
												<div class="col-lg-5 col-sm-6 col-12">
													<div class="input-blocks add-product">
														<label>Total Net</label>
														<input type="number" class="form-control" name="labourBillAmount" value="0" readonly>
														<input type="hidden" id="totalCustomLabour" value="0">
														<input type="hidden" id="totalLabourAjax" value="0">
													</div>
												</div>

												<script>
													function updateFinalLabourBillTotal() {
														let totalCustomLabour = parseFloat(document.getElementById("totalCustomLabour").value) || 0;
														let totalLabourAjax = parseFloat(document.getElementById("totalLabourAjax").value) || 0;

														let finalLabourBillAmount = totalCustomLabour + totalLabourAjax;

														document.querySelector("[name='labourBillAmount']").value = finalLabourBillAmount.toFixed(2);
													}
												</script>
												<!-- Custom labour Script -->
												<?php include './includes/customLabourScript.php' ?>
												<!-- /Custom Labour Script -->
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="accordion-card-one accordion" id="accordionExample2">
								<div class="accordion-item">
									<div class="accordion-header" id="headingTwo">
										<div class="accordion-button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-controls="collapseTwo">
											<div class="text-editor add-list">
												<div class="addproduct-icon list icon">
													<h5><i data-feather="life-buoy" class="add-info"></i><span>Dent/ Paint Details</span></h5>
													<a href="javascript:void(0);"><i data-feather="chevron-down" class="chevron-down-add"></i></a>
												</div>
											</div>
										</div>
									</div>
									<div id="collapseTwo" class="accordion-collapse collapse show" aria-labelledby="headingTwo" data-bs-parent="#accordionExample2">
										<div class="accordion-body">
											<div class="input-blocks add-products">

												<!-- dent script -->
												<?php include './includes/dentAllRows.php' ?>
												<!-- /dent Script -->
												<div id="dentPaintContainer">
													<!-- Original Row -->
													<div class="row dentPaintRow">
														<div class="col-lg-3 col-sm-6 col-12">
															<div class="input-blocks add-product">
																<label>Custom Dent/ Paint Name</label>
																<input type="text" class="form-control" name="customDentType[]" placeholder="Custom Dent/ Paint Name">
															</div>
														</div>
														<div class="col-lg-3 col-sm-6 col-12">
															<div class="input-blocks add-product">
																<label>Custom Dent/ Paint Amount</label>
																<input type="number" class="form-control customDentPaintAmount" name="customDentPrice[]" value="0" min="0">
															</div>
														</div>
														<div class="col-lg-3 col-sm-6 col-12">
															<div class="input-blocks add-product">
																<label>Discount (in %)</label>
																<input type="number" class="form-control customDentPaintDiscount" name="customDentDis[]" value="0" min="0" max="100">
															</div>
														</div>
														<div class="col-lg-2 col-sm-6 col-12">
															<div class="input-blocks add-product">
																<label>Net Amount</label>
																<input type="text" class="form-control customDentPaintNetAmount" name="customDentNet[]" value="0" readonly>
															</div>
														</div>
														<!-- Delete Button -->
														<div class="mt-4 col-lg-1 col-sm-6 col-12">
															<button type="button" class="btn btn-danger btn-sm deleteDentPaintRow">
																<i class="fas fa-trash"></i>
															</button>
														</div>
													</div>
												</div>

												<!-- Add Row Button -->
												<div class="mb-3 col-lg-1 col-sm-6 col-12 d-flex align-items-end">
													<button id="addDentPaintRow" type="button" class="btn btn-primary btn-sm">
														<i class="fas fa-plus"></i>
													</button>
												</div>
												<div class="col-lg-5 col-sm-6 col-12">
													<div class="input-blocks add-product">
														<label>Total Net</label>
														<input type="number" class="form-control" name="dentBillAmount" value="0" readonly>
														<input type="hidden" id="totalCustomDent" value="0">
														<input type="hidden" id="totalDentAjax" value="0">
													</div>
												</div>

												<script>
													function updateFinalDentBillTotal() {
														let totalCustomDent = parseFloat(document.getElementById("totalCustomDent").value) || 0;
														let totalDentAjax = parseFloat(document.getElementById("totalDentAjax").value) || 0;

														let finalDentBillAmount = totalCustomDent + totalDentAjax;

														document.querySelector("[name='dentBillAmount']").value = finalDentBillAmount.toFixed(2);
													}
												</script>


												<!-- Custom Dent/ Paint Script -->
												<?php include './includes/customDentPaintScript.php' ?>
												<!-- /Custom Dent/ Paint Script -->
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="accordion-card-one accordion" id="accordionExample2">
								<div class="accordion-item">
									<div class="accordion-header" id="headingTwo">
										<div class="accordion-button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-controls="collapseTwo">
											<div class="text-editor add-list">
												<div class="addproduct-icon list icon">
													<h5><i data-feather="life-buoy" class="add-info"></i><span>Spare Parts Details</span></h5>
													<a href="javascript:void(0);"><i data-feather="chevron-down" class="chevron-down-add"></i></a>
												</div>
											</div>
										</div>
									</div>
									<div id="collapseTwo" class="accordion-collapse collapse show" aria-labelledby="headingTwo" data-bs-parent="#accordionExample2">
										<div class="accordion-body">
											<div class="input-blocks add-products">

												<style>
													.search-results {
														position: absolute;
														background: white;
														border: 1px solid #ccc;
														width: 100%;
														max-height: 200px;
														overflow-y: auto;
														display: none;
														z-index: 1000;
													}

													.search-results div {
														padding: 10px;
														cursor: pointer;
													}

													.search-results div:hover {
														background: #f0f0f0;
													}
												</style>
												<!-- spare script -->
												<?php include './includes/spareAllRows.php' ?>
												<!-- /spare script -->
												<div id="sparePartsContainer">
													<!-- Original Row -->
													<div class="row sparePartsRow">
														<div class="col-lg-3 col-sm-6 col-12">
															<div class="input-blocks add-product">
																<label>Custom Spare Parts</label>
																<input type="text" class="form-control" name="customSpareType[]" placeholder="Custom Spare Parts">
															</div>
														</div>
														<div class="col-lg-3 col-sm-6 col-12">
															<div class="input-blocks add-product">
																<label>Custom Spare Parts Amount</label>
																<input type="number" class="form-control customSparePartsAmount" name="customSparePrice[]" value="0" min="0">
															</div>
														</div>
														<div class="col-lg-3 col-sm-6 col-12">
															<div class="input-blocks add-product">
																<label>Discount (in %)</label>
																<input type="number" class="form-control customSparePartsDiscount" name="customSpareDis[]" value="0" min="0" max="100">
															</div>
														</div>
														<div class="col-lg-2 col-sm-6 col-12">
															<div class="input-blocks add-product">
																<label>Net Amount</label>
																<input type="text" class="form-control customSparePartsNetAmount" name="customSpareNet[]" value="0" readonly>
															</div>
														</div>
														<!-- Delete Button -->
														<div class="mt-4 col-lg-1 col-sm-6 col-12">
															<button type="button" class="btn btn-danger btn-sm deleteSparePartsRow">
																<i class="fas fa-trash"></i>
															</button>
														</div>
													</div>
												</div>

												<!-- Add Row Button -->
												<div class="mb-3 col-lg-1 col-sm-6 col-12">
													<button id="addSparePartsRow" type="button" class="btn btn-primary btn-sm">
														<i class="fas fa-plus"></i>
													</button>
												</div>
												<div class="col-lg-5 col-sm-6 col-12">
													<div class="input-blocks add-product">
														<label>Total Net</label>
														<input type="number" class="form-control" name="billAmount" value="0" readonly>
														<input type="hidden" id="totalCustomSpare" value="0">
														<input type="hidden" id="totalSpareAjax" value="0">
													</div>
												</div>
												<script>
													function updateFinalBillTotal() {
														let totalSpareAjax = parseFloat(document.getElementById("totalSpareAjax").value) || 0;
														let totalCustomSpare = parseFloat(document.getElementById("totalCustomSpare").value) || 0;

														let finalBillAmount = totalSpareAjax + totalCustomSpare;

														document.querySelector("[name='billAmount']").value = finalBillAmount.toFixed(2);
													}
												</script>

												<!-- Custom Spare Parts script -->
												<?php include './includes/customSparePartsScript.php' ?>
												<!-- /Custom Spare Parts script -->
											</div>
										</div>
									</div>
								</div>
							</div>
							<style>
								.search-results {
									position: absolute;
									background: white;
									border: 1px solid #ccc;
									width: 100%;
									max-height: 200px;
									overflow-y: auto;
									display: none;
									z-index: 1000;
								}

								.search-results div {
									padding: 10px;
									cursor: pointer;
								}

								.search-results div:hover {
									background: #f0f0f0;
								}
							</style>
							<div class="col-lg-12">
								<div class="btn-addproduct mb-4">
									<button type="button" class="btn btn-cancel me-2">Cancel</button>
									<button type="submit" class="btn btn-submit">Save Product</button>
								</div>
							</div>
				</form>
			</div>
		</div>
	</div>
	<!-- /Main Wrapper -->
	<div class="customizer-links" id="setdata">
		<ul class="sticky-sidebar">
			<li class="sidebar-icons">
				<a href="#" class="navigation-add" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-original-title="Theme">
					<i data-feather="settings" class="feather-five"></i>
				</a>
			</li>
		</ul>
	</div>
	<!-- jQuery -->
	<script src="js/jquery-3.7.1.min.js" type="37d26908286f2aa006113b6d-text/javascript"></script>

	<!-- Feather Icon JS -->
	<script src="js/feather.min.js" type="37d26908286f2aa006113b6d-text/javascript"></script>

	<!-- Slimscroll JS -->
	<script src="js/jquery.slimscroll.min.js" type="37d26908286f2aa006113b6d-text/javascript"></script>

	<!-- Datatable JS -->
	<script src="js/jquery.dataTables.min.js" type="37d26908286f2aa006113b6d-text/javascript"></script>
	<script src="js/dataTables.bootstrap5.min.js" type="37d26908286f2aa006113b6d-text/javascript"></script>

	<!-- Bootstrap Core JS -->
	<script src="js/bootstrap.bundle.min.js" type="37d26908286f2aa006113b6d-text/javascript"></script>

	<!-- Select2 JS -->
	<script src="js/select2.min.js" type="37d26908286f2aa006113b6d-text/javascript"></script>

	<!-- Datetimepicker JS -->
	<script src="js/moment.min.js" type="37d26908286f2aa006113b6d-text/javascript"></script>
	<script src="js/bootstrap-datetimepicker.min.js" type="37d26908286f2aa006113b6d-text/javascript"></script>

	<!-- Bootstrap Tagsinput JS -->
	<script src="js/bootstrap-tagsinput.js" type="37d26908286f2aa006113b6d-text/javascript"></script>

	<!-- Sweetalert 2 -->
	<script src="js/sweetalert2.all.min.js" type="37d26908286f2aa006113b6d-text/javascript"></script>
	<script src="js/sweetalerts.min.js" type="37d26908286f2aa006113b6d-text/javascript"></script>

	<!-- Custom JS -->

	<script src="js/script.js" type="37d26908286f2aa006113b6d-text/javascript"></script>


	<script src="js/rocket-loader.min.js" data-cf-settings="37d26908286f2aa006113b6d-|49" defer=""></script>

	<style>
		.fuel-battery-indicator {
			display: flex;
			align-items: center;
			gap: 10px;
		}

		.fuel-battery-indicator input {
			width: 100%;
		}
	</style>
	<style>
		.search-results {
			position: absolute;
			background: white;
			border: 1px solid #ccc;
			width: 100%;
			max-height: 150px;
			overflow-y: auto;
			display: none;
			z-index: 1000;
		}

		.dropdown-item {
			padding: 8px;
			cursor: pointer;
		}

		.dropdown-item:hover {
			background-color: #f0f0f0;
		}
	</style>

	<!-- Fuel Battery Indicator Ajax -->
	<?php include './includes/fuelBatteryAjax.php'; ?>
	<!-- /Fuel Battery Indicator Ajax -->

	<!-- Spare Parts -->
	<?php include './includes/spareAjax.php'; ?>
	<!-- /Spare Parts -->

	<!-- Dent/Paint Details -->
	<?php include './includes/dentPaintAjax.php'; ?>
	<!-- /Dent/Paint Details -->

	<!-- labour Details -->
	<?php include './includes/labourDetailsAjax.php'; ?>
	<!-- /labour Details -->

	<!-- Lubricant Details -->
	<?php include './includes/lubricantDetailsAjax.php'; ?>
	<!-- /Lubricant Details -->

</body>


</body>

</html>