IWD2-01/INFO-1272 (JS 1)/Projects/Final Project/index.js

// Object called flowers that contains 3 flower objects with their information
const flowers = {
    "rose": {
        name: "Rose",
        price: 2.5,
        category: "Romance",
        stock: 20,
        description: "The classic red rose for that someone special."
    },
    "tulip": {
        name: "Tulip",
        price: 3.0,
        category: "Springtime",
        stock: 15,
        description: "A perfect spring time flower for a bouquet."
    },
    "sunflower": {
        name: "Sunflower",
        price: 5.0,
        category: "Exclusives",
        stock: 10,
        description: "Large iconic flower perfect for an Autumn garden."
    }
};

let feedback = [
    {flower: "Rose", rating: 5, content: "A beautiful bouqet delivered on time with care!"},
    {flower: "Tulip", rating: 4, content: "Reminds me of Spring any time of year!"},
    {flower: "Sunflower", rating: 5, content: "Sunflower was tall and healthy, so elegant!"}
];

// Function to add flower information (price, stock, description, category) to HTML catalog
function populateCatalog() {
    Object.values(flowers).forEach(flower => {
        const article = document.getElementById(`${flower.name.toLowerCase()}`)
        if (article) {
            const listItems = article.querySelectorAll("ul li");
            listItems[0].textContent = `Price: $${flower.price.toFixed(2)}`;
            listItems[1].textContent = `Category: ${flower.category}`;
            listItems[2].textContent = `Stock: ${flower.stock}`;
            listItems[3].textContent = `Description: ${flower.description}`;
        }
    });
}

// Function to update items inside cart, used by addToCart() and at initialization
function updateCartDisplay() { 
    const tbody = document.querySelector("#cart-table tbody");
    tbody.innerHTML = "";
    let subtotal = 0;
    cart.forEach((item, idx) => {
        const row = document.createElement("tr");
        row.innerHTML = `
            <td>${flowers[item.name].name}</td>
            <td>$${item.price.toFixed(2)}</td>
            <td>${item.quantity}</td>
            <td>${(item.price * item.quantity).toFixed(2)}</td>
            <td><button data-idx="${idx}" class="remove-button">Remove</button></td>
        `
        tbody.appendChild(row);
        subtotal += item.price * item.quantity;
    });

    const tax = subtotal * 0.13;
    const total = subtotal + tax;

    document.getElementById("subtotal").textContent = subtotal.toFixed(2);
    document.getElementById("tax").textContent = tax.toFixed(2);
    document.getElementById("total").textContent = total.toFixed(2);

    document.querySelectorAll(".remove-button").forEach(btn => {
        btn.addEventListener("click", function() {
            const idx = Number(btn.getAttribute("data-idx"));
            const item = cart[idx];
            flowers[item.name].stock += item.quantity;
            cart.splice(idx,1);
            updateCartDisplay();
            populateCatalog();
        })
    })
} 

// Function to handle getting the correct flower name and quantity to add to cart
function setupCartForms() {
    document.querySelectorAll(".add-to-cart").forEach(form => {
        form.addEventListener("submit", function(e) {
            e.preventDefault();
            const article = form.closest("article");
            const flowerName = article.querySelector("h3").textContent;
            const quantity = form.querySelector("input[name='quantity']").value;
            addToCart(flowerName, quantity);
            form.reset();
        });
    });
}

// Start with empty cart
let cart = [];

// Funcion to add items to cart
function addToCart(flowerName, quantity) {
    quantity = Number(quantity);

    const key = flowerName.toLowerCase();
    const flower = flowers[key];

    if (!flower || quantity < 1 || quantity > flower.stock) {
        alert("Too many or too few flowers added to cart, rejecting.");
        return;
    }

    const existing = cart.find(item => item.name === flowerName);
    if (existing) {
        if (quantity > flower.stock) {
            alert("Added quantity goes over stock limit, rejecting.");
            return
        }
        existing.quantity += quantity;
    } else {
        cart.push({
            name: key,
            price: flower.price,
            quantity: quantity
        });
    }
    flower.stock -= quantity;
    updateCartDisplay();
    populateCatalog();
}

// Function to create feedback HTML elements from list
function renderFeedback() {
    const feedbackList = document.getElementById("feedback-list");
    feedbackList.innerHTML = "";
    if (feedback.length === 0) {
        feedbackList.innerHTML = "<p>No feedback yet. Be our first review?</p>";
        return;
    }
    feedback.forEach(fb => {
        const div = document.createElement("div");
        div.className = "testimonial";
        div.innerHTML = `
            <strong>${fb.flower}</strong>
            <span>(${fb.rating}★)</span>
            <p>${fb.content}</p>
            <hr>
        `
        feedbackList.appendChild(div);
    })
}

// Event listener for checkout button to show checkout message and reset cart
document.getElementById("checkout-button").addEventListener("click", function() {
    if (cart.length === 0) {
        document.getElementById("checkout-message").textContent = "Your cart is empty!";
        return;
    }
    const confirmed = confirm("Are you sure you want to finalize cart and check out?");
    if (confirmed) {
        document.getElementById("checkout-message").textContent = "Thank you for your order!";
        cart = [];
        updateCartDisplay();
        populateCatalog();
    }
});

document.getElementById("feedback-form").addEventListener("submit", function(e) {
    e.preventDefault();
    const form = e.target;
    const flower = form.flower.value;
    const rating = Number(form.rating.value);
    const content = form.content.value.trim()

    if (!flower || !rating || !content) return;

    feedback.unshift({ flower, rating, content });
    renderFeedback();
    form.reset();
})

populateCatalog();
setupCartForms();
updateCartDisplay();
renderFeedback();