<!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">

		<!-- Header -->
		<?php include './includes/navbar.php'; ?>
		<!-- /Header -->

		<?php $page = 'customer-list';
		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>Invoice Report </h4>
							<h6>Manage Your Invoice Report</h6>
						</div>
					</div>
					<ul class="table-top-head">
						<li>
							<a data-bs-toggle="tooltip" data-bs-placement="top" title="Pdf" onclick="generatePDF()"><img src="images/pdf.svg" alt="img"></a>
						</li>
						<li>
							<a data-bs-toggle="tooltip" data-bs-placement="top" title="Excel"><img src="images/excel.svg" alt="img"></a>
						</li>
						<li>
							<a data-bs-toggle="tooltip" data-bs-placement="top" title="Print"><i data-feather="printer" class="feather-rotate-ccw"></i></a>
						</li>
						<li>
							<a data-bs-toggle="tooltip" data-bs-placement="top" title="Refresh"><i data-feather="rotate-ccw" class="feather-rotate-ccw"></i></a>
						</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>


				<!-- Invoices -->
				<div class="main-container" id="customerContent">
					<div class="card">
						<div class="card-body">
							<div class="row justify-content-between align-items-center border-bottom mb-3">
								<div class="col-md-6">
									<div class="mb-0">
										<img src="./images/Risav Dai a copy.png" alt="ArthaVidhi Logo" width="180" height="60">
									</div>

									<p style="margin: 0;">Gandak-14, Birgunj (+977 9802593221)</p>
								</div>
								<div class="col-md-6">
									<div class="text-end mb-3">
										<h4 class="text-gray mb-1">Service and Maintenance</h4>
										<h1 class="text-primary fw-bold" style="font-size: 3em;">JOB CARD</h1>
									</div>

								</div>
							</div>
							<?php
							require_once 'php/databaseConnection.php';

							// Check if job_number is provided
							if (isset($_GET['job_number'])) {
								$job_number = $_GET['job_number'];

								// Database connection
								$mysqli = db_connect();
								if (!$mysqli) {
									die("Database connection failed: " . $mysqli->connect_error);
								}

								// Fetch job card details
								$stmt = $mysqli->prepare("SELECT * FROM customerField WHERE job_number = ?");
								$stmt->bind_param("s", $job_number);
								$stmt->execute();
								$result = $stmt->get_result();

								// Check if record exists
								if ($result->num_rows > 0) {
									$customer = $result->fetch_assoc();
								} else {
									die("No record found for job number: " . htmlspecialchars($job_number));
								}
								$stmt->close();
								$mysqli->close();
							} else {
								die("Job number is required.");
							}
							?>
							<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="form-control" value="<?php echo $customer['job_number']; ?>">
									</div>
								</div>
								<div class="col-lg-2 col-sm-6 col-12">
									<div class="mb-3 add-product">
										<label class="form-label">Job Date</label>
										<input type="text" value="<?php echo $customer['job_date']; ?>" 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">Registration Number</label>
										<input type="text" value="<?php echo $customer['register_number']; ?>" 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">Year</label>
										<input type="text" value="<?php echo $customer['year']; ?>" 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">Date/ Time In:</label>
										<input type="text" value="<?php echo $customer['dateTimeIn']; ?>" class="form-control">
									</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" value="<?php echo $customer['millage']; ?>" 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">Vehicle Brand</label>
										<input type="text" value="<?php echo $customer['vehicle_brand']; ?>" 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">Vehicle Model</label>
										<input type="text" value="<?php echo $customer['vehicle_model']; ?>" 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">Vehicle Colour</label>
										<input type="text" value="<?php echo $customer['vehicle_colour']; ?>" 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">Date/ Time Out:</label>
										<input type="text" value="<?php echo $customer['dateTimeOut']; ?>" class="form-control">
									</div>
								</div>
							</div>
							<div class="row">
								<div class="col-lg-4 col-sm-6 col-12">
									<div class="mb-3 add-product">
										<label class="form-label">Engine/Motor No.</label>
										<input type="text" value="<?php echo $customer['engine_number']; ?>" 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">VIN No.</label>
										<input type="text" value="<?php echo $customer['vin_number']; ?>" 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">Fuel/ Battery</label>
										<input type="text"
											value="<?php echo $customer['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" value="<?php echo $customer['customer_name']; ?>" 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">Contact Number</label>
										<input type="text" value="<?php echo $customer['contact_number']; ?>" 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">Address</label>
										<input type="text" value="<?php echo $customer['customer_address']; ?>" class="form-control">
									</div>
								</div>
								<div class=" col-lg-12 col-sm-6 col-12">
									<div class="mb-3 add-product">
										<label class="form-label">Purpose Visit</label>
										<textarea style="height: 50px; resize: vertical;" class="form-control"><?php echo $customer['purposeAll']; ?></textarea>
									</div>
								</div>
								<div class="row gx-3 gy-2"> <!-- gx = horizontal gap, gy = vertical gap -->
									<div class="col-lg-6">
										<div class="input-blocks summer-description-box transfer">
											<label>Reported Defects/Demanded Repairs</label>
											<div class="form-control" style="min-height: 180px; white-space: pre-line; resize: vertical;">
												<?php echo htmlspecialchars($customer['reported_defects']); ?>
											</div>
										</div>
									</div>
									<div class="col-lg-6">
										<div class="input-blocks summer-description-box transfer">
											<label>Completed Actions</label>
											<div class="form-control" style="min-height: 180px; white-space: pre-line; resize: vertical;">
												<?php echo htmlspecialchars($customer['completed_action'] ?? ''); ?>
											</div>
										</div>
									</div>
								</div>

								<div class="row gx-3 gy-2 mt-1">
									<div class="col-lg-6">
										<div class="input-blocks summer-description-box transfer">
											<label>Pending Reported Defects/Demanded Repairs</label>
											<div class="form-control" style="min-height: 180px; white-space: pre-line; resize: vertical;">
												<?php echo htmlspecialchars($customer['pending_defects'] ?? ''); ?>
											</div>
										</div>
									</div>
									<div class="col-lg-6">
										<div class="input-blocks summer-description-box transfer">
											<label>Inspection Report</label>
											<div class="form-control" style="min-height: 180px; white-space: pre-line; resize: vertical;">
												<?php echo htmlspecialchars($customer['inspection_report'] ?? ''); ?>
											</div>
										</div>
									</div>
								</div>

							</div>
						</div>
					</div>
					<div class="container">
						<div class="row">
							<!-- Vehicle Body Inspection -->
							<div class="col-lg-6 col-md-12">
								<?php
								require_once 'php/databaseConnection.php';

								// Get the job_number dynamically from the URL
								if (isset($_GET['job_number'])) {
									$job_number = $_GET['job_number']; // Retrieve the job_number from the URL
								} else {
									echo "<p>Job number not provided!</p>";
									exit;
								}

								// Database connection
								$mysqli = db_connect();
								if (!$mysqli) {
									echo json_encode(["status" => "error", "message" => "Database connection failed: " . $mysqli->connect_error]);
									exit;
								}

								// SQL query to fetch imageOfCar from the customer table for the given job_number
								$query = "SELECT imageOfCar FROM customerField WHERE job_number = ?";
								$stmt = $mysqli->prepare($query);
								if ($stmt === false) {
									echo json_encode(["status" => "error", "message" => "SQL preparation error: " . $mysqli->error]);
									exit;
								}

								// Bind parameters
								$stmt->bind_param("s", $job_number);

								// Execute the statement
								$stmt->execute();

								// Bind the result variable
								$stmt->bind_result($imageOfCar);

								// Fetch the result
								if ($stmt->fetch()) {
									// Check if imageOfCar exists
									if ($imageOfCar) {
										$image_path = htmlspecialchars($imageOfCar); // Sanitize output

										// Display the dynamically fetched image
										echo '
        <div class="mb-3">
            <label class="fw-medium mb-2 d-block">Vehicle Body Inspection</label>
            <div class="add-product d-flex justify-content-center align-items-center"
                style="height: 200px; border: 1px solid #cbcbcb; border-radius: 8px; background-color: #f9f9f9;">
                <img src="' . $image_path . '" alt="Vehicle Body Inspection Image" class="img-fluid"
                    style="max-height: 90%; max-width: 90%; object-fit: contain;">
            </div>
        </div>';
									} else {
										echo "<p>No image found for job number " . htmlspecialchars($job_number) . "</p>";
									}
								} else {
									echo "<p>No record found for job number " . htmlspecialchars($job_number) . "</p>";
								}

								$stmt->close();
								$mysqli->close();
								?>


								<!-- Technician and Supervisor Details -->
								<div class="mb-3">
									<div style="border: 1px solid #cbcbcb; border-radius: 8px; padding: 15px; background-color: #f9f9f9;">
										<div class="row">
											<div class="col-md-4 col-12 mb-1">
												<label class="fw-medium">Technician Name:</label>
												<input type="text" class="form-control" value="<?php echo $customer['technicianName']; ?>">
											</div>
											<div class="col-md-4 col-6 mb-1">
												<label class="fw-medium">Signature:</label>
												<input type="text" class="form-control">
											</div>
											<div class="col-md-4 col-6 mb-1">
												<label class="fw-medium">Date:</label>
												<input type="text" class="form-control">
											</div>
										</div>

										<p class="text-muted mt-3">
											Repair order is <strong>closed</strong> after operation performed on customer request and after full satisfaction of customer vehicle is handed over.
										</p>

										<div class="row mt-2">
											<div class="col-md-4 col-12 mb-2">
												<label class="fw-medium">Supervisor:</label>
												<input type="text" class="form-control" value="<?php echo $customer['supervisor']; ?>">
											</div>
											<div class="col-md-4 col-6 mb-2">
												<label class="fw-medium">Signature:</label>
												<input type="text" class="form-control">
											</div>
											<div class="col-md-4 col-6 mb-2">
												<label class="fw-medium">Date:</label>
												<input type="text" class="form-control">
											</div>
										</div>
									</div>
								</div>
							</div>

							<!-- Privacy Information -->
							<div class="col-lg-6 col-md-12">
								<div class="mb-3">
									<label class="fw-medium mb-2 d-block">Privacy Information</label>
									<div class="privacy-container"
										style="border: 1px solid #cbcbcb; border-radius: 8px; padding: 20px; background-color: #f9f9f9; min-height: 350px;">
										<p class="text-muted">
											All jobs are explained to me and I have authorized the above work to be carried out with necessary materials
											and additional work if required also at my cost. I authorized the vehicle to be stored, tested, and driven at my risk.
											All personal possessions of value have been removed, and I shall not hold Crossways Autovilla responsible for loss of items in the vehicle.
										</p>

										<div class="mb-2">
											<label class="fw-medium">Contact Person:</label>
											<input type="text" class="form-control" value="<?php echo $customer['contactPerson']; ?>">
										</div>

										<div class="mb-2">
											<label class="fw-medium">Contact Number:</label>
											<input type="text" class="form-control" value="<?php echo $customer['personContactNumber']; ?>">
										</div>

										<div class="mb-2">
											<label class="fw-medium">Signature:</label>
											<input type="text" class="form-control">
										</div>
									</div>
								</div>

								<!-- Prepared By, Signature, and Date Fields -->
								<div class="row mt-3">
									<div class="col-md-4 col-12 mb-2">
										<label class="fw-medium">Prepared By:</label>
										<input type="text" class="form-control">
									</div>
									<div class="col-md-4 col-6 mb-2">
										<label class="fw-medium">Signature:</label>
										<input type="text" class="form-control">
									</div>
									<div class="col-md-4 col-6 mb-2">
										<label class="fw-medium">Date:</label>
										<input type="text" class="form-control">
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<script>
					function generatePDF() {
						const {
							jsPDF
						} = window.jspdf;

						// A4 size
						const pdfWidth = 210; // mm
						const pdfHeight = 297; // mm
						const margin = 10; // mm on each side

						const doc = new jsPDF("p", "mm", "a4");

						html2canvas(document.querySelector("#customerContent"), {
							scale: 2 // Higher quality
						}).then(canvas => {
							const imgData = canvas.toDataURL("image/png");

							// Calculate usable width and scaled height with margin
							const usableWidth = pdfWidth - margin * 2;
							let imgWidth = usableWidth;
							let imgHeight = (canvas.height * imgWidth) / canvas.width;

							// Prevent overflow beyond page height (you can improve this with page breaking logic if needed)
							if (imgHeight > (pdfHeight - margin * 2)) {
								imgHeight = pdfHeight - margin * 2;
							}

							// Add image with margins (left and top)
							doc.addImage(imgData, "PNG", margin, margin, imgWidth, imgHeight);

							// Open in new tab
							window.open(doc.output('bloburl'));
						});
					}
				</script>


				<div class="text-center">
					<div class="mb-0">
						<svg width="180" height="65" viewBox="0 0 300 80" xmlns="http://www.w3.org/2000/svg">
							<g fill="none" fill-rule="evenodd">
								<!-- Shopping Bag Icon -->
								<rect x="10" y="10" width="50" height="50" rx="10" fill="#FFA64D" />
								<path d="M25 15a10 10 0 0 1 20 0" stroke="#0D1B40" stroke-width="3" fill="none" />
								<circle cx="35" cy="35" r="14" fill="#0D1B40" />

								<!-- Dollar Symbol Inside Circle -->
								<text x="31" y="40" font-family="Arial, sans-serif" font-size="16" fill="white" font-weight="bold">$</text>

								<!-- Text "ArthaVidhi" -->
								<text x="70" y="50" font-family="Poppins, sans-serif" font-size="40" fill="#0D1B40" font-weight="bold">ArthaVidhi</text>

								<!-- "SOFT" Text -->
								<text x="230" y="10" font-family="Poppins, sans-serif" font-size="22" fill="#FFA64D" font-weight="900">SOFT</text>
							</g>
						</svg>
					</div>
				</div>
			</div>
		</div>
		<!-- /Invoices -->
	</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="d4e35c9ac780cf7a658c1972-text/javascript"></script>

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

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

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

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

	<!-- Daterangepikcer JS -->
	<script src="js/moment.min.js" type="d4e35c9ac780cf7a658c1972-text/javascript"></script>
	<script src="js/daterangepicker.js" type="d4e35c9ac780cf7a658c1972-text/javascript"></script>

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

	<!-- Summernote JS -->
	<script src="js/summernote-bs4.min.js" type="d4e35c9ac780cf7a658c1972-text/javascript"></script>

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

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

	<!-- Custom JS -->
	<script src="js/script.js" type="d4e35c9ac780cf7a658c1972-text/javascript"></script>


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

	<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
</body>

</html>