javascript/cart.js

async function updateCartIcon() {
    const cart = await getCarts();
    const count = cart.length;
    const cartIcon = document.getElementById("cart-icon");
    if (cartIcon) {
        cartIcon.innerHTML = `
    <i class="bi bi-cart"></i>
    <span class="m-1">
      <span class="nd-720">Keranjang</span>
      <span class="nd-512">(${count})</span>
    </span>`;
    }
}

document.addEventListener("DOMContentLoaded", async function () {
    setInterval(await updateCartIcon, 10000);
});

async function promptQuantityAndAdd(productId) {
    checkUID("addToCart");
    let [qtyStr, isCancel] = await prompt(
        "Masukkan jumlah produk yang ingin ditambahkan ke keranjang:",
        "number"
    );

    console.log(qtyStr, isCancel);

    if (isCancel) {
        return;
    }

    if (!qtyStr) {
        alert("Jumlah tidak boleh kosong.", false);
        return;
    }

    let qty = parseInt(qtyStr);

    if (isNaN(qty) || qty <= 0) {
        alert("Masukkan jumlah produk yang valid.", false);
        return;
    }

    await addToCart(productId, qty);
}

async function addToCart(productId, quantity = 1) {
    checkUID("addToCart");

    console.log(productId, quantity);

    const cart = await getCarts();

    let userData = await getUserData();

    for (let i = 0; i < quantity; i++) {
        cart.push(productId);
    }

    userData.cart = cart;
    localStorage.setItem("cart", JSON.stringify(cart));

    await updateUserDataToGitHub(userData);
    await updateCartIcon();

    alert(
        `Produk telah ditambahkan ke keranjang sebanyak ${quantity} item.`,
        false
    );
}

function addToCartFromProduct(productId) {
    checkUID("addToCart");

    const qtyInput = document.getElementById("quantity");
    let quantity = parseInt(qtyInput.value);
    if (isNaN(quantity) || quantity <= 0) {
        alert("Masukkan jumlah produk yang valid.", false);
        return;
    }

    addToCart(productId, quantity);
}

async function loadCart() {
    do {
        const cart = await getCarts();
        const params = new URLSearchParams(window.location.search);
        const message = params.get("message") || "";

        if (message) alert(message, false);

        let cartCount = {};
        cart.forEach((id) => {
            cartCount[id] = (cartCount[id] || 0) + 1;
        });

        const cartItemsContainer = document.getElementById("cart-items");
        cartItemsContainer.innerHTML = "";
        let total = 0;

        if (Object.keys(cartCount).length === 0) {
            cartItemsContainer.innerHTML = "<p>Keranjang kosong.</p>";
        } else {
            cartItemsContainer.innerHTML = `<span class="text-center text-muted">${message}</span>`;
            let index = 1;
            for (let id in cartCount) {
                const product = products.find((p) => p.id === parseInt(id));
                if (product) {
                    const qty = cartCount[id];
                    const subtotal = product.price * qty;
                    total += subtotal;
                    cartItemsContainer.innerHTML += `
          <div class="d-flex justify-content-between align-items-center border-bottom pb-2 mb-2">
            <div>
              <h5>${product.name}</h5>
              <p class="mb-0">
                ${formatRupiah(product.price)} x 
                <input class="form-control form-control-lg" type="number" value="${qty}" min="1" style="width:60px;" 
                  onchange="updateQuantity(${product.id}, this.value)">
              </p>
            </div>
            <button class="btn btn-danger btn-lg" onclick="removeFromCart(${
                product.id
            })">Hapus</button>
          </div>`;
                    index++;
                }
            }
        }
        const cartSummary = document.getElementById("cart-summary");
        cartSummary.innerHTML = `<h4>Total: ${formatRupiah(total)}</h4>`;

        if (cartItemsContainer.innerHTML.trim() == "") {
            cartItemsContainer.innerHTML = "";
            alert("Jika daftar keranjang tidak muncul, silahkan muat ulang halaman ini", false)
        }

        await new Promise((resolve) => setTimeout(resolve, 1000));
    } while (cartItemsContainer.innerHTML.trim() == "");
}

async function updateQuantity(productId, newQty) {
    newQty = parseInt(newQty);
    if (isNaN(newQty) || newQty <= 0) {
        alert("Masukkan jumlah produk yang valid.", false);
        return;
    }

    const cart = await getCarts();
    const newCart = cart.filter((id) => id !== productId);

    for (let i = 0; i < newQty; i++) {
        newCart.push(productId);
    }
    localStorage.setItem("cart", JSON.stringify(newCart));

    let userData = await getUserData();
    userData.cart = newCart;
    await updateUserDataToGitHub(userData);

    await loadCart();
    await updateCartIcon();
}

async function removeFromCart(productId) {
    const cart = await getCarts();
    const index = cart.indexOf(productId);
    if (index !== -1) {
        cart.splice(index, 1);
        localStorage.setItem("cart", JSON.stringify(cart));

        let userData = await getUserData();
        userData.cart = cart;

        await updateUserDataToGitHub(userData);
        await loadCart();
        await updateCartIcon();
    }
}

document.addEventListener("DOMContentLoaded", function () {
    AOS.init();
    if (document.getElementById("cart-items")) {
        loadCart();
    }
});