Update app.py

app.py

@@ -5,28 +5,29 @@ from simple_salesforce import Salesforce
 # Salesforce Connection
 sf = Salesforce(username='diggavalli98@gmail.com', password='Sati@1020', security_token='sSSjyhInIsUohKpG8sHzty2q')
 
-cart = []  # Global cart to store added items
-
-# Hash Password
+# Function to Hash Password
 def hash_password(password):
     return bcrypt.hashpw(password.encode('utf-8'), bcrypt.gensalt()).decode('utf-8')
 
-# Verify Password
+# Function to Verify Password
 def verify_password(plain_password, hashed_password):
     return bcrypt.checkpw(plain_password.encode('utf-8'), hashed_password.encode('utf-8'))
 
-# Signup Function
+# Signup function
 def signup(name, email, phone, password):
     try:
-        query = f"SELECT Id FROM Customer_Login__c WHERE Email__c = '{email.strip()}'"
+        email = email.strip()
+        query = f"SELECT Id FROM Customer_Login__c WHERE Email__c = '{email}'"
         result = sf.query(query)
+
         if len(result['records']) > 0:
             return "Email already exists! Please use a different email."
 
         hashed_password = hash_password(password)
+
         sf.Customer_Login__c.create({
             'Name': name.strip(),
-            'Email__c': email.strip(),
+            'Email__c': email,
             'Phone_Number__c': phone.strip(),
             'Password__c': hashed_password
         })
@@ -34,275 +35,262 @@ def signup(name, email, phone, password):
     except Exception as e:
         return f"Error during signup: {str(e)}"
 
-# Login Function
+# Login function
 def login(email, password):
     try:
-        query = f"SELECT Name, Password__c FROM Customer_Login__c WHERE Email__c = '{email.strip()}'"
+        email = email.strip()
+        query = f"SELECT Name, Password__c FROM Customer_Login__c WHERE Email__c = '{email}'"
         result = sf.query(query)
+
         if len(result['records']) == 0:
             return "Invalid email or password.", None
 
         user = result['records'][0]
-        if verify_password(password.strip(), user['Password__c']):
+        stored_password = user['Password__c']
+
+        if verify_password(password.strip(), stored_password):
             return "Login successful!", user['Name']
         else:
             return "Invalid email or password.", None
     except Exception as e:
         return f"Error during login: {str(e)}", None
 
-# Load Menu Data from Salesforce
+# Function to load menu data
 def load_menu_from_salesforce():
     try:
-        query = "SELECT Name, Price__c, Description__c, Image2__c, Veg_NonVeg__c FROM Menu_Item__c"
+        query = "SELECT Name, Price__c, Description__c, Image1__c, Image2__c, Veg_NonVeg__c, Section__c FROM Menu_Item__c"
+        result = sf.query(query)
+        return result['records']
+    except Exception as e:
+        return []
+
+# Function to load add-ons data
+def load_add_ons_from_salesforce():
+    try:
+        query = "SELECT Name, Price__c FROM Add_Ons__c"
         result = sf.query(query)
         return result['records']
     except Exception as e:
         return []
 
-# Filter Menu Items
+# Function to filter menu items
 def filter_menu(preference):
     menu_data = load_menu_from_salesforce()
-    filtered_data = []
-    for item in menu_data:
-        veg_nonveg = item.get("Veg_NonVeg__c", "").strip().lower()
-        if preference == "All":
-            filtered_data.append(item)
-        elif preference == "Veg" and veg_nonveg in ["veg", "vegetarian"]:
-            filtered_data.append(item)
-        elif preference == "Non-Veg" and veg_nonveg in ["non-veg", "non veg", "nonvegetarian"]:
-            filtered_data.append(item)
-    return filtered_data
 
-# Render Menu as HTML with Add Button
-def render_menu_html(menu_data):
-    html_content = '<div style="display: flex; flex-direction: column; gap: 20px; align-items: center;">'
+    filtered_data = {}
     for item in menu_data:
-        html_content += f"""
-        <div class=\"menu-card\" style=\"display: flex; flex-direction: row; gap: 20px; border: 1px solid #ddd; border-radius: 10px; padding: 15px; width: 80%; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); align-items: center;\">
-            <img src="{item.get('Image2__c', '')}" alt="{item['Name']}" style=\"width: 150px; height: 150px; object-fit: cover; border-radius: 10px;\">
-            <div style=\"flex-grow: 1;\">
-                <h3 style=\"margin: 0; font-size: 1.5em;\">{item['Name']}</h3>
-                <p style=\"margin: 5px 0; font-size: 1.2em; color: green;\">${item['Price__c']}</p>
-                <p style=\"margin: 5px 0; font-size: 1em; color: #555;\">{item['Description__c']}</p>
+        if "Section__c" not in item or "Veg_NonVeg__c" not in item:
+            continue
+
+        if item["Section__c"] not in filtered_data:
+            filtered_data[item["Section__c"]] = []
+
+        if preference == "All" or (preference == "Veg" and item["Veg_NonVeg__c"] in ["Veg", "Both"]) or (preference == "Non-Veg" and item["Veg_NonVeg__c"] in ["Non veg", "Both"]):
+            filtered_data[item["Section__c"].strip()].append(item)
+
+    html_content = '<div style="padding: 0 10px; max-width: 1200px; margin: auto;">'
+    for section, items in filtered_data.items():
+        html_content += f"<h2 style='text-align: center; margin-top: 5px;'>{section}</h2>"
+        html_content += '<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; justify-content: center; margin-top: 10px;">'
+        for item in items:
+            html_content += f"""
+            <div style="border: 1px solid #ddd; border-radius: 10px; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); overflow: hidden; height: 350px;">
+                <img src="{item.get('Image1__c', '')}" style="width: 100%; height: 200px; object-fit: cover;" 
+                onclick="openModal('{item['Name']}', '{item.get('Image2__c', '')}', '{item['Description__c']}', '${item['Price__c']}')">
+                <div style="padding: 10px;">
+                    <h3 style='font-size: 1.2em; text-align: center;'>{item['Name']}</h3>
+                    <p style='font-size: 1.1em; color: green; text-align: center;'>${item['Price__c']}</p>
+                    <p style='font-size: 0.9em; text-align: justify; margin: 5px;'>{item['Description__c']}</p>
+                </div>
             </div>
-            <button onclick=\"showPopup('{item['Name']}', '{item['Description__c']}', '{item['Price__c']}', '{item.get('Image2__c', '')}')\" style=\"background-color: green; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer;\">Add</button>
-        </div>
-        """
+            """
+        html_content += '</div>'
     html_content += '</div>'
-    return html_content
 
-# Add Item to Cart
-def add_to_cart(name, price, quantity, addons, instructions):
-    global cart
-    item = {
-        "name": name,
-        "price": price,
-        "quantity": quantity,
-        "addons": addons,
-        "instructions": instructions
-    }
-    cart.append(item)
-    return render_cart_html()
+    if not any(filtered_data.values()):
+        return "<p>No items match your filter.</p>"
 
-# Render Cart as HTML
-def render_cart_html():
-    global cart
-    if not cart:
-        return "<p>Your cart is empty.</p>"
-    html_content = '<div style="display: flex; flex-direction: column; gap: 20px; align-items: center;">'
-    for index, item in enumerate(cart):
-        html_content += f"""
-        <div class=\"cart-item\" style=\"display: flex; flex-direction: column; gap: 10px; border: 1px solid #ddd; border-radius: 10px; padding: 15px; width: 80%; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\">
-            <h3>{item['name']}</h3>
-            <p>Price: ${item['price']}</p>
-            <p>Quantity: {item['quantity']}</p>
-            <p>Add-ons: {', '.join(item['addons']) if item['addons'] else 'None'}</p>
-            <p>Instructions: {item['instructions']}</p>
-            <button onclick=\"removeFromCart({index})\" style=\"background-color: red; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer;\">Remove</button>
-        </div>
-        """
-    html_content += '</div>'
     return html_content
 
-# Remove Item from Cart
-def remove_from_cart(index):
-    global cart
-    if 0 <= index < len(cart):
-        cart.pop(index)
-    return render_cart_html()
-
-# Add CSS for Styling
-menu_styles = """
-<style>
-    .menu-card:hover {
-        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
-    }
-    .popup {
-        position: fixed;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        background-color: white;
-        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-        border-radius: 10px;
-        width: 400px;
-        padding: 20px;
-        display: none;
-        z-index: 1000;
-    }
-    .popup img {
-        width: 100%;
-        border-radius: 10px;
-    }
-    .popup-content {
-        margin-top: 15px;
-    }
-    .popup-close {
-        position: absolute;
-        top: 10px;
-        right: 10px;
-        background: none;
-        border: none;
-        font-size: 1.5em;
-        cursor: pointer;
-    }
-    .popup-overlay {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background: rgba(0, 0, 0, 0.5);
-        display: none;
-        z-index: 999;
-    }
-    .addon-container {
-        margin-top: 15px;
-    }
-    .addon-container label {
-        margin-right: 10px;
-    }
-    .addon-container input {
-        margin-right: 5px;
-    }
-    .quantity-container {
-        margin-top: 15px;
-    }
-    .instruction-container {
-        margin-top: 15px;
-    }
-</style>
-"""
-
-# JavaScript for Popup Functionality
-menu_script = """
-<script>
-    function showPopup(name, description, price, image) {
-        const popup = document.getElementById('popup');
-        const overlay = document.getElementById('popup-overlay');
-        document.getElementById('popup-title').innerText = name;
-        document.getElementById('popup-description').innerText = description;
-        document.getElementById('popup-price').innerText = `$${price}`;
-        document.getElementById('popup-image').src = image;
-        popup.style.display = 'block';
-        overlay.style.display = 'block';
-    }
-
-    function closePopup() {
-        const popup = document.getElementById('popup');
-        const overlay = document.getElementById('popup-overlay');
-        popup.style.display = 'none';
-        overlay.style.display = 'none';
-    }
-
-    function removeFromCart(index) {
-        GradioAPI.call("remove_from_cart", index).then(function(html) {
-            document.getElementById('cart-content').innerHTML = html;
-        });
-    }
-</script>
-"""
-
-# Gradio App
-with gr.Blocks() as app:
-    gr.HTML(menu_styles)  # Add the CSS
-    gr.HTML(menu_script)  # Add the JavaScript
-
-    # Popup HTML
-    gr.HTML("""
-    <div id='popup-overlay' class='popup-overlay' onclick='closePopup()'></div>
-    <div id='popup' class='popup'>
-        <button class='popup-close' onclick='closePopup()'>&times;</button>
-        <img id='popup-image' src='' alt='Item Image'>
-        <div class='popup-content'>
-            <h3 id='popup-title'></h3>
-            <p id='popup-description'></p>
-            <p id='popup-price' style='color: green; font-size: 1.2em;'></p>
-
-            <h4>Add-ons:</h4>
-            <div class='addon-container'>
-                <label><input type='checkbox' value='Thums Up + $2'> Thums Up + $2</label>
-                <label><input type='checkbox' value='Sprite + $2'> Sprite + $2</label>
-                <label><input type='checkbox' value='Extra Raitha + $1'> Extra Raitha + $1</label>
-                <label><input type='checkbox' value='Extra Salan + $2'> Extra Salan + $2</label>
-                <label><input type='checkbox' value='Extra Onion & Lemon + $2'> Extra Onion & Lemon + $2</label>
-                <label><input type='checkbox' value='Chilli Chicken + $14'> Chilli Chicken + $14</label>
-                <label><input type='checkbox' value='Veg Manchurian + $12'> Veg Manchurian + $12</label>
-            </div>
-
-            <div class='quantity-container'>
-                <label>Quantity: <input type='number' id='popup-quantity' min='1' value='1'></label>
-            </div>
-
-            <div class='instruction-container'>
-                <label>Special Instructions:</label>
-                <textarea id='popup-instructions' placeholder='Add your special instructions here...' rows='3' style='width: 100%;'></textarea>
-            </div>
+# Create Modal Window HTML
+def create_modal_window():
+    add_ons = load_add_ons_from_salesforce()
+    add_ons_html = ""
+    for add_on in add_ons:
+        add_ons_html += f"""
+        <label>
+            <input type="checkbox" name="biryani-extra" value="{add_on['Name']}" data-price="{add_on['Price__c']}" />
+            {add_on['Name']} + ${add_on['Price__c']}
+        </label>
+        <br>
+        """
 
-            <button onclick="addToCart()" style='margin-top: 15px; background-color: green; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer;'>Add to Cart</button>
+    modal_html = f"""
+    <div id="modal" style="display: none; position: fixed; background: white; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); padding: 20px; z-index: 1000;">
+        <div style="text-align: right;">
+            <button onclick="closeModal()" style="background: none; border: none; font-size: 18px; cursor: pointer;">&times;</button>
+        </div>
+        <img id="modal-image" style="width: 100%; height: 300px; border-radius: 8px; margin-bottom: 20px;" />
+        <h2 id="modal-name"></h2>
+        <p id="modal-description"></p>
+        <p id="modal-price"></p>
+        <label for="biryani-extras"><strong>Add-ons :</strong></label>
+        <div id="biryani-extras-options" style="display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0;">
+            {add_ons_html}
         </div>
+        <label for="quantity">Quantity:</label>
+        <input type="number" id="quantity" value="1" min="1" style="width: 50px;" />
+        <textarea id="special-instructions" placeholder="Add your special instructions here..." style="width: 100%; height: 60px;"></textarea>
+        <button style="background-color: #28a745; color: white; border: none; padding: 10px 20px; font-size: 14px; border-radius: 5px; cursor: pointer;" onclick="addToCart()">Add to Cart</button>
     </div>
-    """)
+    """
+    return modal_html
+
+# JavaScript for Modal and Cart
+def modal_js():
+    modal_script = """
+    <script>
+        let cart = [];
+        let totalCartCost = 0;
+        function openModal(name, image2, description, price) {
+            const modal = document.getElementById('modal');
+            modal.style.display = 'block';
+            modal.style.position = 'fixed';
+            modal.style.width = window.innerWidth <= 768 ? '90%' : '30%';
+            modal.style.top = ${event.clientY}px;
+            modal.style.left = '50%';
+            modal.style.transform = 'translate(-50%, -50%)';
+            document.getElementById('modal-image').src = image2;
+            document.getElementById('modal-name').innerText = name;
+            document.getElementById('modal-description').innerText = description;
+            document.getElementById('modal-price').innerText = price;
+            document.getElementById('quantity').value = 1;
+            document.getElementById('special-instructions').value = '';
+            resetAddOns();  // Reset add-ons when opening the modal
+        }
+        function closeModal() {
+            document.getElementById('modal').style.display = 'none';
+        }
+        function addToCart() {
+            const name = document.getElementById('modal-name').innerText;
+            const price = parseFloat(document.getElementById('modal-price').innerText.replace('$', ''));
+            const quantity = parseInt(document.getElementById('quantity').value) || 1;
+            const instructions = document.getElementById('special-instructions').value;
+            const selectedAddOns = Array.from(document.querySelectorAll('input[name="biryani-extra"]:checked'));
+            const extras = selectedAddOns.map(extra => ({
+                name: extra.value,
+                price: parseFloat(extra.getAttribute('data-price')),
+                quantity: 1  // Default quantity for add-ons is 1
+            }));
+            const extrasCost = extras.reduce((total, extra) => total + (extra.price * extra.quantity), 0);
+            const totalCost = (price * quantity) + extrasCost;
+            // Add the item to the cart with its specific add-ons
+            cart.push({ name, price, quantity, extras, instructions, totalCost });
+            totalCartCost += totalCost;  // Update the total cost of the cart
+            updateCartButton();
+            updateCartTotalCost();  // Update total cost displayed
+            closeModal();
+        }
+        function updateCartButton() {
+            const cartButton = document.getElementById('cart-button');
+            cartButton.innerText = View Cart (${cart.length} items);
+        }
+        function openCartModal() {
+            const cartModal = document.getElementById('cart-modal');
+            const cartItemsContainer = document.getElementById('cart-items');
+            cartItemsContainer.innerHTML = "";
+            cart.forEach((item, index) => {
+                const extrasList = item.extras.map(extra => ${extra.name} x<input type="number" value="${extra.quantity}" min="1" style="width: 50px;" onchange="updateCartItem(${index}, 'extra', this.value)" /> (+$${(extra.price * extra.quantity).toFixed(2)})).join(', ');
+                cartItemsContainer.innerHTML += 
+                    <div style="border: 1px solid #ddd; padding: 10px; margin-bottom: 10px; border-radius: 8px;">
+                        <h3>${item.name}</h3>
+                        <p>Quantity: <input type="number" value="${item.quantity}" min="1" style="width: 50px;" onchange="updateCartItem(${index}, 'item', this.value)" /></p>
+                        <p>Extras: ${extrasList || 'None'}</p>
+                        <p>Special Instructions: ${item.instructions || 'None'}</p>
+                        <p>Total Cost: $<span id="item-${index}-total">${item.totalCost.toFixed(2)}</span></p>
+                        <button onclick="removeFromCart(${index})" style="color: red;">Remove</button>
+                    </div>
+                ;
+            });
+            cartModal.style.display = 'block';
+        }
+        function closeCartModal() {
+            document.getElementById('cart-modal').style.display = 'none';
+        }
+        function removeFromCart(index) {
+            totalCartCost -= cart[index].totalCost;  // Deduct the cost of the removed item from total cost
+            cart.splice(index, 1);
+            updateCartButton();
+            updateCartTotalCost();  // Update total cost displayed
+            openCartModal();
+        }
+        function updateCartItem(index, type, value) {
+            if (type === 'item') {
+                cart[index].quantity = parseInt(value);
+            } else if (type === 'extra') {
+                cart[index].extras[0].quantity = parseInt(value); // Assuming one add-on for simplicity
+            }
+            const item = cart[index];
+            const price = item.price;
+            const extrasCost = item.extras.reduce((total, extra) => total + (extra.price * extra.quantity), 0);
+            item.totalCost = (price * item.quantity) + extrasCost;
+            document.getElementById(item-${index}-total).innerText = item.totalCost.toFixed(2);
+            updateCartTotalCost();  // Update total cost displayed
+        }
+        function updateCartTotalCost() {
+            const totalCostElement = document.getElementById('cart-total-cost');
+            totalCartCost = cart.reduce((total, item) => total + item.totalCost, 0);
+            totalCostElement.innerText = Total Cart Cost: $${totalCartCost.toFixed(2)};
+        }
+        function proceedToCheckout() {
+            alert("Proceeding to checkout...");
+        }
+        // Reset all selected add-ons when opening a new item modal
+        function resetAddOns() {
+            const checkboxes = document.querySelectorAll('input[name="biryani-extra"]');
+            checkboxes.forEach(checkbox => checkbox.checked = false);  // Uncheck all add-ons
+        }
+    </script>
+    """
+    return modal_script
 
+# Gradio App
+with gr.Blocks() as app:
     with gr.Row():
         gr.HTML("<h1 style='text-align: center;'>Welcome to Biryani Hub</h1>")
 
     with gr.Row(visible=True) as login_page:
-        login_email = gr.Textbox(label="Email")
-        login_password = gr.Textbox(label="Password", type="password")
-        login_button = gr.Button("Login")
-        login_status = gr.Textbox(label="Status", interactive=False)
+        with gr.Column():
+            login_email = gr.Textbox(label="Email")
+            login_password = gr.Textbox(label="Password", type="password")
+            login_button = gr.Button("Login")
+            signup_button = gr.Button("Go to Signup")
+            login_output = gr.Textbox(label="Status")
 
     with gr.Row(visible=False) as signup_page:
-        signup_name = gr.Textbox(label="Name")
-        signup_email = gr.Textbox(label="Email")
-        signup_phone = gr.Textbox(label="Phone")
-        signup_password = gr.Textbox(label="Password", type="password")
-        submit_signup = gr.Button("Signup")
-        signup_status = gr.Textbox(label="Status", interactive=False)
-        to_login_button = gr.Button("Go to Login")
+        with gr.Column():
+            signup_name = gr.Textbox(label="Name")
+            signup_email = gr.Textbox(label="Email")
+            signup_phone = gr.Textbox(label="Phone")
+            signup_password = gr.Textbox(label="Password", type="password")
+            submit_signup = gr.Button("Signup")
+            login_redirect = gr.Button("Go to Login")
+            signup_output = gr.Textbox(label="Status")
 
     with gr.Row(visible=False) as menu_page:
-        preference = gr.Radio(choices=["All", "Veg", "Non-Veg"], label="Choose a Preference", value="All")
-        menu_output = gr.HTML()
-        preference.change(lambda p: render_menu_html(filter_menu(p)), inputs=preference, outputs=menu_output)
-
-    with gr.Row(visible=False) as cart_page:
-        cart_content = gr.HTML()
-
-    def handle_login(email, password):
-        status, user = login(email, password)
-        if status == "Login successful!":
-            return gr.update(visible=False), gr.update(visible=True), gr.update(value=""), status
-        else:
-            return gr.update(), gr.update(), gr.update(), status
-
-    def handle_signup(name, email, phone, password):
-        status = signup(name, email, phone, password)
-        return status
-
-    login_button.click(handle_login, [login_email, login_password], [login_page, menu_page, login_status])
-    submit_signup.click(handle_signup, [signup_name, signup_email, signup_phone, signup_password], signup_status)
-    to_login_button.click(lambda: (gr.update(visible=True), gr.update(visible=False)), None, [login_page, signup_page])
-
-    app.launch()
+        with gr.Column():
+            preference = gr.Radio(choices=["All", "Veg", "Non-Veg"], label="Filter Preference", value="All")
+            menu_output = gr.HTML()
+            gr.HTML("<div id='cart-button' style='position: fixed; top: 20px; right: 20px; background: #28a745; color: white; padding: 10px 20px; border-radius: 30px; cursor: pointer; z-index: 1000;' onclick='openCartModal()'>View Cart</div>")
+            gr.HTML("<div id='cart-modal' style='display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: white; z-index: 1000; overflow-y: auto;'><div style='padding: 20px;'><div style='text-align: right;'><button onclick='closeCartModal()' style='background: none; border: none; font-size: 24px; cursor: pointer;'>&times;</button></div><h1>Your Cart</h1><div id='cart-items'></div><p id='cart-total-cost' style='font-size: 1.2em; font-weight: bold;'>Total Cart Cost: $0.00</p><button style='background: #ff5722; color: white; padding: 10px 20px; border-radius: 5px; border: none; cursor: pointer;' onclick='proceedToCheckout()'>Proceed to Checkout</button></div></div>")
+            gr.HTML(create_modal_window())
+            gr.HTML(modal_js())
+
+    login_button.click(
+        lambda email, password: (gr.update(visible=False), gr.update(visible=True), gr.update(value=filter_menu("All")), "Login successful!")
+        if login(email, password)[0] == "Login successful!" else (gr.update(), gr.update(), gr.update(), "Invalid email or password."),
+        [login_email, login_password], [login_page, menu_page, menu_output, login_output]
+    )
+    preference.change(lambda pref: filter_menu(pref), [preference], menu_output)
+
+app.launch()