Page

<div id="box-calculator" style="margin: 20px; padding: 20px; background-color: #F5F5F5; border: 1px solid #003366; border-radius: 8px; font-family: Arial, sans-serif; color: #333333;">
    <h4 style="color: #003366;">Box Calculator</h4>
    <label for="totalSqFt">Enter Total Square Footage:</label><br>
    <input type="number" id="totalSqFt" placeholder="e.g., 300" min="0" style="margin: 5px 0 15px 0; padding: 8px; width: 100%; border: 1px solid #ccc; border-radius: 4px;"><br>

    <p>Square Feet per Box: <span id="sqFtPerBox">{{ product.metafields.custom.box_size }}</span></p>
    <p>Price per Square Foot: $<span id="pricePerSqFt">{{ product.metafields.custom.price_per_sqft }}</span></p>

    <label>
        <input type="checkbox" id="addWaste" style="margin-right: 5px;">
        Add 10% for waste and cutting
    </label><br><br>

    <label for="email">Enter Your Email:</label><br>
    <input type="email" id="email" placeholder="you@example.com" style="margin: 5px 0 15px 0; padding: 8px; width: 100%; border: 1px solid #ccc; border-radius: 4px;"><br>

    <button onclick="calculateAndSendQuote()" style="background-color: #003366; color: #ffffff; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer;">Calculate & Send Quote</button>

    <p id="result" style="margin-top: 15px; font-weight: bold;"></p>
</div>

<script src="https://cdn.emailjs.com/dist/email.min.js"></script>
<script>
(function(){
    emailjs.init("YOUR_PUBLIC_API_KEY"); // Replace with your EmailJS public API key
})();

function calculateAndSendQuote() {
    const totalSqFt = parseFloat(document.getElementById("totalSqFt").value);
    const sqFtPerBox = parseFloat(document.getElementById("sqFtPerBox").innerText);
    const pricePerSqFt = parseFloat(document.getElementById("pricePerSqFt").innerText);
    const email = document.getElementById("email").value;
    const addWaste = document.getElementById("addWaste").checked;

    if (isNaN(totalSqFt) || totalSqFt <= 0 || !email) {
        document.getElementById("result").innerText = "Please enter valid square footage and email.";
        return;
    }

    // Adjust for waste and cutting if checkbox is checked
    let adjustedSqFt = totalSqFt;
    if (addWaste) {
        adjustedSqFt = totalSqFt * 1.10; // Adding 10%
    }

    const boxes = Math.ceil(adjustedSqFt / sqFtPerBox);
    const totalCost = adjustedSqFt * pricePerSqFt;

    const quoteMessage = `You will need ${boxes} box(es) of flooring. Total cost: $${totalCost.toFixed(2)}.`;

    document.getElementById("result").innerText = quoteMessage;

    // Send the email using EmailJS
    const templateParams = {
        user_email: email,
        box_count: boxes,
        total_cost: totalCost.toFixed(2),
        total_sqft: totalSqFt,
        adjusted_sqft: adjustedSqFt.toFixed(2),
        waste_added: addWaste ? "Yes (10%)" : "No"
    };

    emailjs.send("YOUR_SERVICE_ID", "YOUR_TEMPLATE_ID", templateParams)
        .then(function(response) {
            document.getElementById("result").innerText += "\nQuote sent to your email successfully!";
        }, function(error) {
            document.getElementById("result").innerText += "\nFailed to send the quote.";
        });
}
</script>