import gradio as gr
from simple_salesforce import Salesforce

# Salesforce Connection
sf = Salesforce(username='diggavalli98@gmail.com', password='Sati@1020', security_token='sSSjyhInIsUohKpG8sHzty2q')

# Fetch menu items from Salesforce
def fetch_menu():
    query = "SELECT Id, Name, Price__c, Description__c, Image1__c, Veg_NonVeg__c, Section__c FROM Menu_Item__c"
    result = sf.query(query)
    return result['records']

# Fetch add-ons from Salesforce
def fetch_add_ons():
    query = "SELECT Id, Name, Price__c, Menu_Item__c FROM Add_Ons__c"
    result = sf.query(query)
    return result['records']

# Generate HTML for the menu items
def generate_menu_html(menu_items, add_ons, preference):
    html = ""
    sections = set(item['Section__c'] for item in menu_items)

    for section in sorted(sections):
        html += f"<h2>{section}</h2><div style='display: flex; flex-wrap: wrap; gap: 20px;'>"
        for item in menu_items:
            if item['Section__c'] == section and (preference == 'All' or item['Veg_NonVeg__c'] == preference):
                item_add_ons = [addon for addon in add_ons if addon['Menu_Item__c'] == item['Id']]
                add_ons_html = "".join(
                    f"<div><input type='checkbox' value='{addon['Name']}' data-price='{addon['Price__c']}'> {addon['Name']} (+${addon['Price__c']})</div>"
                    for addon in item_add_ons
                )
                html += f"""
                <div style='width: 300px; border: 1px solid #ddd; padding: 10px; border-radius: 8px;'>
                    <img src='{item['Image1__c']}' alt='{item['Name']}' style='width: 100%; height: 150px; object-fit: cover; border-radius: 8px;'>
                    <h3>{item['Name']}</h3>
                    <p>{item['Description__c']}</p>
                    <p>Price: ${item['Price__c']}</p>
                    <button onclick="openPopup('{item['Name']}', '{item['Price__c']}', '{item['Image1__c']}', `{add_ons_html}`)">Customize & Add</button>
                </div>
                """
        html += "</div>"
    return html

# JavaScript for popup functionality
popup_script = """
<script>
    function openPopup(name, price, image, addOnsHtml) {
        const popup = document.getElementById('popup');
        popup.style.display = 'block';
        document.getElementById('popup-name').innerText = name;
        document.getElementById('popup-price').innerText = `$${price}`;
        document.getElementById('popup-image').src = image;
        document.getElementById('popup-addons').innerHTML = addOnsHtml;
    }

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

# Gradio app
with gr.Blocks() as app:
    with gr.Row():
        gr.Markdown("# Welcome to Biryani Hub")

    preference = gr.Radio(label="Filter Preference", choices=["All", "Veg", "Non-Veg"], value="All")
    menu_html = gr.HTML()

    with gr.Row():
        gr.HTML("""
        <div id='popup' style='display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.2);'>
            <img id='popup-image' src='' alt='' style='width: 100%; height: 150px; object-fit: cover; border-radius: 8px;'>
            <h2 id='popup-name'></h2>
            <p id='popup-price'></p>
            <div id='popup-addons'></div>
            <button onclick='closePopup()'>Close</button>
        </div>
        """ + popup_script)

    def update_menu(preference):
        menu_items = fetch_menu()
        add_ons = fetch_add_ons()
        return generate_menu_html(menu_items, add_ons, preference)

    preference.change(update_menu, inputs=preference, outputs=menu_html)

app.launch()