<?php
	include "ominterior_db.php";

	$slider_query = "SELECT id, slider_name, slider_images FROM slider_images WHERE slider_name = 'Service'";
	$slider_result = $conn->query($slider_query);

	$menu_query = "SELECT name, link FROM menu ORDER BY id ASC";
	$menu_result = $conn->query($menu_query);

	$cat_sql = "SELECT DISTINCT project_category FROM project_list";
	$cat_result = $conn->query($cat_sql);

	$project_sql = "SELECT * FROM project_list";
	$project_result = $conn->query($project_sql);
?>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>OM INTERIOR | Services</title>

	<link rel="icon" href="assets/images/favicon.png" type="image/x-icon">

	<!-- Bootstrap & Icons -->
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">

	<!-- Swiper -->
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
	<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

	<!-- Font Awesome -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

	<!-- Custom CSS -->
	<link rel="stylesheet" href="assets/css/footer.css">
	<link rel="stylesheet" href="assets/css/services.css">
</head>
<body>

<!-- Sliders -->
<div class="container-fluid px-0">
	<?php if ($slider_result->num_rows > 0): ?>
		<?php 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"];
		?>
		<div id="<?= $carouselId ?>" class="carousel slide position-relative" data-bs-ride="carousel">
			<?php if($totalSlides > 1): ?>
				<div class="carousel-indicators">
					<?php foreach ($images as $i => $_): ?>
						<button type="button" data-bs-target="#<?= $carouselId ?>" data-bs-slide-to="<?= $i ?>" class="<?= $i === 0 ? 'active' : '' ?>"></button>
					<?php endforeach; ?>
				</div>
			<?php endif; ?>

			<div class="carousel-inner">
				<?php foreach ($images as $index => $img):
					$safeImg = basename($img);
					$path = 'admin/uploads/sliders/' . $sliderName . '/' . $safeImg;
					if (file_exists($path)): ?>
						<div class="carousel-item <?= $index === 0 ? 'active' : '' ?>">
							<img src="<?= htmlspecialchars($path) ?>" class="d-block w-100 img-fluid object-fit-cover" alt="<?= htmlspecialchars($sliderName) ?>">
						</div>
					<?php endif;
				endforeach; ?>
			</div>

			<?php if($totalSlides > 1): ?>
				<div class="slide-counter" id="counter_<?= $carouselId ?>">
					<span class="active-count">1</span>/<span class="total-count"><?= $totalSlides ?></span>
				</div>
			<?php endif; ?>
		</div>
		<?php endwhile; ?>
	<?php else: ?>
		<p class="text-center">No sliders found.</p>
	<?php endif; ?>

	<!-- Static Lines -->
	<div class="carousel-lines">
		<div class="line-left"></div>
		<div class="line-right"></div>
		<div class="line-top"></div>
		<div class="line-bottom"></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 -->
	<div class="slider-text-overlay">
		<h2>Services</h2>
		<h2 class="startproject">Start project</h2>
	</div>

	<!-- Hamburger Icon -->
	<div class="top-right-icons d-flex align-items-center p-2">
		<button class="btn text-white" data-bs-toggle="offcanvas" data-bs-target="#offcanvasMenu">
			<i class="bi bi-list fs-2 icon-opacity-low"></i>
		</button>
	</div>

	<!-- Offcanvas Menu -->
	<div class="offcanvas offcanvas-end" id="offcanvasMenu">
		<div class="offcanvas-header">
			<h5>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->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">No menu items found</a></li>
				<?php endif; ?>
			</ul>
		</div>
	</div>

	<!-- Social Icons -->
	<div class="social-media-icons">
		<a href="https://facebook.com" target="_blank"><i class="fab fa-facebook-f"></i></a>
		<a href="https://instagram.com" target="_blank"><i class="fab fa-instagram"></i></a>
		<a href="https://linkedin.com" target="_blank"><i class="fab fa-linkedin-in"></i></a>
		<a href="https://pinterest.com" target="_blank"><i class="fab fa-pinterest-p"></i></a>
	</div>
</div>

<!-- Portfolio Section -->
<div class="container-fluid px-0 position-relative portfolio">
	<h2 class="protfolio-text">Portfolio</h2>

	<!-- Filter Buttons -->
	<div class="text-center mb-4">
		<button class="btn filter-btn active" data-filter="all">All</button>
		<?php while($row = $cat_result->fetch_assoc()): ?>
			<button class="btn filter-btn" data-filter="<?= strtolower($row['project_category']) ?>">
				<?= htmlspecialchars($row['project_category']) ?>
			</button>
		<?php endwhile; ?>
	</div>

	<!-- Portfolio Grid -->
	<div class="row g-4 portfolio-container">
		<?php while($row = $project_result->fetch_assoc()):
			$images = explode(',', $row['project_images']);
			$first_image = $images[0] ?? '';
			$imgPath = 'admin/uploads/projects/' . $row['project_title'] . '/' . preg_replace("/[^A-Za-z0-9\-_\.]/", "", $first_image);
		?>
		<div class="col-md-4 portfolio-item <?= strtolower($row['project_category']) ?> show">
			<div class="portfolio-box">
				<a href="project-details.php?id=<?= $row['id'] ?>">
					<img src="<?= htmlspecialchars($imgPath) ?>" alt="<?= htmlspecialchars($row['project_title']) ?>">
				</a>
				<div class="portfolio-overlay">
					<h5><?= htmlspecialchars($row['project_title']) ?></h5>
				</div>
			</div>
		</div>
		<?php endwhile; ?>
	</div>

	<div class="Portfolio-lines">
		<div class="Portfolio-line-left"></div>
		<div class="Portfolio-line-right"></div>
	</div>
</div>

<?php include 'footer_section.php'; ?>

<!-- Scripts -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.lordicon.com/lordicon.js"></script>
<script src="assets/js/script.js"></script>

<!-- Portfolio Filter JS -->
<script>
document.querySelectorAll('.filter-btn').forEach(button => {
	button.addEventListener('click', () => {
		document.querySelectorAll('.filter-btn').forEach(btn => btn.classList.remove('active'));
		button.classList.add('active');

		const filter = button.dataset.filter;
		document.querySelectorAll('.portfolio-item').forEach(item => {
			item.classList.toggle('show', filter === 'all' || item.classList.contains(filter));
		});
	});
});
</script>
</body>
</html>
