<!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 = 'product-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>JobCard List</h4>
							<h6>Manage your JobCards</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 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">
							<table class="table datanew">
								<thead>
									<tr>
										<th>Job No.</th>
										<th>Billing Date</th>
										<th>Customer Name</th>
										<th>Contact</th>
										<th>Reg. No.</th>
										<th>vehicleBrand</th>
										<th>vehicleModel</th>
										<th>vehicleColour</th>
										<th>Millage</th>
										<th>Engine No.</th>
										<th>Vin. No.</th>
										<th>Payment Status</th>
										<th class="no-sort">Action</th>
									</tr>
								</thead>
								<tbody>
									<?php
									require_once 'php/jobCardDataFromDatabase.php';
									foreach ($jobCards as $jobCard) {
									?>
										<tr>
											<td><a href="#" class="link-primary"><?php echo $jobCard['jobNumber']; ?></a></td>
											<td><?php echo $jobCard['jobDate']; ?></td>
											<td><?php echo $jobCard['customerName']; ?></td>
											<td><?php echo $jobCard['contactNumber']; ?></td>
											<td><?php echo $jobCard['registerNumber']; ?></td>
											<td><?php echo $jobCard['vehicleBrand']; ?></td>
											<td><?php echo $jobCard['vehicleModel']; ?></td>
											<td><?php echo $jobCard['vehicleColour']; ?></td>
											<td><?php echo $jobCard['millage']; ?></td>
											<td><?php echo $jobCard['engineNumber']; ?></td>
											<td><?php echo $jobCard['vinNumber']; ?></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 $jobCard['paymentStatus']; ?></span></td>
											</td>
											<td class="action-table-data">
												<div class="edit-delete-action">
													<a class="me-2 edit-icon p-2" href="jobCard-details.php?jobNumber=<?php echo $jobCard['jobNumber']; ?>">
														<i data-feather="eye" class="feather-eye"></i>
													</a>

													<a class="me-2 p-2" href="edit-product.php?jobNumber=<?php echo $jobCard['jobNumber']; ?>">
														<i data-feather="edit" class="feather-edit"></i>
													</a>
													<div class="dropdown" id="printerDropdown_<?php echo $jobCard['jobNumber']; ?>">
														<a class="p-2" href="javascript:void(0);" onclick="toggleDropdown('<?php echo $jobCard['jobNumber']; ?>')">
															<i data-feather="printer" class="feather-eye"></i>
														</a>
														<div class="dropdown-content" id="dropdownMenu_<?php echo $jobCard['jobNumber']; ?>">
															<div class="inline-options">
																<a href="Demo.php?jobNumber=<?php echo $jobCard['jobNumber']; ?>&type=regular">I</a>
																<a href="Demo2.php?jobNumber=<?php echo $jobCard['jobNumber']; ?>&type=normal">P</a>
															</div>
														</div>
													</div>


													<script>
														feather.replace();

														function toggleDropdown(jobNumber) {
															// First, hide all dropdowns
															document.querySelectorAll('.dropdown-content').forEach(el => {
																el.style.display = 'none';
															});

															// Then toggle the clicked one
															const menu = document.getElementById("dropdownMenu_" + jobNumber);
															if (menu) {
																menu.style.display = "block";
															}
														}

														// Close all dropdowns when clicked outside
														window.addEventListener("click", function(e) {
															// Only close if clicked outside any .dropdown
															if (!e.target.closest('.dropdown')) {
																document.querySelectorAll('.dropdown-content').forEach(el => {
																	el.style.display = 'none';
																});
															}
														});
													</script>

												</div>
											</td>
										</tr>
									<?php } ?>
								</tbody>
							</table>
						</div>
					</div>
				</div>
				<!-- /product list -->
			</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>

</html>