import gradio as gr

# In-memory cart to store added items
cart = []

# Menu data
menu_data = [
    {"name": "Vegetable Biryani", "category": "VEGAN",
     "image": "https://huggingface.co/spaces/Rammohan0504/dynamic_menu/resolve/main/images/veg_burger.jpg",
     "description": "An Indian dish made to be thoroughly enjoyed by anyone who eats it. Made with the best basmati rice and a perfect blend of spices, cooked in original dum style.",
     "price": "$13.99"},
]

# Function to add an item to the cart
def add_to_cart(name, price):
    cart.append({"name": name, "price": price})
    return f"{name} has been added to the cart!", display_cart()

# Function to display the cart
def display_cart():
    if not cart:
        return "Cart is empty"
    html_content = "<div style='display: flex; flex-direction: column; align-items: center; width: 100%;'>"
    for item in cart:
        html_content += f"""
        <div style='margin: 10px; display: flex; justify-content: space-between; width: 80%; padding: 10px; 
                    border: 1px solid #ddd; border-radius: 10px; background-color: #f9f9f9;'>
            <p style='font-size: 16px; color: #444;'>{item['name']} - {item['price']}</p>
        </div>
        """
    html_content += "</div>"
    return html_content

# Function to display the menu
def display_menu():
    html_content = "<div style='display: flex; flex-direction: column; align-items: center; width: 100%;'>"
    for dish in menu_data:
        html_content += f"""
        <div style='margin: 10px; display: flex; justify-content: space-between; width: 80%; padding: 10px; 
                    border: 1px solid #ddd; border-radius: 10px; background-color: #f9f9f9;'>
            <div>
                <h4 style='font-size: 18px; color: #444; margin: 0;'>{dish['name']}</h4>
                <p style='font-size: 14px; color: #666; margin: 5px 0;'>{dish['description']}</p>
                <p style='font-size: 16px; color: #444; margin: 0;'>Price: {dish['price']}</p>
            </div>
            <div style='text-align: center;'>
                <img src='{dish['image']}' alt='{dish['name']}' 
                     style='width: 150px; height: 100px; object-fit: cover; border-radius: 10px;'>
                <button onclick="addToCart('{dish['name']}', '{dish['price']}')" 
                        style="margin-top: 15px; padding: 10px 20px; background-color: #28a745; color: white; border: none; 
                               border-radius: 5px; cursor: pointer;">Add to Cart</button>
            </div>
        </div>
        """
    html_content += "</div>"
    return html_content

# Gradio App
with gr.Blocks() as demo:
    gr.HTML("<h1 style='text-align: center; color: #333;'>🍛 Biryani Hub Menu 🍛</h1>")

    # Display menu
    menu_section = gr.HTML(value=display_menu())

    # Add to Cart functionality
    name_input = gr.Textbox(label="Dish Name", visible=False)
    price_input = gr.Textbox(label="Dish Price", visible=False)
    add_to_cart_button = gr.Button("Add to Cart", visible=False)
    message_output = gr.Textbox(label="Message", interactive=False)
    cart_display = gr.HTML(value=display_cart())

    # Add to cart interaction
    add_to_cart_button.click(
        add_to_cart,
        inputs=[name_input, price_input],
        outputs=[message_output, cart_display]
    )

    # Menu Section with dynamic cart updates
    demo += menu_section
    demo += message_output
    demo += cart_display

demo.launch()