<?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'); ?>

	<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">Pending Payments</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">Unpaid Orders</h3>
									<div class="d-flex align-items-center gap-2">
										<span class="small text-muted d-none d-md-inline">Complete payment to process these
											orders</span>
										<span
											class="badge bg-warning-light text-warning rounded-pill py-2 px-3 border border-warning-subtle">
											<i class="fa fa-clock-o me-1"></i> Payment Required
										</span>
									</div>
								</div>

								<div class="table-responsive">
									<table class="table table-hover align-middle order-history-table mb-0">
										<thead class="bg-light text-nowrap">
											<tr>
												<th class="py-3 px-3 border-0 text-uppercase small fw-bold text-muted text-nowrap"
													style="width: 10%;">Order #</th>
												<th class="py-3 border-0 text-uppercase small fw-bold text-muted"
													style="width: 30%;">Product Details</th>
												<th class="py-3 text-center border-0 text-uppercase small fw-bold text-muted text-nowrap"
													style="width: 5%;">Qty</th>
												<th class="py-3 text-end border-0 text-uppercase small fw-bold text-muted text-nowrap"
													style="width: 10%;">Price</th>
												<th class="py-3 text-end border-0 text-uppercase small fw-bold text-muted text-nowrap"
													style="width: 10%;">Ship</th>
												<th class="py-3 text-end border-0 text-uppercase small fw-bold text-muted text-nowrap"
													style="width: 10%;">Total</th>
												<th class="py-3 text-center border-0 text-uppercase small fw-bold text-muted"
													style="width: 15%;">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 oid from orders join products on orders.productId=products.id where orders.userId='" . $_SESSION['id'] . "' and orders.paymentMethod is null ORDER BY orders.orderDate DESC");
											$num = mysqli_num_rows($query);
											if ($num > 0) {
												while ($row = mysqli_fetch_array($query)) {
													$qty = $row['qty'];
													$price = $row['pprice'];
													$shippcharge = $row['shippingcharge'];
													$grandtotal = ($qty * $price) + $shippcharge;
													?>
													<tr class="order-row">
														<!-- Order # -->
														<td class="ps-3 fw-bold text-dark cell-order">
															<span class="order-id-chip">#<?php echo $row['oid']; ?></span>
														</td>

														<!-- Product -->
														<td class="cell-product">
															<div class="d-flex align-items-center product-detail-cell">
																<div class="product-img-wrapper me-3">
																	<img src="__admin__/productimages/<?php echo $row['proid']; ?>/<?php echo $row['pimg1']; ?>"
																		alt="" width="50" height="50"
																		class="rounded border object-fit-cover bg-white">
																</div>
																<div class="product-info-wrapper overflow-hidden">
																	<h6 class="mb-1 text-dark pname-text text-truncate">
																		<?php echo $row['pname']; ?>
																	</h6>
																	<div class="text-muted small d-none d-md-block">
																		<?php echo date('M d, Y', strtotime($row['odate'])); ?>
																	</div>
																</div>
															</div>
														</td>

														<!-- Qty -->
														<td class="text-center cell-qty">
															<span class="qty-badge"><?php echo $qty; ?></span>
														</td>

														<!-- Price -->
														<td class="text-end cell-price font-monospace text-muted small">
															<?php echo number_format($price, 2); ?>
														</td>

														<!-- Shipping -->
														<td class="text-end cell-shipping small">
															<?php if ($shippcharge > 0): ?>
																<span
																	class="text-muted">+<?php echo number_format($shippcharge, 2); ?></span>
															<?php else: ?>
																<span
																	class="badge bg-success-subtle text-success border border-success-subtle rounded-pill">Free</span>
															<?php endif; ?>
														</td>

														<!-- Total -->
														<td class="text-end cell-total fw-bold text-dark font-monospace">
															<?php echo number_format($grandtotal, 2); ?>
														</td>

														<!-- Action -->
														<td class="text-center cell-action">
															<div class="d-flex justify-content-center gap-1">
																<a href="payment-method.php"
																	class="btn btn-primary btn-sm rounded-pill px-3 py-1 small flex-grow-1">
																	Pay
																</a>
																<a href="pending-orders.php?id=<?php echo $row['oid']; ?>"
																	class="btn btn-outline-danger btn-sm rounded-circle p-1 d-flex align-items-center justify-content-center"
																	onclick="return confirm('Are you sure you want to cancel this unpaid order?');"
																	style="width: 28px; height: 28px;" title="Cancel Order">
																	<i class="fa fa-times"></i>
																</a>
															</div>
														</td>
													</tr>
													<?php
												}
											} else { ?>
												<tr>
													<td colspan="7" class="text-center py-5">
														<div class="py-4">
															<div class="empty-state-icon mb-3">
																<i class="fa fa-check-circle fa-3x text-success opacity-25"></i>
															</div>
															<h5 class="text-dark fw-bold">All caught up!</h5>
															<p class="text-muted px-4">You have no orders awaiting payment.</p>
															<a href="order-history.php"
																class="btn btn-outline-primary rounded-pill px-5 py-2 mt-2">View
																Order History</a>
														</div>
													</td>
												</tr>
											<?php } ?>
										</tbody>
									</table>
								</div>

								<?php if ($num > 0): ?>
									<div
										class="mt-4 p-3 bg-light rounded-3 d-flex flex-column flex-md-row justify-content-between align-items-center gap-3">
										<span class="text-muted small"><i class="fa fa-info-circle me-1"></i> Orders will be
											automatically cancelled if not paid within 24 hours.</span>
										<a href="payment-method.php"
											class="btn btn-primary px-5 py-2 fw-bold rounded-pill shadow-sm w-100 w-md-auto text-center">
											Complete All Payments <i class="fa fa-arrow-right ms-2"></i>
										</a>
									</div>
								<?php endif; ?>
							</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-warning-light {
				background-color: rgba(255, 193, 7, 0.08);
			}

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

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

				.order-history-table tbody {
					display: block;
				}

				.order-history-table tr.order-row {
					display: grid;
					grid-template-columns: 55px 1fr auto;
					padding: 12px;
					border: 1px solid #e0e0e0 !important;
					border-radius: 8px;
					margin-bottom: 10px;
					background: #fff;
					box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
					align-items: center;
					gap: 8px;
				}

				/* 1: Image */
				.cell-product {
					grid-column: 1;
					grid-row: 1 / span 2;
					padding: 0 !important;
					border: none !important;
					width: auto !important;
				}

				.cell-product .product-img-wrapper {
					margin: 0;
				}

				.cell-product .product-img-wrapper img {
					width: 45px;
					height: 45px;
					border-radius: 4px;
				}

				.cell-product .product-info-wrapper {
					display: none !important;
				}

				/* 2: Content (Title) - Repurposed Cell */
				.cell-product {
					grid-column: 1 / span 2;
					grid-row: 1;
					display: flex !important;
					align-items: center;
					width: 100% !important;
					margin-bottom: 4px;
				}

				.cell-product .product-info-wrapper {
					display: block !important;
					margin-left: 10px;
				}

				.pname-text {
					font-size: 14px;
					font-weight: 600;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					max-width: 180px;
				}

				/* 3: Action Button */
				.cell-action {
					grid-column: 3;
					grid-row: 1 / span 2;
					padding: 0 !important;
					border: none !important;
					justify-self: end;
					align-self: center;
				}

				/* 4: Total Price */
				.cell-total {
					grid-column: 2;
					grid-row: 2;
					padding: 0 !important;
					border: none !important;
					text-align: left !important;
					font-size: 13px;
					color: #cecece;
					align-self: start;
				}

				.cell-total::before {
					content: 'Pay: ';
					color: #555;
					font-size: 12px;
				}

				/* Hide others */
				.cell-order,
				.cell-qty,
				.cell-price,
				.cell-shipping {
					display: none !important;
				}
			}
		</style>

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

	</html>
<?php } ?>