SkyArtShop/wwwroot/assets/js/cart.js

// Sky Art Shop - Shopping Cart Functions

// Add item to cart
function addToCart(id, name, price, imageUrl = null) {
  // Get existing cart from localStorage
  let cart = JSON.parse(localStorage.getItem("cart") || "[]");

  // Check if item already exists
  const existingItem = cart.find((item) => item.id === id);

  if (existingItem) {
    existingItem.quantity++;
    // Update imageUrl if it was null before
    if (!existingItem.imageUrl && imageUrl) {
      existingItem.imageUrl = imageUrl;
    }
  } else {
    cart.push({ id, name, price, quantity: 1, imageUrl });
  }

  // Save cart
  localStorage.setItem("cart", JSON.stringify(cart));
  console.log("Cart updated:", cart);

  // Show confirmation
  showCartNotification(`${name} added to cart!`);
  updateCartCount();
}

// Remove item from cart
function removeFromCart(id) {
  let cart = JSON.parse(localStorage.getItem("cart") || "[]");
  cart = cart.filter((item) => item.id !== id);
  localStorage.setItem("cart", JSON.stringify(cart));
  updateCartCount();
}

// Update cart item quantity
function updateCartQuantity(id, quantity) {
  let cart = JSON.parse(localStorage.getItem("cart") || "[]");
  const item = cart.find((item) => item.id === id);
  if (item) {
    item.quantity = quantity;
    if (quantity <= 0) {
      cart = cart.filter((item) => item.id !== id);
    }
  }
  localStorage.setItem("cart", JSON.stringify(cart));
  updateCartCount();
}

// Get cart items
function getCart() {
  return JSON.parse(localStorage.getItem("cart") || "[]");
}

// Get cart total
function getCartTotal() {
  const cart = getCart();
  return cart.reduce((total, item) => total + item.price * item.quantity, 0);
}

// Update cart count badge
function updateCartCount() {
  const cart = getCart();
  const count = cart.reduce((total, item) => total + item.quantity, 0);

  // Update old badge (if exists)
  const badge = document.getElementById("cart-count");
  if (badge) {
    badge.textContent = count;
    badge.style.display = count > 0 ? "inline" : "none";
  }

  // Update navbar cart badge
  const navCartBadge = document.querySelector("#cartBtn .badge");
  if (navCartBadge) {
    navCartBadge.textContent = count;
    navCartBadge.style.display = count > 0 ? "block" : "none";
  }
}

// Show cart notification
function showCartNotification(message) {
  const notification = document.createElement("div");
  notification.className = "cart-notification";
  notification.textContent = message;
  notification.style.cssText = `
        position: fixed;
        top: 80px;
        right: 20px;
        background: #4CAF50;
        color: white;
        padding: 15px 25px;
        border-radius: 5px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.2);
        z-index: 10000;
        animation: slideInFromTop 0.3s ease;
    `;

  document.body.appendChild(notification);

  setTimeout(() => {
    notification.style.animation = "slideOut 0.3s ease";
    setTimeout(() => notification.remove(), 300);
  }, 3000);
}

// Clear entire cart
function clearCart() {
  localStorage.removeItem("cart");
  updateCartCount();
}

// ====================================
// Wishlist Functions
// ====================================

// Add item to wishlist
function addToWishlist(id, name, price, imageUrl) {
  let wishlist = JSON.parse(localStorage.getItem("wishlist") || "[]");

  const existingItem = wishlist.find((item) => item.id === id);

  if (existingItem) {
    showWishlistNotification(`${name} is already in your wishlist!`);
    return;
  }

  wishlist.push({ id, name, price, imageUrl });
  localStorage.setItem("wishlist", JSON.stringify(wishlist));
  console.log("Wishlist updated:", wishlist);

  showWishlistNotification(`${name} added to wishlist!`);
  updateWishlistCount();
}

// Remove item from wishlist
function removeFromWishlist(id) {
  let wishlist = JSON.parse(localStorage.getItem("wishlist") || "[]");
  wishlist = wishlist.filter((item) => item.id !== id);
  localStorage.setItem("wishlist", JSON.stringify(wishlist));
  updateWishlistCount();
}

// Get wishlist items
function getWishlist() {
  return JSON.parse(localStorage.getItem("wishlist") || "[]");
}

// Update wishlist count badge
function updateWishlistCount() {
  const wishlist = getWishlist();
  const count = wishlist.length;

  const navWishlistBadge = document.querySelector("#wishlistBtn .badge");
  const wishlistIcon = document.querySelector("#wishlistBtn i");

  if (navWishlistBadge) {
    navWishlistBadge.textContent = count;
    navWishlistBadge.style.display = count > 0 ? "block" : "none";
  }

  // Change heart icon based on wishlist status
  if (wishlistIcon) {
    if (count > 0) {
      wishlistIcon.className = "bi bi-heart-fill";
      wishlistIcon.style.color = "#e74c3c";
    } else {
      wishlistIcon.className = "bi bi-heart";
      wishlistIcon.style.color = "";
    }
  }
}

// Show wishlist notification
function showWishlistNotification(message) {
  const notification = document.createElement("div");
  notification.className = "wishlist-notification";
  notification.textContent = message;
  notification.style.cssText = `
        position: fixed;
        top: 80px;
        right: 20px;
        background: #E91E63;
        color: white;
        padding: 15px 25px;
        border-radius: 5px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.2);
        z-index: 10000;
        animation: slideInFromTop 0.3s ease;
    `;

  document.body.appendChild(notification);

  setTimeout(() => {
    notification.style.animation = "slideOut 0.3s ease";
    setTimeout(() => notification.remove(), 300);
  }, 3000);
}

// Clear entire wishlist
function clearWishlist() {
  localStorage.removeItem("wishlist");
  updateWishlistCount();
}

// ====================================
// Dropdown Functions
// ====================================
// Render cart dropdown
function renderCartDropdown() {
  const cart = getCart();
  const cartItems = document.getElementById("cartItems");
  const cartTotal = document.getElementById("cartTotal");

  if (!cartItems) return;

  if (cart.length === 0) {
    cartItems.innerHTML = '<p class="empty-message">Your cart is empty</p>';
    if (cartTotal) cartTotal.textContent = "$0.00";
    return;
  }

  console.log("Rendering cart:", cart);

  cartItems.innerHTML = cart
    .map((item) => {
      const imgSrc = item.imageUrl || "/assets/images/placeholder.jpg";
      console.log("Cart item image URL:", imgSrc);
      return `
        <div class="dropdown-item">
            <img src="${imgSrc}" alt="${
        item.name
      }" class="dropdown-item-image" onerror="this.src='/assets/images/placeholder.jpg'">
            <div class="dropdown-item-info">
                <div class="dropdown-item-name">${item.name}</div>
                <div class="dropdown-item-details">
                    <span class="dropdown-item-quantity">Qty: ${
                      item.quantity
                    }</span>
                    <span class="dropdown-item-price">$${(
                      item.price * item.quantity
                    ).toFixed(2)}</span>
                </div>
            </div>
            <button class="dropdown-item-remove" onclick="removeFromCartDropdown('${
              item.id
            }')">
                <i class="bi bi-x"></i>
            </button>
        </div>
    `;
    })
    .join("");

  if (cartTotal) {
    const total = getCartTotal();
    cartTotal.textContent = `$${total.toFixed(2)}`;
  }
}

// Render wishlist dropdown
function renderWishlistDropdown() {
  const wishlist = getWishlist();
  const wishlistItems = document.getElementById("wishlistItems");

  if (!wishlistItems) return;

  if (wishlist.length === 0) {
    wishlistItems.innerHTML =
      '<p class="empty-message">Your wishlist is empty</p>';
    return;
  }

  console.log("Rendering wishlist:", wishlist);

  wishlistItems.innerHTML = wishlist
    .map((item) => {
      const imgSrc = item.imageUrl || "/assets/images/placeholder.jpg";
      console.log("Wishlist item image URL:", imgSrc);
      return `
        <div class="dropdown-item">
            <img src="${imgSrc}" alt="${
        item.name
      }" class="dropdown-item-image" onerror="this.src='/assets/images/placeholder.jpg'">
            <div class="dropdown-item-info">
                <div class="dropdown-item-name">${item.name}</div>
                <div class="dropdown-item-details">
                    <span class="dropdown-item-price">$${item.price.toFixed(
                      2
                    )}</span>
                </div>
            </div>
            <button class="dropdown-item-remove" onclick="removeFromWishlistDropdown('${
              item.id
            }')">
                <i class="bi bi-x"></i>
            </button>
        </div>
    `;
    })
    .join("");
}

// Remove from cart via dropdown
function removeFromCartDropdown(id) {
  removeFromCart(id);
  renderCartDropdown();
  updateCartCount();
}

// Remove from wishlist via dropdown
function removeFromWishlistDropdown(id) {
  removeFromWishlist(id);
  renderWishlistDropdown();
  updateWishlistCount();
}

// Toggle dropdown visibility
function toggleDropdown(dropdownId) {
  const dropdown = document.getElementById(dropdownId);
  if (!dropdown) return;

  // Close other dropdowns
  document.querySelectorAll(".icon-dropdown").forEach((d) => {
    if (d.id !== dropdownId) {
      d.classList.remove("show");
    }
  });

  dropdown.classList.toggle("show");

  // Render content when opening
  if (dropdown.classList.contains("show")) {
    if (dropdownId === "cartDropdown") {
      renderCartDropdown();
    } else if (dropdownId === "wishlistDropdown") {
      renderWishlistDropdown();
    }
  }
}

// Close cart/wishlist dropdowns when clicking outside
document.addEventListener("click", function (e) {
  if (
    !e.target.closest(".dropdown-container") &&
    !e.target.closest(".nav-toggle")
  ) {
    document.querySelectorAll(".icon-dropdown").forEach((d) => {
      d.classList.remove("show");
    });
  }
});

// Initialize cart and wishlist count on page load
document.addEventListener("DOMContentLoaded", function () {
  updateCartCount();
  updateWishlistCount();

  // Add click handlers for dropdown toggles
  const cartBtn = document.getElementById("cartBtn");
  const wishlistBtn = document.getElementById("wishlistBtn");

  if (cartBtn) {
    cartBtn.addEventListener("click", function (e) {
      e.preventDefault();
      toggleDropdown("cartDropdown");
    });
  }

  if (wishlistBtn) {
    wishlistBtn.addEventListener("click", function (e) {
      e.preventDefault();
      toggleDropdown("wishlistDropdown");
    });
  }
});