cart_tab.py

import gradio as gr

# Initialize cart as a global variable
cart = []

# Function to add items to the cart
def add_to_cart(item_name, spice_level, extras):
    cart.append({
        "item_name": item_name,
        "spice_level": spice_level,
        "extras": extras
    })
    return f"{item_name} added to cart!"

# Function to display cart items
def display_cart():
    if not cart:
        return "Your cart is empty."
    cart_content = "<h3>Your Cart:</h3><ul>"
    for item in cart:
        cart_content += f"<li>{item['item_name']} - Spice Level: {item['spice_level']} - Extras: {', '.join(item['extras'])}</li>"
    cart_content += "</ul>"
    return cart_content

menu_data = [
    {"name": "Veg Burger", "category": "VEGAN",
     "image": "https://huggingface.co/spaces/Rammohan0504/dynamic_menu/resolve/main/images/veg_burger.jpg",
     "description": "A delicious vegan burger with plant-based patty, lettuce, and tomato.",
     "price": "$8.99"},
    # Add other menu items here
]

# JavaScript for popup modal
popup_js = """
<script>
    function showPopup(name, description, price, image) {
        const popup = document.getElementById("custom-popup");
        const overlay = document.getElementById("overlay");
        popup.innerHTML = `
            <img src="${image}" alt="${name}" style="width: 100%; height: 250px; border-radius: 10px; margin-bottom: 10px;">
            <h3 style="margin-top: 10px;">${name}</h3>
            <p>${description}</p>
            <p style="font-weight: bold;">Price: ${price}</p>
            <h4 style="margin-top: 20px;">Choose a Spice Level</h4>
            <select id="spice-level" style="width: 100%; padding: 5px;">
                <option value="American Mild">American Mild</option>
                <option value="American Medium">American Medium</option>
                <option value="American Spicy">American Spicy</option>
                <option value="Indian Mild">Indian Mild</option>
                <option value="Indian Medium">Indian Medium</option>
                <option value="Indian Spicy">Indian Spicy</option>
                <option value="Indian Very Spicy">Indian Very Spicy</option>
            </select>
            <h4 style="margin-top: 20px;">Choose Extras</h4>
            <div>
                <label><input type="checkbox" name="extras" value="Extra Raitha 4oz"> Extra Raitha 4oz</label><br>
                <label><input type="checkbox" name="extras" value="Extra Raitha 8oz"> Extra Raitha 8oz</label><br>
                <label><input type="checkbox" name="extras" value="Extra Onion"> Extra Onion</label><br>
                <label><input type="checkbox" name="extras" value="Extra Onion & Lemon"> Extra Onion & Lemon</label><br>
            </div>
            <button onclick="addToCart('${name}')" style="margin-top: 20px; padding: 10px 20px; background-color: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer;">Add to Cart</button>
            <button onclick="closePopup()" style="margin-top: 20px; margin-left: 10px; padding: 10px 20px; background-color: #28a745; color: white; border: none; border-radius: 5px; cursor: pointer;">Close</button>
        `;
        popup.style.display = "block";
        overlay.style.display = "block";
    }

    function closePopup() {
        const popup = document.getElementById("custom-popup");
        const overlay = document.getElementById("overlay");
        popup.style.display = "none";
        overlay.style.display = "none";
    }

    function addToCart(name) {
        const spiceLevel = document.getElementById("spice-level").value;
        const extras = Array.from(document.querySelectorAll("input[name='extras']:checked")).map(el => el.value);
        google.colab.kernel.invokeFunction('notebook.add_to_cart', [name, spiceLevel, extras], {});
        closePopup();
    }
</script>
"""

# HTML for popup modal
popup_html = """
<div id="overlay" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: none; z-index: 999;"></div>
<div id="custom-popup" 
     style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50%; max-width: 400px; background: white; padding: 20px; border-radius: 10px; box-shadow: 0px 4px 6px rgba(0,0,0,0.1); display: none; z-index: 1000; text-align: center;">
</div>
"""

# Generate dish cards
def display_dishes(category):
    html_content = "<div style='display: flex; flex-direction: column; gap: 20px; width: 80%; margin: 0 auto;'>"
    for dish in menu_data:
        if category == "ALL" or dish["category"] == category:
            html_content += f"""
            <div style='display: flex; align-items: center; justify-content: space-between; padding: 20px; border: 1px solid #ddd; border-radius: 10px; background-color: #f9f9f9;'>
                <div style='flex: 3; text-align: left;'>
                    <h3 style='margin: 0; font-size: 20px;'>{dish['name']}</h3>
                    <p style='margin: 5px 0; font-size: 14px; color: #555;'>{dish['description']}</p>
                    <p style='margin: 0; font-size: 16px; font-weight: bold;'>Price: {dish['price']}</p>
                </div>
                <div style='flex: 1; text-align: center;'>
                    <img src='{dish['image']}' alt='{dish['name']}' style='width: 120px; height: 80px; object-fit: cover; border-radius: 10px;'>
                    <button onclick="showPopup('{dish['name']}', '{dish['description']}', '{dish['price']}', '{dish['image']}')" 
                            style='margin-top: 10px; padding: 10px 20px; background-color: #28a745; color: white; border: none; border-radius: 5px; cursor: pointer;'>
                        Add
                    </button>
                </div>
            </div>
            """
    html_content += "</div>"
    return html_content

# Main Gradio App
with gr.Blocks() as demo:
    gr.HTML(popup_html)  # Add the popup container and overlay
    gr.HTML(popup_js)    # Add the JavaScript

    gr.HTML("<h1 style='text-align: center;'>🍛 Biryani Hub Menu 🍛</h1>")

    with gr.Tabs():
        with gr.Tab("Menu"):
            with gr.Row():
                btn_all = gr.Button("ALL")
                btn_vegan = gr.Button("VEGAN")
                btn_halal = gr.Button("HALAL")

            dish_display = gr.HTML(value=display_dishes("ALL"))

            btn_all.click(
                lambda: gr.update(value=display_dishes("ALL")),
                outputs=dish_display
            )
            btn_vegan.click(
                lambda: gr.update(value=display_dishes("VEGAN")),
                outputs=dish_display
            )
            btn_halal.click(
                lambda: gr.update(value=display_dishes("HALAL")),
                outputs=dish_display
            )

        with gr.Tab("Cart"):
            cart_display = gr.HTML(value=display_cart())
            gr.Button("Refresh Cart").click(
                lambda: gr.update(value=display_cart()),
                outputs=cart_display
            )

# Register function for JavaScript callback
demo.add_to_cart = add_to_cart

demo.launch()