Menus

<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script>
    const propsContainer = document.querySelector(".props-container");
    const root = document.getElementById("app");
    const listItem = document.getElementById("list-item-main");
    const categoriesContainer = document.getElementById("categories-container");
    const categoriesLink = document.getElementById("category-link");
    const isGrid = document.getElementById("rGrid").textContent;
    if (isGrid === "true") {
        root.classList.add("grid");
        // Add grid-display class to list-item and item-thumbnail-wrapper
        const listItems = document.querySelectorAll(".list-item");
        listItems.forEach(item => {
            item.classList.add("grid-display");
        });

        const thumbnailWrappers = document.querySelectorAll(".item-thumbnail-wrapper");
        thumbnailWrappers.forEach(wrapper => {
            wrapper.classList.add("grid-display");
        });
    }
    let itemsByCategory = {};
    let categoryNames = {uncategorized: "uncategorized"};
    const excludedCategoriesText = document.getElementById("rExcludeList").textContent;
    const excludedCategoryNames = excludedCategoriesText
        .split(",")
        .map((name) => name.trim());

    // Fetch menu data
    async function fetchMenuData() {
        try {
            const dt = new Date();
            const year = dt.getFullYear();
            const month = (dt.getMonth() + 1).toString().padStart(2, "0");
            const day = dt.getDate().toString().padStart(2, "0");
            const date = year + '-' + month + '-' + day
            const merchantId = document.getElementById("rMID").textContent.trim();
            const url = `https://qa-ecommerce-api.spoton.com/v1/restaurants/${merchantId}/menu-groups?orderDateTime=${date}T10:22:25-05:00&orderTypeId=3uxw5e1y0vgz3dwi1we2ioj1lq`;

            const response = await fetch(url);
            if (!response.ok) {
                throw new Error("Network response was not ok for categories");
            }
            const categories = await response.json();
            categories.forEach((category) => {
                categoryNames[category.id] = category.name.trim();
                itemsByCategory[category.id] = category.menuItems;
            });

            createCategoryLinks();
            const firstCategory = Object.keys(itemsByCategory).find(
                (categoryId) => !excludedCategoryNames.includes(categoryNames[categoryId]));
            if (firstCategory) {
                displayItems(firstCategory);
                setActiveCategory(firstCategory);
            }
        } catch (error) {
            console.error("There was a problem with the fetch operation:", error);
        } finally {
            listItem.remove();
        }
    }

    function createCategoryLinks() {
        Object.keys(itemsByCategory).forEach((categoryId) => {
            if (!excludedCategoryNames.includes(categoryNames[categoryId])) {
                let link = categoriesLink.cloneNode(true);
                link.href = "#app";
                link.removeAttribute("id");
                link.textContent = categoryNames[categoryId] || categoryId;
                link.dataset.categoryId = categoryId;
                link.addEventListener("click", (e) => {
                    e.preventDefault();
                    setActiveCategory(categoryId);
                    displayItems(categoryId);
                });
                link.classList.remove("hidden");
                categoriesContainer.appendChild(link);
            }
        });
        categoriesLink.remove();
    }

    function setActiveCategory(categoryId) {
        const links = categoriesContainer.getElementsByTagName("a");
        for (let link of links) {
            if (link.dataset.categoryId === categoryId) {
                link.classList.add("active");
            } else {
                link.classList.remove("active");
            }
        }
    }

    function displayItems(categoryId) {
    root.innerHTML = "";
    itemsByCategory[categoryId].forEach((item) => {
        let cloneNode = listItem.cloneNode(true);
        cloneNode.removeAttribute("id");
        cloneNode.classList.remove("hidden");
        cloneNode.querySelector(".list-item-name").textContent = item.name;
        
        // Display price if available and not zero, otherwise, remove the "$" sign
        const priceElement = cloneNode.querySelector(".list-item-price");
        if (item.price && parseFloat(item.price) !== 0) {
            priceElement.textContent = "$" + item.price;
        } else {
            priceElement.textContent = "";
        }

        cloneNode.querySelector(".list-item-description").textContent = item.description;

        // Display image if available, otherwise, hide the wrapper
        if (item.imageUrl) {
            cloneNode.querySelector(".list-item-image").src = item.imageUrl;
        } else {
            cloneNode.querySelector(".item-thumbnail-wrapper").remove();
        }

        // Check if modifiers exist
        if (item.modifiers && item.modifiers.length > 0) {
            // Create a list to store modifiers
            let modifiersList = document.createElement('ul');
            modifiersList.classList.add('modifiers-list');

            // Iterate through modifiers and add them to the list
            item.modifiers.forEach(modifier => {
                let modifierItem = document.createElement('li');
                modifierItem.textContent = `${modifier.name} (${modifier.price})`;
                modifiersList.appendChild(modifierItem);
            });

            // Append the list of modifiers to the menu item
            cloneNode.appendChild(modifiersList);
        }

        root.appendChild(cloneNode);
    });
    propsContainer.remove();
}


    // Call the function to fetch menu data
    fetchMenuData();
</script>