<!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 = 'jobCard-report';
		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>JobCard Report</h4>
							<h6>Manage your JobCard Report</h6>
						</div>
					</div>
					<ul class="table-top-head">
						<li>
							<a data-bs-toggle="tooltip" data-bs-placement="top" title="Pdf"><img src="images/pdf.svg" alt="img"></a>
						</li>
						<li>
							<a id="exportExcel" 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 class="page-btn">
						<a href="add-product.php" class="btn btn-added"><i data-feather="plus-circle" class="me-2"></i>Add New JobCard</a>
					</div>
					<div class="page-btn import">
						<a href="#" class="btn btn-added color" data-bs-toggle="modal" data-bs-target="#view-notes"><i data-feather="download" class="me-2"></i>Import JobCard</a>
					</div>
				</div>

				<!-- /product list -->
				<div class="card table-list-card">
					<div class="card-body">
						<div class="table-top">
							<div class="search-set">
								<div class="search-input">
									<a href="javascript:void(0);" class="btn btn-searchset"><i data-feather="search" class="feather-search"></i></a>
								</div>
							</div>
							<div class="search-path">
								<a class="btn btn-filter" id="filter_search">
									<i data-feather="filter" class="filter-icon"></i>
									<span><img src="images/closes.svg" alt="img"></span>
								</a>
							</div>
							<div class="form-sort">
								<i data-feather="sliders" class="info-img"></i>
								<select class="select">
									<option>Sort by Date</option>
									<option>14 09 23</option>
									<option>11 09 23</option>
								</select>
							</div>
						</div>
						<div class="table-responsive product-list">
							<?php
							require_once 'php/databaseConnection.php';

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

							// Fetch data from the customerField table
							$sql = "SELECT jobNumber, jobDate, registerNumber, year, dateTimeIn, dateTimeOut,
        millage, vehicleBrand, vehicleModel, vehicleColour, fuelBatteryType,
        engineNumber, vinNumber, customerName, contactNumber, customerAddress,
        purpose, reportedDefects, completedAction, contactPerson, personContactNumber,
        technicianName, supervisor, TotalBillAmount, vatAmount, discountAmount,
        AmountOfDiscount, netTotal, billNumber, billRemarks, totalPaid,
        remainingAmount, paymentStatus, billAmount, lubricantBillAmount,
        labourBillAmount, dentBillAmount, customerVAT
        FROM jobCard ORDER BY jobNumber DESC";

							$result = $mysqli->query($sql);
							?>
							<table id="jobCardTable" class="table datanew">
								<thead>
									<tr>
										<th>Job No.</th>
										<th>Billing Date</th>
										<th>Reg. No.</th>
										<th>Year</th>
										<th>Time In</th>
										<th>Millage</th>
										<th>Brand</th>
										<th>Model</th>
										<th>Colour</th>
										<th>Fuel/Battery</th>
										<th>Engine No.</th>
										<th>VIN</th>
										<th>Customer Name</th>
										<th>Contact No.</th>
										<th>Address</th>
										<th>Customer VAT</th>
										<th>Purpose of visit</th>
										<th>Reported Defects</th>
										<th>Completed Actions</th>
										<th>Contact Person</th>
										<th>Contact Person No.</th>
										<th>Technician</th>
										<th>Supervisor</th>
										<th>Total Spare Amount</th>
										<th>Total Lubricant Amount</th>
										<th>Total Labour Amount</th>
										<th>Total Dent Amount</th>
										<th>Total Bill</th>
										<th>Discount %</th>
										<th>Discount Amt</th>
										<th>VAT(13%)</th>
										<th>Net Total</th>
										<th>Total Paid</th>
										<th>Remaining</th>
										<th>Payment Status</th>
										<th>Remarks</th>
										<th>Time Out</th>
									</tr>
								</thead>

								<tbody>
									<?php
									if ($result->num_rows > 0) {
										while ($jobCard = $result->fetch_assoc()) {
									?>
											<tr>
												<td><a href="#" class="link-primary"><?php echo htmlspecialchars($jobCard['jobNumber']); ?></a></td>
												<td><?php echo htmlspecialchars($jobCard['jobDate']); ?></td>
												<td><?php echo htmlspecialchars($jobCard['registerNumber']); ?></td>
												<td><?php echo htmlspecialchars($jobCard['year']); ?></td>
												<td><?php echo htmlspecialchars($jobCard['dateTimeIn']); ?></td>
												<td><?php echo htmlspecialchars($jobCard['millage']); ?></td>
												<td><?php echo htmlspecialchars($jobCard['vehicleBrand']); ?></td>
												<td><?php echo htmlspecialchars($jobCard['vehicleModel']); ?></td>
												<td><?php echo htmlspecialchars($jobCard['vehicleColour']); ?></td>
												<td><?php echo htmlspecialchars($jobCard['fuelBatteryType']); ?></td>
												<td><?php echo htmlspecialchars($jobCard['engineNumber']); ?></td>
												<td><?php echo htmlspecialchars($jobCard['vinNumber']); ?></td>
												<td><?php echo htmlspecialchars($jobCard['customerName']); ?></td>
												<td><?php echo htmlspecialchars($jobCard['contactNumber']); ?></td>
												<td><?php echo htmlspecialchars($jobCard['customerAddress']); ?></td>
												<td><?php echo htmlspecialchars($jobCard['customerVAT']); ?></td>
												<td class="show-full-text" data-fulltext="<?php echo htmlspecialchars($jobCard['purpose'] ?? ''); ?>">
													<?php echo htmlspecialchars(mb_strimwidth($jobCard['purpose'] ?? '', 0, 40, '...')); ?>
												</td>

												<td class="show-full-text" data-fulltext="<?php echo htmlspecialchars($jobCard['reportedDefects'] ?? ''); ?>">
													<?php echo nl2br(htmlspecialchars(mb_strimwidth($jobCard['reportedDefects'] ?? '', 0, 50, '...'))); ?>
												</td>

												<td class="show-full-text" data-fulltext="<?php echo htmlspecialchars($jobCard['completedAction'] ?? ''); ?>">
													<?php echo nl2br(htmlspecialchars(mb_strimwidth($jobCard['completedAction'] ?? '', 0, 50, '...'))); ?>
												</td>
												<td><?php echo htmlspecialchars($jobCard['contactPerson']); ?></td>
												<td><?php echo htmlspecialchars($jobCard['personContactNumber']); ?></td>
												<td><?php echo htmlspecialchars($jobCard['technicianName']); ?></td>
												<td><?php echo htmlspecialchars($jobCard['supervisor']); ?></td>
												<td><?php echo htmlspecialchars($jobCard['billAmount']); ?></td>
												<td><?php echo htmlspecialchars($jobCard['lubricantBillAmount']); ?></td>
												<td><?php echo htmlspecialchars($jobCard['labourBillAmount']); ?></td>
												<td><?php echo htmlspecialchars($jobCard['dentBillAmount']); ?></td>
												<td><?php echo htmlspecialchars($jobCard['TotalBillAmount']); ?></td>
												<td><?php echo htmlspecialchars($jobCard['discountAmount']); ?></td>
												<td><?php echo htmlspecialchars($jobCard['AmountOfDiscount'] ?? '0.00'); ?></td>
												<td><?php echo htmlspecialchars($jobCard['vatAmount']); ?></td>
												<td><?php echo htmlspecialchars($jobCard['netTotal']); ?></td>
												<td><?php echo htmlspecialchars($jobCard['totalPaid']); ?></td>
												<td><?php echo htmlspecialchars($jobCard['remainingAmount']); ?></td>
												<td>
													<span class="badge badge-soft-success d-inline-flex align-items-center">
														<i class="ti ti-circle-filled fs-5 me-1"></i><?php echo htmlspecialchars($jobCard['paymentStatus']); ?>
													</span>
												</td>
												<td><?php echo htmlspecialchars($jobCard['billRemarks']); ?></td>
												<td><?php echo htmlspecialchars($jobCard['dateTimeOut']); ?></td>
											</tr>
									<?php
										} // end while
									} // end if
									?>

								</tbody>
							</table>
						</div>
					</div>
				</div>
				<!-- /product list -->
				<!-- Full Text Modal -->
				<div class="modal fade" id="edit-brand">
					<div class="modal-dialog modal-dialog-centered custom-modal-two">
						<div class="modal-content">
							<div class="page-wrapper-new p-0">
								<div class="content">
									<div class="modal-header border-0 custom-modal-header">
										<div class="page-title">
											<h4>Full Text</h4>
										</div>
										<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
											<span aria-hidden="true">&times;</span>
										</button>
									</div>
									<div class="modal-body custom-modal-body new-employee-field">
										<div class="mb-3">
											<label class="form-label">Full Content</label>
											<div id="modalFullText" style="white-space: pre-wrap; border: 1px solid #ccc; padding: 10px; border-radius: 6px;"></div>
										</div>
										<div class="modal-footer-btn">
											<button type="button" class="btn btn-cancel me-2" data-bs-dismiss="modal">Close</button>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</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="ca2910de634c75fe4e91cff7-text/javascript"></script>

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

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

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

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

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

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

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

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

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

	<!-- Custom JS -->


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

	<!--<script src="assets/js/theme-settings.js"></script>-->

	<script src="js/rocket-loader.min.js" data-cf-settings="ca2910de634c75fe4e91cff7-|49" defer=""></script>
</body>
<style>
	.dropdown {
		position: relative;
		display: inline-block;
	}

	.dropdown-content {
		display: none;
		position: absolute;
		top: 36px;
		right: 0;
		background-color: white;
		min-width: auto;
		padding: 5px 8px;
		box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);
		border-radius: 6px;
		z-index: 1000;
		white-space: nowrap;
	}

	.dropdown-content a {
		color: #333;
		padding: 4px 8px;
		margin: 0 4px;
		text-decoration: none;
		font-weight: bold;
		border: 1px solid #ccc;
		border-radius: 4px;
		font-size: 12px;
	}

	.dropdown-content a:hover {
		background-color: #f0f0f0;
	}

	.inline-options {
		display: flex;
		gap: 5px;
		justify-content: center;
	}
</style>
<script>
	document.getElementById("exportExcel").addEventListener("click", function() {
		// Get DataTable instance
		var table = $('#jobCardTable').DataTable();

		// Get all data, not just the visible page
		var allData = table.rows({
			search: 'applied'
		}).data(); // can use { search: 'none' } for ignoring search

		// Create a temporary HTML table for Excel
		var tempTable = '<table><thead><tr>';

		// Get headers
		$('#jobCardTable thead th').each(function() {
			tempTable += '<th>' + $(this).text() + '</th>';
		});
		tempTable += '</tr></thead><tbody>';

		// Loop through all data
		allData.each(function(row) {
			tempTable += '<tr>';
			for (var i = 0; i < row.length; i++) {
				tempTable += '<td>' + row[i] + '</td>';
			}
			tempTable += '</tr>';
		});

		tempTable += '</tbody></table>';

		// Create a downloadable Excel file
		var url = 'data:application/vnd.ms-excel,' + encodeURIComponent(tempTable);
		var a = document.createElement('a');
		a.href = url;
		a.download = 'jobCards.xls';
		a.click();
	});
</script>
<script>
	document.addEventListener('DOMContentLoaded', function() {
		const modal = new bootstrap.Modal(document.getElementById('edit-brand'));
		const textBox = document.getElementById('modalFullText');

		document.querySelectorAll('.show-full-text').forEach(cell => {
			cell.style.cursor = 'pointer';
			cell.addEventListener('click', () => {
				const fullText = cell.getAttribute('data-fulltext') || '';
				textBox.textContent = fullText;
				modal.show();
			});
		});
	});
</script>

</html>