<?php
// Database connection
include "ominterior_db.php";

    $menu_query = "SELECT name, link FROM menu ORDER BY id ASC";
    $menu_result = $conn->query($menu_query);

if (isset($_GET['id']) && is_numeric($_GET['id'])) {
    $project_id = intval($_GET['id']);

    $query = "SELECT * FROM project_list WHERE id = $project_id";
    $result = $conn->query($query);

    if ($result->num_rows == 1) {
        $project = $result->fetch_assoc();
        $images = explode(',', $project['project_images']);
    } else {
        echo "Project not found.";
        exit;
    }
} else {
    header("Location: portfolio.php");
    exit;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><?= htmlspecialchars($project['project_title']) ?> | Project Details</title>
    <link rel="icon" href="assets/images/favicon.png" type="image/x-icon">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- 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">

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>

    <!-- Custom CSS -->
    <link rel="stylesheet" href="assets/css/footer.css">
    <link rel="stylesheet" href="assets/css/project-detalis.css">
</head>
<body>
<div class="container-fluid px-0 position-relative">
    <!-- Hero Section -->
    <div class="project-hero" style="background-image: url('admin/uploads/projects/<?= htmlspecialchars($project['project_title']) ?>/<?= htmlspecialchars(trim($images[0])) ?>');">
        <div class="hero-overlay">
            <h1><?= htmlspecialchars($project['project_title']) ?></h1>
            <p class="mb-0">[ <?= htmlspecialchars($project['project_category']) ?> ]</p>
        </div>
        <div class="project-lines">
            <div class="project-line-left"></div>
            <div class="project-line-right"></div>
             <div class="project-line-top"></div>
            <div class="project-line-bottom"></div>
        </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>
    </div>
</div>

<!-- Description -->
<div class="container py-5">
    <div class="row">
        <div class="col-lg-8 about_project">
            <h2>About the Project</h2>
            <p><?= nl2br(htmlspecialchars($project['project_description'])) ?></p>
        </div>
        <div class="col-lg-4 client-info">
            <h5>Project Info</h5>
            <ul class="list-unstyled">
                <li><strong>Category :</strong><br> <?= htmlspecialchars($project['project_category']) ?></li>
                <!-- Add more info as needed -->
                <li><strong>Client :</strong> <br><?= htmlspecialchars($project['client_name']) ?></li>
            </ul>
        </div>
    </div>
    <div class="row sec_about_section">
        <h2>Re-imagining the <br> Future of Space</h2>
        <hr>
        <p>The Rustic Elegance Cabin is designed to combine the warmth of rustic charm with sophisticated elegance. The goal is to create a cozy, inviting retreat that offers both comfort and style. The design incorporates natural materials, warm wood tones, and elegant finishes to evoke a sense of refined, country living.</p>
    </div>
</div>


<!-- Slider main container -->
<div class="container-fluid swiper mySwiper py-0">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <?php foreach ($images as $img): ?>
        <?php $imgPath = 'admin/uploads/projects/' . htmlspecialchars($project['project_title']) . '/' . htmlspecialchars(trim($img)); ?>
        <div class="swiper-slide">
            <img src="<?= htmlspecialchars($imgPath) ?>" alt="<?= htmlspecialchars($project['project_title']) ?>" class="img-fluid w-100">
        </div>
    <?php endforeach; ?>
  </div>

  <!-- Pagination -->
  <div class="swiper-pagination"></div>
</div>

<div class="container-fluid testimonial-section py-0">
        <div class="testimonial-header">
            <p class="small-heading">TESTIMONONIAL</p>
            <h2>What Other<br>Says About Us</h2>
            <div class="testimonial-pagination">
              <span class="arrow">&#10094;</span>
                        <span>01</span>
              <span class="arrow">&#10095;</span>
            </div>
        </div>
      <div class="testimonial-card">
        <img src="admin\uploads\team_members\team_5.jpg" alt="Testimonial Person" class="testimonial-img" />
        <div class="testimonial-text">
          <p class="quote">“</p>
          <p>
            Standing as one of the biggest low-cost airline in Indonesia, Citilink Indonesia requires more than a simple creative agency: creativity, speed, professionalism, commitment, and quality to
          </p>
          <strong>James Adam</strong>
        </div>
      </div> 
      <!-- circles  -->
        <div class="r_1"></div>

        <!-- circles  -->
        <div class="r_2"></div>
</div>



<div class="container-fluid let_work">
    <h2>Let's Work Togetgher<br>Got a project in mind? Let's make it<br> real!</h2>
</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>

<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Bootstrap 5 JS (requires Popper) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<script src="assets/js/script.js"></script>
<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script>
    var swiper = new Swiper(".mySwiper", {
      slidesPerView: "auto",
      spaceBetween: 50,
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
       autoplay: {
        delay: 4000,
        disableOnInteraction: false,
      },
    });

     const feedbackSwiper = new Swiper('.client-feedback-slider', {
    loop: true,
    effect: 'fade',
    autoplay: {
      delay: 5000,
      disableOnInteraction: false,
    },
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },
  });
  </script>

</body>
</html>