<?php 
session_start();
include 'koneksi/koneksi.php';

if(isset($_SESSION['kd_cs'])){
	$kode_cs = $_SESSION['kd_cs'];
}

?>
<!DOCTYPE html>
<html lang="id">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>UMKM Galeri 3D</title>
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<link rel="icon" href="image/home/logo.ico" type="image/x-icon">

	<style>
		body {
			margin: 0;
			padding: 0;
			font-family: 'Poppins', sans-serif;
			background-color: #f8f8f8;
		}

		.header-top {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			background: linear-gradient(90deg, #ff7a00, #ff4500);
			color: white;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 10px 15px;
			z-index: 1000;
			box-shadow: 0 2px 10px rgba(0,0,0,0.1);
			height: 60px;
		}

		.header-top img {
			height: 45px;
			object-fit: contain;
		}

		.header-space {
			height: 40px;
		}

		.bottom-nav {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			background: #fff;
			display: flex;
			justify-content: space-around;
			align-items: center;
			border-top: 1px solid #ddd;
			box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
			z-index: 999;
			padding: 6px 0;
		}

		.bottom-nav a {
			text-decoration: none;
			color: #777;
			font-size: 12px;
			text-align: center;
			flex: 1;
		}

		.bottom-nav a i {
			display: block;
			font-size: 18px;
			margin-bottom: 3px;
		}

		.bottom-nav a.active {
			color: #ff4500;
			font-weight: 600;
		}

		.bottom-space {
			height: 40px;
		}

		.account-dropdown {
			position: absolute;
			bottom: 60px;
			right: 10px;
			background: white;
			border: 1px solid #ddd;
			box-shadow: 0 2px 10px rgba(0,0,0,0.1);
			border-radius: 8px;
			display: none;
			flex-direction: column;
			min-width: 140px;
			z-index: 1001;
		}
		.account-dropdown a {
			padding: 10px;
			color: #555;
			text-decoration: none;
			font-size: 13px;
		}
		.account-dropdown a:hover {
			background-color: #ffefdf;
			color: #ff4500;
		}

		@media (min-width: 768px) {
			.header-top { height: 70px; padding: 10px 80px; }
			.header-space { height: 60px; }
			.bottom-nav a i { font-size: 20px; }
			.bottom-nav a { font-size: 13px; }
		}

		@media (max-width: 767px) {
			.header-top {
				padding-right: 25px;
			}
			.header-search {
				margin-right: 10px;
			}
		}
	</style>
</head>
<body>

	<div class="header-top">
		<a href="index.php">
			<img src="image/home/logo.png" alt="Logo">
		</a>

		<a href="keranjang.php" style="color:white; margin-left:10px; position:relative;">
			<i class="fas fa-shopping-cart fa-lg"></i>
			<?php 
				if(isset($_SESSION['kd_cs'])){
					$cek = mysqli_query($conn, "SELECT kode_produk FROM keranjang WHERE kode_customer = '$kode_cs'");
					$value = mysqli_num_rows($cek);
					echo "<span style='position:absolute; top:-8px; right:-10px; background:white; color:#ff4500; font-size:11px; font-weight:bold; border-radius:50%; padding:2px 6px;'>$value</span>";
				}else{
					echo "<span style='position:absolute; top:-8px; right:-10px; background:white; color:#ff4500; font-size:11px; font-weight:bold; border-radius:50%; padding:2px 6px;'>0</span>";
				}
			?>
		</a>
	</div>

	<div class="header-space"></div>

	<div class="bottom-nav" id="bottomNav">
		<a href="index.php"><i class="fas fa-home"></i><span>Beranda</span></a>
		<a href="produk.php"><i class="fas fa-box-open"></i><span>Produk</span></a>
		<a href="pesanan.php"><i class="fas fa-clipboard-list"></i><span>Pesanan</span></a>

		<?php if(!isset($_SESSION['user'])): ?>
			<a href="user_login.php" id="akunBtn"><i class="fas fa-user"></i><span>Akun</span></a>
		<?php else: ?>
			<a href="javascript:void(0)" id="akunBtn"><i class="fas fa-user-circle"></i><span><?= $_SESSION['user']; ?></span></a>
		<?php endif; ?>
	</div>

	<?php if(isset($_SESSION['user'])): ?>
	<div class="account-dropdown" id="accountDropdown">
		<a href="profil.php"><i class="fa fa-user"></i> Profil Saya</a>
		<a href="proses/logout.php"><i class="fa fa-sign-out-alt"></i> Logout</a>
	</div>
	<?php endif; ?>

	<div class="bottom-space"></div>

	<script>
		const currentPage = location.pathname.split("/").pop();
		document.querySelectorAll('.bottom-nav a').forEach(link => {
			if (link.getAttribute('href') === currentPage) {
				link.classList.add('active');
			}
			link.addEventListener('mousedown', () => {
				document.querySelectorAll('.bottom-nav a').forEach(l => l.classList.remove('active'));
				link.classList.add('active');
			});
		});

		const akunBtn = document.getElementById('akunBtn');
		const dropdown = document.getElementById('accountDropdown');
		if (akunBtn && dropdown) {
			akunBtn.addEventListener('click', e => {
				e.stopPropagation();
				dropdown.style.display = (dropdown.style.display === 'flex') ? 'none' : 'flex';
			});
			document.addEventListener('click', e => {
				if (!dropdown.contains(e.target) && e.target !== akunBtn) {
					dropdown.style.display = 'none';
				}
			});
		}
	</script>

</body>
</html>
