<?php
	include "ominterior_db.php";

	$slider_query = "SELECT id, slider_name, slider_images FROM slider_images WHERE slider_name = 'Contact'";
	$slider_result = $conn->query($slider_query);

	$menu_query = "SELECT name, link FROM menu ORDER BY id ASC";
	$menu_result = $conn->query($menu_query);

	$sql = "SELECT address, email, phone FROM contact_details LIMIT 1";
	$result = $conn->query($sql);
	$contact = $result->fetch_assoc();
?>
<!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/contact.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>Contact US</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>
<?php $conn->close(); ?>
</div>

<div class="container-fluid px-5 contact_detalis">
	<div class="row">
        <!-- Left: Contact Form -->
        <div class="col-md-6">
            <h3 class="mb-3 get-in">GET IN TOUCH</h3>
            <p class="message">Your email address will not be published. Required fields are marked</p>
            <form>
                <div class="mb-4">
                    <input type="text" class="form-control" name="name" placeholder="Your Name :" required>
                </div>
                <div class="mb-4">
                    <input type="email" class="form-control" name="email" placeholder="Your Email :" required>
                </div>
                <div class="mb-4">
                    <textarea class="form-control" name="message" placeholder="Message :" rows="4" required></textarea>
                </div>
                <div>
                    <button type="submit" class="btn btn-primary">SEND</button>
                </div>
            </form>
        </div>

        <!-- Right: Contact Details -->
        <div class="col-md-6 bg-dark text-white p-4 rounded">
            <h4>[ Our Contact Details ]</h4>
            <h5 class="mt-3">Let's Start a Project</h5>
            <p>Give us a call or drop by anytime, we endeavour to answer all enquiries within 24 hours on business days. We will be happy to answer your questions.</p>
            
            <div class="d-flex align-items-start mb-3 address">
                <img src="images/icons/Address.png" alt="Address Icon" class="me-2" style="width:24px;">
                <div><?php echo nl2br($contact['address']); ?></div>
            </div>
            <div class="d-flex align-items-start mb-3 email">
                <img src="images/icons/Mail.png" alt="Email Icon" class="me-2" style="width:24px;">
                <div><?php echo $contact['email']; ?></div>
            </div>
            <div class="d-flex align-items-start phone">
                <img src="images/icons/Phone.png" alt="Phone Icon" class="me-2" style="width:24px;">
                <div><?php echo $contact['phone']; ?></div>
            </div>
        </div>
    </div>
    <div class="contact-lines">
		<div class="contact-line-left"></div>
	</div>
</div>

<div class="container-fluid px-0 map">
	<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d230.73822482816814!2d70.77312255859817!3d22.28512553261487!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3959cbd96c78e379%3A0x859bf7642525c0a7!2sSPACE%20ODYSSEY!5e0!3m2!1sen!2sin!4v1693921721086!5m2!1sen!2sin" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</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>

</body>
</html>
