<?php
// session_start();
?>
<style>
	/* Bottom Bar Styles */
	.bottom-bar {
		background: #fff;
		box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.08);
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 9999;
		animation: slideUp 0.4s ease-out forwards;
		transform: translateY(100%);
		opacity: 0;
	}

	@keyframes slideUp {
		to {
			transform: translateY(0);
			opacity: 1;
		}
	}

	.bar-content {
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 8px 0;
	}

	.nav-item {
		text-align: center;
		font-size: 13px;
		color: #444;
		text-decoration: none;
		cursor: pointer;
		position: relative;
	}

	.nav-item i {
		font-size: 20px;
		display: block;
		margin-bottom: 2px;
		transition: transform 0.2s ease;
	}

	.nav-item:hover i {
		color: var(--am-primary);
		transform: scale(1.15);
	}

	.nav-item.active i,
	.nav-item.active span {
		color: var(--am-primary);
	}

	.nav-item span {
		display: block;
		font-size: 11px;
		margin-top: 1px;
	}

	/* Badge */
	.badge {
		position: absolute;
		top: 0;
		right: 10px;
		background: #dc3545;
		color: white;
		font-size: 10px;
		padding: 2px 6px;
		border-radius: 50px;
		z-index: 10;
	}

	/* Slide-in Panels */
	.slide-panel {
		position: fixed;
		bottom: 60px;
		left: 50%;
		transform: translateX(-50%) translateY(calc(100% + 60px));
		width: 92%;
		max-width: 360px;
		background: #fff;
		box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
		border-radius: 10px;
		z-index: 10000;
		opacity: 0;
		transition: all 0.3s ease-in-out;
		overflow-y: auto;
		max-height: 70vh;
	}

	.slide-panel.show {
		transform: translateX(-50%) translateY(0);
		opacity: 1;
	}

	.slide-panel .header {
		font-weight: bold;
		padding: 10px 15px;
		border-bottom: 1px solid #eee;
		background: #f8f9fa;
	}

	/* Hide on desktop */
	@media (min-width: 768px) {
		.bottom-bar {
			display: none;
		}
	}
</style>

<!-- Bottom Bar -->
<div class="bottom-bar d-block d-md-none">
	<div class="container">
		<div class="bar-content">

			<!-- Home -->
			<a href="index.php" class="nav-item">
				<i class="fa fa-home"></i>
				<span>Home</span>
			</a>

			<!-- Categories -->
			<a href="category.php" class="nav-item">
				<i class="fa fa-th-large"></i>
				<span>Categories</span>
			</a>

			<!-- Search -->
			<div class="nav-item" id="toggleSearchPanel">
				<i class="fa fa-search"></i>
				<span>Search</span>
			</div>

			<!-- Cart -->
			<div class="nav-item" id="toggleCartPanel">
				<i class="fa fa-shopping-cart"></i>
				<?php if (!empty($_SESSION['qnty'])): ?>
					<span class="badge"><?php echo $_SESSION['qnty']; ?></span>
				<?php endif; ?>
				<span>Cart</span>
			</div>

			<!-- Account -->
			<div class="nav-item" id="toggleAccountPanel">
				<i class="fa fa-user-circle"></i>
				<span>Account</span>
			</div>

		</div>
	</div>
</div>

<!-- Slide-in Cart Panel -->
<div class="slide-panel" id="cartPanel">
	<div class="header">My Cart</div>
	<div class="p-3">
		<?php if (!empty($_SESSION['cart'])): ?>
			<?php
			$sql = "SELECT * FROM products WHERE id IN (" . implode(',', array_keys($_SESSION['cart'])) . ")";
			$query = mysqli_query($con, $sql);
			$totalprice = 0;
			$totalqunty = 0;

			if ($query && mysqli_num_rows($query) > 0):
				while ($row = mysqli_fetch_array($query)):
					$quantity = $_SESSION['cart'][$row['id']]['quantity'];
					$subtotal = $quantity * $row['productPrice'] + $row['shippingCharge'];
					$totalprice += $subtotal;
					$_SESSION['qnty'] = $totalqunty += $quantity;
					?>
					<div class="d-flex mb-2">
						<img src="__admin__/productimages/<?php echo $row['id']; ?>/<?php echo $row['productImage1']; ?>" width="50"
							height="60" class="me-2" onerror="this.src='assets/images/blank.gif'">
						<div>
							<small><?php echo $row['productName']; ?></small><br>
							<small class="text-muted">Ghs.<?php echo $row['productPrice'] + $row['shippingCharge']; ?> ×
								<?php echo $quantity; ?></small>
						</div>
					</div>
				<?php endwhile; ?>
				<hr>
				<strong>Total: Ghs.<?php echo $_SESSION['tp'] = number_format($totalprice, 2); ?></strong><br>
				<a href="my-cart.php" class="btn btn-primary btn-block mt-2">Go to Cart</a>
			<?php endif; ?>
		<?php else: ?>
			<p class="text-muted">Your cart is empty.</p>
			<a href="index.php" class="btn btn-outline-primary btn-block">Shop Now</a>
		<?php endif; ?>
	</div>
</div>

<!-- Slide-in Search Panel -->
<div class="slide-panel" id="searchPanel">
	<div class="header">Search Products</div>
	<div class="p-3">
		<form name="search" method="post" action="search-result.php">
			<div class="form-group mb-3">
				<input type="text" class="form-control" placeholder="Search for products, brands and categories..."
					name="product" required autofocus>
			</div>
			<button type="submit" name="search" class="btn btn-primary btn-block">
				<i class="fa fa-search me-2"></i> Search
			</button>
		</form>
	</div>
</div>

<!-- Slide-in Account Panel -->
<div class="slide-panel" id="accountPanel">
	<div class="header">Account</div>
	<div class="p-3">
		<?php if (strlen($_SESSION['login'])): ?>
			<p><strong>Welcome - <?php echo htmlentities($_SESSION['username']); ?></strong></p>
		<?php endif; ?>
		<ul class="list-unstyled">
			<li><a href="my-account.php" class="d-block py-2"><i class="fa fa-user me-1"></i> My Account</a></li>
			<li><a href="my-wishlist.php" class="d-block py-2"><i class="fa fa-heart me-1"></i> Wishlist</a></li>
			<li><a href="my-cart.php" class="d-block py-2"><i class="fa fa-shopping-cart me-1"></i> My Cart</a></li>
			<li><a href="track-orders.php" class="d-block py-2"><i class="fa fa-truck me-1"></i> Track Order</a></li>
			<?php if (strlen($_SESSION['login']) == 0): ?>
				<li><a href="login.php" class="d-block py-2"><i class="fa fa-sign-in me-1"></i> Login</a></li>
			<?php else: ?>
				<li><a href="logout.php" class="d-block py-2"><i class="fa fa-sign-out me-1"></i> Logout</a></li>
			<?php endif; ?>
		</ul>
	</div>
</div>

<!-- JavaScript is in assets/js/bottom-nav.js -->
