import gradio as gr

# Step 1: Define food items
food_items = [
    {
        "name": "Samosa",
        "price": "$10",
        "description": "Crispy fried pastry filled with spiced potatoes and peas. Serves 1. [Energy: 200 kcal, Protein: 5g, Carbohydrates: 25g, Fiber: 3g, Fat: 10g, Sugar: 1g]",
        "image": "https://huggingface.co/spaces/DSatishchandra/DynamicFoodMenu/raw/main/images/Potato-Samosa.jpg"
    },
    {
        "name": "Onion Pakoda",
        "price": "$14",
        "description": "Deep-fried onion fritters seasoned with herbs and spices. Serves 2. [Energy: 250 kcal, Protein: 6g, Carbohydrates: 30g, Fiber: 4g, Fat: 12g, Sugar: 2g]",
        "image": "https://huggingface.co/spaces/DSatishchandra/DynamicFoodMenu/raw/main/images/onion-pakoda.jpg"
    },
    {
        "name": "Paneer Tikka",
        "price": "$15",
        "description": "Grilled paneer cubes marinated in spices. Serves 1. [Energy: 300 kcal, Protein: 15g, Carbohydrates: 10g, Fiber: 2g, Fat: 20g, Sugar: 1g]",
        "image": "https://huggingface.co/spaces/DSatishchandra/DynamicFoodMenu/raw/main/images/paneer-tikka.jpg"
    },
    {
        "name": "Veg Biryani",
        "price": "$12",
        "description": "Aromatic rice cooked with vegetables and spices. Serves 1. [Energy: 350 kcal, Protein: 8g, Carbohydrates: 50g, Fiber: 5g, Fat: 12g, Sugar: 2g]",
        "image": "https://huggingface.co/spaces/DSatishchandra/DynamicFoodMenu/raw/main/images/veg-biryani.jpg"
    },
    {
        "name": "Chicken Curry",
        "price": "$16",
        "description": "Tender chicken pieces cooked in a spicy curry. Serves 1. [Energy: 400 kcal, Protein: 25g, Carbohydrates: 10g, Fiber: 2g, Fat: 25g, Sugar: 3g]",
        "image": "https://huggingface.co/spaces/DSatishchandra/DynamicFoodMenu/raw/main/images/chicken-curry.jpg"
    },
    {
        "name": "Masala Dosa",
        "price": "$10",
        "description": "Thin rice crepe stuffed with spiced potato filling. Serves 1. [Energy: 300 kcal, Protein: 6g, Carbohydrates: 45g, Fiber: 4g, Fat: 8g, Sugar: 1g]",
        "image": "https://huggingface.co/spaces/DSatishchandra/DynamicFoodMenu/raw/main/images/masala-dosa.jpg"
    },
    {
        "name": "Idli",
        "price": "$8",
        "description": "Steamed rice cakes served with chutney and sambar. Serves 2. [Energy: 200 kcal, Protein: 4g, Carbohydrates: 40g, Fiber: 3g, Fat: 1g, Sugar: 1g]",
        "image": "https://huggingface.co/spaces/DSatishchandra/DynamicFoodMenu/raw/main/images/idli.jpg"
    },
    {
        "name": "Medu Vada",
        "price": "$9",
        "description": "Crispy fried lentil donuts served with chutney. Serves 2. [Energy: 250 kcal, Protein: 7g, Carbohydrates: 30g, Fiber: 4g, Fat: 10g, Sugar: 1g]",
        "image": "https://huggingface.co/spaces/DSatishchandra/DynamicFoodMenu/raw/main/images/medu-vada.jpg"
    },
    {
        "name": "Pav Bhaji",
        "price": "$12",
        "description": "Spicy mashed vegetables served with buttered bread. Serves 1. [Energy: 400 kcal, Protein: 10g, Carbohydrates: 50g, Fiber: 6g, Fat: 15g, Sugar: 4g]",
        "image": "https://huggingface.co/spaces/DSatishchandra/DynamicFoodMenu/raw/main/images/pav-bhaji.jpg"
    },
    {
        "name": "Chole Bhature",
        "price": "$14",
        "description": "Spicy chickpea curry served with deep-fried bread. Serves 1. [Energy: 500 kcal, Protein: 15g, Carbohydrates: 60g, Fiber: 7g, Fat: 20g, Sugar: 3g]",
        "image": "https://huggingface.co/spaces/DSatishchandra/DynamicFoodMenu/raw/main/images/chole-bhature.jpg"
    },
    {
        "name": "Dal Tadka",
        "price": "$11",
        "description": "Yellow lentils cooked with spices and tempered with ghee. Serves 1. [Energy: 300 kcal, Protein: 10g, Carbohydrates: 30g, Fiber: 6g, Fat: 12g, Sugar: 2g]",
        "image": "https://huggingface.co/spaces/DSatishchandra/DynamicFoodMenu/raw/main/images/dal-tadka.jpg"
    },
    {
        "name": "Butter Chicken",
        "price": "$18",
        "description": "Creamy chicken curry made with butter and spices. Serves 1. [Energy: 450 kcal, Protein: 28g, Carbohydrates: 10g, Fiber: 2g, Fat: 30g, Sugar: 4g]",
        "image": "https://huggingface.co/spaces/DSatishchandra/DynamicFoodMenu/raw/main/images/butter-chicken.jpg"
    },
    {
        "name": "Tandoori Roti",
        "price": "$5",
        "description": "Whole wheat flatbread cooked in a tandoor. Serves 1. [Energy: 150 kcal, Protein: 4g, Carbohydrates: 25g, Fiber: 3g, Fat: 2g, Sugar: 1g]",
        "image": "https://huggingface.co/spaces/DSatishchandra/DynamicFoodMenu/raw/main/images/tandoori-roti.jpg"
    },
    {
        "name": "Garlic Naan",
        "price": "$7",
        "description": "Leavened flatbread topped with garlic and butter. Serves 1. [Energy: 200 kcal, Protein: 5g, Carbohydrates: 30g, Fiber: 2g, Fat: 5g, Sugar: 1g]",
        "image": "https://huggingface.co/spaces/DSatishchandra/DynamicFoodMenu/raw/main/images/garlic-naan.jpg"
    },
    {
        "name": "Matar Paneer",
        "price": "$13",
        "description": "Cottage cheese and peas cooked in a tomato-based gravy. Serves 1. [Energy: 350 kcal, Protein: 12g, Carbohydrates: 20g, Fiber: 4g, Fat: 25g, Sugar: 3g]",
        "image": "https://huggingface.co/spaces/DSatishchandra/DynamicFoodMenu/raw/main/images/matar-paneer.jpg"
    },
    {
        "name": "Aloo Paratha",
        "price": "$10",
        "description": "Stuffed flatbread with spiced potato filling. Serves 1. [Energy: 300 kcal, Protein: 7g, Carbohydrates: 45g, Fiber: 5g, Fat: 10g, Sugar: 1g]",
        "image": "https://huggingface.co/spaces/DSatishchandra/DynamicFoodMenu/raw/main/images/aloo-paratha.jpg"
    },
    {
        "name": "Rasgulla",
        "price": "$6",
        "description": "Soft and spongy cheese balls soaked in sugar syrup. Serves 1. [Energy: 150 kcal, Protein: 3g, Carbohydrates: 30g, Fiber: 0g, Fat: 2g, Sugar: 25g]",
        "image": "https://huggingface.co/spaces/DSatishchandra/DynamicFoodMenu/raw/main/images/rasgulla.jpg"
    },
    {
        "name": "Gulab Jamun",
        "price": "$7",
        "description": "Deep-fried dough balls soaked in sugar syrup. Serves 1. [Energy: 180 kcal, Protein: 2g, Carbohydrates: 35g, Fiber: 0g, Fat: 5g, Sugar: 30g]",
        "image": "https://huggingface.co/spaces/DSatishchandra/DynamicFoodMenu/raw/main/images/gulab-jamun.jpg"
    },
    {
        "name": "Kheer",
        "price": "$8",
        "description": "Creamy rice pudding flavored with cardamom and nuts. Serves 1. [Energy: 200 kcal, Protein: 4g, Carbohydrates: 30g, Fiber: 1g, Fat: 8g, Sugar: 20g]",
        "image": "https://huggingface.co/spaces/DSatishchandra/DynamicFoodMenu/raw/main/images/kheer.jpg"
    },
    {
        "name": "Mango Lassi",
        "price": "$5",
        "description": "Refreshing yogurt-based mango drink. Serves 1. [Energy: 150 kcal, Protein: 5g, Carbohydrates: 25g, Fiber: 1g, Fat: 3g, Sugar: 20g]",
        "image": "https://huggingface.co/spaces/DSatishchandra/DynamicFoodMenu/raw/main/images/mango-lassi.jpg"
    },
    {
        "name": "Masala Chai",
        "price": "$4",
        "description": "Spiced Indian tea made with milk and spices. Serves 1. [Energy: 100 kcal, Protein: 2g, Carbohydrates: 15g, Fiber: 0g, Fat: 3g, Sugar: 10g]",
        "image": "https://huggingface.co/spaces/DSatishchandra/DynamicFoodMenu/raw/main/images/masala-chai.jpg"
    },
    {
        "name": "Pani Puri",
        "price": "$8",
        "description": "Crispy hollow puris filled with tangy flavored water. Serves 1. [Energy: 150 kcal, Protein: 4g, Carbohydrates: 20g, Fiber: 2g, Fat: 5g, Sugar: 2g]",
        "image": "https://huggingface.co/spaces/DSatishchandra/DynamicFoodMenu/raw/main/images/pani-puri.jpg"
    },
    {
        "name": "Sev Puri",
        "price": "$9",
        "description": "Crispy puris topped with chutneys, onions, and sev. Serves 1. [Energy: 180 kcal, Protein: 5g, Carbohydrates: 25g, Fiber: 3g, Fat: 6g, Sugar: 3g]",
        "image": "https://huggingface.co/spaces/DSatishchandra/DynamicFoodMenu/raw/main/images/sev-puri.jpg"
    },
    {
        "name": "Dhokla",
        "price": "$7",
        "description": "Soft and spongy steamed savory cake made from fermented batter. Serves 1. [Energy: 120 kcal, Protein: 6g, Carbohydrates: 15g, Fiber: 2g, Fat: 4g, Sugar: 2g]",
        "image": "https://huggingface.co/spaces/DSatishchandra/DynamicFoodMenu/raw/main/images/dhokla.jpg"
    },
    {
        "name": "Bhindi Masala",
        "price": "$12",
        "description": "Spicy stir-fried okra with onions and tomatoes. Serves 1. [Energy: 200 kcal, Protein: 4g, Carbohydrates: 15g, Fiber: 4g, Fat: 12g, Sugar: 2g]",
        "image": "https://huggingface.co/spaces/DSatishchandra/DynamicFoodMenu/raw/main/images/bhindi-masala.jpg"
    },
    {
        "name": "Palak Paneer",
        "price": "$13",
        "description": "Cottage cheese cubes in a creamy spinach gravy. Serves 1. [Energy: 300 kcal, Protein: 10g, Carbohydrates: 15g, Fiber: 3g, Fat: 20g, Sugar: 2g]",
        "image": "https://huggingface.co/spaces/DSatishchandra/DynamicFoodMenu/raw/main/images/palak-paneer.jpg"
    },
    {
        "name": "Vegetable Pulao",
        "price": "$11",
        "description": "Fragrant rice cooked with mixed vegetables and spices. Serves 1. [Energy: 300 kcal, Protein: 6g, Carbohydrates: 50g, Fiber: 4g, Fat: 10g, Sugar: 2g]",
        "image": "https://huggingface.co/spaces/DSatishchandra/DynamicFoodMenu/raw/main/images/vegetable-pulao.jpg"
    },
    {
        "name": "Aloo Gobi",
        "price": "$10",
        "description": "Potatoes and cauliflower cooked with spices. Serves 1. [Energy: 250 kcal, Protein: 5g, Carbohydrates: 20g, Fiber: 5g, Fat: 15g, Sugar: 1g]",
        "image": "https://huggingface.co/spaces/DSatishchandra/DynamicFoodMenu/raw/main/images/aloo-gobi.jpg"
    },
    {
        "name": "Rajma",
        "price": "$12",
        "description": "Red kidney beans cooked in a flavorful tomato gravy. Serves 1. [Energy: 300 kcal, Protein: 10g, Carbohydrates: 40g, Fiber: 7g, Fat: 8g, Sugar: 2g]",
        "image": "https://huggingface.co/spaces/DSatishchandra/DynamicFoodMenu/raw/main/images/rajma.jpg"
    },
    {
        "name": "Kachori",
        "price": "$7",
        "description": "Spiced lentil-filled crispy fried snack. Serves 1. [Energy: 200 kcal, Protein: 5g, Carbohydrates: 25g, Fiber: 3g, Fat: 10g, Sugar: 2g]",
        "image": "https://huggingface.co/spaces/DSatishchandra/DynamicFoodMenu/raw/main/images/kachori.jpg"
    },
    {
        "name": "Shahi Paneer",
        "price": "$14",
        "description": "Rich and creamy paneer curry with a royal taste. Serves 1. [Energy: 400 kcal, Protein: 12g, Carbohydrates: 15g, Fiber: 2g, Fat: 30g, Sugar: 3g]",
        "image": "https://huggingface.co/spaces/DSatishchandra/DynamicFoodMenu/raw/main/images/shahi-paneer.jpg"
    }
]


# Step 2: Generate HTML for food items
def generate_food_menu():
    html_content = "<div style=\"display: flex; flex-direction: column; gap: 10px;\">"
    for item in food_items:
        html_content += f"""
        <div class=\"menu-item\" style=\"display: flex; justify-content: space-between; align-items: center; border: 1px solid #ddd; border-radius: 8px; padding: 10px;\">
            <div style=\"flex: 1;\">
                <h3 style=\"margin: 0;\">{item['name']}</h3>
                <p style=\"margin: 0; color: #555;\">{item['price']}</p>
                <p style=\"margin: 0; color: #777; font-size: 14px;\">{item['description']}</p>
            </div>
            <img src=\"{item['image']}\" alt=\"{item['name']}\" class=\"menu-image\" style=\"width: 100px; height: 80px; object-fit: cover; border-radius: 5px; margin-right: 10px; cursor: pointer;\" onclick=\"openPopup('{item['name']}', '{item['price']}', '{item['description']}', '{item['image']}')\">
            <button class=\"add-btn\" style=\"background-color: green; color: white; border: none; padding: 10px; border-radius: 5px; cursor: pointer;\" onclick=\"openPopup('{item['name']}', '{item['price']}', '{item['description']}', '{item['image']}')\">Add</button>
        </div>
        """
    html_content += "</div>"
    return html_content

# Step 3: Add JavaScript for the pop-up
popup_js = """
<script>
function openPopup(name, price, description, image) {
    document.getElementById('popup-name').innerText = name;
    document.getElementById('popup-price').innerText = price;
    document.getElementById('popup-description').innerText = description;
    document.getElementById('popup-image').src = image;
    document.getElementById('popup').style.display = 'block';
}

function closePopup() {
    document.getElementById('popup').style.display = 'none';
}
</script>
"""

# Step 4: Build the Gradio Interface
with gr.Blocks() as demo:
    with gr.Row():
        gr.HTML(generate_food_menu())  # Render food menu
    gr.HTML("""
    <div id=\"popup\" class=\"popup\" style=\"display:none; position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); max-width:90%; width:600px; max-height:90%; overflow-y:auto; background:rgba(255, 255, 255, 0.95); display:flex; flex-direction: column; justify-content:center; align-items:center; border-radius: 15px; padding: 20px; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);\">
        <button onclick=\"closePopup()\" style=\"position:absolute; top:10px; right:10px; background:none; border:none; font-size:20px; cursor:pointer;\">&times;</button>
        <div class=\"popup-content\" style=\"background:#fff; padding:20px; border-radius:15px; width:100%; text-align:center;\">
            <img id=\"popup-image\" src=\"\" alt=\"Food Image\" style=\"width:100%; height:auto; border-radius:10px;\">
            <h2 id=\"popup-name\" style=\"margin: 15px 0;\"></h2>
            <p id=\"popup-price\" style=\"margin: 0; font-size: 16px; color: #333;\"></p>
            <p id=\"popup-description\" style=\"margin: 10px 0; font-size: 14px; color: #666;\"></p>
            <div style=\"margin: 10px 0; text-align: left;\">
                <h4 style=\"margin-bottom: 5px;\">Choose a spice level:</h4>
                <p style=\"font-size: 12px; color: #777; margin: 0 0 10px;\">Required - Choose 1.</p>
                <div style=\"display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;\">
                    <label><input type=\"radio\" name=\"spice-level\"> American Mild</label>
                    <label><input type=\"radio\" name=\"spice-level\"> American Medium</label>
                    <label><input type=\"radio\" name=\"spice-level\"> American Spicy</label>
                    <label><input type=\"radio\" name=\"spice-level\"> Indian Mid</label>
                    <label><input type=\"radio\" name=\"spice-level\"> Indian Medium</label>
                    <label><input type=\"radio\" name=\"spice-level\"> Indian Spicy</label>
                    <label><input type=\"radio\" name=\"spice-level\"> Indian Very Spicy</label>
                </div>
                <h4 style=\"margin-top: 15px;\">Biryani Extra's</h4>
                <p style=\"font-size: 12px; color: #777; margin: 0 0 10px;\">Optional - Choose as many as you like.</p>
                <div style=\"display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;\">
                    <label><input type=\"checkbox\"> Extra Raitha 4oz + $1.00</label>
                    <label><input type=\"checkbox\"> Extra Raitha 8oz + $2.00</label>
                    <label><input type=\"checkbox\"> Extra Salan 4oz + $1.00</label>
                    <label><input type=\"checkbox\"> Extra Salan 8oz + $2.00</label>
                    <label><input type=\"checkbox\"> Extra Onion + $1.00</label>
                    <label><input type=\"checkbox\"> Extra Onion & Lemon + $2.00</label>
                    <label><input type=\"checkbox\"> Extra Fried Onion 4oz + $2.00</label>
                </div>
                <h4 style=\"margin-top: 15px;\">Special instructions</h4>
                <textarea placeholder=\"Add any requests here.\" style=\"width: 100%; padding: 10px; border-radius: 5px; border: 1px solid #ddd;\"></textarea>
                <h4 style=\"margin-top: 15px;\">Quantity</h4>
                <div style=\"display: flex; align-items: center; gap: 10px; justify-content: center; margin-bottom: 15px;\">
                    <button style=\"padding: 5px 10px; font-size: 16px;\">-</button>
                    <input type=\"number\" value=\"1\" min=\"1\" style=\"width: 50px; text-align: center;\">
                    <button style=\"padding: 5px 10px; font-size: 16px;\">+</button>
                </div>
            </div>
            <button style=\"margin-top:20px; padding:10px 20px; background:purple; color:#fff; border:none; border-radius:5px; cursor:pointer;\">Add to Bag</button>
        </div>
    </div>
    """)
    gr.HTML(popup_js)  # Inject JavaScript

demo.launch()