<?php

include 'config/koneksi.php';

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


/* =====================================================
   AMBIL DATA PRODUK
===================================================== */

$query = mysqli_query($conn, "
    SELECT 
        produk.*,
        kategori_produk.nama_kategori
    FROM produk
    LEFT JOIN kategori_produk
        ON produk.id_kategori = kategori_produk.id_kategori
    WHERE produk.id_produk = '$id'
");

$produk = mysqli_fetch_assoc($query);

if (!$produk) {
    die("Produk tidak ditemukan.");
}


/* =====================================================
   DATA WHATSAPP PEMILIK
===================================================== */

$no_hp = $produk['no_hp'] ?? '';

/*
   Bersihkan nomor:
   0812xxxx → 62812xxxx
*/
$wa = preg_replace('/[^0-9]/', '', $no_hp);

if (substr($wa, 0, 1) == '0') {
    $wa = '62' . substr($wa, 1);
}

?>

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

<head>

    <meta charset="UTF-8">

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

    <title>
        <?= htmlspecialchars($produk['nama_produk']); ?>
        - Desa Oelomin
    </title>


    <!-- CSS -->

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

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


    <!-- GOOGLE 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">

</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 HAMBURGER MOBILE -->

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

        <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>

<!-- =================================================
     DETAIL PRODUK
================================================= -->

<main class="detail-wrapper">


    <!-- =================================================
         KEMBALI
    ================================================== -->

    <a
        href="daftar_produk.php?kategori=<?= $produk['id_kategori']; ?>"
        class="detail-back"
    >

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

        Kembali ke Produk

    </a>



    <!-- =================================================
         CARD DETAIL
    ================================================== -->

    <section class="detail-card">


        <!-- =================================================
             FOTO PRODUK
        ================================================== -->

        <div class="detail-image-box">

            <?php

            if (
                !empty($produk['foto']) &&
                file_exists(
                    "assets/img/" . $produk['foto']
                )
            ):

            ?>

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

            <?php else: ?>

                <div class="detail-no-image">

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

                    <span>
                        Tidak ada foto
                    </span>

                </div>

            <?php endif; ?>

        </div>



        <!-- =================================================
             INFORMASI PRODUK
        ================================================== -->

        <div class="detail-content">


            <!-- KATEGORI -->

            <span class="detail-category">

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

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

            </span>



            <!-- NAMA PRODUK -->

            <h1>

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

            </h1>



            <!-- HARGA -->

            <div class="detail-price-label">
                Harga Produk
            </div>


            <div class="detail-price">

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

            </div>



            <!-- =================================================
                 PENJUAL
            ================================================== -->

            <div class="seller-box">

                <div class="seller-icon">

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

                </div>


                <div>

                    <span>
                        Dijual oleh
                    </span>

                    <strong>

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

                    </strong>

                    <small>

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

                        Desa Oelomin

                    </small>

                </div>

            </div>



            <!-- =================================================
                 DESKRIPSI
            ================================================== -->

            <div class="description-box">

                <h3>

                    <i class="fa-solid fa-circle-info"></i>

                    Tentang Produk

                </h3>


                <p>

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

                </p>

            </div>



            <!-- =================================================
                 JUMLAH PESANAN
            ================================================== -->

            <div class="quantity-area">

                <div>

                    <strong>
                        Jumlah Pesanan
                    </strong>

                    <span>
                        Tentukan jumlah produk yang ingin dipesan
                    </span>

                </div>


                <div class="quantity-control">


                    <button
                        type="button"
                        onclick="kurangJumlah()"
                    >

                        −

                    </button>


                    <input
                        type="number"
                        id="jumlah"
                        value="1"
                        min="1"
                    >


                    <button
                        type="button"
                        onclick="tambahJumlah()"
                    >

                        +

                    </button>


                </div>

            </div>



            <!-- =================================================
                 TOMBOL WHATSAPP
            ================================================== -->

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

                <button
                    type="button"
                    class="btn-pesan"
                    onclick="pesanSekarang()"
                >

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

                    Pesan melalui WhatsApp

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

                </button>

            <?php else: ?>

                <button
                    type="button"
                    class="btn-pesan"
                    disabled
                >

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

                    Nomor WhatsApp Belum Tersedia

                </button>

            <?php endif; ?>


        </div>

    </section>

</main>



<!-- =================================================
     JAVASCRIPT
================================================= -->

<script>

function tambahJumlah() {

    const input =
        document.getElementById('jumlah');

    let jumlah =
        parseInt(input.value) || 1;

    input.value = jumlah + 1;

}


function kurangJumlah() {

    const input =
        document.getElementById('jumlah');

    let jumlah =
        parseInt(input.value) || 1;

    if (jumlah > 1) {

        input.value = jumlah - 1;

    }

}


function pesanSekarang() {

    const jumlah =
        parseInt(
            document.getElementById('jumlah').value
        ) || 1;


    if (jumlah < 1) {

        alert("Jumlah pesanan minimal 1.");

        return;

    }


    const namaProduk =
        <?= json_encode($produk['nama_produk']); ?>;


    const harga =
        <?= (int)$produk['harga']; ?>;


    const namaPenjual =
        <?= json_encode(
            !empty($produk['nama_penjual'])
                ? $produk['nama_penjual']
                : 'Pemilik Produk'
        ); ?>;


    const total =
        harga * jumlah;


    const pesan =
        `Halo Kak ${namaPenjual}, saya ingin memesan produk dari Portal Desa Digital Desa Oelomin.%0A%0A` +

        `Produk: ${namaProduk}%0A` +

        `Jumlah: ${jumlah}%0A` +

        `Harga: Rp ${harga.toLocaleString('id-ID')}%0A` +

        `Total: Rp ${total.toLocaleString('id-ID')}%0A%0A` +

        `Mohon informasi mengenai ketersediaan produk dan proses pemesanannya. Terima kasih.`;


    window.open(
        "https://wa.me/<?= $wa; ?>?text=" + pesan,
        "_blank"
    );

}
/* =====================================================
   NAVBAR MOBILE
===================================================== */

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")) {

            /* ☰ → ✕ */

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

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

        } else {

            /* ✕ → ☰ */

            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>