<?php

$pageTitle =
    $currentCategory
        ? $currentCategory['name']
            . ' - PET SPA'
        : 'Sản phẩm - PET SPA';


$pageDescription =
    'Khám phá thức ăn, phụ kiện, đồ chơi và sản phẩm chăm sóc thú cưng.';


$pageScript =
    'product.js';


require BASE_PATH
    . '/app/views/layouts/header.php';


require BASE_PATH
    . '/app/views/layouts/navbar.php';

?>


<main>

    <!-- ======================================================
         PAGE HEADER
    ======================================================= -->

    <section class="product-page-header">

        <div class="container">

            <nav
                aria-label="breadcrumb"
            >

                <ol class="breadcrumb mb-3">

                    <li class="breadcrumb-item">

                        <a
                            href="<?= BASE_URL ?>/"
                        >
                            Trang chủ
                        </a>

                    </li>

                    <li
                        class="breadcrumb-item active"
                    >

                        Sản phẩm

                    </li>

                </ol>

            </nav>


            <h1 class="fw-bold">

                <?php if ($currentCategory): ?>

                    <?= htmlspecialchars(
                        $currentCategory['name']
                    ) ?>

                <?php else: ?>

                    Sản phẩm

                <?php endif; ?>

            </h1>


            <p class="text-muted mb-0">

                <?= number_format(
                    $totalProducts,
                    0,
                    ',',
                    '.'
                ) ?>

                sản phẩm được tìm thấy.

            </p>

        </div>

    </section>


    <!-- ======================================================
         PRODUCT SECTION
    ======================================================= -->

    <section class="section pt-4">

        <div class="container">

            <div class="row g-4">


                <!-- ==================================================
                     FILTER
                =================================================== -->

                <aside class="col-lg-3">

                    <div
                        class="product-filter-card"
                    >

                        <form method="GET">

                            <input
                                type="hidden"
                                name="url"
                                value="products"
                            >


                            <!-- SEARCH -->

                            <div class="mb-4">

                                <label
                                    class="form-label fw-semibold"
                                >
                                    Tìm kiếm
                                </label>


                                <div class="input-group">

                                    <span
                                        class="input-group-text"
                                    >

                                        <i
                                            class="bi bi-search"
                                        ></i>

                                    </span>


                                    <input
                                        type="text"
                                        name="search"
                                        class="form-control"
                                        placeholder="Tên sản phẩm..."
                                        value="<?= htmlspecialchars(
                                            $search
                                        ) ?>"
                                    >

                                </div>

                            </div>


                            <!-- CATEGORY -->

                            <div class="mb-4">

                                <label
                                    class="form-label fw-semibold"
                                >
                                    Danh mục
                                </label>


                                <select
                                    name="category"
                                    class="form-select"
                                >

                                    <option value="">
                                        Tất cả danh mục
                                    </option>


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

                                        <option
                                            value="<?= htmlspecialchars(
                                                $category['slug']
                                            ) ?>"

                                            <?= $categorySlug
                                                === $category['slug']
                                                ? 'selected'
                                                : ''
                                            ?>
                                        >

                                            <?= htmlspecialchars(
                                                $category['name']
                                            ) ?>

                                        </option>

                                    <?php endforeach; ?>

                                </select>

                            </div>


                            <!-- PET TYPE -->

                            <div class="mb-4">

                                <label
                                    class="form-label fw-semibold"
                                >
                                    Dành cho
                                </label>


                                <div class="form-check">

                                    <input
                                        class="form-check-input"
                                        type="radio"
                                        name="pet"
                                        value=""
                                        id="petAll"

                                        <?= $pet === ''
                                            ? 'checked'
                                            : ''
                                        ?>
                                    >

                                    <label
                                        class="form-check-label"
                                        for="petAll"
                                    >
                                        Tất cả
                                    </label>

                                </div>


                                <div class="form-check">

                                    <input
                                        class="form-check-input"
                                        type="radio"
                                        name="pet"
                                        value="dog"
                                        id="petDog"

                                        <?= $pet === 'dog'
                                            ? 'checked'
                                            : ''
                                        ?>
                                    >

                                    <label
                                        class="form-check-label"
                                        for="petDog"
                                    >
                                        🐶 Chó
                                    </label>

                                </div>


                                <div class="form-check">

                                    <input
                                        class="form-check-input"
                                        type="radio"
                                        name="pet"
                                        value="cat"
                                        id="petCat"

                                        <?= $pet === 'cat'
                                            ? 'checked'
                                            : ''
                                        ?>
                                    >

                                    <label
                                        class="form-check-label"
                                        for="petCat"
                                    >
                                        🐱 Mèo
                                    </label>

                                </div>

                            </div>


                            <!-- PRICE -->

                            <div class="mb-4">

                                <label
                                    class="form-label fw-semibold"
                                >
                                    Khoảng giá
                                </label>


                                <div class="row g-2">

                                    <div class="col-6">

                                        <input
                                            type="number"
                                            name="min_price"
                                            class="form-control"
                                            placeholder="Từ"
                                            min="0"
                                            value="<?= htmlspecialchars(
                                                (string)
                                                $minPrice
                                            ) ?>"
                                        >

                                    </div>


                                    <div class="col-6">

                                        <input
                                            type="number"
                                            name="max_price"
                                            class="form-control"
                                            placeholder="Đến"
                                            min="0"
                                            value="<?= htmlspecialchars(
                                                (string)
                                                $maxPrice
                                            ) ?>"
                                        >

                                    </div>

                                </div>

                            </div>


                            <input
                                type="hidden"
                                name="sort"
                                value="<?= htmlspecialchars(
                                    $sort
                                ) ?>"
                            >


                            <button
                                type="submit"
                                class="btn btn-primary w-100"
                            >

                                Áp dụng bộ lọc

                            </button>


                            <a
                                href="<?= BASE_URL ?>/?url=products"
                                class="btn btn-light w-100 mt-2"
                            >

                                Xóa bộ lọc

                            </a>

                        </form>

                    </div>

                </aside>


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

                <div class="col-lg-9">


                    <!-- SORT -->

                    <div
                        class="product-toolbar"
                    >

                        <div>

                            Hiển thị

                            <strong>
                                <?= count($products) ?>
                            </strong>

                            sản phẩm

                        </div>


                        <select
                            id="productSort"
                            class="form-select"
                        >

                            <option
                                value="newest"
                                <?= $sort === 'newest'
                                    ? 'selected'
                                    : ''
                                ?>
                            >
                                Mới nhất
                            </option>


                            <option
                                value="best_selling"
                                <?= $sort === 'best_selling'
                                    ? 'selected'
                                    : ''
                                ?>
                            >
                                Bán chạy
                            </option>


                            <option
                                value="price_asc"
                                <?= $sort === 'price_asc'
                                    ? 'selected'
                                    : ''
                                ?>
                            >
                                Giá thấp → cao
                            </option>


                            <option
                                value="price_desc"
                                <?= $sort === 'price_desc'
                                    ? 'selected'
                                    : ''
                                ?>
                            >
                                Giá cao → thấp
                            </option>


                            <option
                                value="name_asc"
                                <?= $sort === 'name_asc'
                                    ? 'selected'
                                    : ''
                                ?>
                            >
                                Tên A → Z
                            </option>

                        </select>

                    </div>


                    <?php if (empty($products)): ?>

                        <div
                            class="product-empty text-center"
                        >

                            <i
                                class="bi bi-search display-4"
                            ></i>


                            <h3 class="mt-3">

                                Không tìm thấy sản phẩm

                            </h3>


                            <p class="text-muted">

                                Hãy thử thay đổi từ khóa
                                hoặc bộ lọc.

                            </p>


                            <a
                                href="<?= BASE_URL ?>/?url=products"
                                class="btn btn-primary"
                            >

                                Xem tất cả sản phẩm

                            </a>

                        </div>

                    <?php else: ?>


                        <div class="row g-4">


                            <?php foreach (
                                $products
                                as $product
                            ): ?>


                                <?php

                                $hasSale =
                                    $product['sale_price']
                                    !== null

                                    && (float)
                                    $product['sale_price']
                                    < (float)
                                    $product['price'];


                                $currentPrice =
                                    $hasSale
                                        ? (float)
                                        $product['sale_price']
                                        : (float)
                                        $product['price'];


                                $imageUrl = null;


                                if (
                                    !empty(
                                        $product[
                                            'featured_image'
                                        ]
                                    )
                                ) {

                                    $imageUrl =
                                        BASE_URL
                                        . '/'
                                        . ltrim(
                                            $product[
                                                'featured_image'
                                            ],
                                            '/'
                                        );
                                }

                                ?>


                                <div
                                    class="col-6 col-md-4"
                                >

                                    <article
                                        class="product-card h-100"
                                    >


                                        <!-- IMAGE -->

                                        <a
                                            href="<?= BASE_URL ?>/?url=product&slug=<?= urlencode(
                                                $product['slug']
                                            ) ?>"
                                            class="product-card-image"
                                        >

                                            <?php if ($imageUrl): ?>

                                                <img
                                                    src="<?= htmlspecialchars(
                                                        $imageUrl
                                                    ) ?>"
                                                    alt="<?= htmlspecialchars(
                                                        $product['name']
                                                    ) ?>"
                                                    loading="lazy"
                                                >

                                            <?php else: ?>

                                                <div
                                                    class="product-placeholder"
                                                >

                                                    🐾

                                                </div>

                                            <?php endif; ?>


                                            <?php if ($hasSale): ?>

                                                <?php

                                                $discountPercent =
                                                    round(
                                                        (
                                                            (
                                                                (float)
                                                                $product['price']

                                                                -

                                                                (float)
                                                                $product['sale_price']
                                                            )

                                                            /

                                                            (float)
                                                            $product['price']
                                                        )

                                                        * 100
                                                    );

                                                ?>

                                                <span
                                                    class="product-sale-badge"
                                                >

                                                    -<?= $discountPercent ?>%

                                                </span>

                                            <?php endif; ?>


                                            <?php if (
                                                (int)
                                                $product['stock_quantity']
                                                <= 0
                                            ): ?>

                                                <span
                                                    class="product-stock-badge"
                                                >

                                                    Hết hàng

                                                </span>

                                            <?php endif; ?>

                                        </a>


                                        <!-- BODY -->

                                        <div
                                            class="product-card-body"
                                        >

                                            <div
                                                class="product-category"
                                            >

                                                <?= htmlspecialchars(
                                                    $product[
                                                        'category_name'
                                                    ]
                                                ) ?>

                                            </div>


                                            <h3
                                                class="product-title"
                                            >

                                                <a
                                                    href="<?= BASE_URL ?>/?url=product&slug=<?= urlencode(
                                                        $product['slug']
                                                    ) ?>"
                                                >

                                                    <?= htmlspecialchars(
                                                        $product['name']
                                                    ) ?>

                                                </a>

                                            </h3>


                                            <div
                                                class="product-price"
                                            >

                                                <span
                                                    class="current-price"
                                                >

                                                    <?= number_format(
                                                        $currentPrice,
                                                        0,
                                                        ',',
                                                        '.'
                                                    ) ?>đ

                                                </span>


                                                <?php if ($hasSale): ?>

                                                    <del>

                                                        <?= number_format(
                                                            (float)
                                                            $product['price'],
                                                            0,
                                                            ',',
                                                            '.'
                                                        ) ?>đ

                                                    </del>

                                                <?php endif; ?>

                                            </div>


                                            <a
                                                href="<?= BASE_URL ?>/?url=product&slug=<?= urlencode(
                                                    $product['slug']
                                                ) ?>"
                                                class="btn btn-outline-dark w-100 mt-3"
                                            >

                                                Xem chi tiết

                                            </a>

                                        </div>

                                    </article>

                                </div>

                            <?php endforeach; ?>

                        </div>


                        <!-- ========================================
                             PAGINATION
                        ========================================= -->

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

                            <nav class="mt-5">

                                <ul
                                    class="pagination justify-content-center"
                                >

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


                                        <?php

                                        $query =
                                            $_GET;

                                        $query['url'] =
                                            'products';

                                        $query['page'] =
                                            $i;


                                        $pageUrl =
                                            BASE_URL
                                            . '/?'
                                            . http_build_query(
                                                $query
                                            );

                                        ?>


                                        <li
                                            class="page-item <?= $i === $page
                                                ? 'active'
                                                : ''
                                            ?>"
                                        >

                                            <a
                                                class="page-link"
                                                href="<?= htmlspecialchars(
                                                    $pageUrl
                                                ) ?>"
                                            >

                                                <?= $i ?>

                                            </a>

                                        </li>

                                    <?php endfor; ?>

                                </ul>

                            </nav>

                        <?php endif; ?>


                    <?php endif; ?>


                </div>

            </div>

        </div>

    </section>

</main>


<?php

require BASE_PATH
    . '/app/views/layouts/footer.php';

?>