<?php
// Handle cart quantity updates
if (isset($_GET['action'])) {
	if (!empty($_SESSION['cart'])) {
		foreach ($_POST['quantity'] as $key => $val) {
			if ($val == 0) {
				unset($_SESSION['cart'][$key]);
			} else {
				$_SESSION['cart'][$key]['quantity'] = $val;
			}
		}
	}
}
?>

<!-- Main Header - Logo, Search, Cart -->
<div class="main-header">
	<div class="container">
		<div class="row align-items-center py-0">
			<!-- Logo -->
			<?php
			$isAdmin = ((isset($_SESSION['role']) && $_SESSION['role'] === 'admin') || (!empty($_SESSION['alogin'])));
			$mobileJustify = $isAdmin ? 'justify-content-center' : 'justify-content-start ps-3';
			?>
			<div
				class="col-12 col-md-3 mb-2 mb-md-0 position-relative d-flex align-items-center <?php echo $mobileJustify; ?> justify-content-md-start">
				<a href="index.php" class="text-decoration-none">
					<img src="assets/images/logo.png" alt="Awesome Mall" class="site-logo-img">
				</a>

			</div>

			<!-- Search Box -->
			<div class="col-12 col-md-6 mb-2 mb-md-0">
				<form name="search" method="post" action="search-result.php">
					<div class="input-group search-group">
						<input class="form-control search-input"
							placeholder="Search for products, brands and categories..." name="product" required>
						<button class="btn btn-search" type="submit" name="search">
							<i class="fa fa-search"></i> Search
						</button>
					</div>
				</form>
			</div>

			<!-- Cart & Account Icons -->
			<div class="col-12 col-md-3 d-flex align-items-center justify-content-around justify-content-md-end">

				<a href="my-account.php" class="header-icon-link d-none d-md-inline-flex">
					<i class="fa fa-user me-2"></i>
				</a>
				<a href="contact-us.php" class="header-icon-link d-none d-md-inline-flex">
					<i class="fa fa-question-circle me-2"></i>
				</a>
				<a href="my-cart.php" class="header-icon-link cart-link d-none d-md-inline-flex">
					<i class="fa fa-shopping-cart me-2"></i>
					<span class="cart-badge" id="cart-count"
						style="<?php echo empty($_SESSION['cart']) ? 'display:none;' : ''; ?>">
						<?php echo !empty($_SESSION['cart']) ? count($_SESSION['cart']) : '0'; ?>
					</span>
				</a>
			</div>
		</div>
	</div>
</div>

<?php if ($isAdmin): ?>
	<!-- Admin Portal FAB -->
	<a href="admin-login.php" class="admin-fab" title="Admin Portal">
		<i class="fa fa-cog"></i>
	</a>
<?php endif; ?>

<style>
	/* Main Header Styling - Franko Style */
	.main-header {
		background: #fff;
		border-bottom: 1px solid #eee;
		height: 60px;
		display: flex;
		align-items: center;
		/* Vertically center all content */
	}

	/* Logo Image */
	.site-logo-img {
		height: 35px;
		/* Slimmer logo */
		width: auto;
		transition: transform 0.3s ease;
	}

	.site-logo-img:hover {
		transform: scale(1.05);
	}

	/* Search Box */
	.search-group {
		display: flex;
		gap: 15px;
		/* Gap between input and button as requested */
	}

	.search-input {
		border: 1px solid #777;
		/* Lighter dark border as requested */
		border-radius: 4px !important;
		/* Fully rounded since separated */
		padding: 8px 12px;
		font-size: 13px;
		height: 38px;
		flex: 1;
	}

	.search-input:focus {
		box-shadow: none;
		border-color: #000;
	}

	.btn-search {
		background: #E8663D;
		border: 1px solid #E8663D;
		color: #fff;
		padding: 8px 16px;
		font-weight: 600;
		border-radius: 4px !important;
		/* Fully rounded since separated */
		height: 38px;
		font-size: 13px;
		box-shadow: 0 2px 8px rgba(232, 102, 61, 0.3);
		/* Shadow as requested */
		transition: all 0.3s ease;
	}

	.btn-search:hover {
		background: #006600;
		border-color: #006600;
		color: #fff;
		box-shadow: 0 4px 12px rgba(0, 102, 0, 0.4);
	}

	/* Header Icons */
	.header-icon-link {
		display: inline-flex;
		flex-direction: row;
		align-items: center;
		margin-left: 15px;
		/* Tighter spacing */
		text-decoration: none !important;
		color: #555;
		/* Softer dark */
		padding: 8px;
		/* Click area */
		border-radius: 50%;
		/* Circular hover effect potential */
		transition: all 0.2s;
		position: relative;
		/* Fix for absolute badge */
	}

	.header-icon-link i {
		font-size: 20px;
		color: #111;
		/* Darker color as requested */
	}

	.header-icon-link:hover {
		color: var(--am-primary);
		background: rgba(0, 0, 0, 0.03);
		/* Subtle hover bg */
	}

	.header-icon-link:hover i {
		color: var(--am-primary);
	}

	.cart-badge {
		position: absolute;
		top: -5px;
		right: -5px;
		/* Top right corner */
		left: auto;
		background: var(--am-primary);
		color: #fff;
		font-size: 9px;
		width: 16px;
		height: 16px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 700;
		border: 1px solid #fff;
		/* Separation from icon */
	}

	/* Admin Portal FAB */
	.admin-fab {
		position: fixed;
		bottom: 30px;
		right: 30px;
		background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%);
		color: white !important;
		width: 60px;
		height: 60px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24px;
		box-shadow: 0 4px 15px rgba(244, 67, 54, 0.4);
		transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
		z-index: 9999;
		text-decoration: none !important;
	}

	.admin-fab:hover {
		transform: scale(1.1);
		box-shadow: 0 8px 25px rgba(244, 67, 54, 0.6);
		color: white !important;
	}

	.admin-fab i {
		animation: rotate 3s linear infinite;
	}

	@keyframes rotate {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	/* Tablet Adjustments */
	@media (max-width: 991px) {
		.search-input {
			font-size: 12px;
			padding: 6px 10px;
		}

		.btn-search {
			font-size: 12px;
			padding: 6px 12px;
		}
	}

	/* Mobile Devices */
	@media (max-width: 767px) {
		.main-header {
			padding: 10px 0;
			height: auto;
			min-height: 55px;
			/* Ensure minimum height for centering */
		}

		.site-logo-img {
			height: 30px;
		}

		/* Hide search box on mobile - use bottom nav instead */
		.search-group {
			display: none !important;
		}

		/* Mobile icons - show in header */
		.header-icon-link {
			margin-left: 8px;
			padding: 6px;
		}

		.header-icon-link i {
			font-size: 18px;
		}

		.cart-badge {
			width: 14px;
			height: 14px;
			font-size: 8px;
		}

		/* Admin FAB on mobile */
		.admin-fab {
			bottom: 20px;
			right: 20px;
			width: 50px;
			height: 50px;
			font-size: 20px;
		}
	}

	/* Small Mobile Devices */
	@media (max-width: 480px) {
		.main-header {
			padding: 8px 0;
		}

		.site-logo-img {
			height: 28px;
		}

		.search-input {
			font-size: 12px;
			height: 34px;
		}

		.btn-search {
			height: 34px;
			font-size: 12px;
		}

		.header-icon-link {
			margin-left: 5px;
		}

		.header-icon-link i {
			font-size: 16px;
		}
	}
</style>