<?php

session_start();

require_once "config/database.php";


/*
|--------------------------------------------------------------------------
| CATEGORY FILTER
|--------------------------------------------------------------------------
*/

$selected_category = "";

if (isset($_GET["category"])) {

    $selected_category = trim($_GET["category"]);

}


/*
|--------------------------------------------------------------------------
| GET CATEGORIES
|--------------------------------------------------------------------------
| Categories are loaded automatically from the products table.
|--------------------------------------------------------------------------
*/

$categories = [];

$category_result = $conn->query(
    "SELECT DISTINCT category
     FROM products
     WHERE category IS NOT NULL
     AND category != ''
     ORDER BY category ASC"
);

if ($category_result) {

    while ($category_row = $category_result->fetch_assoc()) {

        $categories[] = $category_row["category"];

    }

}


/*
|--------------------------------------------------------------------------
| CATEGORY ICONS
|--------------------------------------------------------------------------
*/

$category_icons = [

    "Rings"       => "💍",
    "Necklaces"   => "📿",
    "Earrings"    => "✨",
    "Bracelets"   => "⌚",
    "Pendants"    => "💎",
    "Hair Clips"  => "🎀",
    "Anklets"     => "🦶",
    "Brooches"    => "📌",
    "Other / Custom" => "💝"

];


/*
|--------------------------------------------------------------------------
| CATEGORY DESCRIPTIONS
|--------------------------------------------------------------------------
*/

$category_descriptions = [

    "Rings" =>
        "Discover elegant and beautiful rings designed for every special moment.",

    "Necklaces" =>
        "Explore our stunning necklace collection created to complete your elegant look.",

    "Earrings" =>
        "Find stylish and attractive earrings perfect for every occasion.",

    "Bracelets" =>
        "Add a touch of elegance with our beautiful bracelet designs.",

    "Pendants" =>
        "Discover beautiful pendants designed to add elegance to your everyday style.",

    "Hair Clips" =>
        "Explore stylish and attractive hair clips perfect for every occasion.",

    "Anklets" =>
        "Complete your look with our elegant and beautiful anklet designs.",

    "Brooches" =>
        "Discover unique brooch designs to add a beautiful finishing touch to your outfit.",

    "Other / Custom" =>
        "Explore our special jewellery pieces and custom designs."

];


/*
|--------------------------------------------------------------------------
| GET PRODUCTS
|--------------------------------------------------------------------------
*/

if ($selected_category !== "") {

    $stmt = $conn->prepare(
        "SELECT id, name, category, price, description, image, stock, product_code
         FROM products
         WHERE category = ?
         ORDER BY id DESC"
    );

    $stmt->bind_param(
        "s",
        $selected_category
    );

    $stmt->execute();

    $result = $stmt->get_result();

} else {

    $result = $conn->query(
        "SELECT id, name, category, price, description, image, stock, product_code
         FROM products
         ORDER BY id DESC"
    );

}

?>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0"
    >

    <title>
        Shop - Muthu Jewellers
    </title>


    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Arial, sans-serif;
        }

        body {
            background: #fffaf5;
            color: #222;
        }

        /* ================= NAVIGATION ================= */

        nav {
            background: #111;
            padding: 14px 6%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            min-height: 78px;
        }

        .logo {
            display: flex;
            align-items: center;
            text-decoration: none;
        }

        .logo img {
            width: 145px;
            height: 52px;
            object-fit: contain;
            display: block;
        }

        nav ul {
            list-style: none;
            display: flex;
            align-items: center;
            gap: 28px;
        }

        nav ul li a {
            color: #fff;
            text-decoration: none;
            font-size: 15px;
            transition: 0.3s;
        }

        nav ul li a:hover {
            color: #d4af37;
        }

        /* ================= SHOP HEADER ================= */

        .shop-header {
            text-align: center;
            padding: 55px 20px 35px;
            background: linear-gradient(180deg, #fffaf5, #f8f1e8);
        }

        .shop-header h1 {
            font-size: 42px;
            color: #171717;
            margin-bottom: 12px;
        }

        .shop-header p {
            color: #666;
            font-size: 17px;
        }

        /* ================= COLLECTIONS ================= */

        .categories {
            padding: 35px 6% 65px;
            text-align: center;
        }

        .categories h2 {
            font-size: 32px;
            margin-bottom: 35px;
            color: #171717;
        }

        .category-container {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            max-width: 1200px;
            margin: auto;
        }

        .category-card {
            background: #fff;
            padding: 27px 20px;
            border-radius: 14px;
            border: 1px solid #eee3d4;
            box-shadow: 0 7px 22px rgba(0,0,0,0.08);
            transition: 0.3s;
        }

        .category-card:hover {
            transform: translateY(-7px);
            box-shadow: 0 12px 28px rgba(0,0,0,0.13);
        }

        .category-icon {
            width: 76px;
            height: 76px;
            margin: 0 auto 16px;
            border-radius: 50%;
            background: #fff5d9;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 42px;
        }

        .category-card h3 {
            color: #b08b20;
            font-size: 21px;
            margin-bottom: 10px;
        }

        .category-card p {
            color: #666;
            line-height: 1.55;
            font-size: 14px;
            min-height: 65px;
            margin-bottom: 18px;
        }

        .category-btn {
            display: inline-block;
            background: #d4af37;
            color: #111;
            padding: 10px 18px;
            text-decoration: none;
            border-radius: 6px;
            font-weight: bold;
            font-size: 14px;
            transition: 0.3s;
        }

        .category-btn:hover {
            background: #111;
            color: #d4af37;
        }

        /* ================= SELECTED CATEGORY ================= */

        .selected-category {
            max-width: 1200px;
            margin: 0 auto 25px;
            padding: 0 6%;
            text-align: center;
        }

        .selected-category h2 {
            font-size: 30px;
            color: #222;
            margin-bottom: 12px;
        }

        .show-all {
            display: inline-block;
            background: #111;
            color: #d4af37;
            padding: 9px 20px;
            border-radius: 6px;
            text-decoration: none;
            font-weight: bold;
            font-size: 14px;
        }

        .show-all:hover {
            background: #d4af37;
            color: #111;
        }

        /* ================= PRODUCTS ================= */

        .products-section {
            padding: 25px 6% 75px;
            background: #f7f2eb;
        }

        .products-container {
            max-width: 1200px;
            margin: auto;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 25px;
        }

        .product-card {
            background: #fff;
            border-radius: 14px;
            overflow: hidden;
            box-shadow: 0 7px 22px rgba(0,0,0,0.09);
            border: 1px solid #eee6dc;
            transition: 0.3s;
        }

        .product-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 13px 28px rgba(0,0,0,0.14);
        }

        .product-image {
            width: 100%;
            height: 290px;
            object-fit: contain;
            background: #fff;
            display: block;
        }

        .product-info {
            padding: 18px;
        }

        .product-info h3 {
            font-size: 20px;
            color: #222;
            margin-bottom: 8px;
        }

        .category-name {
            color: #b08b20;
            font-size: 12px;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 8px;
        }

        .product-price {
            color: #b08b20;
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 8px;
        }

        .product-stock {
            font-size: 13px;
            color: #666;
            margin-bottom: 15px;
        }

        .product-stock span {
            font-weight: bold;
            color: #222;
        }

        .view-product {
            display: block;
            width: 100%;
            text-align: center;
            background: #d4af37;
            color: #111;
            padding: 11px;
            text-decoration: none;
            border-radius: 6px;
            font-weight: bold;
            transition: 0.3s;
        }

        .view-product:hover {
            background: #111;
            color: #d4af37;
        }

        .no-products {
            text-align: center;
            padding: 60px 20px;
            color: #666;
            font-size: 18px;
        }

        /* ================= FOOTER ================= */

        footer {
            background: #111;
            color: #fff;
            text-align: center;
            padding: 25px;
        }

        footer span {
            color: #d4af37;
            font-weight: bold;
        }

        /* ================= RESPONSIVE ================= */

        @media (max-width: 1000px) {
            .category-container {
                grid-template-columns: repeat(2, 1fr);
            }

            .products-container {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 600px) {
            nav {
                flex-direction: column;
                gap: 12px;
            }

            .logo img {
                width: 135px;
                height: 48px;
            }

            nav ul {
                gap: 14px;
                flex-wrap: wrap;
                justify-content: center;
            }

            nav ul li a {
                font-size: 13px;
            }

            .shop-header h1 {
                font-size: 31px;
            }

            .category-container,
            .products-container {
                grid-template-columns: 1fr;
            }

            .product-image {
                height: 270px;
            }
        }
    </style>

</head>


<body>


<!-- ================= NAVIGATION ================= -->

<nav>

    <a href="index.php" class="logo">
        <img src="images/logo.png" alt="Muthu Jewellers Logo">
    </a>


    <ul>

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


        <li>
            <a href="shop.php">
                Shop
            </a>
        </li>


        <li>
            <a href="cart.php">
                Cart 🛒
            </a>
        </li>


        <li>
            <a href="checkout.php">
                Checkout
            </a>
        </li>


        <li>
            <a href="delivery.php">
                Delivery
            </a>
        </li>


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

    </ul>

</nav>



<!-- ================= SHOP HEADER ================= -->

<section class="shop-header">

    <h1>
        Our Products 💎
    </h1>


    <p>
        Discover our beautiful jewellery collection.
    </p>

</section>



<!-- ================= COLLECTIONS ================= -->

<section class="categories">

    <h2>
        Our Collections
    </h2>


    <div class="category-container">


        <?php if (!empty($categories)): ?>


            <?php foreach ($categories as $category): ?>


                <?php

                if (isset($category_icons[$category])) {

                    $icon = $category_icons[$category];

                } else {

                    $icon = "💎";

                }


                if (isset($category_descriptions[$category])) {

                    $description =
                        $category_descriptions[$category];

                } else {

                    $description =
                        "Explore our beautiful "
                        . htmlspecialchars($category)
                        . " collection.";

                }

                ?>


                <div class="category-card">


                    <div class="category-icon">

                        <?php echo $icon; ?>

                    </div>


                    <h3>

                        <?php

                        echo htmlspecialchars(
                            $category
                        );

                        ?>

                    </h3>


                    <p>

                        <?php

                        echo htmlspecialchars(
                            $description
                        );

                        ?>

                    </p>


                    <a
                        href="shop.php?category=<?php echo urlencode($category); ?>"
                        class="category-btn"
                    >

                        View Collection

                    </a>


                </div>


            <?php endforeach; ?>


        <?php else: ?>


            <div class="no-products">

                <p>
                    No collections available yet.
                </p>

            </div>


        <?php endif; ?>


    </div>

</section>



<!-- ================= SELECTED CATEGORY ================= -->

<?php if ($selected_category !== ""): ?>


    <div class="selected-category">

        <h2>

            <?php

            echo htmlspecialchars(
                $selected_category
            );

            ?>

            Collection

        </h2>


        <a
            href="shop.php"
            class="show-all"
        >

            Show All Products

        </a>

    </div>


<?php endif; ?>



<!-- ================= PRODUCTS ================= -->

<section class="products-section">


    <?php if ($result && $result->num_rows > 0): ?>


        <div class="products-container">


            <?php while ($product = $result->fetch_assoc()): ?>


                <div class="product-card">


                    <!-- PRODUCT IMAGE -->

                    <img
                        class="product-image"

                        src="assets/images/<?php
                            echo htmlspecialchars(
                                $product["image"]
                            );
                        ?>"

                        alt="<?php
                            echo htmlspecialchars(
                                $product["name"]
                            );
                        ?>"
                    >


                    <!-- PRODUCT INFORMATION -->

                    <div class="product-info">


                        <h3>

                            <?php

                            echo htmlspecialchars(
                                $product["name"]
                            );

                            ?>

                        </h3>


                        <div class="category-name">

                            Category:

                            <?php

                            echo htmlspecialchars(
                                $product["category"]
                            );

                            ?>

                        </div>


                        <div class="product-price">

                            Rs.

                            <?php

                            echo number_format(
                                $product["price"],
                                2
                            );

                            ?>

                        </div>


                        <div class="product-stock">

                            Available Stock:

                            <span>

                                <?php

                                echo (int)$product["stock"];

                                ?>

                            </span>

                        </div>


                        <a
                            href="product.php?id=<?php
                                echo (int)$product["id"];
                            ?>"
                            class="view-product"
                        >

                            View Product 💎

                        </a>


                    </div>


                </div>


            <?php endwhile; ?>


        </div>


    <?php else: ?>


        <div class="no-products">

            <p>
                No products found in this collection.
            </p>

        </div>


    <?php endif; ?>


</section>



<!-- ================= FOOTER ================= -->

<footer>

    <p>

        &copy;

        <?php echo date("Y"); ?>

        <span>
            Muthu Jewellers
        </span>

        . All Rights Reserved.

    </p>

</footer>


</body>

</html>