import gradio as gr
from simple_salesforce import Salesforce

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


# Function to fetch menu items from Salesforce
def load_menu_from_salesforce():
    try:
        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']
    except Exception as e:
        print(f"Error fetching menu items: {e}")
        return []

# Function to fetch add-ons from Salesforce
def load_add_ons_from_salesforce():
    try:
        query = "SELECT Name, Price__c, Menu_Item__c FROM Add_Ons__c"
        result = sf.query(query)
        return result['records']
    except Exception as e:
        print(f"Error fetching add-ons: {e}")
        return []

# Function to generate HTML for menu items
def generate_menu_html(menu_items, add_ons):
    add_ons_by_item = {}
    for add_on in add_ons:
        menu_item_id = add_on.get('Menu_Item__c', None)
        if menu_item_id:
            if menu_item_id not in add_ons_by_item:
                add_ons_by_item[menu_item_id] = []
            add_ons_by_item[menu_item_id].append({
                "name": add_on["Name"],
                "price": add_on["Price__c"]
            })

    html = ""
    current_section = None
    for item in menu_items:
        if item["Section__c"] != current_section:
            if current_section is not None:
                html += "</div>"
            current_section = item["Section__c"]
            html += f"<h2>{current_section}</h2><div class='menu-section'>"

        add_ons_list = add_ons_by_item.get(item['Id'], [])
        html += f"""
        <div class="menu-item">
            <img src="{item.get('Image1__c', '')}" alt="{item['Name']}" style="width: 150px; height: 150px; object-fit: cover;">
            <h3>{item['Name']}</h3>
            <p>{item.get('Description__c', 'No description available.')}</p>
            <p>Price: ${item['Price__c']}</p>
            <button onclick="openPopup('{item['Name']}', '{item['Price__c']}', {add_ons_list})">Customize & Add</button>
        </div>
        """

    if current_section is not None:
        html += "</div>"
    return html

# JavaScript for popup functionality
popup_script = """
<script>
    function openPopup(name, price, addOns) {
        const popup = document.getElementById('popup');
        const addOnsContainer = document.getElementById('add-ons-container');
        
        popup.style.display = 'block';
        document.getElementById('popup-item-name').innerText = name;
        document.getElementById('popup-item-price').innerText = `Price: $${price}`;

        addOnsContainer.innerHTML = "";
        addOns.forEach(addOn => {
            const addOnElement = document.createElement('div');
            addOnElement.innerHTML = `${addOn.name} (+$${addOn.price}) <input type='checkbox' value='${addOn.name}'>`;
            addOnsContainer.appendChild(addOnElement);
        });
    }

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

# Load data from Salesforce
menu_items = load_menu_from_salesforce()
add_ons = load_add_ons_from_salesforce()
menu_html = generate_menu_html(menu_items, add_ons)

# Gradio app
with gr.Blocks() as app:
    with gr.Row():
        gr.HTML("<h1>Welcome to Biryani Hub</h1>")

    with gr.Row():
        gr.HTML(menu_html)

    gr.HTML(popup_script)
    gr.HTML("""
    <div id="popup" style="display: none; position: fixed; top: 20%; left: 30%; width: 40%; background: white; padding: 20px; border: 1px solid #ccc; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);">
        <h2 id="popup-item-name"></h2>
        <p id="popup-item-price"></p>
        <div id="add-ons-container"></div>
        <button onclick="closePopup()">Close</button>
    </div>
    """)

app.launch()