Embed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pricing Engine</title>
    <style>
        body { font-family: Arial, sans-serif; background-color: #f9f9f9; padding: 20px; }
        label { font-weight: bold; display: block; margin-top: 10px; }
        select, input[type="number"] { width: 100%; padding: 8px; margin-top: 5px; border: 1px solid #ccc; border-radius: 4px; }
        button { background-color: #4CAF50; color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; margin-top: 20px; }
        button:hover { background-color: #45a049; }
        #bundling-options, #final-selection, #additional-services { display: none; }
        .container { max-width: 600px; margin: 0 auto; }
        .additional-service-group {
            margin: 15px 0;
            padding: 10px;
            background-color: #fff;
            border-radius: 4px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Pricing Engine</h1>
        <label for="service">Select Service:</label>
        <select id="service" onchange="updateServiceInputs('main')">
            <option value="" disabled selected>Select Service</option>
            <option value="regular-clean">Standard Clean</option>
            <option value="deep-clean">Deep Clean</option>
            <option value="window-cleaning">Window Cleaning</option>
            <option value="solar-panel-cleaning">Solar Panel Cleaning</option>
            <option value="house-wash">Exterior House Wash</option>
            <option value="patio-wash">Patio Pressure Washing</option>
        </select>
        <div id="service-questions"></div>
        <div id="bundling-options">
            <label for="bundling">Choose a bundle option:</label>
            <select id="bundling" onchange="updateBundleOptions()">
                <option value="" disabled selected>Choose a bundle option</option>
                <option value="none">No Savings Today</option>
                <option value="2">Save 15% with 1 more service</option>
                <option value="3">Save 25% with 2 more services</option>
                <option value="4">Save 30% with 3 more services</option>
                <option value="5">Save 40% with all services</option>
            </select>
            <div id="additional-services"></div>
        </div>
        <p id="price">Price: $0.00</p>
        <div id="final-selection">
            <button onclick="buyNow()">Buy Now</button>
        </div>
    </div>

    <script>
        const PRICING = {
            'regular-clean': 0.20,
            'deep-clean': 0.28,
            'window-cleaning': 20,
            'solar-panel-cleaning': 10,
            'house-wash': 0.20,
            'patio-wash': 0.20
        };

        const DISCOUNTS = {
            '2': 0.15,
            '3': 0.25,
            '4': 0.30,
            '5': 0.40
        };

        function updateServiceInputs(context = 'main', index = null) {
            const containerId = context === 'main' ? 'service-questions' : `additional-inputs-${index}`;
            const container = document.getElementById(containerId);
            const serviceSelect = context === 'main' ? 
                document.getElementById("service") : 
                document.getElementById(`additional-service-${index}`);
            
            const service = serviceSelect.value;
            container.innerHTML = "";

            if (!service) return;

            let inputHTML = "";
            if (['regular-clean', 'deep-clean', 'house-wash', 'patio-wash'].includes(service)) {
                inputHTML += `<label for="${context}-sq-footage-${index}">Square Footage:</label>
                    <input type="number" id="${context}-sq-footage-${index}" oninput="calculatePrice()" placeholder="Enter sq ft">`;
            }
            if (service === "window-cleaning") {
                inputHTML += `<label for="${context}-window-count-${index}">Number of windows:</label>
                    <input type="number" id="${context}-window-count-${index}" oninput="calculatePrice()" placeholder="Enter window count">`;
            }
            if (service === "solar-panel-cleaning") {
                inputHTML += `<label for="${context}-solar-panel-count-${index}">Number of solar panels:</label>
                    <input type="number" id="${context}-solar-panel-count-${index}" oninput="calculatePrice()" placeholder="Enter panel count">`;
            }

            container.innerHTML = inputHTML;
            calculatePrice();
        }

        function calculatePrice() {
            let total = 0;
            const allServices = [
                { element: document.getElementById("service"), context: 'main' }
            ];

            // Get all additional services
            document.querySelectorAll('[id^="additional-service-"]').forEach((serviceSelect, index) => {
                allServices.push({
                    element: serviceSelect,
                    context: 'additional',
                    index: index + 1
                });
            });

            // Calculate price for each service
            allServices.forEach(({ element, context, index }) => {
                const service = element.value;
                if (!service) return;

                if (['regular-clean', 'deep-clean', 'house-wash', 'patio-wash'].includes(service)) {
                    const sqFootage = document.getElementById(`${context}-sq-footage-${index}`)?.value || 0;
                    total += PRICING[service] * sqFootage;
                }
                if (service === "window-cleaning") {
                    const windowCount = document.getElementById(`${context}-window-count-${index}`)?.value || 0;
                    total += PRICING[service] * windowCount;
                }
                if (service === "solar-panel-cleaning") {
                    const solarPanelCount = document.getElementById(`${context}-solar-panel-count-${index}`)?.value || 0;
                    total += PRICING[service] * solarPanelCount;
                }
            });

            // Apply discounts
            const bundle = document.getElementById("bundling").value;
            let discount = DISCOUNTS[bundle] || 0;
            const discountedTotal = total * (1 - discount);

            // Update price display
            const priceElement = document.getElementById("price");
            priceElement.innerHTML = bundle === "none" || bundle === "" ?
                `Total: $${total.toFixed(2)}` :
                `Total: <span style="text-decoration: line-through;">$${total.toFixed(2)}</span> 
                $${discountedTotal.toFixed(2)} (${(discount * 100).toFixed(0)}% off)`;

            document.getElementById("final-selection").style.display = "block";
        }

        function updateBundleOptions() {
            const bundleSelect = document.getElementById("bundling").value;
            const additionalServices = document.getElementById("additional-services");
            additionalServices.innerHTML = "";

            if (bundleSelect === "none") {
                calculatePrice();
                return;
            }

            for (let i = 1; i <= bundleSelect - 1; i++) {
                additionalServices.innerHTML += `
                    <div class="additional-service-group">
                        <label for="additional-service-${i}">Additional Service ${i}:</label>
                        <select id="additional-service-${i}" 
                                onchange="updateServiceInputs('additional', ${i})">
                            <option value="" disabled selected>Select Service</option>
                            <option value="window-cleaning">Window Cleaning</option>
                            <option value="solar-panel-cleaning">Solar Panel Cleaning</option>
                            <option value="house-wash">Exterior House Wash</option>
                            <option value="patio-wash">Patio Pressure Washing</option>
                        </select>
                        <div id="additional-inputs-${i}"></div>
                    </div>
                `;
            }
            additionalServices.style.display = "block";
            calculatePrice();
        }

        function buyNow() {
            alert("Thank you for your purchase!");
        }
    </script>
</body>
</html>