<?php
session_start();
error_reporting(0);
include('includes/config.php');
include_once('includes/settings.php');
if (strlen($_SESSION['login']) == 0) {
	header('location:login.php');
} else {
	if (isset($_GET['id'])) {
		mysqli_query($con, "delete from orders where userId='" . $_SESSION['id'] . "' and paymentMethod is null and id='" . $_GET['id'] . "' ");
	}
	?>

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

	<script language="javascript" type="text/javascript">
		var popUpWin = 0;
		function popUpWindow(URLStr, left, top, width, height) {
			if (popUpWin) {
				if (!popUpWin.closed) popUpWin.close();
			}
			popUpWin = open(URLStr, 'popUpWin', 'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=no,copyhistory=yes,width=' + 600 + ',height=' + 600 + ',left=' + left + ', top=' + top + ',screenX=' + left + ',screenY=' + top + '');
		}
	</script>

	<body class="cnt-home">

		<!-- ============================================== HEADER ============================================== -->
		<header class="header-style-1">
			<?php include('includes/top-header.php'); ?>
			<?php include('includes/main-header.php'); ?>
			<?php include('includes/menu-bar.php'); ?>
		</header>
		<!-- ============================================== HEADER : END ============================================== -->

		<!-- Breadcrumb -->
		<div class="breadcrumb-container bg-light py-3 border-bottom mb-4">
			<div class="container">
				<nav aria-label="breadcrumb">
					<ol class="breadcrumb mb-0">
						<li class="breadcrumb-item"><a href="index.php" class="text-decoration-none"><i
									class="fa fa-home"></i> Home</a></li>
						<li class="breadcrumb-item active" aria-current="page">My Account</li>
						<li class="breadcrumb-item active" aria-current="page">Order History</li>
					</ol>
				</nav>
			</div>
		</div>

		<div class="body-content pb-5">
			<div class="container-fluid px-lg-5">
				<div class="checkout-box shadow-sm rounded-4 overflow-hidden bg-white">
					<div class="row g-0">
						<!-- Main Content -->
						<div class="col-lg-10 border-end">
							<div class="p-4">
								<div
									class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3 mb-4 pb-3 border-bottom">
									<h3 class="fw-bold mb-0 text-dark">Order History</h3>
									<div class="d-flex align-items-center gap-2">
										<span class="small text-muted d-none d-md-inline">Manage and track your recent
											purchases</span>
										<span
											class="badge bg-primary-light text-primary rounded-pill py-2 px-3 border border-primary-subtle">
											<i class="fa fa-truck me-1"></i> Track Status
										</span>
									</div>
								</div>

								<div class="table-responsive">
									<table class="table table-hover align-middle mb-0">
										<thead class="bg-light">
											<tr>
												<th class="py-3 px-3 border-0 text-uppercase small fw-bold text-muted"
													style="width: 10%;">Order #</th>
												<th class="py-3 border-0 text-uppercase small fw-bold text-muted"
													style="width: 35%;">Product Name</th>
												<th class="py-3 border-0 text-uppercase small fw-bold text-muted"
													style="width: 15%;">Payment Method</th>
												<th class="py-3 text-center border-0 text-uppercase small fw-bold text-muted"
													style="width: 8%;">Qty</th>
												<th class="py-3 text-center border-0 text-uppercase small fw-bold text-muted"
													style="width: 12%;">Price</th>
												<th class="py-3 text-center border-0 text-uppercase small fw-bold text-muted"
													style="width: 10%;">Action</th>
											</tr>
										</thead>
										<tbody>
											<?php
											$query = mysqli_query($con, "select products.productImage1 as pimg1,products.productName as pname,products.id as proid,orders.productId as opid,orders.quantity as qty,products.productPrice as pprice,products.shippingCharge as shippingcharge,orders.paymentMethod as paym,orders.orderDate as odate,orders.id as orderid from orders join products on orders.productId=products.id where orders.userId='" . $_SESSION['id'] . "' and orders.paymentMethod is not null ORDER BY orders.orderDate DESC");
											while ($row = mysqli_fetch_array($query)) {
												$qty = $row['qty'];
												$price = $row['pprice'];
												$shippcharge = $row['shippingcharge'];
												$grandtotal = ($qty * $price) + $shippcharge;
												$paymentMethod = $row['paym'];
												?>
												<tr>
													<td class="px-3 text-dark fw-medium">#<?php echo $row['orderid']; ?></td>
													<td>
														<div class="d-flex align-items-center">
															<img src="__admin__/productimages/<?php echo $row['proid']; ?>/<?php echo $row['pimg1']; ?>"
																alt="" width="40" height="40" class="rounded border me-2"
																style="object-fit: cover;">
															<span
																class="text-dark fw-medium"><?php echo htmlentities($row['pname']); ?></span>
														</div>
													</td>
													<td>
														<?php
														$paymentDisplay = trim($paymentMethod);
														if (!empty($paymentDisplay) && $paymentDisplay !== 'null'):
															?>
															<span class="payment-badge"
																style="background-color: #fff5f2; color: #E8663D; border: 1px solid #ffdbce; font-weight: 500; display: inline-block; border-radius: 4px; padding: 4px 12px; font-size: 13px; white-space: nowrap;">
																<?php echo htmlentities($paymentDisplay); ?>
															</span>
														<?php else: ?>
															<span class="payment-badge"
																style="background-color: #f8f9fa; color: #6c757d; border: 1px solid #dee2e6; font-weight: 500; display: inline-block; border-radius: 4px; padding: 4px 12px; font-size: 13px;">Not
																Set</span>
														<?php endif; ?>
													</td>
													<td class="text-center text-dark"><?php echo $qty; ?></td>
													<td class="text-end fw-bold text-dark">
														<?php echo currency_symbol(); ?>
														<?php echo number_format($grandtotal, 2); ?>
													</td>
													<td class="text-center">
														<button class="btn btn-outline-primary btn-sm px-3"
															style="font-size: 13px; padding: 5px 20px; border-radius: 4px; font-weight: 500;"
															onClick="popUpWindow('track-order.php?oid=<?php echo htmlentities($row['orderid']); ?>');">
															Track
														</button>
													</td>
												</tr>
											<?php } ?>
											<?php if (mysqli_num_rows($query) == 0): ?>
												<tr>
													<td colspan="6" class="text-center py-5">
														<div class="py-4">
															<i class="fa fa-shopping-bag fa-3x text-muted opacity-25 mb-3"></i>
															<h5 class="text-dark fw-bold">No orders found</h5>
															<a href="index.php"
																class="btn btn-primary rounded-pill px-4 mt-2">Start
																Shopping</a>
														</div>
													</td>
												</tr>
											<?php endif; ?>
										</tbody>
									</table>
								</div>
							</div>
						</div>

						<!-- Sidebar Section -->
						<div class="col-lg-2 bg-light p-0 border-start">
							<div class="sticky-top" style="top: 2rem;">
								<?php include('includes/myaccount-sidebar.php'); ?>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<style>
			/* Desktop & General Styles */
			.order-id-chip {
				background: #f0f2f5;
				padding: 3px 8px;
				border-radius: 4px;
				font-size: 12px;
				color: #444;
			}

			.qty-badge {
				background: #eee;
				min-width: 24px;
				height: 24px;
				padding: 0 6px;
				display: inline-flex;
				align-items: center;
				justify-content: center;
				border-radius: 12px;
				font-weight: 600;
				font-size: 12px;
			}

			.bg-success-subtle {
				background-color: #f0fdf4 !important;
			}

			.font-monospace {
				font-family: 'Courier New', monospace;
				letter-spacing: -0.5px;
			}

			/* Mobile View */
			@media (max-width: 767px) {
				.table thead {
					display: none;
				}

				.table tbody {
					display: block;
				}

				.table tbody tr {
					display: block;
					padding: 14px;
					padding-left: 75px;
					border: 1px solid #e0e0e0 !important;
					border-radius: 10px;
					margin-bottom: 14px;
					background: #fff;
					box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
					position: relative;
					min-height: 80px;
				}

				/* All table cells display as block */
				.table tbody tr td {
					display: block !important;
					padding: 0 !important;
					border: none !important;
					text-align: left !important;
				}

				/* Order # - hide on mobile */
				.table tbody tr td:nth-child(1) {
					display: none !important;
				}

				/* Product Name - contains image and title */
				.table tbody tr td:nth-child(2) {
					margin-bottom: 8px;
					padding-right: 100px !important;
				}

				.table tbody tr td:nth-child(2) img {
					position: absolute !important;
					left: 8px;
					top: 12px;
					width: 60px !important;
					height: 60px !important;
				}

				.table tbody tr td:nth-child(2) span {
					display: block;
					font-size: 15px;
					line-height: 1.3;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				/* Payment Method - absolute top right */
				.table tbody tr td:nth-child(3) {
					position: absolute;
					top: 12px;
					right: 12px;
				}

				.table tbody tr td:nth-child(3) .payment-badge {
					font-size: 11px !important;
					padding: 3px 10px !important;
				}

				/* Qty - hide on mobile */
				.table tbody tr td:nth-child(4) {
					display: none !important;
				}

				/* Price - show below title */
				.table tbody tr td:nth-child(5) {
					font-size: 16px;
					margin-bottom: 10px;
				}



				/* Action - absolute bottom right */
				.table tbody tr td:nth-child(6) {
					position: absolute;
					bottom: 12px;
					right: 12px;
				}

				.table tbody tr td:nth-child(6) button {
					padding: 7px 20px !important;
					font-size: 13px !important;
				}
			}
		</style>

		<?php include('includes/footer.php'); ?>
		<?php include('includes/foot.php'); ?>

	</body>

	</html>
<?php } ?>