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

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

// ---------- GET SLUG FROM URL ----------
$slug = isset($_GET['slug']) ? $_GET['slug'] : '';

if (empty($slug)) {
    echo "<h2 style='text-align:center;color:red;'>Category 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 CATEGORY ----------
$cat_sql = "SELECT * FROM tbl_category";
$cat_res = mysqli_query($link, $cat_sql) or die("Category Query Error: " . mysqli_error($link));

$category = null;
while ($row = mysqli_fetch_assoc($cat_res)) {
    if (slugify($row['cate_name']) === $slug) {
        $category = $row;
        break;
    }
}

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

// ---------- FIX CATEGORY IMAGE PATH ----------
$baseDomain = "https://hdwebsolution.com/ns-interior";
$imgField = $category['category_image'];

if (empty($imgField)) {
    $categoryImg = "https://via.placeholder.com/600x400?text=No+Image";
} elseif (filter_var($imgField, FILTER_VALIDATE_URL)) {
    $categoryImg = $imgField;
} elseif (strpos($imgField, "/") !== false) {
    $categoryImg = $baseDomain . $imgField;
} else {
    $categoryImg = $baseDomain . "category-image/" . $imgField;
}
?>

        <section class="headings">
            <div class="text-heading">
                <div class="container">
                    <h1 class="text-center"><?php echo $category['cate_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 $category['cate_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 SITE_URL; ?>category-image/<?php echo $category['category_image']; ?>" alt="">
                                <div class="service-text">
                                    <h3 class="mt-4"><?php echo $category['cate_name']; ?></h3>
                                    <?php echo $category['about_cat']; ?>
                                </div>
                            </div>
                        </div>
                     
                    </div>

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

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