<?php
include "admin/db.php";


function getColorCode($color) {

    $colors = [
        "blue" => "#1e3a8a",
        "navy" => "#0a1f44",
        "beige" => "#f5f1e8",
        "grey" => "#8d99ae",
        "denim blue" => "#6F8FAF",
        "black" => "#000000",
        "white" => "#ffffff",
        "red" => "#ff0015",
        "green" => "#00a608",
        "pale blue" => "#a0c4ff",
        "peach" => "#ffb5a7",
        "light orange" => "#ffa500",
        "light brown" => "#c68642",
        "light grey" => "#d3d3d3",
        "dark grey" => "#555555",
        "mocha" => "#837060",
        "charcoal" => "#36454f",
        "light pink" => "#ffb6c1",
        "light green" => "#90ee90",
        "pink" => "#ffc0cb",
        "mint" => "#98ff98",
        "light chocolate" => "#d5b59e",
        "cream" => "#fff5e1",
        "maroon" => "#800000",
        "burgundy" => "#800020",
        "purple" => "#800080",
        "orange" => "#ff7b00",
        "light purple" => "#c79ec7",
        "pale pink" => "#f4c2c2",
        "dark pink"=>"#85025b",
        "sky blue" =>"#00b7ff",
        "dark blue" => "#030345",
        "dark purple" => "#4b0082",
        "pale yellow" => "#fafab4",
        "off white" => "#f8f8ff",
        "neon green" => "#39ff14",
        "mustard" => "#ffdb58",
        
        "pale orange" => "#fca76e",
        "light blue" => "#add8e6",
        "dark brown" => "#654321",
        "brown" => "#8b5e3c"
        
    ];
        

    return $colors[strtolower(trim($color))] ?? "#cccccc";
}
?>

<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description"
content="Maria Curtains offers quality curtains, sheers, curtain rods, mats and home décor in Thika, Kenya. Affordable prices, custom fitting and professional installation.">
  

<title>Maria Curtains | All Products</title>

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"/>
<link rel="canonical"
href="https://mariacurtains.co.ke/categories">
  
  <link rel="preconnect" href="https://fonts.googleapis.com">

  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Playfair+Display:wght@500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="products.css">

</head>

<body>


 <header class="navbar">

  <div class="logo">
    <a href="index.php">Maria Curtains</a>
  </div>

  
  <div class="hamburger" onclick="toggleMenu()">
    <i class="fa-solid fa-bars"></i>
  </div>

  <nav id="navMenu" class="nav">

    <ul class="nav-menu">

      <li><a href="index.php">Home</a></li>

      <li><a href="categories.php">Categories</a></li>

      <li><a href="offers.php">Offers</a></li>

      <li><a href="contact.php">Contact</a></li>

      <li class="quote-item">
        <a href="index.php#quote" class="quote-nav">Request Quote</a>
      </li>

    </ul>

  </nav>

</header>



<section class="category-filter-section">

  <div class="filter-container">

<button class="filter-btn active">
      <a href="categories.php">All</a>
    </button>  

    <button class="filter-btn">
      <a href="curtains.php">Curtains</a>
    </button>

    <button class="filter-btn">
      <a href="sheers.php">Sheers</a>
    </button>

    <button class="filter-btn">
      <a href="rods.php">Curtain Rods</a>
    </button>

    <button class="filter-btn">
      <a href="mats.php">Mats</a>
    </button>


    <button class="filter-btn">
      <a href="pillows.php">Pillows</a>
    </button>
    <button class="filter-btn">
      <a href="accessories.php">Accessories</a>
    </button>

    <button class="filter-btn">
      <a href="others.php">Others</a>
    </button>

  </div>

</section>


<section class="products-section">

<div class="products-grid">



<?php

$limit = 12;


$page = isset($_GET['page']) ? (int)$_GET['page'] : 1;

if($page < 1){
    $page = 1;
}


$start = ($page - 1) * $limit;


$totalResult = $conn->query("
    SELECT COUNT(*) as total FROM products
");

$totalRow = $totalResult->fetch_assoc();

$totalProducts = $totalRow['total'];


$totalPages = ceil($totalProducts / $limit);

?>
<?php
$result = $conn->query("
SELECT * FROM products
ORDER BY id DESC
LIMIT $start, $limit
");

while($product = $result->fetch_assoc()):

$product_id = $product['id'];
?>

<div class="product-card">

    
    <div class="product-image">

        <?php
        $imgResult = $conn->query("
            SELECT * FROM product_images
            WHERE product_id='$product_id'
            LIMIT 1
        ");
        $image = $imgResult->fetch_assoc();
        ?>

        <?php if ($image): ?>
            <img src="uploads/<?= $image['image_path'] ?>" alt="<?= $product['name'] ?>">
        <?php else: ?>
            <img src="uploads/default.jpg" alt="No image">
        <?php endif; ?>

        <span class="product-badge">
            <?= $product['category'] ?>
        </span>

    </div>

    
    <div class="product-content">

        <div class="product-category">
            <?= $product['category'] ?>
        </div>

        <h3><?= $product['name'] ?></h3>

        <p class="product-description">
            <?= $product['description'] ?>
        </p>

        <div class="product-price">
            Ksh <?= number_format($product['price']) ?>
        </div>

        
        <div class="product-colors">

            <?php
            $colors = $conn->query("
                SELECT * FROM product_colors
                WHERE product_id='$product_id'
            ");

            while($color = $colors->fetch_assoc()):
            ?>

            <span class="color-swatch"
                  title="<?= $color['color'] ?>"
                  style="background: <?= getColorCode($color['color']) ?>">
            </span>

            <?php endwhile; ?>

        </div>

        
        <div class="product-actions">

            <a href="viewdetails.php?id=<?= $product_id ?>" class="product-btn">
                View Details
            </a>

            <a href="https://wa.me/254724361914?text=I%20am%20interested%20in%20<?= urlencode($product['name']) ?>"
               class="more-btn"
               target="_blank">
                WhatsApp
            </a>

        </div>

    </div>

</div>

<?php endwhile; ?>

</div>

</section>



<section class="pagination-section">

    <div class="pagination-container">

        

        <?php if($page > 1): ?>

            <a href="?page=<?= $page - 1 ?>"
               class="pagination-btn">

               <i class="fa-solid fa-arrow-left"></i>
               Prev

            </a>

        <?php endif; ?>

        

        <?php for($i = 1; $i <= $totalPages; $i++): ?>

            <a href="?page=<?= $i ?>"
               class="pagination-number <?= ($i == $page) ? 'active-page' : '' ?>">

               <?= $i ?>

            </a>

        <?php endfor; ?>

        

        <?php if($page < $totalPages): ?>

            <a href="?page=<?= $page + 1 ?>"
               class="pagination-btn">

               Next
               <i class="fa-solid fa-arrow-right"></i>

            </a>

        <?php endif; ?>

    </div>

</section>



<footer class="site-footer">

  <div class="footer-container">

    

    <div class="footer-brand">

      <div class="footer-logo">

        <a href="index.php"
        class="logo-link">

          Maria Curtains

        </a>

      </div>

      <p>

        Premium curtains, sheers, rods, mats and interior solutions crafted to elevate your space.

      </p>

    </div>

    

    <div class="footer-section">

      <h3>
        Contact
      </h3>

      <a href="tel:+254724361914">

        <i class="fa-solid fa-phone"></i>

        <span>
          0724361914
        </span>

      </a>

      <a href="https://wa.me/254724361914"
      target="_blank">

        <i class="fa-brands fa-whatsapp"></i>

        <span>
          Chat on WhatsApp
        </span>

      </a>

    </div>

    

    <div class="footer-section">

      <h3>
        Location
      </h3>

      <a class="location-card"
      href="https://www.google.com/maps/place/Maria+Curtains+%26+Textile+Thika/@-1.0358071,37.0701991,17z/data=!3m1!4b1!4m15!1m8!3m7!1s0x182f4e5b27c66117:0xb6f8a7e126152c26!2sThika!3b1!8m2!3d-1.0387569!4d37.0833753!16zL20vMDh3eTIz!3m5!1s0x182f4f004d46d3f1:0xe1de14448b11459b!8m2!3d-1.0358125!4d37.0748125!16s%2Fg%2F11zb2bs4d8?entry=ttu&g_ep=EgoyMDI2MDUxMy4wIKXMDSoASAFQAw%3D%3D"
      target="_blank">

        <div class="location-title">

          <i class="fa-solid fa-location-dot"></i>

          Thika, Kenya

        </div>

        <div class="location-action">

          Get Directions →

        </div>

      </a>

    </div>

    

    <div class="footer-section">

      <h3>
        Follow Us
      </h3>

      <a href="https://www.facebook.com/share/18Uq2Kkryq/"
      target="_blank">

        <i class="fa-brands fa-facebook"></i>

        <span>
          Facebook
        </span>

      </a>

      <a href=https://www.instagram.com/maria_wa_curtains?igsh=MXgydDVwZ3VneXVxZg==
      target="_blank">

        <i class="fa-brands fa-instagram"></i>

        <span>
          Instagram
        </span>

      </a>

      <a href=https://www.tiktok.com/@mariacurtains?_r=1&_t=ZS-96VlNUcKXcS
      target="_blank">

        <i class="fa-brands fa-tiktok"></i>

        <span>
          TikTok
        </span>

      </a>

    </div>

  </div>

  <div class="footer-bottom">

    © 2026 Maria Curtains. All Rights Reserved.

  </div>

</footer>



<a
href="https://wa.me/254724361914?text=Hello%20Maria%20Curtains!%20I%20have%20a%20question%20about%20your%20products."
class="whatsapp-float"
target="_blank"
>

  <div class="whatsapp-text">
    Contact Us
  </div>

  <div class="whatsapp-icon">

    <i class="fa-brands fa-whatsapp"></i>

  </div>

</a>
<script>
function toggleMenu() {
  document.getElementById("navMenu").classList.toggle("open");
}
</script>
</body>
</html>