Current PHP Time: 2024-12-22 10:21:34
<div id="login-toast" class="login-toast"> Log In
        <div class="login-content">
            <div id="login-form-container" class="login-form-container">
                <form id="login-form" method="post">
                    <input type="text" id="username" name="username" placeholder="Username" required>
                    <input type="password" id="password" name="password" placeholder="Password" required>
                    <button type="submit" id="login-button">Log In</button>
                </form>
            </div>
			You do not have an account? <a href="henrymakes.com/register"> Register here </a>
        </div>
    </div><script>let userId = null;</script><div id="profile-modal" class="modal">
    <div class="modal-content">
        <span class="close-button" id="close-profile-modal">&times;</span>
        <div id="profile-info">
            <!-- User profile information will be displayed here -->
        </div>
    </div>
</div>

<script src="/api/profile-modal.js"></script>

<link rel="stylesheet" type="text/css" href="/style.css">

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const loginToast = document.getElementById('login-toast');
        const loginFormContainer = document.getElementById('login-form-container');
        const logoutButton = document.getElementById('logout-button');

        // Function to handle logout
        function handleLogout() {
            // Send a POST request to the logout.php script
            fetch('/api/logout.php', {
                method: 'POST',
            })
                .then(response => response.json())
                .then(data => {
                    if (data.status === 'success') {
                        // Handle successful logout (e.g., update UI)
                        showToastMessage('Logout successful');
                        location.reload(); // Reload the page to reflect the logged-out state
                    } else {
                        // Handle logout error (e.g., display an error message)
                        showToastMessage('Logout failed. Please try again.');
                    }
                })
                .catch(error => {
                    // Handle network or server error
                    showToastMessage('An error occurred while logging out. Please try again later.');
                    console.error('Logout error:', error);
                });
        }

        // Check if user is logged in
        const isLoggedIn = false;

        if (!isLoggedIn) {
            // Add event listeners for login
            loginToast.addEventListener('click', function (event) {
                if (!loginFormContainer.contains(event.target)) {
                    loginFormContainer.style.display = 'block';
                }
            });

            document.getElementById('login-button').addEventListener('click', function (event) {
                event.preventDefault();
                const username = document.getElementById('username').value;
                const password = document.getElementById('password').value;

                const formData = new FormData(); // Create a FormData object
                formData.append('username', username); // Add username to form data
                formData.append('password', password); // Add password to form data

                // Send a POST request to the login.php script with form data
                fetch('/api/login.php', {
                    method: 'POST', // Change the request method to "POST"
                    body: formData, // Use the FormData object as the request body
                })
                    .then(response => response.json())
                    .then(data => {
                        if (data.status === 'success') {
                            // Handle successful login (e.g., update UI)
                            showToastMessage('Login successful');
                            loginFormContainer.style.display = 'none'; // Hide the login form
                            window.location.reload(true); // Reload the page to reflect the logged-out state
                        } else {
                            // Handle login error (e.g., display an error message)
                            showToastMessage('Login failed. Please check your credentials.');
                        }
                    })
                    .catch(error => {
                        // Handle network or server error
                        showToastMessage('An error occurred while logging in. Please try again later.');
                        console.error('Login error:', error);
                    });
            });
        } else if (logoutButton) {
            // Add event listener for logout button if user is logged in
            logoutButton.addEventListener('click', handleLogout);
        }
    });
</script>




<script src="/api/jshelpers.js"></script>
<head>
    <title>RTK 11-29-24</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<script src="/api/mainscripts.js"></script>

<!-- Verification Modal -->
<div id="verification-modal" class="modal" style="display: none;">
    <div class="modal-content">
        <span class="close" id="close-verification-modal">&times;</span>
        <h3>Verify Your Identity</h3>
        <p>A verification code has been sent to your email/phone. Please enter it below.</p>
        <input type="text" id="verification-code" placeholder="Enter code" required>
        <button id="verify-code-button">Verify</button>
    </div>
</div>



<!-- Modified Guest Modal to Include Guest Login Option -->
<div id="guest-details-modal" class="modal" style="display:none;">
    <div class="modal-content">
        <span class="close-button" id="close-guest-details-modal">&times;</span>
        <h3 id="guest-modal-title">Please provide your details to proceed as a guest</h3>
        <form id="guest-details-form">
            <div id="new-guest-section">
                <label for="guest-name">Name:</label>
                <input type="text" id="guest-name" name="guest_name" required><br>
                <label for="guest-email">Email:</label>
                <input type="email" id="guest-email" name="guest_email" required><br>
                <button type="button" id="submit-guest-details">Submit Details</button>
            </div>
            <div id="existing-guest-section" style="display:none;">
                <label for="existing-guest-email">Enter Your Email:</label>
                <input type="email" id="existing-guest-email" name="existing_guest_email" required><br>
                <button type="button" id="send-login-code">Send Verification Code</button>
            </div>
        </form>
        <button type="button" id="toggle-guest-login">Already a returning guest? Click here</button>
    </div>
</div>






<script>
let UserId = "";


// Function to update the items display
function updateItemsDisplay() {
    const itemsDisplay = document.getElementById('items-display');

    // Convert items array to a formatted JSON string
    const itemsJSON = JSON.stringify(items, null, 2);

    // Update the content of the items-display div with the JSON string
    itemsDisplay.textContent = itemsJSON;
}

function animateFlyToCart(event, productDiv, cartButton, offsetX = 0, manualOffsetY = null) {
// Calculate the total height of the elements inside productDiv
    const elements = productDiv.querySelectorAll('h3, p');
    let totalHeight = 0;
    elements.forEach(element => {
        totalHeight += element.offsetHeight;
    });
    let offsetY = -totalHeight;

    // Apply the manual offset if provided
    if (manualOffsetY !== null) {
        offsetY += manualOffsetY;
    }
    
    // Clone the product div and append to the body
    const clone = productDiv.cloneNode(true);
    clone.style.position = 'fixed';
    clone.style.zIndex = '9999';
    clone.style.transition = 'all 0.5s ease-in-out';
    clone.style.transform = 'scale(1)';
    document.body.appendChild(clone);

    // Get the positions
    const rectOriginal = productDiv.getBoundingClientRect();

    // Manually get the cartButton's coordinates each time to ensure it's current
    const rectCart = cartButton.getBoundingClientRect();  // Replaced viewCartButton with cartButton

    // Position the clone initially at the original product's position
    clone.style.left = `${rectOriginal.left}px`;
    clone.style.top = `${rectOriginal.top}px`;

    // Trigger reflow to make sure the initial styles are applied before transitioning
    clone.getBoundingClientRect();

    // Animate the clone to fly to the cart, adding the offsets
    clone.style.left = `${rectCart.left + offsetX}px`;
    clone.style.top = `${rectCart.top + offsetY}px`;
    clone.style.transform = 'scale(0.02)';

    // Remove the cloned element after animation
    setTimeout(() => {
        document.body.removeChild(clone);
    }, 600);
    
}


// Clear cart function
function clearCart() {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', '/api/clear_cart.php', true); 
    xhr.onreadystatechange = function () {
        if (xhr.readyState === XMLHttpRequest.DONE) {
            if (xhr.status === 200) {
				// Toggle cart dropdown visibility
const cartButton = document.querySelector('.cart-button');
const cartTotal = document.querySelector('.cart-total');
const buttontotal = document.querySelector('.buttontotal'); 
const overlay = document.querySelector('.overlay');
const cartDropdown = document.querySelector('.cart-dropdown');
const body = document.querySelector('.body');
                // Ensure `buttontotal` exists before modifying it
                if (buttontotal) {
                    buttontotal.textContent = 'Total: $0';
                } else {
                    console.error('buttontotal element not found.');
                }

                // Reset the items display content
                const itemsDisplay = document.getElementById('items-display');
                if (itemsDisplay) {
                    itemsDisplay.textContent = '';
                }

                // Clear the items array and update the cart UI
                items.splice(0, items.length); // Clear the items array using splice
                updateItemsDisplay(); // Update the items display
                updateCartItems(); // Update the cart UI

                // Close the cart dropdown and overlay
                if (overlay && cartDropdown) {
                    overlay.classList.remove('active');
                    cartDropdown.classList.remove('active');
                    document.body.style.overflow = 'auto'; // Enable scrolling on body
                }

                if (cartButton) {
                    cartButton.innerHTML = 'View Cart<p class="buttontotal"></p>';
                }

                // Reset the payment method to default (assuming 'Cash' is the default)
                const paymentMethodSelect = document.getElementById('payment-method');
                if (paymentMethodSelect) {
                    paymentMethodSelect.value = 'Cash';
                }

                // Reset the delivery method to 'In Store'
                const deliveryMethodSelect = document.getElementById('delivery-method');
                if (deliveryMethodSelect) {
                    deliveryMethodSelect.value = 'InStore';
                }

                const mapContainer = document.getElementById('map-container');
                if (mapContainer) {
                    mapContainer.style.display = 'none'; // Hide the map container
                }

                if (overlay) {
                    overlay.style.display = 'none';
                }
            } else {
                console.error('Error clearing cart');
            }
        }
    };
    xhr.send();
}


function submitOrder(paymentResult = null) {
// Select the cart total element from the DOM
    const cartTotalElement = document.querySelector('.cart-total');

    // Extract the text that contains the total amount
    if (!cartTotalElement) {
        console.error('Error: Cart total element not found.');
        return; // Exit the function if the element is not found
    }

    // Extract the total value using a regular expression to find the dollar amount
    const cartTotalText = cartTotalElement.innerHTML;
    const totalAmountMatch = cartTotalText.match(/Total: \$(\d+(\.\d{1,2})?)/);

    // Validate if we found a match
    if (!totalAmountMatch || !totalAmountMatch[1]) {
        console.error('Error: Unable to find the cart total value.');
        return; // Exit if unable to find the total amount
    }

    // Parse the matched amount to a float value
    const totalAmount = parseFloat(totalAmountMatch[1]);
    
    // Log the cart total for debugging
    console.log("Total Amount Retrieved from DOM: ", totalAmount);

    // If either first name or last name is not in the session, try to fetch them from the database using the user's ID
    if (customerFirstName === '' || customerLastName === '') {
        fetch('./api/getuid.php')
            .then(response => response.json())
            .then(data => {
                const userId = data.userId;
                fetch(`api/get_user_profile.php?user_id=${userId}`)
                    .then(response => response.json())
                    .then(data => {
                        if (data.status === 'success') {
                            // Set the first and last names from the database, if available
                            if (data.user_profile) {
                                const userProfile = data.user_profile;
                                if (userProfile.first) {
                                    customerFirstName = userProfile.first;
                                }
                                if (userProfile.last) {
                                    customerLastName = userProfile.last;
                                }
                            }
                        } else {
                            console.error(data.message);
                        }
                    })
                    .catch(error => console.error('Error:', error));
            })
            .catch(error => console.error('Error fetching user ID:', error));
    }

    // Check if both first name and last name are defined
    let customerName = '';
    if (customerFirstName !== '' && customerLastName !== '') {
        customerName = customerFirstName + ' ' + customerLastName;
    }

    // If the user is not logged in, prompt for guest details
    let guestDetails = null;
    if (customerName === '' && !window.guestDetails) {
        // Open the guest details modal (handled by other scripts)
        showGuestDetailsModal(); // Assuming this function opens the modal for user input

        return; // Exit to wait for user input before proceeding
    } else if (window.guestDetails) {
        // If guest details are provided, use them
        guestDetails = window.guestDetails;
        customerName = guestDetails.name;
    }

    const paymentMethodSelect = document.getElementById('payment-method'); // Get the select element
    const paymentMethod = paymentMethodSelect.value; // Get the selected value from the dropdown

    // Get the selected delivery method
    const deliveryMethod = document.getElementById('delivery-method').value;
    let lat, lng;

    if (deliveryMethod === 'Delivery') {
        // Use the marker's position if the delivery method is 'Delivery'
        lat = window.marker.getLatLng().lat;
        lng = window.marker.getLatLng().lng;

        // Check if the pin is within a delivery zone before submitting
        if (!insidePolygonName) {
            showToastMessage("Please move the pin within a delivery zone to set where the order is delivered!", 'center', true, 'OK');
            return;
        }
    } else {
        // Use default coordinates for other methods
        lat = defaultCoords[0];
        lng = defaultCoords[1];
        // Optionally set insidePolygonName to indicate in-store pickup
        insidePolygonName = 'InStore';
    }

    // Calculate total additional points
    let totalAdditionalPoints = 0;
    items.forEach(item => {
        const additionalPoints = item.additional_points || 0;
        totalAdditionalPoints += additionalPoints * item.quantity;
    });

    // Prepare the request data
    const requestData = {
        customer_name: customerName,
        payment_method: paymentMethod,
        items: items,
        lat: lat,
        lng: lng,
        delivery_fee: DeliveryFee,
        total_additional_points: totalAdditionalPoints,
        cart_total: totalAmount
    };

    // Include guest details if provided
    if (guestDetails) {
        requestData.guest_details = guestDetails;
    }

    // Check if the payment method is 'card' and if paymentResult is null
    if (paymentMethod === 'card' && !paymentResult) {
        const amount = updateCartItems(); // Get the total amount

        // Initialize the checkout session
        initializeCheckoutSession(amount);
        return;  // Exit to wait for payment confirmation
    }

    // Include paymentResult if available
    if (paymentResult) {
        requestData.payment_result = paymentResult;
    }

    // Send the order data to the server
fetch('api/submit_order.php', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify(requestData)
})
.then(response => response.json())
.then(data => {
    // Check if the response status is 'success'
    if (data.status === 'success') {
        alert('Order submitted successfully!');
        clearCart();             // Clear all items from the cart
        updateCartItems();       // Update cart UI, such as totals
        items.splice(0, items.length); // Clear the items array using splice
        updateItemsDisplay();    // Update the display to reflect empty cart

        // Remove the toast container after order is successfully submitted
        const toastContainer = document.getElementById('toast-container');
        if (toastContainer) {
            toastContainer.innerHTML = ''; // Clear the toast container content
        }
		
        // Redirect to the my_orders.php page
        window.location.href = '/api/my_orders.php';
    } else {
        // Handle error in case the order was not successfully submitted
        alert('Error submitting order: ' + (data.message || 'Unknown error'));
    }
})
.catch(error => console.error('Error submitting order:', error));

}

// Proceed to confirm order submission
function confirmOrderSubmission() {
    // Check if guest details are needed
    if (window.guestDetails) {
        // If guest details are provided, include them in the order submission
        submitOrder(window.guestDetails);
    } else {
        // Display the confirmation toast message
        showToastMessage('Are you ready to submit and pay for your order?', 'center', true, 'Pay and submit Order');

        // Log to console for debugging
        console.log("Confirmation toast displayed");

        // Access the toast container
        const toastContainer = document.getElementById('toast-container');
        if (!toastContainer) {
            console.error("Toast container not found.");
            return;
        }

        // Get the most recently added toast (the confirmation toast)
        const lastToast = toastContainer.lastElementChild;
        if (!lastToast) {
            console.error("No toast message found in the container.");
            return;
        }

        // Log the presence of the toast
        console.log("Toast found:", lastToast);

        // Find the confirmation button within the toast
        const confirmButton = lastToast.querySelector('button');
        if (!confirmButton) {
            console.error("Confirmation button not found in the toast.");
            return;
        }

        // Add a click event listener to the confirm button and ensure it can only be clicked once
        confirmButton.addEventListener('click', function () {
            console.log("Confirm button clicked. Proceeding to submit the order.");

            // Disable the button to prevent multiple clicks
            //confirmButton.disabled = true;

            // Call the actual submitOrder function
            submitOrder();

            // Hide or remove the toast after confirmation
			if (lastToast) {
				toastContainer.style.display = 'none'; // This will hide the toast
				lastToast.remove();
            console.log("lasttoast removed");
			} else {
            console.log("no lasttoast");
			}
        });

        // Log the successful setup of the confirmation button
        console.log("Confirm button event listener attached.");
    }
}

document.addEventListener('DOMContentLoaded', function () {
    const paymentMethodSelect = document.getElementById('payment-method');
    const verificationModal = document.getElementById('verification-modal');
    const closeVerificationModal = document.getElementById('close-verification-modal');
    const verifyCodeButton = document.getElementById('verify-code-button');
    let isVerified = false; // Track if the user is verified

// Send verification code
    // Global flag to prevent immediate resending
let canResendCode = true;

function sendVerificationCode() {
    if (!canResendCode) {
        alert("Please wait before resending the code.");
        return;
    }

    fetch('api/send_verification_code.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email: guestDetails.email })
    })
    .then(response => response.json())
    .then(data => {
        if (data.status === 'success') {
            console.log('Verification code sent.');

            // Disable resending for a set time (e.g., 30 seconds)
            canResendCode = false;
            setTimeout(() => canResendCode = true, 30000);

            // Display verification modal for user input
            verificationModal.style.display = 'block';
        } else {
            // Display error if sending fails
            alert(`Error sending verification code: ${data.message}`);
        }
    })
    .catch(error => console.error('Error:', error));
}

// Verify the entered code
function verifyCode(code) {
    fetch('api/verify_code.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ code: code })
    })
    .then(response => response.json())
    .then(data => {
        if (data.status === 'success') {
            isVerified = true;
            verificationModal.style.display = 'none';
            alert('Verification successful.');
			submitOrder();
        } else {
            alert('Incorrect code. Please try again.');
        }
    })
    .catch(error => console.error('Error:', error));
}






    // Open verification modal when 'Cash' is selected and user is not verified
    paymentMethodSelect.addEventListener('change', function () {
    if (paymentMethodSelect.value === 'Cash') {
        // Check if email is already set in session or guest details
        if (!false && !window.guestDetails) {
            // Open guest details modal if email is missing
            guestDetailsModal.style.display = 'block';
        } else {
            // Send verification code if email is available
            sendVerificationCode();
            verificationModal.style.display = 'block';
        }
    }
});


    // Close modal
    closeVerificationModal.addEventListener('click', () => {
        verificationModal.style.display = 'none';
        paymentMethodSelect.value = ''; // Reset payment method if verification fails
    });

    // Handle code verification
    verifyCodeButton.addEventListener('click', function () {
        const code = document.getElementById('verification-code').value;
        verifyCode(code);
    });

    

    const submitOrderButton = document.querySelector('.submit-order-button');
    const guestDetailsModal = document.getElementById('guest-details-modal');
    const closeGuestDetailsModal = document.getElementById('close-guest-details-modal');
    const submitGuestDetailsButton = document.getElementById('submit-guest-details');

    // Close the guest details modal
    closeGuestDetailsModal.addEventListener('click', function () {
        guestDetailsModal.style.display = 'none';
    });

// Handle submission of guest details
submitGuestDetailsButton.addEventListener('click', function () {
    const guestFullName = document.getElementById('guest-name').value.trim();
    const guestEmail = document.getElementById('guest-email').value.trim();
    //const guestPhone = document.getElementById('guest-phone').value.trim();
    //const guestAddress = document.getElementById('guest-address').value.trim();

    // Split full name into first and last names
    let guestFirstName = '';
    let guestLastName = '';
    if (guestFullName) {
        const nameParts = guestFullName.split(' ');
        guestFirstName = nameParts.shift(); // Take the first word as the first name
        guestLastName = nameParts.join(' '); // Join the rest as the last name
    }

    if (guestFirstName && guestEmail) {
        // Prepare the guest details for submission
        const guestDetails = {
            first: guestFirstName,
            last: guestLastName,
            email: guestEmail,
            //phone: guestPhone,
            //address: guestAddress
        };

        fetch('api/submitGuestDetails.php', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(guestDetails)
        })
        .then(response => response.json())
        .then(data => {
            if (data.status === 'success') {
                console.log('Guest details submitted successfully:', data);
                
                // Store guest details in a global variable
                window.guestDetails = guestDetails;

                if (data.userId) {
                    // Save the user ID for later use both in the JavaScript variable and as a session variable
                    window.userId = data.userId;

                    // Make an API call to set the guest user ID in the session
                    fetch('api/setGuestSession.php', {
						method: 'POST',
						headers: {
							'Content-Type': 'application/json'
						},
						body: JSON.stringify({ 
							userId: data.userId, 
							email: guestDetails.email, 
							first: guestDetails.first, 
							last: guestDetails.last 
						})
					})
                    .then(sessionResponse => sessionResponse.json())
                    .then(sessionData => {
                        if (sessionData.status === 'success') {
                            console.log('Guest session set successfully');

                            // Set the existing customer fields to use guest information
                            customerFirstName = guestDetails.first;
                            customerLastName = guestDetails.last;
                            customerEmail = guestDetails.email; 
                            //deliveryAddress = guestDetails.address;

                            // Hide the guest details modal
                            guestDetailsModal.style.display = 'none';
							// Send verification code and show verification modal
							sendVerificationCode();
							verificationModal.style.display = 'block';
                        } else {
                            console.error('Error setting guest session:', sessionData.message);
                        }
                    })
                    .catch(error => console.error('Error setting guest session:', error));
                }
            } else {
                console.error('Error submitting guest details:', data.message);
                console.error('Logs:', data.logs);
            }
        })
        .catch(error => console.error('Error submitting guest details:', error));
    } else {
        alert('Please fill in all fields to proceed.');
    }
});



});
</script>

<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@turf/turf@6.5.0"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src='api/getProductIngredients.js'></script>
<script src='api/jshelpers.js'></script>
<!-- Include HelcimPay.js script -->
<script type="text/javascript" src="https://secure.helcim.app/helcim-pay/services/start.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/>





<script>const pointsPerDollar = 0.37;</script><script>const taxRate = 6.5;</script><script>const featuredProducts = [{"product_id":"93","position":"1","discount":null},{"product_id":"94","position":"2","discount":null},{"product_id":"63","position":"3","discount":null},{"product_id":"74","position":"4","discount":null},{"product_id":"64","position":"5","discount":null}];</script><script>const featuredProductDetails = [{"id":"93","name":"Pretzel - 8 inch stick","price":"3.00","description":"1 8 inch pretzel stick with side of nacho or white queso sauce","image_url":"images\/food\/1pretz.png","position":"1","discount":null},{"id":"94","name":"Pretzel - 8 inch stick x2","price":"5.00","description":"2 8 inch pretzel sticks with sides of nacho or white queso sauces","image_url":"images\/food\/2pretz.png","position":"2","discount":null},{"id":"63","name":"Grilled Cheese and Soup","price":"7.00","description":"Grilled cheese and tomato basil soup","image_url":"images\/item_placeholder.png","position":"3","discount":null},{"id":"74","name":"Grilled Cheese 2x","price":"7.00","description":"2 grilled cheese","image_url":"images\/food\/2xgrilledcheese.webp","position":"4","discount":null},{"id":"64","name":"Boneless wings and Fries","price":"8.00","description":"6 boneless wings and fries, default no sauce, \"add to cart and modify\" to add a sauce","image_url":"images\/item_placeholder.png","position":"5","discount":null}];</script><script>const mapPolygons = [{"name":"deliveryArea","coordinates":[[34.39317057160274,-110.52254650427214],[34.41590257791388,-110.52276136690271],[34.415973384481866,-110.53134001515157],[34.43048746498245,-110.53104413830584],[34.43038127354455,-110.53807851594604],[34.43118655524745,-110.53892926648915],[34.43025738336316,-110.5395726667573],[34.43034587636863,-110.5836344734367],[34.434115591390004,-110.58376315349032],[34.43507126677207,-110.5813825724982],[34.436398575561164,-110.5836773667879],[34.444786679436874,-110.58370111173502],[34.44464511505014,-110.61908812648286],[34.46099421532544,-110.61179625677727],[34.45922498663262,-110.62783837012962],[34.44485746154028,-110.62749522331995],[34.433460770466915,-110.63746895767592],[34.42963792970177,-110.63717380660016],[34.38615851984217,-110.58443167326986],[34.38592831626632,-110.53449346459725],[34.39078016539963,-110.53426280561847],[34.39291382754215,-110.52513724514864],[34.3930023600658,-110.52417214474643],[34.39317057160274,-110.52254650427214]],"color":"blue"},{"name":"trailside","coordinates":[[34.512214809921375,-110.42358398437501],[34.52579289427138,-110.74356079101564],[34.28218385709024,-110.74356079101564],[34.29239566218292,-110.45928955078126],[34.512214809921375,-110.42358398437501]],"color":"Green"},{"name":"Bison","coordinates":[[34.39302891980464,-110.52417755126955],[34.389133401415066,-110.52366256713867],[34.385025203817854,-110.52589416503908],[34.38375020495333,-110.5309581756592],[34.38562727986592,-110.53138732910158],[34.38596373224225,-110.53447723388672],[34.39079787236322,-110.53426265716554],[34.39292268079875,-110.52516460418703],[34.39302891980464,-110.52417755126955]],"color":"purple"}];</script>
<!DOCTYPE html>
<html>

<body>
<!-- Include the profile modal script -->
<script src="/api/profile-modal.js"></script>

<!--//-- Popup modal for user profile moved to login_component-->
<!-- Ingredient Selection Modal -->
<div class="modal fade" id="ingredientModal" tabindex="-1" aria-labelledby="ingredientModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="ingredientModalLabel">Select Ingredients</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <!-- Container for listing ingredients -->
        <div id="modal-ingredient-list">
          <!-- Ingredient buttons will be populated here -->
        </div>
      </div>
      <div class="additional-modification-request">
    <label for="additional-modification-text">Additional Requests:</label>
    <input type="text" id="additional-modification-text" placeholder="Enter any specific requests here" class="form-control">
</div>

      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" id="add-to-cart-with-ingredients" class="btn btn-primary">Add to Cart</button>
      </div>
    </div>
  </div>
</div>


       <div id="title" class="title"> 
   <div id="titlecontent" class="titlecontent">
              RTK, Real Time Kitchen</br></br></br></br>
       
<p>Henry makes food, makes it really good</p>
       </div>
       </div>

       <div class="weekly-hours"><h2>Weekly Hours of Operation</h2><p><strong>Sunday:</strong> CLOSED - Contact for special availability</p><p><strong>Monday:</strong> 1:00 PM - 7:00 PM</p><p><strong>Tuesday:</strong> 1:00 PM - 7:00 PM</p><p><strong>Wednesday:</strong> 1:00 PM - 7:00 PM</p><p><strong>Thursday:</strong> 1:00 PM - 7:00 PM</p><p><strong>Friday:</strong> 1:00 PM - 7:00 PM</p><p><strong>Saturday:</strong> 9:00 AM - 7:00 PM</p></div><div class="closed-sign">Closed<br>
        Today's Hours: 12:00 AM to 12:00 AM
        </div>    <div id='toast-container'></div>
    <!-- Cart Section -->
    <div>
<div class="overlay"></div> 
<div class="cart-dropdown">
    <ul class="cart-items"></ul>
    <p class="cart-total"></p>
    <label for="payment-method">Payment Method:</label>
<select id="payment-method" name="payment-method">
    <option value="Cash">Cash</option>
    <option value="card">Credit/debit Card</option>
</select></br>

<div id="delivery-method-div">
    <label for="delivery-method">Delivery type:</label>
    <select id="delivery-method" name="delivery-method">
        <option value="InStore">In Store</option>
        <!-- <option value="Delivery">Delivery</option> -->
    </select>
</div>


<div id="delivery-policy" style="display:none;">
    <policy>$65 minimum OR $25 delivery fee for Heber-Overgaard trailside delivery(green section of the map, near dirt roads, typically not areas a small car can not easily pass)</policy>
</div>
<div id="map-container" style="display:none;">
    <h3>Enter Delivery Address:</h3>
    <input type="text" id="address-input" placeholder="Enter address here" style="width:100%; margin-bottom:10px;">
    <button id="search-address">Search Address</button>
    <div id="map" style="height: 400px;"></div>
</div>


    <button class="clear-cart-button">Clear Cart</button>
    <button class="submit-order-button">Submit Order</button><br>
<div class="weekly-hours"><h2>Weekly Hours of Operation</h2><p><strong>Sunday:</strong> CLOSED - Contact for special availability</p><p><strong>Monday:</strong> 1:00 PM - 7:00 PM</p><p><strong>Tuesday:</strong> 1:00 PM - 7:00 PM</p><p><strong>Wednesday:</strong> 1:00 PM - 7:00 PM</p><p><strong>Thursday:</strong> 1:00 PM - 7:00 PM</p><p><strong>Friday:</strong> 1:00 PM - 7:00 PM</p><p><strong>Saturday:</strong> 9:00 AM - 7:00 PM</p></div><div class="closed-sign">Closed<br>
        Today's Hours: 12:00 AM to 12:00 AM
        </div>    <div id="items-display" style="color: red; display:none;"></div>


</div>

<!-- Test update cart button 
<button class="update-cart-button">Update Cart</button>
-->
</div>    

<!-- Toolbar for Filtering and Search -->
<div id="toolbar" class="toolbar">
<script src='api/toolbarscroll.js'></script>
    <button class="cart-button" id="view-cart-button">View Cart
<p class="buttontotal"></p>
</button>

    <label for="category-filter">Filter by Category:</label>
    <select id="category-filter">
<option value="">All</option><option value="Sandwiches">Sandwiches</option><option value="Appetizers">Appetizers</option><option value="Breakfast">Breakfast</option><option value="Melted Favorites">Melted Favorites</option><option value="Pizza">Pizza</option><option value="Soup">Soup</option><option value="Baked">Baked</option><option value="Deserts">Deserts</option>        <!-- Populate this dropdown with category options from the database -->
    </select>

    <label for="search-input">Search:</label>
    <input type="text" id="search-input" placeholder="Search products...">
</div>


<script>
function initializeCheckoutSession(amount) {
    fetch('initialize_checkout.php', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ amount: amount })
    })
    .then(response => response.json())
    .then(data => {
        if (data.error) {
            alert('Error initializing payment: ' + data.error);
        } else {
            // Use the checkoutToken to render the HelcimPay.js modal
            var checkoutToken = data.checkoutToken;
            var secretToken = data.secretToken;

            // Store the checkoutToken and secretToken for later use
            window.checkoutToken = checkoutToken;
            window.secretToken = secretToken;

            // Append the HelcimPay iframe
            appendHelcimPayIframe(checkoutToken);

// Listen for the transaction response
window.addEventListener('message', function(event) {
    var checkoutToken = window.checkoutToken; // Use the stored checkoutToken
    var helcimPayJsIdentifierKey = 'helcim-pay-js-' + checkoutToken;

    if (event.data.eventName === helcimPayJsIdentifierKey) {
        if (event.data.eventStatus === 'ABORTED') {
            console.error('Transaction failed!', event.data.eventMessage);
            removeHelcimPayIframe();
            alert('Payment was aborted or failed. Please try again.');
        }

        if (event.data.eventStatus === 'SUCCESS') {
			removeHelcimPayIframe(); // This is good for removing the payment modal

			// Also remove the confirmation toast/modal, if it is still visible
			const confirmationToast = document.getElementById('toast-container');
			if (confirmationToast) {
				confirmationToast.innerHTML = ''; // Clear out the toast content
			}

			// Parse eventMessage to make sure it's an object
			let transactionData;
			try {
				transactionData = JSON.parse(event.data.eventMessage);
			} catch (e) {
				console.error('Failed to parse eventMessage:', e);
				alert('Payment validation failed: Invalid transaction data received.');
				return;
		}

			// Now that the payment is already verified in `initialize_checkout.php`, proceed directly to order submission
			submitOrder(transactionData.data);
	}

    }
});







}
    })
    .catch(error => console.error('Error:', error));
}
let allProducts = {}; // Declare allProducts globally

let DeliveryFee = 0; // Variable to store current delivery fee based on location

// This event listeners block is removed from customer.php since it's now in mainscripts.js

// Bind the toggleDeliveryOptions function to the payment method selection change event moved to mainscripts.js

// Event listener for the "Search Address" button moved to mainscripts.js

// Function to show/hide delivery options based on payment method
//moved to mainscripts.js

// Event listener for delivery method change moved to mainscripts.js

// // Global map and polygon variables
 var map, marker, deliveryArea, trailsideArea, bisonArea;
var defaultCoords = [34.391754042834016, -110.5267095565796]; // Default map view coordinates 
 var markerPosition = { lat: defaultCoords[0], lng: defaultCoords[1] }; // Initialize markerPosition with defaultCoords
// Declare cartItemsList in a higher scope
let cartItemsList;
let items = []; // Array to store order items
var deliveryAreaCoordinates, trailsideDeliveryAreaCoordinates, bisonDeliveryAreaCoordinates;


// Helper function to get the product name based on its ID
function getProductName(productId) {
    const product = document.querySelector(`.product[data-product-id="${productId}"]`);
    return product ? product.querySelector('h3').textContent : 'Unknown Product';
}

// Helper function to get the product price based on its ID
function getProductPrice(productId) {
    const product = document.querySelector(`.product[data-product-id="${productId}"]`);
    if (product) {
        const priceText = product.querySelector('p:nth-child(4)').textContent; // Adjust the selector for price
        const priceMatch = priceText.match(/\$([\d.]+)/);
        if (priceMatch) {
            return parseFloat(priceMatch[1]);
        }
    }
    return 0;
}

let insidePolygonName = null;
function isPointInsidePolygon(point, selectedMethod = 'Delivery') {
    insidePolygonName = null;
    deliveryFee = 0;

    const turfPoint = turf.point([point.lng, point.lat]);

    const smallerPolygons = ['deliveryArea', 'Bison'];
    for (let name of smallerPolygons) {
        const layerData = mapPolygonsLayer.find(layer => layer.name === name);
        if (layerData) {
            const geoJsonPolygon = layerData.leafletPolygon.toGeoJSON();
            if (turf.inside(turfPoint, geoJsonPolygon)) {
                insidePolygonName = name;
                break;
            }
        }
    }

    if (!insidePolygonName) {
        const trailsideLayer = mapPolygonsLayer.find(layer => layer.name === 'trailside');
        if (trailsideLayer) {
            const geoJsonPolygon = trailsideLayer.leafletPolygon.toGeoJSON();
            if (turf.inside(turfPoint, geoJsonPolygon)) {
                insidePolygonName = 'trailside';
            }
        }
    }

    switch (insidePolygonName) {
        case 'deliveryArea':
            deliveryFee = 7;
            console.log("deliveryarea polygon");
            break;
        case 'Bison':
            deliveryFee = 0;
            console.log("bison polygon");
            break;
        case 'trailside':
            deliveryFee = 25;
            console.log("trailside polygon");
            break;
        default:
            deliveryFee = 0;
            if (selectedMethod !== "InStore") {
                showToastMessage("Please move the pin within a delivery zone.", 'center', true, 'OK');
            }
    }

    DeliveryFee = deliveryFee;
    updateCartItems(deliveryFee);

    return insidePolygonName;
}


function removeItemFromCart(index) {
    if (index > -1 && index < items.length) {
        items.splice(index, 1); // Remove the item at the given index
        updateCartItems();       // Update the cart display
        updateItemsDisplay();    // Update other UI elements as needed
    }
}


// Function to update cart items in the dropdown
function updateCartItems() {
    const cartItemsList = document.querySelector('.cart-items');
    const cartTotal = document.querySelector('.cart-total');
    const buttontotal = document.querySelector('.buttontotal');

    // Clear the current items in the display
    cartItemsList.innerHTML = '';

    let total = 0;
    let totalPoints = 0;
    let totalTax = 0;

    items.forEach((item, index) => {
        const productId = item.product_id;
        const itemTotal = item.quantity * getProductPrice(productId);
        const taxForThisItem = itemTotal * (taxRate / 100);
        totalTax += taxForThisItem;
        const pointsForThisItem = itemTotal * pointsPerDollar;
        let additionalPoints = item.additional_points || 0;
        const totalItemPoints = pointsForThisItem + additionalPoints;
        totalPoints += totalItemPoints;

        // Create the cart item container
        const cartItemContainer = document.createElement('div');
        cartItemContainer.classList.add('cart-item-container');

        // Add product image
        const productImage = document.createElement('img');
        productImage.src = allProducts[productId].image_url; // Replace with actual image URL
        productImage.alt = allProducts[productId].name; // Replace with actual product name
        productImage.style.width = '100px';
        productImage.style.height = '100px';
        productImage.classList.add('cart-item-image');

        // Create a div for the text content
        const textContent = document.createElement('div');
        textContent.classList.add('cart-item-text-content');

        // Create elements for item name, price, count, and points
        const itemName = document.createElement('div');
        itemName.textContent = `${getProductName(productId)}`;
        itemName.classList.add('cart-item-name');

        const itemPrice = document.createElement('div');
        itemPrice.textContent = `Price: $${itemTotal.toFixed(2)}`;
        itemPrice.classList.add('cart-item-price');

        const itemCount = document.createElement('div');
        itemCount.textContent = `Count: ${item.quantity}`;
        itemCount.classList.add('cart-item-count');

        const itemPoints = document.createElement('div');
        itemPoints.innerHTML = additionalPoints > 0 ? `<s>${pointsForThisItem.toFixed(3)}</s> <span style="color: red;">${totalItemPoints.toFixed(3)}</span>` : `${pointsForThisItem.toFixed(3)}`;
        itemPoints.classList.add('cart-item-points');

        // Create element for modifications
        const itemModifications = document.createElement('div');
        itemModifications.textContent = item.modification_requests ? `Modifications: ${item.modification_requests}` : 'No Modifications';
        itemModifications.classList.add('cart-item-modifications');

        // Create a delete button (X) for removing the item
        const deleteButton = document.createElement('button');
        deleteButton.textContent = 'X';
        deleteButton.classList.add('cart-item-delete');
        deleteButton.addEventListener('click', function() {
            removeItemFromCart(index); // Call function to remove the item
        });

        // Append elements to the text content div and to the cart item container
        textContent.appendChild(itemName);
        textContent.appendChild(itemPrice);
        textContent.appendChild(itemCount);
        textContent.appendChild(itemPoints);
        textContent.appendChild(itemModifications);

        // Append delete button to the text content
        textContent.appendChild(deleteButton);

        // Append image and text content to the cart item container
        cartItemContainer.appendChild(productImage);
        cartItemContainer.appendChild(textContent);

        // Append the container to the cart items list
        cartItemsList.appendChild(cartItemContainer);

        total += itemTotal;
    });

    // Calculate and update the cart total
    let totalCost = total + totalTax + DeliveryFee;
    cartTotal.innerHTML = `Subtotal: $${total.toFixed(2)}<br>`;
    cartTotal.innerHTML += `Tax: $${totalTax.toFixed(2)}<br>`;
    cartTotal.innerHTML += `Delivery: $${DeliveryFee.toFixed(2)}<br>`;
    cartTotal.innerHTML += `Total: $${totalCost.toFixed(2)}<br>`;
    cartTotal.innerHTML += `Total Points: ${totalPoints.toFixed(2)}`;

    buttontotal.textContent = `Total: $${totalCost.toFixed(2)}`;

    return totalCost;
}




</script>
<div id="tab-container">
    <div class="tab-buttons">
        <button class="tab-button active" data-target="featured-products">Featured Products</button>
        <button class="tab-button" data-target="hotlist-container">Hotlist</button>
    </div>
    <div class="tab-content">
        <div id="featured-products" class="tab-pane active">
            <!-- Featured Section -->
<div id="featured-container">
    <!--<div id="featuredtitle">-->
    <!--    <h3>Featured Items</h3>-->
    <!--</div>-->
    <div id="featured-section">
        <div id="featured-left"></div>
        <div id="featured-right">
            <div class="featured-product" data-product-id="93"><div class="featured-item-img"><img src="images/food/1pretz.png" alt="Pretzel - 8 inch stick" id="featuredimg" height="75px"></div><div class="featured-item-text"><h4>Pretzel - 8 inch stick</h4><p>Price: $3.00</p></div></div><div class="featured-product" data-product-id="94"><div class="featured-item-img"><img src="images/food/2pretz.png" alt="Pretzel - 8 inch stick x2" id="featuredimg" height="75px"></div><div class="featured-item-text"><h4>Pretzel - 8 inch stick x2</h4><p>Price: $5.00</p></div></div><div class="featured-product" data-product-id="63"><div class="featured-item-img"><img src="images/item_placeholder.png" alt="Grilled Cheese and Soup" id="featuredimg" height="75px"></div><div class="featured-item-text"><h4>Grilled Cheese and Soup</h4><p>Price: $7.00</p></div></div><div class="featured-product" data-product-id="74"><div class="featured-item-img"><img src="images/food/2xgrilledcheese.webp" alt="Grilled Cheese 2x" id="featuredimg" height="75px"></div><div class="featured-item-text"><h4>Grilled Cheese 2x</h4><p>Price: $7.00</p></div></div><div class="featured-product" data-product-id="64"><div class="featured-item-img"><img src="images/item_placeholder.png" alt="Boneless wings and Fries" id="featuredimg" height="75px"></div><div class="featured-item-text"><h4>Boneless wings and Fries</h4><p>Price: $8.00</p></div></div>        </div>
    </div>
</div>
        </div>
        <div id="hotlist-container" class="tab-pane">
<div id="hotlist" class="hostlist">No hot items in the last 7 days. Here are some random picks:</div><div class="product-hotlist"><div class="product" data-product-id="79">
                <img src="images/item_placeholder.png" alt="sausage pizza 12"">
                <h3>sausage pizza 12"</h3>
                <p>12 inch Italian sausage pizza</p>
                <p>Price: $14.50</p>
                <div>
                    <button class="add-to-cart-button-no-mod" data-product-id="79">Add to Cart</button>
                </div>
            </div><div class="product" data-product-id="94">
                <img src="images/food/2pretz.png" alt="Pretzel - 8 inch stick x2">
                <h3>Pretzel - 8 inch stick x2</h3>
                <p>2 8 inch pretzel sticks with sides of nacho or white queso sauces</p>
                <p>Price: $5.00</p>
                <div>
                    <button class="add-to-cart-button-no-mod" data-product-id="94">Add to Cart</button>
                </div>
            </div><div class="product" data-product-id="75">
                <img src="images/food/grilledcheese.jpg" alt="grilled cheese">
                <h3>grilled cheese</h3>
                <p>A grilled cheese made to perfection with brioche and american cheese</p>
                <p>Price: $4.00</p>
                <div>
                    <button class="add-to-cart-button-no-mod" data-product-id="75">Add to Cart</button>
                </div>
            </div><div class="product" data-product-id="85">
                <img src="images/item_placeholder.png" alt="White chocolate macadamia cookie">
                <h3>White chocolate macadamia cookie</h3>
                <p>Two white chocolate macadamia cookies</p>
                <p>Price: $3.00</p>
                <div>
                    <button class="add-to-cart-button-no-mod" data-product-id="85">Add to Cart</button>
                </div>
            </div><div class="product" data-product-id="86">
                <img src="images/item_placeholder.png" alt="fries">
                <h3>fries</h3>
                <p>Fries with special seasoning</p>
                <p>Price: $4.00</p>
                <div>
                    <button class="add-to-cart-button-no-mod" data-product-id="86">Add to Cart</button>
                </div>
            </div></div>
        </div>
    </div>
</div>


<div class="product-list">
        <div id="product-list-title">
        <h3> All items:</h3>
    </div>
<div class="product" data-product-id="62" data-product-category="Sandwiches">
    <img src="images/item_placeholder.png" alt="Grilled Cheese and Fries">
    <h3>Grilled Cheese and Fries</h3>
    <p>Grilled cheese and fries</p>
    <p>Price: $5.00</p><div><button class="add-to-cart-button-no-mod" data-product-id="62">Add to Cart</button></br></br><button class="add-to-cart-button" data-product-id="62">Add to Cart and Modify</button></div>
        </div><div class="product" data-product-id="63" data-product-category="Sandwiches">
    <img src="images/item_placeholder.png" alt="Grilled Cheese and Soup">
    <h3>Grilled Cheese and Soup</h3>
    <p>Grilled cheese and tomato basil soup</p>
    <p>Price: $7.00</p><div><button class="add-to-cart-button-no-mod" data-product-id="63">Add to Cart</button></br></br><button class="add-to-cart-button" data-product-id="63">Add to Cart and Modify</button></div>
        </div><div class="product" data-product-id="64" data-product-category="Appetizers">
    <img src="images/item_placeholder.png" alt="Boneless wings and Fries">
    <h3>Boneless wings and Fries</h3>
    <p>6 boneless wings and fries, default no sauce, "add to cart and modify" to add a sauce</p>
    <p>Price: $8.00</p><div><button class="add-to-cart-button-no-mod" data-product-id="64">Add to Cart</button></br></br><button class="add-to-cart-button" data-product-id="64">Add to Cart and Modify</button></div>
        </div><div class="product" data-product-id="65" data-product-category="Appetizers">
    <img src="images/food/mozzsticks.jpg" alt="Mozzarella sticks">
    <h3>Mozzarella sticks</h3>
    <p>Mozzarella sticks</p>
    <p>Price: $5.00</p><div><button class="add-to-cart-button-no-mod" data-product-id="65">Add to Cart</button></br></br><button class="add-to-cart-button" data-product-id="65">Add to Cart and Modify</button></div>
        </div><div class="product" data-product-id="67" data-product-category="Appetizers">
    <img src="images/food/pretzelbites.jpg" alt="Pretzel bites">
    <h3>Pretzel bites</h3>
    <p>pretzel bites with a sauce</p>
    <p>Price: $5.80</p><div><button class="add-to-cart-button-no-mod" data-product-id="67">Add to Cart</button></br></br><button class="add-to-cart-button" data-product-id="67">Add to Cart and Modify</button></div>
        </div><div class="product" data-product-id="68" data-product-category="Appetizers">
    <img src="images/food/bonelesswings.jpg" alt="Boneless wings">
    <h3>Boneless wings</h3>
    <p>6 chicken tenders, Air fried, no oils.</p>
    <p>Price: $7.00</p><div><button class="add-to-cart-button-no-mod" data-product-id="68">Add to Cart</button></br></br><button class="add-to-cart-button" data-product-id="68">Add to Cart and Modify</button></div>
        </div><div class="product" data-product-id="69" data-product-category="Appetizers">
    <img src="images/food/HouseMarinara.jpg" alt="side of sauce">
    <h3>side of sauce</h3>
    <p>Your choice of sauce in a 2oz cup, if you do not modify it will be "House Marinara"</p>
    <p>Price: $0.75</p><div><button class="add-to-cart-button-no-mod" data-product-id="69">Add to Cart</button></br></br><button class="add-to-cart-button" data-product-id="69">Add to Cart and Modify</button></div>
        </div><div class="product" data-product-id="70" data-product-category="Appetizers">
    <img src="images/item_placeholder.png" alt="onion rings">
    <h3>onion rings</h3>
    <p>Onion Rings - Air fried, no oils</p>
    <p>Price: $4.00</p><div><button class="add-to-cart-button-no-mod" data-product-id="70">Add to Cart</button></br></br><button class="add-to-cart-button" data-product-id="70">Add to Cart and Modify</button></div>
        </div><div class="product" data-product-id="72" data-product-category="Breakfast">
    <img src="images/item_placeholder.png" alt="Maple Bacon Breakfast Delight">
    <h3>Maple Bacon Breakfast Delight</h3>
    <p>Crispy bacon strips, fried egg, sausage, and a drizzle of maple syrup</p>
    <p>Price: $7.67</p><div><button class="add-to-cart-button-no-mod" data-product-id="72">Add to Cart</button></br></br><button class="add-to-cart-button" data-product-id="72">Add to Cart and Modify</button></div>
        </div><div class="product" data-product-id="73" data-product-category="Breakfast">
    <img src="images/food/SEC.jpg" alt="egg and cheese brioche">
    <h3>egg and cheese brioche</h3>
    <p>Egg and cheese on a brioche bun</p>
    <p>Price: $5.00</p><div><button class="add-to-cart-button-no-mod" data-product-id="73">Add to Cart</button></br></br><button class="add-to-cart-button" data-product-id="73">Add to Cart and Modify</button></div>
        </div><div class="product" data-product-id="74" data-product-category="Melted Favorites">
    <img src="images/food/2xgrilledcheese.webp" alt="Grilled Cheese 2x">
    <h3>Grilled Cheese 2x</h3>
    <p>2 grilled cheese</p>
    <p>Price: $7.00</p><div><button class="add-to-cart-button-no-mod" data-product-id="74">Add to Cart</button></div>
        </div><div class="product" data-product-id="75" data-product-category="Melted Favorites">
    <img src="images/food/grilledcheese.jpg" alt="grilled cheese">
    <h3>grilled cheese</h3>
    <p>A grilled cheese made to perfection with brioche and american cheese</p>
    <p>Price: $4.00</p><div><button class="add-to-cart-button-no-mod" data-product-id="75">Add to Cart</button></div>
        </div><div class="product" data-product-id="76" data-product-category="Pizza">
    <img src="images/item_placeholder.png" alt="Pizza - 12" - custom">
    <h3>Pizza - 12" - custom</h3>
    <p>12 inch round artisan American pizza
Add toppings from the add to cart and modify to customize</p>
    <p>Price: $15.50</p><div><button class="add-to-cart-button-no-mod" data-product-id="76">Add to Cart</button></br></br><button class="add-to-cart-button" data-product-id="76">Add to Cart and Modify</button></div>
        </div><div class="product" data-product-id="77" data-product-category="Pizza">
    <img src="images/food/pizzabites.jpg" alt="Pizza Pull-aparts">
    <h3>Pizza Pull-aparts</h3>
    <p>Your choice of pepperoni, sausage or both</p>
    <p>Price: $7.00</p><div><button class="add-to-cart-button-no-mod" data-product-id="77">Add to Cart</button></br></br><button class="add-to-cart-button" data-product-id="77">Add to Cart and Modify</button></div>
        </div><div class="product" data-product-id="78" data-product-category="Pizza">
    <img src="images/item_placeholder.png" alt="spicy sausage pizza 12"">
    <h3>spicy sausage pizza 12"</h3>
    <p>12 inch Italian sausage pizza with spicy sriracha drizzle</p>
    <p>Price: $15.00</p><div><button class="add-to-cart-button-no-mod" data-product-id="78">Add to Cart</button></br></br><button class="add-to-cart-button" data-product-id="78">Add to Cart and Modify</button></div>
        </div><div class="product" data-product-id="79" data-product-category="Pizza">
    <img src="images/item_placeholder.png" alt="sausage pizza 12"">
    <h3>sausage pizza 12"</h3>
    <p>12 inch Italian sausage pizza</p>
    <p>Price: $14.50</p><div><button class="add-to-cart-button-no-mod" data-product-id="79">Add to Cart</button></br></br><button class="add-to-cart-button" data-product-id="79">Add to Cart and Modify</button></div>
        </div><div class="product" data-product-id="80" data-product-category="Pizza">
    <img src="images/food/peppizza.jpg" alt="Pepperoni pizza 12"">
    <h3>Pepperoni pizza 12"</h3>
    <p>12 inch Pepperoni pizza</p>
    <p>Price: $14.00</p><div><button class="add-to-cart-button-no-mod" data-product-id="80">Add to Cart</button></br></br><button class="add-to-cart-button" data-product-id="80">Add to Cart and Modify</button></div>
        </div><div class="product" data-product-id="81" data-product-category="Pizza">
    <img src="images/item_placeholder.png" alt="cheese pizza 12"">
    <h3>cheese pizza 12"</h3>
    <p>12 inch Cheese pizza</p>
    <p>Price: $12.00</p><div><button class="add-to-cart-button-no-mod" data-product-id="81">Add to Cart</button></br></br><button class="add-to-cart-button" data-product-id="81">Add to Cart and Modify</button></div>
        </div><div class="product" data-product-id="84" data-product-category="Baked">
    <img src="images/item_placeholder.png" alt="Chocolate chip cookie">
    <h3>Chocolate chip cookie</h3>
    <p>Two chocolate chip cookies</p>
    <p>Price: $3.00</p><div><button class="add-to-cart-button-no-mod" data-product-id="84">Add to Cart</button></div>
        </div><div class="product" data-product-id="85" data-product-category="Baked">
    <img src="images/item_placeholder.png" alt="White chocolate macadamia cookie">
    <h3>White chocolate macadamia cookie</h3>
    <p>Two white chocolate macadamia cookies</p>
    <p>Price: $3.00</p><div><button class="add-to-cart-button-no-mod" data-product-id="85">Add to Cart</button></div>
        </div><div class="product" data-product-id="86" data-product-category="Appetizers">
    <img src="images/item_placeholder.png" alt="fries">
    <h3>fries</h3>
    <p>Fries with special seasoning</p>
    <p>Price: $4.00</p><div><button class="add-to-cart-button-no-mod" data-product-id="86">Add to Cart</button></div>
        </div><div class="product" data-product-id="87" data-product-category="Soup">
    <img src="images/food/tombas.jpg" alt="tomato basil soup">
    <h3>tomato basil soup</h3>
    <p>A bowl of tomato basil soup</p>
    <p>Price: $4.32</p><div><button class="add-to-cart-button-no-mod" data-product-id="87">Add to Cart</button></div>
        </div><div class="product" data-product-id="90" data-product-category="Pizza">
    <img src="images/item_placeholder.png" alt="Pizza - 12" - BBQ chicken">
    <h3>Pizza - 12" - BBQ chicken</h3>
    <p>12 inch round artisan American pizza
Barbeque sauce drizzled over a 12 inch pizza topped with chunks of chicken, crumbled bacon and red onions.</p>
    <p>Price: $15.50</p><div><button class="add-to-cart-button-no-mod" data-product-id="90">Add to Cart</button></div>
        </div><div class="product" data-product-id="91" data-product-category="Pizza">
    <img src="images/item_placeholder.png" alt="Pizza - 12" - Chicken bacon ranch">
    <h3>Pizza - 12" - Chicken bacon ranch</h3>
    <p>12 inch round artisan American pizza
Ranch drizzled over a 12 inch pizza topped with chunks of chicken and crumbled bacon</p>
    <p>Price: $15.50</p><div><button class="add-to-cart-button-no-mod" data-product-id="91">Add to Cart</button></div>
        </div><div class="product" data-product-id="92" data-product-category="Pizza">
    <img src="images/item_placeholder.png" alt="Pizza - 12" - Buffalo chicken">
    <h3>Pizza - 12" - Buffalo chicken</h3>
    <p>12 inch round artisan American pizza
Buffalo sauce drizzled over a 12 inch pizza topped with chunks of chicken and crumbled bacon</p>
    <p>Price: $15.50</p><div><button class="add-to-cart-button-no-mod" data-product-id="92">Add to Cart</button></div>
        </div><div class="product" data-product-id="93" data-product-category="Appetizers">
    <img src="images/food/1pretz.png" alt="Pretzel - 8 inch stick">
    <h3>Pretzel - 8 inch stick</h3>
    <p>1 8 inch pretzel stick with side of nacho or white queso sauce</p>
    <p>Price: $3.00</p><div><button class="add-to-cart-button-no-mod" data-product-id="93">Add to Cart</button></br></br><button class="add-to-cart-button" data-product-id="93">Add to Cart and Modify</button></div>
        </div><div class="product" data-product-id="94" data-product-category="Appetizers">
    <img src="images/food/2pretz.png" alt="Pretzel - 8 inch stick x2">
    <h3>Pretzel - 8 inch stick x2</h3>
    <p>2 8 inch pretzel sticks with sides of nacho or white queso sauces</p>
    <p>Price: $5.00</p><div><button class="add-to-cart-button-no-mod" data-product-id="94">Add to Cart</button></br></br><button class="add-to-cart-button" data-product-id="94">Add to Cart and Modify</button></div>
        </div><div class="product" data-product-id="95" data-product-category="Deserts">
    <img src="images/item_placeholder.png" alt="Raspberry cheesecake 1oz">
    <h3>Raspberry cheesecake 1oz</h3>
    <p>1oz cube of raspberry cheesecake with whipped topping</p>
    <p>Price: $3.00</p><div><button class="add-to-cart-button-no-mod" data-product-id="95">Add to Cart</button></div>
        </div><div class="product" data-product-id="96" data-product-category="Deserts">
    <img src="images/item_placeholder.png" alt="Raspberry cheesecake 1oz x2">
    <h3>Raspberry cheesecake 1oz x2</h3>
    <p>2 - 1oz cube of raspberry cheesecake with whipped topping</p>
    <p>Price: $5.00</p><div><button class="add-to-cart-button-no-mod" data-product-id="96">Add to Cart</button></div>
        </div><script>
    // Assign PHP $allProducts array to JavaScript allProducts variable
    allProducts = {"62":{"id":"62","name":"Grilled Cheese and Fries","price":"5.00","additionalPoints":"0","description":"Grilled cheese and fries","image_url":"images\/item_placeholder.png","maketime":"5","category":"Sandwiches","subcat":"","local":"1","parent_id":null,"origincountry":"USA","instock":"1","instockcount":"10","discount":"0","ingredient_count":"4"},"63":{"id":"63","name":"Grilled Cheese and Soup","price":"7.00","additionalPoints":"0","description":"Grilled cheese and tomato basil soup","image_url":"images\/item_placeholder.png","maketime":"5","category":"Sandwiches","subcat":"","local":"1","parent_id":null,"origincountry":"USA","instock":"1","instockcount":"10","discount":"0","ingredient_count":"4"},"64":{"id":"64","name":"Boneless wings and Fries","price":"8.00","additionalPoints":"0","description":"6 boneless wings and fries, default no sauce, \"add to cart and modify\" to add a sauce","image_url":"images\/item_placeholder.png","maketime":"5","category":"Appetizers","subcat":"","local":"1","parent_id":null,"origincountry":"USA","instock":"1","instockcount":"10","discount":"0","ingredient_count":"8"},"65":{"id":"65","name":"Mozzarella sticks","price":"5.00","additionalPoints":"0","description":"Mozzarella sticks","image_url":"images\/food\/mozzsticks.jpg","maketime":"5","category":"Appetizers","subcat":"","local":"1","parent_id":null,"origincountry":"USA","instock":"1","instockcount":"10","discount":"0","ingredient_count":"4"},"67":{"id":"67","name":"Pretzel bites","price":"5.80","additionalPoints":"0","description":"pretzel bites with a sauce","image_url":"images\/food\/pretzelbites.jpg","maketime":"5","category":"Appetizers","subcat":"","local":"1","parent_id":null,"origincountry":"USA","instock":"1","instockcount":"10","discount":"0","ingredient_count":"3"},"68":{"id":"68","name":"Boneless wings","price":"7.00","additionalPoints":"0","description":"6 chicken tenders, Air fried, no oils.","image_url":"images\/food\/bonelesswings.jpg","maketime":"5","category":"Appetizers","subcat":"","local":"1","parent_id":null,"origincountry":"USA","instock":"1","instockcount":"10","discount":"0","ingredient_count":"6"},"69":{"id":"69","name":"side of sauce","price":"0.75","additionalPoints":"0","description":"Your choice of sauce in a 2oz cup, if you do not modify it will be \"House Marinara\"","image_url":"images\/food\/HouseMarinara.jpg","maketime":"5","category":"Appetizers","subcat":"","local":"1","parent_id":null,"origincountry":"USA","instock":"1","instockcount":"10","discount":"0","ingredient_count":"5"},"70":{"id":"70","name":"onion rings","price":"4.00","additionalPoints":"0","description":"Onion Rings - Air fried, no oils","image_url":"images\/item_placeholder.png","maketime":"5","category":"Appetizers","subcat":"","local":"1","parent_id":null,"origincountry":"USA","instock":"1","instockcount":"10","discount":"0","ingredient_count":"3"},"72":{"id":"72","name":"Maple Bacon Breakfast Delight","price":"7.67","additionalPoints":"0","description":"Crispy bacon strips, fried egg, sausage, and a drizzle of maple syrup","image_url":"images\/item_placeholder.png","maketime":"5","category":"Breakfast","subcat":"","local":"1","parent_id":null,"origincountry":"USA","instock":"1","instockcount":"10","discount":"0","ingredient_count":"3"},"73":{"id":"73","name":"egg and cheese brioche","price":"5.00","additionalPoints":"0","description":"Egg and cheese on a brioche bun","image_url":"images\/food\/SEC.jpg","maketime":"5","category":"Breakfast","subcat":"","local":"1","parent_id":null,"origincountry":"USA","instock":"1","instockcount":"10","discount":"0","ingredient_count":"4"},"74":{"id":"74","name":"Grilled Cheese 2x","price":"7.00","additionalPoints":"0","description":"2 grilled cheese","image_url":"images\/food\/2xgrilledcheese.webp","maketime":"5","category":"Melted Favorites","subcat":"","local":"1","parent_id":null,"origincountry":"USA","instock":"1","instockcount":"10","discount":"0","ingredient_count":"0"},"75":{"id":"75","name":"grilled cheese","price":"4.00","additionalPoints":"0","description":"A grilled cheese made to perfection with brioche and american cheese","image_url":"images\/food\/grilledcheese.jpg","maketime":"5","category":"Melted Favorites","subcat":"","local":"1","parent_id":null,"origincountry":"USA","instock":"1","instockcount":"10","discount":"0","ingredient_count":"0"},"76":{"id":"76","name":"Pizza - 12\" - custom","price":"15.50","additionalPoints":"0","description":"12 inch round artisan American pizza\nAdd toppings from the add to cart and modify to customize","image_url":"images\/item_placeholder.png","maketime":"5","category":"Pizza","subcat":"","local":"1","parent_id":null,"origincountry":"USA","instock":"1","instockcount":"10","discount":"0","ingredient_count":"9"},"77":{"id":"77","name":"Pizza Pull-aparts","price":"7.00","additionalPoints":"0","description":"Your choice of pepperoni, sausage or both","image_url":"images\/food\/pizzabites.jpg","maketime":"5","category":"Pizza","subcat":"","local":"1","parent_id":null,"origincountry":"USA","instock":"1","instockcount":"10","discount":"0","ingredient_count":"5"},"78":{"id":"78","name":"spicy sausage pizza 12\"","price":"15.00","additionalPoints":"0","description":"12 inch Italian sausage pizza with spicy sriracha drizzle","image_url":"images\/item_placeholder.png","maketime":"5","category":"Pizza","subcat":"","local":"1","parent_id":null,"origincountry":"USA","instock":"1","instockcount":"10","discount":"0","ingredient_count":"4"},"79":{"id":"79","name":"sausage pizza 12\"","price":"14.50","additionalPoints":"0","description":"12 inch Italian sausage pizza","image_url":"images\/item_placeholder.png","maketime":"5","category":"Pizza","subcat":"","local":"1","parent_id":null,"origincountry":"USA","instock":"1","instockcount":"10","discount":"0","ingredient_count":"4"},"80":{"id":"80","name":"Pepperoni pizza 12\"","price":"14.00","additionalPoints":"0","description":"12 inch Pepperoni pizza","image_url":"images\/food\/peppizza.jpg","maketime":"5","category":"Pizza","subcat":"","local":"1","parent_id":null,"origincountry":"USA","instock":"1","instockcount":"10","discount":"0","ingredient_count":"5"},"81":{"id":"81","name":"cheese pizza 12\"","price":"12.00","additionalPoints":"0","description":"12 inch Cheese pizza","image_url":"images\/item_placeholder.png","maketime":"5","category":"Pizza","subcat":"","local":"1","parent_id":null,"origincountry":"USA","instock":"1","instockcount":"10","discount":"0","ingredient_count":"3"},"84":{"id":"84","name":"Chocolate chip cookie","price":"3.00","additionalPoints":"0","description":"Two chocolate chip cookies","image_url":"images\/item_placeholder.png","maketime":"5","category":"Baked","subcat":"","local":"1","parent_id":null,"origincountry":"USA","instock":"1","instockcount":"10","discount":"0","ingredient_count":"0"},"85":{"id":"85","name":"White chocolate macadamia cookie","price":"3.00","additionalPoints":"0","description":"Two white chocolate macadamia cookies","image_url":"images\/item_placeholder.png","maketime":"5","category":"Baked","subcat":"","local":"1","parent_id":null,"origincountry":"USA","instock":"1","instockcount":"10","discount":"0","ingredient_count":"0"},"86":{"id":"86","name":"fries","price":"4.00","additionalPoints":"0","description":"Fries with special seasoning","image_url":"images\/item_placeholder.png","maketime":"5","category":"Appetizers","subcat":"","local":"1","parent_id":null,"origincountry":"USA","instock":"1","instockcount":"10","discount":"0","ingredient_count":"0"},"87":{"id":"87","name":"tomato basil soup","price":"4.32","additionalPoints":"0","description":"A bowl of tomato basil soup","image_url":"images\/food\/tombas.jpg","maketime":"5","category":"Soup","subcat":"","local":"1","parent_id":null,"origincountry":"USA","instock":"1","instockcount":"10","discount":"0","ingredient_count":"0"},"90":{"id":"90","name":"Pizza - 12\" - BBQ chicken","price":"15.50","additionalPoints":"0","description":"12 inch round artisan American pizza\r\nBarbeque sauce drizzled over a 12 inch pizza topped with chunks of chicken, crumbled bacon and red onions.","image_url":"images\/item_placeholder.png","maketime":"5","category":"Pizza","subcat":"","local":"1","parent_id":null,"origincountry":"USA","instock":"1","instockcount":"10","discount":"0","ingredient_count":"0"},"91":{"id":"91","name":"Pizza - 12\" - Chicken bacon ranch","price":"15.50","additionalPoints":"0","description":"12 inch round artisan American pizza\r\nRanch drizzled over a 12 inch pizza topped with chunks of chicken and crumbled bacon","image_url":"images\/item_placeholder.png","maketime":"5","category":"Pizza","subcat":"","local":"1","parent_id":null,"origincountry":"USA","instock":"1","instockcount":"10","discount":"0","ingredient_count":"0"},"92":{"id":"92","name":"Pizza - 12\" - Buffalo chicken","price":"15.50","additionalPoints":"0","description":"12 inch round artisan American pizza\r\nBuffalo sauce drizzled over a 12 inch pizza topped with chunks of chicken and crumbled bacon","image_url":"images\/item_placeholder.png","maketime":"5","category":"Pizza","subcat":"","local":"1","parent_id":null,"origincountry":"USA","instock":"1","instockcount":"10","discount":"0","ingredient_count":"0"},"93":{"id":"93","name":"Pretzel - 8 inch stick","price":"3.00","additionalPoints":"0","description":"1 8 inch pretzel stick with side of nacho or white queso sauce","image_url":"images\/food\/1pretz.png","maketime":"6","category":"Appetizers","subcat":"","local":"1","parent_id":null,"origincountry":"USA","instock":"1","instockcount":"10","discount":"0","ingredient_count":"2"},"94":{"id":"94","name":"Pretzel - 8 inch stick x2","price":"5.00","additionalPoints":"0","description":"2 8 inch pretzel sticks with sides of nacho or white queso sauces","image_url":"images\/food\/2pretz.png","maketime":"6","category":"Appetizers","subcat":"","local":"1","parent_id":null,"origincountry":"USA","instock":"1","instockcount":"10","discount":"0","ingredient_count":"2"},"95":{"id":"95","name":"Raspberry cheesecake 1oz","price":"3.00","additionalPoints":"0","description":"1oz cube of raspberry cheesecake with whipped topping","image_url":"images\/item_placeholder.png","maketime":"2","category":"Deserts","subcat":"","local":"1","parent_id":null,"origincountry":"USA","instock":"1","instockcount":"10","discount":"0","ingredient_count":"0"},"96":{"id":"96","name":"Raspberry cheesecake 1oz x2","price":"5.00","additionalPoints":"0","description":"2 - 1oz cube of raspberry cheesecake with whipped topping","image_url":"images\/item_placeholder.png","maketime":"2","category":"Deserts","subcat":"","local":"1","parent_id":null,"origincountry":"USA","instock":"1","instockcount":"10","discount":"0","ingredient_count":"0"}};
</script>
</div>

    <!-- Navigation Menu (could be part of a separate header/footer template) -->
    <nav>
        <ul>
            <li><a href="admin.php">Admin Interface</a></li>
            <li><a href="customer.php">Customer Interface</a></li>
            <li><a href="kitchen.php">Kitchen Interface</a></li>
        </ul>
    </nav>
    

<script src="/api/notify_kitchen.js"></script>
<script src="/api/clear_cart.php"></script>
<script>
// Declare customerFirstName and customerLastName at a higher scope
let customerFirstName = '';
let customerLastName = '';


document.addEventListener('DOMContentLoaded', function() {
    const products = document.querySelectorAll('.product');
    const categoryFilter = document.getElementById('category-filter');
    const searchInput = document.getElementById('search-input');

    // Add event listener for category filter
    categoryFilter.addEventListener('change', function () {
        const selectedCategory = this.value;
        filterProducts(selectedCategory, searchInput.value);
    });

    // Add event listener for search input
    searchInput.addEventListener('input', function () {
        const searchText = this.value;
        filterProducts(categoryFilter.value, searchText);
    });

    // Function to filter products based on category and search text
function filterProducts(category, searchText) {
    let visibleProducts = [];
    products.forEach(product => {
        const productId = product.getAttribute('data-product-id');
        const productCategory = getProductCategory(productId); // Implement this function
        const productName = getProductTitle(productId); // Implement this function

        // Check if the product matches the category and search text
        const categoryMatch = category === '' || category === productCategory;
        const textMatch = productName.toLowerCase().includes(searchText.toLowerCase());

        // Show/hide the product based on the filter conditions
        if (categoryMatch && textMatch) {
            product.style.display = 'block';
            visibleProducts.push(product);
        } else {
            product.style.display = 'none';
        }
    });

}





// Clear cart button functionality
const clearCartButton = document.querySelector('.clear-cart-button');
clearCartButton.addEventListener('click', function () {
    clearCart();             // Call the clearCart function to clear session data
    updateItemsDisplay();    // Update the display to reflect an empty cart
    updateCartItems();       // Update the UI for the cart section (e.g., reset totals)
});




// Attach event listener to the "Submit Order" button
const submitOrderButton = document.querySelector('.submit-order-button');
submitOrderButton.addEventListener('click', function () {
    // Disable the button to prevent multiple clicks
    //submitOrderButton.disabled = true;
    confirmOrderSubmission();
});



// Function to update cart debug info
function updateCartDebugInfo() {
    if (document.getElementById('cart-output')) { // Check if debugging is enabled
        document.getElementById('cart-output').innerText = JSON.stringify(items, null, 2);
    }
}


// cart functionality 2
const addToCartButtons = document.querySelectorAll('.add-to-cart-button');
const addToCartButtonNoMod = document.querySelectorAll('.add-to-cart-button-no-mod');

// Inside your code where you're attaching event listeners to the "Add to Cart" buttons
addToCartButtons.forEach(button => {
    button.addEventListener('click', async function (event) {
        event.preventDefault();
        const productId = this.getAttribute('data-product-id');
        const ingredients = await getProductIngredients(productId);

        updateIngredientModal(productId, ingredients);
        
        const ingredientModal = new bootstrap.Modal(document.getElementById('ingredientModal'));
        ingredientModal.show();

        document.getElementById('add-to-cart-with-ingredients').onclick = function() {
            // Get value from the additional modification text input
            const additionalModificationText = document.getElementById('additional-modification-text').value;

            const { selectedIngredients, deselectedIngredients } = getSelectedIngredients();
            console.log(document.getElementById('additional-modification-text'))
            const additionalModificationRequest = document.getElementById('additional-modification-text').value.trim();

            const deselectedNormal = deselectedIngredients.normal.map(ingredient => `- ${ingredient}`).join(', ');
            const selectedAddable = selectedIngredients.addable.map(ingredient => `+ ${ingredient}`).join(', ');
            // Append the additionalModificationText to the modificationRequests
        let modificationRequests = [deselectedNormal, selectedAddable].filter(str => str).join(', ');
        if (additionalModificationText) {
            modificationRequests += `${additionalModificationText}`; // Add a new line for additional requests
        }

            const existingItem = items.find(item => item.product_id === productId && item.modification_requests === modificationRequests);

            if (existingItem) {
                existingItem.quantity++;
            } else {
                items.push({ product_id: productId, modification_requests: modificationRequests, quantity: 1 });
            }

            updateCartItems();
            updateItemsDisplay();
            updateCartDebugInfo();
            ingredientModal.hide();
        };

        const productDiv = button.closest('.product');
        animateFlyToCart(event, productDiv, cartButton);
    });
});

addToCartButtonNoMod.forEach(button => {
    button.addEventListener('click', function (event) {
        event.preventDefault();
        const productId = this.getAttribute('data-product-id');
        // Default modificationRequests to "no modification" if it's empty or null
        modificationRequests = "-";

// Check if the same product with the same modification requests is already in the items array
    const existingItem = items.find(item => item.product_id === productId && item.modification_requests === modificationRequests);

    if (existingItem) {
        // If the item already exists, increment the quantity
        existingItem.quantity++;
        
        // Update the cart UI or provide feedback to the user
        updateCartItems(); // Call the function to update cart items
        updateItemsDisplay(); // Call the function to update the items display
    } else {
        // If not, add a new entry to the items array
        items.push({ product_id: productId, modification_requests: modificationRequests, quantity: 1 });
    }
        
        // Update the cart UI or provide feedback to the user
        updateCartItems(); // Call the function to update cart items
        updateItemsDisplay(); // Call the function to update the items display
        
        const productDiv = this.closest('.product');
        animateFlyToCart(event, productDiv, cartButton,-100, -80);
        
    });
});






// Toggle cart dropdown visibility
const cartButton = document.querySelector('.cart-button');
const cartTotal = document.querySelector('.cart-total');
const buttontotal = document.querySelector('.buttontotal'); 
const overlay = document.querySelector('.overlay');
const cartDropdown = document.querySelector('.cart-dropdown');
const body = document.querySelector('.body');
buttontotal.textContent = 'Total: $0';


cartButton.addEventListener('click', function () {
    if (cartDropdown.classList.contains('active')) {
        // If the cart is already open, close it
        overlay.classList.remove('active');
        cartDropdown.classList.remove('active');
        cartButton.innerHTML = 'View Cart<p class="buttontotal"></p>';
        overlay.style.display = 'none';
        document.body.style.overflow = 'auto';
        updateCartItems();
        
    } else {
        // If the cart is closed, open it
        overlay.classList.add('active');
        cartDropdown.classList.add('active');
        document.body.style.overflow = 'hidden'; 
        cartButton.innerHTML = 'Close Cart<p class="buttontotal"></p>';
        updateCartItems();
        overlay.style.display = 'block';
    }
});

const featuredProducts = document.querySelectorAll('.featured-product');
featuredProducts.forEach(product => {
  product.addEventListener('click', function() {
    const productId = this.getAttribute('data-product-id'); // Make sure to add data-product-id in your PHP when you create the div
    showFeaturedProduct(productId);

    // Attach an event listener to the newly created "Add to Cart" button
    const newButton = document.querySelector('#featured-left .add-to-cart-button-no-mod');
    if (newButton) {
          newButton.addEventListener('click', function (event) {
        event.preventDefault();
        const productId = this.getAttribute('data-product-id');
        // Default modificationRequests to "no modification" if it's empty or null
        modificationRequests = "-";

// Check if the same product with the same modification requests is already in the items array
    const existingItem = items.find(item => item.product_id === productId && item.modification_requests === modificationRequests);

    if (existingItem) {
        // If the item already exists, increment the quantity
        existingItem.quantity++;
        
        // Update the cart UI or provide feedback to the user
        updateCartItems(); // Call the function to update cart items
        updateItemsDisplay(); // Call the function to update the items display
    } else {
        // If not, add a new entry to the items array
        items.push({ product_id: productId, modification_requests: modificationRequests, quantity: 1 });
    }
        
        // Update the cart UI or provide feedback to the user
        updateCartItems(); // Call the function to update cart items
        updateItemsDisplay(); // Call the function to update the items display
        
        const productDiv = document.getElementById('featured-left');
        animateFlyToCart(event, productDiv, cartButton, -460, -80);
    });

    
  };
});


});


function sortProductsByPrice(products) {
    return Array.from(products).sort((a, b) => {
        const priceA = parseFloat(a.querySelector('p:nth-child(4)').textContent.replace(/[^0-9.]/g, ''));
        const priceB = parseFloat(b.querySelector('p:nth-child(4)').textContent.replace(/[^0-9.]/g, ''));
        return priceA - priceB;
    });
}

// Sort the featuredProductDetails array
if (featuredProductDetails && featuredProductDetails.length > 0) {
    featuredProductDetails.sort((a, b) => a.position - b.position);
}

// Function to show a featured product in the left column
function showFeaturedProduct(productId) {
    const product = featuredProductDetails.find(p => p.id === productId);
    if (product) {
        const featuredLeft = document.getElementById('featured-left');
        let discountInfo = product.discount ? `<p>Discount: ${product.discount}%</p>` : "";
        featuredLeft.innerHTML = `
            <img src="${product.image_url}" alt="${product.name}">
            <div id="featuredleftdata"><h3>${product.name}</h3>
            <p>${product.description}</p>
            <p>Price: $${product.price}</p>
            ${discountInfo}
            <button class="add-to-cart-button-no-mod" data-product-id="${product.id}">Add to Cart</button>
            </div>
        `;
    }

}
        
    // Automatically load the first featured product to the featured-left
    const firstFeaturedProduct = document.querySelector('#featured-right .featured-product');
    if (firstFeaturedProduct) {
        const firstProductId = firstFeaturedProduct.getAttribute('data-product-id');
        showFeaturedProduct(firstProductId);
    }

});


</script>

<script>const customerMd5Hash = '36d898a67f117a6e4591cfd457ae813e';</script>

</body>
</html>