import gradio as gr

# Menu data
menu_data = [
    {"name": "Samosa", "category": "VEGAN", "image": "https://huggingface.co/spaces/Rammohan0504/First-Project/blob/main/pictures/Potato-Samosa.jpg", "description": "A delicious potato samosa with plant-based potato, lettuce.", "price": 8.99},
    {"name": "Chicken Biryani", "category": "HALAL", "image": "https://huggingface.co/spaces/Rammohan0504/First-Project/blob/main/pictures/Chicken-Biryani.jpg", "description": "Spicy chicken biryani with aromatic basmati rice and tender chicken pieces.", "price": 12.99},
    {"name": "Paneer Butter Masala", "category": "VEGETARIAN", "image": "https://huggingface.co/spaces/Rammohan0504/First-Project/resolve/main/pictures/paneer_butter_masala.jpg", "description": "Soft paneer cubes simmered in a creamy tomato-based gravy, enriched with butter and spices.", "price": 10.99},
    {"name": "Chilli Chicken", "category": "HALAL", "image": "https://huggingface.co/spaces/Rammohan0504/First-Project/resolve/main/pictures/chilli_chicken.jpg", "description": "A spicy Indo-Chinese dish featuring fried chicken pieces tossed with peppers and chilies.", "price": 13.99},
    {"name": "Veg Manchurian", "category": "VEGAN", "image": "https://huggingface.co/spaces/Rammohan0504/First-Project/resolve/main/pictures/veg_manchurian.jpg", "description": "Deep-fried vegetable balls tossed in a tangy and spicy Indo-Chinese sauce.", "price": 9.99},
    {"name": "Fish Curry", "category": "HALAL", "image": "https://huggingface.co/spaces/Rammohan0504/First-Project/resolve/main/pictures/fish_curry.jpg", "description": "A flavorful curry made with tender fish pieces simmered in a spiced coconut gravy.", "price": 14.99},
    {"name": "Mutton Biryani", "category": "HALAL", "image": "https://huggingface.co/spaces/Rammohan0504/First-Project/resolve/main/pictures/mutton_biryani.jpg", "description": "Fragrant rice layered with tender mutton and aromatic spices, cooked to perfection.", "price": 15.99},
    {"name": "Paneer Biryani", "category": "VEGETARIAN", "image": "https://huggingface.co/spaces/Rammohan0504/First-Project/resolve/main/pictures/paneer_biryani.jpg", "description": "A delightful biryani made with marinated paneer cubes and basmati rice, infused with spices.", "price": 11.99},
    {"name": "Onion Pakoda", "category": "VEGAN", "image": "https://huggingface.co/spaces/Rammohan0504/First-Project/resolve/main/pictures/onion_pakoda.jpg", "description": "Crispy deep-fried onion fritters, seasoned with spices, a popular tea-time snack.", "price": 5.99},
    {"name": "Chilli Gobi", "category": "VEGAN", "image": "https://huggingface.co/spaces/Rammohan0504/First-Project/resolve/main/pictures/chilli_gobi.jpg", "description": "Crispy cauliflower florets tossed in a spicy and tangy sauce, an Indo-Chinese favorite.", "price": 9.99},
    {"name": "Potato Samosa", "category": "VEGETARIAN", "image": "https://huggingface.co/spaces/Rammohan0504/First-Project/resolve/main/pictures/potato_samosa.jpg", "description": "Crispy pastry filled with a spiced potato mixture, deep-fried to golden perfection.", "price": 4.99},
    {"name": "Prawn Fry", "category": "HALAL", "image": "https://huggingface.co/spaces/Rammohan0504/First-Project/resolve/main/pictures/prawn_fry.jpg", "description": "Spicy and crispy fried prawns, marinated with a blend of spices and herbs.", "price": 14.99},
    {"name": "Sukka Gosht (Goat)", "category": "HALAL", "image": "https://huggingface.co/spaces/Rammohan0504/First-Project/resolve/main/pictures/sukka_gosht.jpg", "description": "Dry goat meat preparation cooked with a medley of spices, offering a rich and hearty flavor.", "price": 16.99},
    {"name": "Channa Masala", "category": "VEGETARIAN", "image": "https://huggingface.co/spaces/Rammohan0504/First-Project/resolve/main/pictures/channa_masala.jpg", "description": "A hearty curry made with chickpeas simmered in a spiced tomato gravy.", "price": 8.99},
    {"name": "Vegetable Biryani", "category": "VEGAN", "image": "https://huggingface.co/spaces/Rammohan0504/First-Project/resolve/main/pictures/veg_biryani.jpg", "description": "A medley of vegetables and basmati rice cooked with aromatic spices, a vegetarian delight.", "price": 10.99},
    {"name": "Chicken Manchurian", "category": "HALAL", "image": "https://huggingface.co/spaces/Rammohan0504/First-Project/resolve/main/pictures/chicken_manchurian.jpg", "description": "A popular Indo-Chinese dish featuring fried chicken pieces tossed in a tangy and spicy sauce.", "price": 13.99},
]


# Cart management
cart = []

def add_item_to_cart(item_name, price, extras="None"):
    for item in cart:
        if item['name'] == item_name and item['extras'] == extras:
            item['count'] += 1
            return update_cart()
    cart.append({"name": item_name, "price": price, "extras": extras, "count": 1})
    return update_cart()

def update_cart():
    if not cart:
        return "<p>Your cart is empty.</p>"
    cart_html = "<table style='width:100%; border-collapse:collapse;'><tr><th>Item</th><th>Extras</th><th>Price</th><th>Count</th><th>Total</th></tr>"
    total_price = 0
    for item in cart:
        item_total = item['price'] * item['count']
        total_price += item_total
        cart_html += f"<tr><td>{item['name']}</td><td>{item['extras']}</td><td>${item['price']}</td><td>{item['count']}</td><td>${item_total:.2f}</td></tr>"
    cart_html += f"<tr><td colspan='4' style='text-align:right;'><strong>Total</strong></td><td><strong>${total_price:.2f}</strong></td></tr></table>"
    return cart_html

# Function to filter dishes by category
def filter_dishes(category):
    if category == "ALL":
        return menu_data
    return [dish for dish in menu_data if dish["category"] == category]

# Function to display dishes
def display_dishes(category="ALL"):
    filtered_dishes = filter_dishes(category)
    html_content = "<div style='display: flex; flex-wrap: wrap; gap: 20px; justify-content: center;'>"
    for dish in filtered_dishes:
        html_content += f"""
        <div style='border: 1px solid #ddd; padding: 10px; border-radius: 5px; width: 200px; text-align: center;'>
            <img src='{dish['image']}' alt='{dish['name']}' style='width: 100%; height: 150px; object-fit: cover; border-radius: 5px; margin-bottom: 10px;'>
            <h4>{dish['name']}</h4>
            <p>{dish['description']}</p>
            <p><strong>Price:</strong> ${dish['price']}</p>
            <button onclick="showMenuPopup('{dish['name']}', '{dish['description']}', {dish['price']}, '{dish['image']}')" style='padding: 5px 10px; background-color: #28a745; color: white; border: none; border-radius: 3px;'>Add</button>
        </div>
        """
    html_content += "</div>"
    return html_content


# Main Gradio App
with gr.Blocks() as demo:
    gr.HTML("<h1 style='text-align: center;'>Dynamic Menu with Cart</h1>")

    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())

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

    cart_display = gr.HTML(value="<p>Your cart is empty.</p>")

    def add_to_cart_handler(item_name, price):
        return add_item_to_cart(item_name, price)

    gr.HTML("""
        <div id='cart-icon' style='position: fixed; top: 10px; right: 10px; cursor: pointer;'>
            <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Shopping_cart_icon.svg/512px-Shopping_cart_icon.svg.png' alt='Cart' style='width: 40px;' onclick='toggleCartPopup()'>
        </div>
        <div id='cart-popup' style='display: none; position: fixed; top: 50px; right: 10px; background: white; padding: 20px; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); width: 300px; height: auto; max-height: 80vh; overflow-y: auto;'>
            <span onclick='toggleCartPopup()' style='position: absolute; top: 10px; right: 15px; font-size: 20px; font-weight: bold; cursor: pointer;'>&times;</span>
            <div id='cart-content' style='margin-bottom: 10px;'>Your cart is empty.</div>
            <button onclick='placeOrder()' style='margin-top: 10px; padding: 10px; background-color: #007bff; color: white; border: none; border-radius: 5px; display: block; width: 100%;'>Place Order</button>
        </div>

        <div id='menu-popup' style='display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 20px; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); width: 300px;'>
            <span onclick='closeMenuPopup()' style='position: absolute; top: 10px; right: 15px; font-size: 20px; font-weight: bold; cursor: pointer;'>&times;</span>
            <img id='popup-image' src='' style='width: 100%; border-radius: 5px; margin-bottom: 10px;'>
            <h4 id='popup-title'></h4>
            <p id='popup-description'></p>
            <p id='popup-price'></p>
            <button onclick='addItemToCartFromPopup()' style='padding: 5px 10px; background-color: #28a745; color: white; border: none; border-radius: 5px; width: 100%;'>Add to Cart</button>
        </div>

        <script>
            let selectedItem = '';
            let selectedPrice = 0;
            let selectedExtras = 'None';

            window.toggleCartPopup = function() {
                const popup = document.getElementById('cart-popup');
                popup.style.display = popup.style.display === 'block' ? 'none' : 'block';
            }

            window.showMenuPopup = function(name, description, price, image) {
                selectedItem = name;
                selectedPrice = price;
                document.getElementById('popup-title').textContent = name;
                document.getElementById('popup-description').textContent = description;
                document.getElementById('popup-price').textContent = `Price: $${price}`;
                document.getElementById('popup-image').src = image;
                document.getElementById('menu-popup').style.display = 'block';
            }

            window.closeMenuPopup = function() {
                document.getElementById('menu-popup').style.display = 'none';
            }

            window.addItemToCartFromPopup = function() {
                fetch('/run/predict', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ data: [selectedItem, selectedPrice, selectedExtras] })
                }).then(response => response.json()).then(data => {
                    document.getElementById('cart-content').innerHTML = data.data;
                    alert(`${selectedItem} has been added to your cart.`);
                    closeMenuPopup();
                });
            }

            window.placeOrder = function() {
                alert('Your order has been placed!');
                toggleCartPopup();
            }
        </script>
    """)
    

    demo.launch()