<?php

include 'config/koneksi.php';

/* =====================================================
   AMBIL ID KATEGORI
===================================================== */

$id_kategori = isset($_GET['kategori'])
    ? (int) $_GET['kategori']
    : 0;


/* =====================================================
   AMBIL DATA KATEGORI
===================================================== */

$queryKategori = mysqli_query(
    $conn,
    "
    SELECT id_kategori, nama_kategori
    FROM kategori_produk
    WHERE id_kategori = '$id_kategori'
    LIMIT 1
    "
);

$kategori = mysqli_fetch_assoc($queryKategori);


/* Jika kategori tidak ditemukan */

if (!$kategori) {

    header("Location: produk.php");
    exit;

}


/* =====================================================
   AMBIL PRODUK BERDASARKAN KATEGORI
===================================================== */

$queryProduk = mysqli_query(
    $conn,
    "
    SELECT
        id_produk,
        id_kategori,
        nama_produk,
        harga,
        deskripsi,
        nama_penjual,
        no_hp,
        foto
    FROM produk
    WHERE id_kategori = '$id_kategori'
    ORDER BY id_produk DESC
    "
);


/* =====================================================
   HITUNG JUMLAH PRODUK
===================================================== */

$jumlah_produk = mysqli_num_rows($queryProduk);

?>

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

<head>

    <meta charset="UTF-8">

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

    <title>
        <?= htmlspecialchars($kategori['nama_kategori']); ?>
        | Produk Lokal Desa Oelomin
    </title>


    <!-- FONT -->

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


    <!-- FONT AWESOME -->

    <link
        rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
    >


    <!-- CSS NAVBAR / PRODUK -->

    <link
        rel="stylesheet"
        href="assets/css/produk.css"
    >


    <!-- CSS KHUSUS DAFTAR PRODUK -->

    <link
        rel="stylesheet"
        href="assets/css/daftar_produk.css"
    >

</head>


<body>


<!-- =====================================================
     NAVBAR
===================================================== -->

<header class="navbar">

    <div class="logo">

        <img
            src="assets/img/logo-desa.png"
            alt="Logo Desa Oelomin"
        >

        <div class="logo-text">

            <h2>Desa Oelomin</h2>

            <span>Portal Desa Digital</span>

        </div>

    </div>


    <!-- TOMBOL MENU MOBILE -->

    <button
        class="menu-toggle"
        id="menuToggle"
        aria-label="Buka Menu"
        type="button"
    >

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

    </button>


    <!-- MENU NAVBAR -->

    <nav id="mainNav">

        <ul class="menu">

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


            <li>
                <a href="profil.php">
                    Profil Desa
                </a>
            </li>


            <li>
                <a
                    href="produk.php"
                    class="active"
                >
                    Produk Lokal
                </a>
            </li>


            <li>
                <a href="berita.php">
                    Berita & Edukasi
                </a>
            </li>

        </ul>

    </nav>

</header>

<!-- =====================================================
     HEADER KATEGORI
===================================================== -->

<section class="detail-kategori-hero">

    <div class="hero-decoration hero-decoration-one"></div>

    <div class="hero-decoration hero-decoration-two"></div>


    <div class="kategori-hero-container">


        <!-- BREADCRUMB / KEMBALI -->

        <a
            href="produk.php"
            class="back-etalse"
        >

            <span class="back-icon">

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

            </span>

            <span>
                Kembali ke Etalase Produk
            </span>

        </a>



        <!-- LABEL -->

        <div class="kategori-badge">

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

            PRODUK LOKAL DESA OELOMIN

        </div>



        <!-- JUDUL -->

        <h1>

            Produk
            <span>
                <?= htmlspecialchars(
                    $kategori['nama_kategori']
                ); ?>
            </span>

        </h1>

        <p class="kategori-description">

            Temukan berbagai produk lokal hasil
            masyarakat Desa Oelomin yang berkualitas
            dan memiliki potensi ekonomi.

        </p>

        <!-- INFORMASI JUMLAH -->

        <div class="kategori-summary">

            <div class="summary-icon">

                <i class="fa-solid fa-box-open"></i>

            </div>


            <div>

                <strong>
                    <?= $jumlah_produk; ?>
                </strong>

                <span>
                    Produk tersedia
                </span>

            </div>

        </div>


    </div>

</section>

<!-- =====================================================
     KONTEN PRODUK
===================================================== -->

<main class="etalase-produk-container">


    <!-- =================================================
         HEADING
    ================================================== -->

    <div class="etalase-heading">

        <div>

            <span class="etalase-label">

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

                ETALASE PRODUK

            </span>


            <h2>

                Produk
                <?= htmlspecialchars(
                    $kategori['nama_kategori']
                ); ?>

            </h2>


            <p>

                Pilih produk untuk melihat informasi
                lengkap dan menghubungi penjual.

            </p>

        </div>

    </div>

    <!-- =================================================
         GRID PRODUK
    ================================================== -->

    <?php if ($jumlah_produk > 0): ?>

        <div class="produk-grid">


            <?php while (
                $produk = mysqli_fetch_assoc($queryProduk)
            ): ?>


                <article class="produk-card">


                    <!-- FOTO -->

                    <div class="produk-card-image">

                        <?php

                        $path_foto = "";

                        if (!empty($produk['foto'])) {

                            $path_foto =
                                "assets/img/" .
                                $produk['foto'];

                        }

                        if (
                            !empty($produk['foto']) &&
                            file_exists($path_foto)
                        ):

                        ?>

                            <img
                                src="<?= htmlspecialchars($path_foto); ?>"
                                alt="<?= htmlspecialchars($produk['nama_produk']); ?>"
                            >

                        <?php else: ?>

                            <div class="produk-image-empty">

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

                                <span>
                                    Foto Produk
                                </span>

                            </div>

                        <?php endif; ?>

                    </div>



                    <!-- INFORMASI -->

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


                        <!-- NAMA -->

                        <h3>

                            <?= htmlspecialchars(
                                $produk['nama_produk']
                            ); ?>

                        </h3>



                        <!-- HARGA -->

                        <div class="produk-price">

                            Rp
                            <?= number_format(
                                $produk['harga'],
                                0,
                                ',',
                                '.'
                            ); ?>

                        </div>



                        <!-- DESKRIPSI -->

                        <p class="produk-description">

                            <?php

                            $deskripsi =
                                !empty(
                                    $produk['deskripsi']
                                )
                                ? $produk['deskripsi']
                                : 'Produk lokal masyarakat Desa Oelomin.';

                            echo htmlspecialchars(
                                mb_strimwidth(
                                    $deskripsi,
                                    0,
                                    105,
                                    '...'
                                )
                            );

                            ?>

                        </p>

                        <!-- PENJUAL -->

                        <div class="produk-seller">

                            <div class="seller-icon">

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

                            </div>


                            <div>

                                <small>
                                    Penjual
                                </small>

                                <strong>

                                    <?= htmlspecialchars(
                                        !empty(
                                            $produk['nama_penjual']
                                        )
                                        ? $produk['nama_penjual']
                                        : 'Masyarakat Desa'
                                    ); ?>

                                </strong>

                            </div>

                        </div>



                        <!-- DETAIL -->

                        <a
                            href="detail_produk.php?id=<?= $produk['id_produk']; ?>"
                            class="btn-lihat-detail"
                        >

                            <span>
                                Lihat Detail
                            </span>

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

                        </a>


                    </div>

                </article>


            <?php endwhile; ?>


        </div>


    <?php else: ?>


        <!-- =================================================
             JIKA PRODUK KOSONG
        ================================================== -->

        <div class="produk-empty">

            <div class="empty-icon">

                <i class="fa-solid fa-store-slash"></i>

            </div>


            <h3>
                Belum Ada Produk
            </h3>


            <p>

                Belum ada produk yang tersedia
                pada kategori
                <strong>
                    <?= htmlspecialchars(
                        $kategori['nama_kategori']
                    ); ?>
                </strong>.

            </p>


            <a
                href="produk.php"
                class="btn-kembali-produk"
            >

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

                Kembali ke Etalase

            </a>

        </div>


    <?php endif; ?>


</main>

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

<footer class="footer">

    <div class="footer-container">

        <!-- MENU -->

        <div class="footer-column">

            <h3>
                Menu
            </h3>

            <ul>

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

                <li>
                    <a href="profil.php">
                        Profil Desa
                    </a>
                </li>

                <li>
                    <a href="produk.php">
                        Produk Lokal
                    </a>
                </li>

                <li>
                    <a href="berita.php">
                        Berita & Edukasi
                    </a>
                </li>

            </ul>

        </div>

        <!-- KONTAK -->

        <div class="footer-column">

            <h3>
                Kontak Desa
            </h3>

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

            <p>
                Kecamatan Nekamese
            </p>

            <p>
                Kabupaten Kupang
            </p>

            <p>
                Provinsi Nusa Tenggara Timur
            </p>

        </div>

        <!-- HUBUNGI -->

        <div class="footer-column">

            <h3>
                Hubungi Kami
            </h3>

            <p>
                <i class="fa-solid fa-envelope"></i>
                desaoelomin@gmail.com
            </p>

            <p>
                <i class="fa-solid fa-phone"></i>
                0812-3456-7890
            </p>

            <p>
                <i class="fa-regular fa-clock"></i>
                Senin - Jumat
            </p>

            <p>
                08.00 - 15.00 WITA
            </p>

        </div>


    </div>


    <div class="footer-bottom">

        <p>
            © <?= date('Y'); ?>
            <span>
                Portal Desa Digital Desa Oelomin
            </span>
            · Semua Hak Dilindungi
        </p>

    </div>

</footer>

<script>

const menuToggle = document.getElementById("menuToggle");
const mainNav = document.getElementById("mainNav");


if (menuToggle && mainNav) {

    menuToggle.addEventListener("click", function () {

        mainNav.classList.toggle("active");

        const icon = menuToggle.querySelector("i");


        if (mainNav.classList.contains("active")) {

            /* GARIS TIGA → X */

            icon.classList.remove("fa-bars");
            icon.classList.add("fa-xmark");

            menuToggle.setAttribute(
                "aria-label",
                "Tutup Menu"
            );

        } else {

            /* X → GARIS TIGA */

            icon.classList.remove("fa-xmark");
            icon.classList.add("fa-bars");

            menuToggle.setAttribute(
                "aria-label",
                "Buka Menu"
            );

        }

    });


    /* =================================================
       TUTUP MENU SETELAH MEMILIH LINK
    ================================================= */

    document
        .querySelectorAll("#mainNav a")
        .forEach(function(link) {

            link.addEventListener("click", function() {

                mainNav.classList.remove("active");


                const icon =
                    menuToggle.querySelector("i");


                icon.classList.remove("fa-xmark");

                icon.classList.add("fa-bars");


                menuToggle.setAttribute(
                    "aria-label",
                    "Buka Menu"
                );

            });

        });

}

</script>

</body>

</html>