# Updated Cart Modal HTML
def create_cart_modal():
    cart_modal_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>
            <button style="background: #007bff; color: white; padding: 10px 20px; border-radius: 5px; border: none; cursor: pointer;" onclick="submitOrder()">Submit Order</button>
        </div>
    </div>
    """
    return cart_modal_html

# Final Order Page HTML
def create_final_order_page():
    final_order_html = """
    <div id="final-order-page" style="display: none; padding: 20px; max-width: 1200px; margin: auto;">
        <h1>Final Order</h1>
        <div id="final-order-items"></div>
        <p id="final-order-total-cost" style="font-size: 1.2em; font-weight: bold;">Total Order Cost: $0.00</p>
        <button onclick="confirmOrder()" style="background-color: #28a745; color: white; padding: 10px 20px; border-radius: 5px; cursor: pointer;">Confirm Order</button>
    </div>
    """
    return final_order_html

# Updated JavaScript for Submit Order
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';
            document.getElementById('modal-image').src = image2;
            document.getElementById('modal-name').innerText = name;
            document.getElementById('modal-description').innerText = description;
            document.getElementById('modal-price').innerText = price;
            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
            }));
            const extrasCost = extras.reduce((total, extra) => total + (extra.price * extra.quantity), 0);
            const totalCost = (price * quantity) + extrasCost;
            cart.push({ name, price, quantity, extras, instructions, totalCost });
            totalCartCost += totalCost;
            updateCartButton();
            updateCartTotalCost();
            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} (+$${(extra.price * extra.quantity).toFixed(2)})`).join(', ');
                cartItemsContainer.innerHTML += `
                    <div style="border: 1px solid #ddd; padding: 10px; margin-bottom: 10px;">
                        <h3>${item.name}</h3>
                        <p>Quantity: ${item.quantity}</p>
                        <p>Extras: ${extrasList || 'None'}</p>
                        <p>Special Instructions: ${item.instructions || 'None'}</p>
                        <p>Total Cost: $${item.totalCost.toFixed(2)}</p>
                    </div>
                `;
            });
            document.getElementById('cart-total-cost').innerText = `Total Cart Cost: $${totalCartCost.toFixed(2)}`;
            cartModal.style.display = 'block';
        }
        function closeCartModal() {
            document.getElementById('cart-modal').style.display = 'none';
        }
        function submitOrder() {
            const finalOrderPage = document.getElementById('final-order-page');
            const finalOrderItemsContainer = document.getElementById('final-order-items');
            finalOrderItemsContainer.innerHTML = "";
            cart.forEach((item) => {
                const extrasList = item.extras.map(extra => `${extra.name} (+$${(extra.price * extra.quantity).toFixed(2)})`).join(', ');
                finalOrderItemsContainer.innerHTML += `
                    <div style="border: 1px solid #ddd; padding: 10px; margin-bottom: 10px;">
                        <h3>${item.name}</h3>
                        <p>Quantity: ${item.quantity}</p>
                        <p>Extras: ${extrasList || 'None'}</p>
                        <p>Special Instructions: ${item.instructions || 'None'}</p>
                        <p>Total Cost: $${item.totalCost.toFixed(2)}</p>
                    </div>
                `;
            });
            document.getElementById('final-order-total-cost').innerText = `Total Order Cost: $${totalCartCost.toFixed(2)}`;
            finalOrderPage.style.display = 'block';
            document.getElementById('cart-modal').style.display = 'none';
        }
        function confirmOrder() {
            alert("Order confirmed! Thank you for your purchase.");
            cart = [];
            totalCartCost = 0;
            updateCartButton();
            updateCartTotalCost();
            document.getElementById('final-order-page').style.display = 'none';
        }
    </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:
        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:
        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:
        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;' 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><button style='background: #007bff; color: white; padding: 10px 20px; border-radius: 5px; border: none; cursor: pointer;' onclick='submitOrder()'>Submit Order</button></div></div>")

            # Add Final Order Page
            gr.HTML(create_final_order_page())

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

app.launch()