script.js

// ---------- DATA PRODUK STATIS ----------
const products = [
  { id: 1, name: "Tote Bag Kanvas 'Bumi Hijau'", category: "Tote Bag", price: 89000, imageIcon: "🛍️", stock: true },
  { id: 2, name: "Tote Bag Polos Natural", category: "Tote Bag", price: 75000, imageIcon: "👜", stock: true },
  { id: 3, name: "Kaos Oversize Earth Tone", category: "Kaos", price: 129000, imageIcon: "👕", stock: true },
  { id: 4, name: "Kaos Cotton 'Eco Warrior'", category: "Kaos", price: 145000, imageIcon: "👚", stock: true },
  { id: 5, name: "Keychain Kayu Minimalis", category: "Keychain", price: 25000, imageIcon: "🔑", stock: true },
  { id: 6, name: "Keychain Love Planet", category: "Keychain", price: 28000, imageIcon: "❤️🔑", stock: true },
  { id: 7, name: "Sticker Set Hewan (3pcs)", category: "Aksesoris", price: 15000, imageIcon: "🎨", stock: true },
  { id: 8, name: "Pouch Serbaguna", category: "Aksesoris", price: 49000, imageIcon: "🧳", stock: true },
];

// Keranjang state (array {id, name, price, quantity})
let cart = [];

// DOM Elements
const productContainer = document.getElementById("productContainer");
const cartCountSpan = document.getElementById("cartCount");
const cartSidebar = document.getElementById("cartSidebar");
const cartOverlay = document.getElementById("cartOverlay");
const cartItemsListDiv = document.getElementById("cartItemsList");
const cartTotalPriceSpan = document.getElementById("cartTotalPrice");
const cartIconBtn = document.getElementById("cartIcon");
const closeCartBtn = document.getElementById("closeCartBtn");
const checkoutBtn = document.getElementById("checkoutBtn");

// Helper: format Rupiah
function formatRupiah(amount) {
  return "Rp" + amount.toLocaleString("id-ID");
}

// Simpan keranjang ke localStorage (opsional, tapi untuk persistensi statis)
function saveCartToLocal() {
  localStorage.setItem("ecogoods_cart", JSON.stringify(cart));
}

function loadCartFromLocal() {
  const stored = localStorage.getItem("ecogoods_cart");
  if (stored) {
    try {
      cart = JSON.parse(stored);
      cart = cart.filter(item => item && item.id).map(item => ({ ...item, quantity: Number(item.quantity) || 1 }));
    } catch (e) {
      cart = [];
    }
  } else {
    cart = [];
  }
  updateCartUI();
  updateCartIconCount();
}

// Update tampilan jumlah di icon keranjang
function updateCartIconCount() {
  const totalItems = cart.reduce((sum, item) => sum + item.quantity, 0);
  cartCountSpan.innerText = totalItems;
}

// render produk dari array products
function renderProducts() {
  if (!productContainer) return;
  productContainer.innerHTML = "";
  products.forEach(prod => {
    const card = document.createElement("div");
    card.className = "product-card";
    card.innerHTML = `
      <div class="product-img">
        <i class="fas fa-${prod.category === 'Tote Bag' ? 'bag-shopping' : (prod.category === 'Kaos' ? 'tshirt' : 'key')}" style="font-size: 3rem; opacity: 0.7;"></i>
        <span style="margin-left: 8px; font-size: 2rem;">${prod.imageIcon}</span>
      </div>
      <div class="product-info">
        <div class="product-category">${prod.category}</div>
        <div class="product-title">${prod.name}</div>
        <div class="product-price">${formatRupiah(prod.price)}</div>
        <button class="add-to-cart" data-id="${prod.id}" data-name="${prod.name}" data-price="${prod.price}">
          <i class="fas fa-cart-plus"></i> Tambah ke Keranjang
        </button>
      </div>
    `;
    productContainer.appendChild(card);
  });

  document.querySelectorAll('.add-to-cart').forEach(btn => {
    btn.addEventListener('click', () => {
      const id = parseInt(btn.getAttribute('data-id'));
      const name = btn.getAttribute('data-name');
      const price = parseInt(btn.getAttribute('data-price'));
      addToCart(id, name, price);
    });
  });
}

// fungsi add to cart
function addToCart(id, name, price) {
  const existingItem = cart.find(item => item.id === id);
  if (existingItem) {
    existingItem.quantity += 1;
  } else {
    cart.push({ id: id, name: name, price: price, quantity: 1 });
  }
  updateCartUI();
  updateCartIconCount();
  saveCartToLocal();
  const btn = document.querySelector(`.add-to-cart[data-id='${id}']`);
  if (btn) {
    btn.style.transform = "scale(0.97)";
    setTimeout(() => { btn.style.transform = ""; }, 150);
  }
}

// render ulang sidebar keranjang
function renderCartItems() {
  if (!cartItemsListDiv) return;
  if (cart.length === 0) {
    cartItemsListDiv.innerHTML = '<p style="color:#aaa; text-align:center;">Keranjang masih kosong, yuk belanja!</p>';
    cartTotalPriceSpan.innerText = `Total: ${formatRupiah(0)}`;
    return;
  }
  let innerHtml = "";
  let total = 0;
  cart.forEach((item, idx) => {
    const itemTotal = item.price * item.quantity;
    total += itemTotal;
    innerHtml += `
      <div class="cart-item" data-cartidx="${idx}">
        <div class="cart-item-info">
          <div class="cart-item-name">${item.name}</div>
          <div class="cart-item-price">${formatRupiah(item.price)}</div>
        </div>
        <div class="cart-qty">
          <button class="cart-qty-minus" data-id="${item.id}">-</button>
          <span style="min-width:28px; text-align:center;">${item.quantity}</span>
          <button class="cart-qty-plus" data-id="${item.id}">+</button>
          <button class="cart-remove" data-id="${item.id}" style="color:#b1624d; margin-left:8px;"><i class="fas fa-trash-alt"></i></button>
        </div>
      </div>
    `;
  });
  cartItemsListDiv.innerHTML = innerHtml;
  cartTotalPriceSpan.innerText = `Total: ${formatRupiah(total)}`;

  document.querySelectorAll('.cart-qty-minus').forEach(btn => {
    btn.addEventListener('click', () => {
      const prodId = parseInt(btn.getAttribute('data-id'));
      updateQuantity(prodId, -1);
    });
  });
  document.querySelectorAll('.cart-qty-plus').forEach(btn => {
    btn.addEventListener('click', () => {
      const prodId = parseInt(btn.getAttribute('data-id'));
      updateQuantity(prodId, 1);
    });
  });
  document.querySelectorAll('.cart-remove').forEach(btn => {
    btn.addEventListener('click', () => {
      const prodId = parseInt(btn.getAttribute('data-id'));
      removeItemComplete(prodId);
    });
  });
}

function updateQuantity(productId, delta) {
  const index = cart.findIndex(item => item.id === productId);
  if (index !== -1) {
    const newQty = cart[index].quantity + delta;
    if (newQty <= 0) {
      cart.splice(index, 1);
    } else {
      cart[index].quantity = newQty;
    }
    updateCartUI();
    updateCartIconCount();
    saveCartToLocal();
  }
}

function removeItemComplete(productId) {
  cart = cart.filter(item => item.id !== productId);
  updateCartUI();
  updateCartIconCount();
  saveCartToLocal();
}

function updateCartUI() {
  renderCartItems();
  updateCartIconCount();
}

// Sidebar toggles
function openCartSidebar() {
  cartSidebar.style.transform = "translateX(0)";
  cartOverlay.style.visibility = "visible";
  cartOverlay.style.opacity = "1";
  renderCartItems();
}

function closeCartSidebar() {
  cartSidebar.style.transform = "translateX(100%)";
  cartOverlay.style.visibility = "hidden";
  cartOverlay.style.opacity = "0";
}

// checkout demo
function demoCheckout() {
  if (cart.length === 0) {
    alert("Keranjang kosong, tambahkan produk dulu ya!");
    return;
  }
  let total = cart.reduce((sum, i) => sum + (i.price * i.quantity), 0);
  if (confirm(`Checkout demo berhasil! Total belanja ${formatRupiah(total)}.\nTerima kasih telah berbelanja di EcoGoods (simulasi statis). Keranjang akan dikosongkan.`)) {
    cart = [];
    updateCartUI();
    updateCartIconCount();
    saveCartToLocal();
    closeCartSidebar();
  }
}

// EVENT LISTENERS
cartIconBtn.addEventListener('click', openCartSidebar);
closeCartBtn.addEventListener('click', closeCartSidebar);
cartOverlay.addEventListener('click', closeCartSidebar);
checkoutBtn.addEventListener('click', demoCheckout);

// inisialisasi awal
function init() {
  loadCartFromLocal();
  renderProducts();
  updateCartIconCount();
}

init();