<?php
	include "ominterior_db.php";
		
	$slider_query = "SELECT id, slider_name, slider_images FROM slider_images where slider_name='About us'";
	$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);


	$result = $conn->query("SELECT * FROM about_section");

	$allRows = [];
	$sectionTitle = '';

	if ($result && $result->num_rows > 0) {
	    while ($row = $result->fetch_assoc()) {
	        if (empty($sectionTitle)) {
	            $sectionTitle = $row['section_title'];
	        }
	        $allRows[] = $row; // store all rows
	    }
	}

	// $query = "SELECT * FROM team_members ORDER BY id ASC";
	// $team_result = $conn->query($query);
	// $teamMembers = $team_result->fetch_all(MYSQLI_ASSOC);


	$query = "SELECT * FROM team_members";
	$teamMembers = $conn->query($query);

	$fnq = "SELECT * FROM faq ORDER BY id ASC";
    $fnq_result = $conn->query($fnq);
    $count = 0;

?>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>OM INTERIOR | About us</title>

	<!-- Favicon for browser tab -->
	<link rel="icon" type="image/x-icon" href="assets/images/favicon.png">

	<!-- Font Awesome Icons -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

	<!-- Bootstrap CSS -->
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/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 CSS -->
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css" />
	<!-- Swiper JS -->
	<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
	<!-- Include Bootstrap CSS -->
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

	<!-- Swiper CSS -->
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css" />

	<!-- Include Swiper CSS & JS -->
	<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>

	<!-- Custom CSS File -->
	<link rel="stylesheet" href="assets/css/footer.css">
	<link rel="stylesheet" href="assets/css/about_style.css">
</head>
<body>
<!-- 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">
			
			<?php if($totalSlides > 1): ?>
				<!-- 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>
			<?php endif; ?>

			<!-- 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>
		
				<?php if($totalSlides > 1): ?>
				    <!-- Slide Counter -->
				    <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;
		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 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 Overlay -->
		<div class="slider-text-overlay">
			<h2>About us</h2>
			<h2 class="startproject">Start project</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>


	<div class="container-fluid px-0 position-relative card-view">
	    <div class="row align-items-center">
	        <!-- Left Column -->
	        <div class="text-center">
	            <h2 class="fw-bold">
	                <?= htmlspecialchars($sectionTitle); ?>
	            </h2>
	        </div>

	        <!-- Right Column with Flip Cards -->
	        <div class="col-md-12">
			    <div class="row align-items-center">
			        <?php foreach ($allRows as $row): ?>
			            <div class="col-md-4">
			                <div class="flip-card">
			                    <div class="flip-card-inner">
			                        <div class="flip-card-front d-flex flex-column align-items-center justify-content-center text-center p-3">
			                            <?php if (!empty($row['icon'])): ?>
			                                <i class="<?= htmlspecialchars($row['icon']); ?> fa-4x mb-2 icons"></i>
			                            <?php endif; ?>
			                            <hr class="icon-line">
			                            <h5 class="heading"><?= htmlspecialchars($row['heading']); ?></h5>
			                        </div>
			                        <div class="flip-card-back">
			                            <p class="back-content"><?= nl2br(htmlspecialchars($row['content'])); ?></p>
			                        </div>
			                    </div>
			                </div>
			            </div>
			        <?php endforeach; ?>
			    </div>
			</div>
		</div>
		<div class="OurPurpose-carousel-lines">
				<div class="OurPurpose-line-left"></div>
				<div class="OurPurpose-line-right"></div>
		</div>
	</div>

	<div class="container-fluid px-0 team-member">
		<h2 class="fw-bold">Meet Our Skilled Team</h2>
		<div class="swiper mySwiper">
		    <div class="swiper-wrapper">
		        <?php while ($row = $teamMembers->fetch_assoc()): ?>
		            <div class="swiper-slide">
		                <img src="admin/uploads/team_members/<?php echo htmlspecialchars($row['photo']); ?>" alt="<?php echo htmlspecialchars($row['name']); ?>">
		                <div class="team-overlay">
		                    <h6><?php echo htmlspecialchars($row['name']); ?></h6>
		                    <small>[ <?php echo htmlspecialchars($row['position']); ?> ]</small>
		                </div>
		            </div>
		        <?php endwhile; ?>
		    </div>
		</div>
		<div class="swiper-pagination"></div>
		<div class="team-member-carousel-lines">
				<div class="team-member-line-left"></div>
				<div class="team-member-line-right"></div>
		</div>
	</div>

	<div class="container-fluid px-0 fnq">
	  <h2 class="text-center mb-4">Frequently Asked Questions</h2>
	  <div class="accordion" id="faqAccordion">
	  <?php
	  if ($fnq_result->num_rows > 0) :
	        while ($row = $fnq_result->fetch_assoc()) :
	            $id = $row['id'];
	            $question = $row['question'];
	            $answer = $row['answer'];
	            $show = ''; // Do not show any answer by default
	            $collapsed = 'collapsed';
	    ?>
	        <div class="accordion-item">
	            <h2 class="accordion-header" id="heading<?= $id ?>">
	                <button class="accordion-button <?= $collapsed ?>" type="button" data-bs-toggle="collapse" data-bs-target="#collapse<?= $id ?>" aria-expanded="false" aria-controls="collapse<?= $id ?>">
	                    <?= htmlspecialchars($question) ?>
	                </button>
	            </h2>
	            <div id="collapse<?= $id ?>" class="accordion-collapse collapse <?= $show ?>" aria-labelledby="heading<?= $id ?>" data-bs-parent="#faqAccordion">
	                <div class="accordion-body">
	                    <?= nl2br(htmlspecialchars($answer)) ?>
	                </div>
	            </div>
	        </div>
	    <?php
	        endwhile;
	    else :
	        echo "<p>No FAQs available.</p>";
	    endif;
	    $conn->close();
	    ?>
	  </div>
	  <div class="fnq-carousel-lines">
				<div class="fnq-line-left"></div>
				<div class="fnq-line-right"></div>
				<div class="fnq-line-top"></div>
				<div class="fnq-line-bottom"></div>
		</div>
	</div>



	<?php include 'footer_section.php'; ?>
	<!-- Bootstrap JS Bundle (Includes Popper) -->
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
	<!-- Bootstrap 5 CSS & JS -->
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

	<!-- Include Bootstrap JS -->
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

	<!-- Lordicon -->
	<script src="https://cdn.lordicon.com/lordicon.js"></script>

	<!-- Custom JS File -->
	<script src="assets/js/script.js"></script>

	<!-- Swiper JS -->
	<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>

	<script>
	const swiper = new Swiper(".mySwiper", {
	    slidesPerView: 4,
	    spaceBetween: 0,
	    autoplay: {
	        delay: 2000,
	        disableOnInteraction: false,
	    },
	    pagination: {
	      el: ".swiper-pagination",
	      clickable: true,
	    },
	    speed: 1000,
	    breakpoints: {
	        0: { slidesPerView: 2 },
	        768: { slidesPerView: 3 },
	        992: { slidesPerView: 4 }
	    }
	});
	</script>
</body>
</html>