<?php
	// Fetch slider images
	$slider_query = "SELECT id, slider_name, slider_images FROM slider_images where slider_name='HomePage_Slider'";
	$slider_result = $conn->query($slider_query);

	// Fetch menu items
	$menu_query = "SELECT name, link FROM menu ORDER BY id ASC";
	$menu_result = $conn->query($menu_query);
?>

<!-- Sliders -->
<div class="container-fluid px-0">
	<?php
	if ($slider_result->num_rows > 0):
		while($row = $slider_result->fetch_assoc()):
			$sliderName = $row["slider_name"];
			$images = array_filter(array_map('trim', explode(',', $row["slider_images"])));
			$totalSlides = count($images);
			$carouselId = 'carousel_' . $row["id"];
	?>
	<!-- Carousel -->
	<div id="<?= $carouselId ?>" class="carousel slide position-relative" data-bs-ride="carousel">
		<!-- Dot Indicators -->
		<div class="carousel-indicators">
			<?php foreach (array_keys($images) as $i): ?>
				<button type="button" data-bs-target="#<?= $carouselId ?>" data-bs-slide-to="<?= $i ?>" <?= $i === 0 ? 'class="active"' : '' ?> aria-label="Slide <?= $i+1 ?>"></button>
			<?php endforeach; ?>
		</div>

		<!-- Image Slides -->
		<div class="carousel-inner">
			<?php
			$activeSet = false;
			foreach ($images as $index => $img):
				$safeImg = basename($img);
				$path = 'admin/uploads/sliders/' . $sliderName . '/' . $safeImg;
				if (file_exists($path)):
			?>
			<div class="carousel-item <?= !$activeSet ? 'active' : '' ?>">
				<div class="position-relative w-100 h-100">
					<img src="<?= htmlspecialchars($path) ?>" class="d-block w-100 img-fluid h-100 object-fit-cover" alt="<?= htmlspecialchars($sliderName) ?>">
				</div>
			</div>
			<?php
				$activeSet = true;
				endif;
			endforeach;
			?>
		</div>

		<!-- Slide Counter -->
		<div class="slide-counter" id="counter_<?= $carouselId ?>">
		    <span class="active-count">1</span>/<span class="total-count"><?= $totalSlides ?></span>
		</div>
	</div>
	<?php
		endwhile;
	else:
		echo "<p class='text-center'>No sliders found.</p>";
	endif;
	?>


	<!-- Static Lines -->
	<div class="carousel-lines">
		<div class="line-left"></div>
		<div class="line-right"></div>
		<div class="line-top"></div>
	</div>

	<!-- Logo -->
	<div class="logo d-flex align-items-center p-2">
		<img src="images/icons/logo.jpg" alt="Logo" class="img-fluid me-2" style="height: 75px;">
	</div>


	<!-- Centered Slider Text Overlay -->
	<div class="slider-text-overlay">
		<h2>Crafting Spaces. <br> Making It More Than A <br> Dream For Clients</h2>
	</div>


	<!-- Hamburger Menu Icon -->
	<div class="top-right-icons d-flex align-items-center p-2">
		<button class="btn text-white" type="button" id="hamburgerMenu" data-bs-toggle="offcanvas" data-bs-target="#offcanvasMenu" aria-controls="offcanvasMenu" title="Menu">
			<svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" fill="currentColor" class="bi bi-list icon-opacity-low" viewBox="0 0 16 16">
				<path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-11zm0-4a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-11zm0-4a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-11z"/>
			</svg>
		</button>
	</div>


	<!-- Offcanvas Menu -->
	<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasMenu" aria-labelledby="offcanvasMenuLabel">
		<div class="offcanvas-header">
			<h5 class="offcanvas-title" id="offcanvasMenuLabel">Main Menu</h5>
			<img src="images/icons/Back Arrow.png" data-bs-dismiss="offcanvas" aria-label="Close">
		</div>
		<div class="offcanvas-body">
			<ul class="nav flex-column">
				<?php if ($menu_result && $menu_result->num_rows > 0): ?>
					<?php while ($row = $menu_result->fetch_assoc()): ?>
						<li class="nav-item">
							<a class="nav-link text-white" href="<?= htmlspecialchars($row['link']) ?>">
								<?= htmlspecialchars($row['name']) ?>
							</a>
						</li>
					<?php endwhile; ?>
				<?php else: ?>
					<li class="nav-item">
						<a class="nav-link text-white" href="#">No menu items found</a>
					</li>
				<?php endif; ?>
			</ul>
		</div>
	</div>

	<!-- Social Media Icons -->
	<div class="social-media-icons">
		<a href="https://facebook.com" target="_blank" title="Facebook"><i class="fab fa-facebook-f"></i></a>
		<a href="https://instagram.com" target="_blank" title="Instagram"><i class="fab fa-instagram"></i></a>
		<a href="https://linkedin.com" target="_blank" title="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
		<a href="https://pinterest.com" target="_blank" title="Pinterest"><i class="fab fa-pinterest-p"></i></a>
	</div>

</div>