/home/hdwebsolution/public_html/ns-interior/product-details.php
<?php
// Enable error reporting
error_reporting(E_ALL);
ini_set('display_errors', 1);

include('include/header.php');
include('connection.php'); // $link

// ---------- GET PRODUCT SLUG ----------
$slug = isset($_GET['slug']) ? $_GET['slug'] : '';
if (empty($slug)) {
    echo "<h2 style='text-align:center;color:red;'>Product not found!</h2>";
    include('include/footer.php');
    exit;
}

// ---------- SLUGIFY FUNCTION ----------
if (!function_exists('slugify')) {
    function slugify($text) {
        $text = strtolower(trim($text));
        $text = preg_replace('/[^a-z0-9-]+/', '-', $text);
        $text = preg_replace('/-+/', '-', $text);
        return rtrim($text, '-');
    }
}

// ---------- FETCH PRODUCT ----------
$product_sql = "SELECT * FROM tbl_product";
$product_res = mysqli_query($link, $product_sql) or die("Product Query Error: " . mysqli_error($link));

$product = null;
while ($row = mysqli_fetch_assoc($product_res)) {
    if (slugify($row['pro_name']) === $slug) {
        $product = $row;
        break;
    }
}

if (!$product) {
    echo "<h2 style='text-align:center;color:red;'>Product not found!</h2>";
    include('include/footer.php');
    exit;
}

// ---------- FIX IMAGE ----------
$baseDomain = "https://m4b.in/user/vk-enterprises/";
$images = [];
if (!empty($product['pro_image'])) {
    $images = explode(',', $product['pro_image']);
} 
if (empty($images)) {
    $images[] = "https://via.placeholder.com/600x400?text=No+Image";
} else {
    foreach ($images as &$img) {
        if (!filter_var($img, FILTER_VALIDATE_URL)) {
            if (strpos($img, "/") !== false) {
                $img = $baseDomain . $img;
            } else {
                $img = $baseDomain . "product-image/" . $img;
            }
        }
    }
}
?>

        <section class="headings">
            <div class="text-heading">
                <div class="container">
                    <h1 class="text-center"><?php echo $product['pro_name']; ?></h1>
                </div>
            </div>
        </section>
        <div class="road">
            <div class="container">
                <div class="row">
                    <div class="col">
                        <a href="index.php">Home</a><span>ยป</span><span><?php echo $product['pro_name']; ?></span>
                    </div>
                </div>
            </div>
        </div>
        <!-- END SECTION HEADINGS -->

     <style>
    .parallax-search.home-1 {
  position: relative;
  width: 100%;
  height: 85vh;
  overflow: hidden;
}
.frd {
    gap: 20px;
    display: flex
}
.parallax-search.home-1 video#bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.parallax-search.home-1 .video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4); /* Adjust opacity for darkness */
  z-index: 1;
}

.parallax-search.home-1 .hero-main {
  position: relative;
  z-index: 2;
  color: #fff;
}
.top-bar {
    background-color: #111;
    color: #fff;
    font-size: 14px;
    padding: 8px 0;
}
.top-bar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.top-bar-left {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.top-bar i {
    color: #f1c40f;
    margin-right: 5px;
}
.top-bar-right {
    font-weight: 600;
}
/* === Top Bar Styles === */
.top-bar {
    background-color: #111;
    color: #fff;
    font-size: 14px;
    padding: 8px 0;
}

.top-bar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.top-bar-left {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.top-bar i {
    color: #f1c40f;
    margin-right: 5px;
}

.top-bar-right {
    font-weight: 600;
}
.road {
    background: red;
    padding: 20px;
    color: white;
}
.headings {
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(17, 17, 17, 0.5)), to(rgba(17, 17, 17, 0.5))), url(images/bg/bg-1.jpg) no-repeat center center;
    background: linear-gradient(rgba(17, 17, 17, 0.5), rgba(17, 17, 17, 0.5)), url(images/bg/bg-1.jpg) no-repeat center center;
    background-size: cover;
    width: 100%;
    height: 50vh;
}
/* Optional: improve responsiveness */
@media (max-width: 768px) {
    .top-bar .container {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
}

</style>
        <!-- START SECTION SERVICE DETAILS -->
        <section class="service-details">
            <div class="container">
                <div class="row">
                    <div class="col-lg-9 col-md-12 service-info">
                        <div class="row">
                            <div class="col-md-12">
                                <img src="<?php echo $img; ?>" alt="">
                                <div class="service-text">
                                    <h3 class="mt-4"><?php echo $product['pro_name']; ?></h3>
                                    <?php echo $product['pro_desc']; ?>
                                </div>
                            </div>
                        </div>
                     
                    </div>

                  
                </div>
            </div>
        </section>
        <!-- END SECTION SERVICE DETAILS -->

      <?php include('include/footer.php');?>