<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Sunny Clean Service Calculator</title>
    <style>
        /* Scoped styles for the calculator to prevent conflicts */
        .sunny-clean-calculator {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
            background: #f9f9f9;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        }

        .sunny-clean-calculator h2 {
            text-align: center;
            color: #2c3e50;
        }

        .sunny-clean-calculator .section {
            margin-bottom: 20px;
        }

        .sunny-clean-calculator label {
            display: block;
            margin-bottom: 5px;
            color: #34495e;
        }

        .sunny-clean-calculator select,
        .sunny-clean-calculator input[type="number"],
        .sunny-clean-calculator input[type="range"],
        .sunny-clean-calculator input[type="text"] {
            width: 100%;
            padding: 8px;
            margin-bottom: 10px;
            border: 1px solid #bdc3c7;
            border-radius: 5px;
            box-sizing: border-box;
        }

        .sunny-clean-calculator .checkbox-group,
        .sunny-clean-calculator .radio-group {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .sunny-clean-calculator .checkbox-group label,
        .sunny-clean-calculator .radio-group label {
            flex: 1 1 45%;
            display: flex;
            align-items: center;
            cursor: pointer;
        }

        .sunny-clean-calculator .checkbox-group input,
        .sunny-clean-calculator .radio-group input {
            margin-right: 8px;
        }

        .sunny-clean-calculator button {
            width: 100%;
            padding: 10px;
            background: #27ae60;
            color: #fff;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            transition: background 0.3s ease;
        }

        .sunny-clean-calculator button:hover {
            background: #219150;
        }

        .sunny-clean-calculator .result {
            display: none;
            margin-top: 20px;
            padding: 15px;
            background: #ecf0f1;
            border-radius: 5px;
            text-align: center;
            animation: fadeIn 0.5s ease-in-out;
        }

        .sunny-clean-calculator .result.show {
            display: block;
        }

        .sunny-clean-calculator .result p {
            font-size: 18px;
            color: #2c3e50;
        }

        .sunny-clean-calculator .contact-button {
            margin-top: 15px;
            padding: 10px;
            background: #2980b9;
            color: #fff;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            transition: background 0.3s ease;
        }

        .sunny-clean-calculator .contact-button:hover {
            background: #2573a6;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Responsive Design */
        @media (max-width: 800px) {
            .sunny-clean-calculator {
                padding: 15px;
            }
        }

        /* Additional Styles for Input Groups */
        .additional-input {
            margin-top: 10px;
        }

        /* Accordion Styles */
        .service-container {
            border: 1px solid #bdc3c7;
            border-radius: 5px;
            margin-bottom: 10px;
            overflow: hidden;
        }

        .service-header {
            background: #ecf0f1;
            padding: 10px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .service-header:hover {
            background: #dcdde1;
        }

        .service-content {
            display: none;
            padding: 10px;
            background: #f9f9f9;
        }

        .service-container.active .service-content {
            display: block;
        }

        .toggle-icon {
            transition: transform 0.3s ease;
        }

        .service-container.active .toggle-icon {
            transform: rotate(180deg);
        }

    </style>
</head>
<body>

<div class="sunny-clean-calculator">
    <h2>Cleaning Service Calculator</h2>
    
    <!-- Service Selection Section -->
    <div class="section">
        <label>Select Services:</label>
        <div class="checkbox-group">
            <label><input type="checkbox" class="service-checkbox" value="endOfTenancy"> End of Tenancy Cleaning</label>
            <label><input type="checkbox" class="service-checkbox" value="carpetCleaning"> Carpet Cleaning</label>
            <label><input type="checkbox" class="service-checkbox" value="buildersCleaning"> After Builders Cleaning</label>
            <label><input type="checkbox" class="service-checkbox" value="upholsteryCleaning"> Upholstery Cleaning</label>
            <label><input type="checkbox" class="service-checkbox" value="leatherCleaning"> Leather Cleaning</label>
            <label><input type="checkbox" class="service-checkbox" value="curtainsCleaning"> Curtains Cleaning</label>
            <label><input type="checkbox" class="service-checkbox" value="hardFloorCleaning"> Hard Floor Cleaning</label>
            <label><input type="checkbox" class="service-checkbox" value="domesticCleaning"> Domestic Cleaning</label>
        </div>
    </div>
    
    <!-- Dynamic Input Sections -->
    <div id="dynamic-inputs"></div>
    
    <!-- Calculate Button -->
    <button id="calculateBtn">Calculate Estimate</button>
    
    <!-- Result Section -->
    <div class="result" id="result">
        <p>Your estimated cost is: <strong id="estimate">£0</strong></p>
        <p>This is a preliminary estimate. For an accurate quote, please contact us.</p>
        <button class="contact-button" onclick="window.location.href='mailto:hello@qithub.click'">Contact Us Now</button>
    </div>
</div>

<script>
    // JavaScript for the Cleaning Service Calculator

    // Price Data
    const prices = {
        endOfTenancy: {
            studioFlat: 95,
            oneBedroom: 105,
            twoBedroom1Bath: 125,
            twoBedroom2Bath: 140,
            twoBedroomHouse1Bath: 150,
            twoBedroomHouse2Bath: 165
        },
        carpetCleaning: {
            room: { min: 25, max: 35 },
            lounge: { min: 30, max: 40 },
            stairs: { fixed: 15, perStepMin: 1.50, perStepMax: 2.00 },
            landing: { min: 5, max: 7 },
            hallway: 15,
            bathroom: 10,
            rug: { min: 15, max: 25 },
            commercial: { perSqmMin: 1.00, perSqmMax: 1.50 },
            minCharge: 50
        },
        buildersCleaning: {
            hourlyRate: 20,
            minCharge: 120
        },
        upholsteryCleaning: {
            twoSeater: 25,
            threeSeater: 35,
            armchair: 20,
            diningChair: 5,
            carUpholstery: 50,
            doubleMattress: 25,
            singleMattress: 20
        },
        leatherCleaning: {
            threeSeater: 40,
            twoSeater: 30,
            armchair: 25,
            diningChair: 10
        },
        curtainsCleaning: {
            halfLength: 25,
            fullLength: 40
        },
        hardFloorCleaning: {
            bedroom: 24,
            doubleBedroom: 29,
            lounge: 34,
            hallway: 20,
            commercial: { perSqm: 1.50 }
        },
        domesticCleaning: {
            hourlyRateMin: 12,
            hourlyRateMax: 15,
            minHours: 3,
            oneOffStart: 80
        }
    };

    // Reference to HTML elements
    const serviceCheckboxes = document.querySelectorAll('.service-checkbox');
    const dynamicInputs = document.getElementById('dynamic-inputs');
    const calculateBtn = document.getElementById('calculateBtn');
    const resultDiv = document.getElementById('result');
    const estimateSpan = document.getElementById('estimate');

    // Event Listener for Service Selection
    serviceCheckboxes.forEach(checkbox => {
        checkbox.addEventListener('change', function() {
            if(this.checked) {
                renderServiceInputs(this.value);
            } else {
                removeServiceInputs(this.value);
            }
        });
    });

    // Function to Render Inputs for Each Selected Service
    function renderServiceInputs(service) {
        // Create a container for the service inputs
        const serviceContainer = document.createElement('div');
        serviceContainer.classList.add('service-container');
        serviceContainer.id = `${service}-container`;

        // Create the header with service name and toggle icon
        const serviceHeader = document.createElement('div');
        serviceHeader.classList.add('service-header');
        serviceHeader.innerHTML = `
            <span>${formatServiceName(service)}</span>
            <span class="toggle-icon">&#9660;</span>
        `;
        serviceContainer.appendChild(serviceHeader);

        // Create the content area
        const serviceContent = document.createElement('div');
        serviceContent.classList.add('service-content');

        // Depending on the service, render the appropriate inputs
        switch(service) {
            case 'endOfTenancy':
                serviceContent.appendChild(renderEndOfTenancyInputs());
                break;
            case 'carpetCleaning':
                serviceContent.appendChild(renderCarpetCleaningInputs());
                break;
            case 'buildersCleaning':
                serviceContent.appendChild(renderBuildersCleaningInputs());
                break;
            case 'upholsteryCleaning':
                serviceContent.appendChild(renderUpholsteryCleaningInputs());
                break;
            case 'leatherCleaning':
                serviceContent.appendChild(renderLeatherCleaningInputs());
                break;
            case 'curtainsCleaning':
                serviceContent.appendChild(renderCurtainsCleaningInputs());
                break;
            case 'hardFloorCleaning':
                serviceContent.appendChild(renderHardFloorCleaningInputs());
                break;
            case 'domesticCleaning':
                serviceContent.appendChild(renderDomesticCleaningInputs());
                break;
            default:
                break;
        }

        serviceContainer.appendChild(serviceContent);
        dynamicInputs.appendChild(serviceContainer);

        // Add event listener for accordion toggle
        serviceHeader.addEventListener('click', function() {
            serviceContainer.classList.toggle('active');
        });
    }

    // Function to Remove Inputs When Service is Deselected
    function removeServiceInputs(service) {
        const serviceContainer = document.getElementById(`${service}-container`);
        if(serviceContainer) {
            dynamicInputs.removeChild(serviceContainer);
        }
    }

    // Function to Format Service Names for Display
    function formatServiceName(service) {
        const mapping = {
            endOfTenancy: 'End of Tenancy Cleaning',
            carpetCleaning: 'Carpet Cleaning',
            buildersCleaning: 'After Builders Cleaning',
            upholsteryCleaning: 'Upholstery Cleaning',
            leatherCleaning: 'Leather Cleaning',
            curtainsCleaning: 'Curtains Cleaning',
            hardFloorCleaning: 'Hard Floor Cleaning',
            domesticCleaning: 'Domestic Cleaning'
        };
        return mapping[service] || service;
    }

    // Functions to Render Inputs for Each Service
    function renderEndOfTenancyInputs() {
        const container = document.createElement('div');

        const label = document.createElement('label');
        label.textContent = 'Select Property Type:';
        const select = document.createElement('select');
        select.id = 'endOfTenancy_propertyType';
        select.innerHTML = `
            <option value="">-- Choose Property Type --</option>
            <option value="studioFlat">Studio Flat (£95)</option>
            <option value="oneBedroom">1-Bedroom House/Flat (£105)</option>
            <option value="twoBedroom1Bath">2-Bedroom Flat (1 Bathroom) (£125)</option>
            <option value="twoBedroom2Bath">2-Bedroom Flat (2 Bathrooms) (£140)</option>
            <option value="twoBedroomHouse1Bath">2-Bedroom House (1 Bathroom) (£150)</option>
            <option value="twoBedroomHouse2Bath">2-Bedroom House (2 Bathrooms) (£165)</option>
        `;
        container.appendChild(label);
        container.appendChild(select);

        return container;
    }

    function renderCarpetCleaningInputs() {
        const container = document.createElement('div');

        // Room Types
        const roomTypes = ['room', 'lounge', 'stairs', 'landing', 'hallway', 'bathroom', 'rug', 'commercial'];
        const checkboxGroup = document.createElement('div');
        checkboxGroup.classList.add('checkbox-group');

        roomTypes.forEach(type => {
            const checkboxLabel = document.createElement('label');
            checkboxLabel.innerHTML = `<input type="checkbox" class="carpet-checkbox" value="${type}"> ${formatCarpetType(type)}`;
            checkboxGroup.appendChild(checkboxLabel);
        });

        container.appendChild(checkboxGroup);

        // Additional Inputs for Stairs
        const stairsInput = document.createElement('div');
        stairsInput.id = 'carpetCleaning_stairsInputs';
        stairsInput.classList.add('additional-input');
        stairsInput.style.display = 'none';
        stairsInput.innerHTML = `
            <label for="stairsCount">Number of Stairs:</label>
            <input type="number" id="carpetCleaning_stairsCount" min="0" value="0">
        `;
        container.appendChild(stairsInput);

        // Additional Inputs for Rugs
        const rugInput = document.createElement('div');
        rugInput.id = 'carpetCleaning_rugInputs';
        rugInput.classList.add('additional-input');
        rugInput.style.display = 'none';
        rugInput.innerHTML = `
            <label for="rugCount">Number of Rugs:</label>
            <input type="number" id="carpetCleaning_rugCount" min="0" value="0">
        `;
        container.appendChild(rugInput);

        // Additional Inputs for Commercial
        const commercialInput = document.createElement('div');
        commercialInput.id = 'carpetCleaning_commercialCarpetInput';
        commercialInput.classList.add('additional-input');
        commercialInput.style.display = 'none';
        commercialInput.innerHTML = `
            <label for="commercialCarpetSqm">Area in Square Meters:</label>
            <input type="number" id="carpetCleaning_commercialCarpetSqm" min="0" value="0">
        `;
        container.appendChild(commercialInput);

        // Show/hide additional inputs based on checkbox selection
        checkboxGroup.querySelectorAll('.carpet-checkbox').forEach(checkbox => {
            checkbox.addEventListener('change', function() {
                if(this.value === 'stairs') {
                    stairsInput.style.display = this.checked ? 'block' : 'none';
                }
                if(this.value === 'rug') {
                    rugInput.style.display = this.checked ? 'block' : 'none';
                }
                if(this.value === 'commercial') {
                    commercialInput.style.display = this.checked ? 'block' : 'none';
                }
            });
        });

        return container;
    }

    function formatCarpetType(type) {
        const mapping = {
            room: 'Room (£25–£35)',
            lounge: 'Lounge (£30–£40)',
            stairs: 'Stairs (£15 or £1.50–£2.00 per step)',
            landing: 'Landing (Stairs) (£5–£7)',
            hallway: 'Hallway (£15)',
            bathroom: 'Bathroom (£10)',
            rug: 'Rug (£15–£25)',
            commercial: 'Commercial Carpet Cleaning (£1.00–£1.50 per sqm)'
        };
        return mapping[type] || type;
    }

    function renderBuildersCleaningInputs() {
        const container = document.createElement('div');

        // Number of Cleaners
        const cleanersLabel = document.createElement('label');
        cleanersLabel.textContent = 'Number of Cleaners:';
        const cleanersInput = document.createElement('input');
        cleanersInput.type = 'number';
        cleanersInput.id = 'buildersCleaning_cleaners';
        cleanersInput.min = 1;
        cleanersInput.value = 2;
        container.appendChild(cleanersLabel);
        container.appendChild(cleanersInput);

        // Number of Hours
        const hoursLabel = document.createElement('label');
        hoursLabel.textContent = 'Number of Hours:';
        const hoursInput = document.createElement('input');
        hoursInput.type = 'number';
        hoursInput.id = 'buildersCleaning_hours';
        hoursInput.min = 1;
        hoursInput.value = 3;
        container.appendChild(hoursLabel);
        container.appendChild(hoursInput);

        return container;
    }

    function renderUpholsteryCleaningInputs() {
        const container = document.createElement('div');

        const upholsteryTypes = ['twoSeater', 'threeSeater', 'armchair', 'diningChair', 'carUpholstery', 'doubleMattress', 'singleMattress'];
        const checkboxGroup = document.createElement('div');
        checkboxGroup.classList.add('checkbox-group');

        upholsteryTypes.forEach(type => {
            const checkboxLabel = document.createElement('label');
            checkboxLabel.innerHTML = `<input type="checkbox" class="upholstery-checkbox" value="${type}"> ${formatUpholsteryType(type)}`;
            checkboxGroup.appendChild(checkboxLabel);
        });

        container.appendChild(checkboxGroup);

        return container;
    }

    function formatUpholsteryType(type) {
        const mapping = {
            twoSeater: 'Two-Seater Sofa (£25)',
            threeSeater: 'Three-Seater Sofa (£35)',
            armchair: 'Armchair (£20)',
            diningChair: 'Dining Chair (From £5)',
            carUpholstery: 'Car Upholstery (£50)',
            doubleMattress: 'Double Mattress Sanitizing (£25)',
            singleMattress: 'Single Mattress Sanitizing (£20)'
        };
        return mapping[type] || type;
    }

    function renderLeatherCleaningInputs() {
        const container = document.createElement('div');

        const leatherTypes = ['threeSeater', 'twoSeater', 'armchair', 'diningChair'];
        const checkboxGroup = document.createElement('div');
        checkboxGroup.classList.add('checkbox-group');

        leatherTypes.forEach(type => {
            const checkboxLabel = document.createElement('label');
            checkboxLabel.innerHTML = `<input type="checkbox" class="leather-checkbox" value="${type}"> ${formatLeatherType(type)}`;
            checkboxGroup.appendChild(checkboxLabel);
        });

        container.appendChild(checkboxGroup);

        return container;
    }

    function formatLeatherType(type) {
        const mapping = {
            threeSeater: 'Three-Seater Sofa (£40)',
            twoSeater: 'Two-Seater Sofa (£30)',
            armchair: 'Armchair (£25)',
            diningChair: 'Dining Chair (£10)'
        };
        return mapping[type] || type;
    }

    function renderCurtainsCleaningInputs() {
        const container = document.createElement('div');

        const curtainTypes = ['halfLength', 'fullLength'];
        const radioGroup = document.createElement('div');
        radioGroup.classList.add('radio-group');

        curtainTypes.forEach(type => {
            const radioLabel = document.createElement('label');
            radioLabel.innerHTML = `<input type="radio" name="curtainsCleaning_type" value="${type}"> ${formatCurtainsType(type)}`;
            radioGroup.appendChild(radioLabel);
        });

        container.appendChild(radioGroup);

        return container;
    }

    function formatCurtainsType(type) {
        const mapping = {
            halfLength: 'Half-Length Curtains (£25)',
            fullLength: 'Full-Length Curtains (£40)'
        };
        return mapping[type] || type;
    }

    function renderHardFloorCleaningInputs() {
        const container = document.createElement('div');

        const floorTypes = ['bedroom', 'doubleBedroom', 'lounge', 'hallway', 'commercial'];
        const checkboxGroup = document.createElement('div');
        checkboxGroup.classList.add('checkbox-group');

        floorTypes.forEach(type => {
            const checkboxLabel = document.createElement('label');
            checkboxLabel.innerHTML = `<input type="checkbox" class="floor-checkbox" value="${type}"> ${formatFloorType(type)}`;
            checkboxGroup.appendChild(checkboxLabel);
        });

        container.appendChild(checkboxGroup);

        // Additional Input for Commercial Spaces
        const commercialInput = document.createElement('div');
        commercialInput.id = 'hardFloorCleaning_commercialFloorInput';
        commercialInput.classList.add('additional-input');
        commercialInput.style.display = 'none';
        commercialInput.innerHTML = `
            <label for="commercialFloorSqm">Area in Square Meters:</label>
            <input type="number" id="hardFloorCleaning_commercialFloorSqm" min="0" value="0">
        `;
        container.appendChild(commercialInput);

        // Show commercial input if selected
        checkboxGroup.querySelectorAll('.floor-checkbox').forEach(checkbox => {
            checkbox.addEventListener('change', function() {
                if(this.value === 'commercial') {
                    commercialInput.style.display = this.checked ? 'block' : 'none';
                }
            });
        });

        return container;
    }

    function formatFloorType(type) {
        const mapping = {
            bedroom: 'Bedroom (£24)',
            doubleBedroom: 'Double Bedroom (£29)',
            lounge: 'Lounge (£34)',
            hallway: 'Hallway (£20)',
            commercial: 'Commercial Spaces (£1.50 per sqm)'
        };
        return mapping[type] || type;
    }

    function renderDomesticCleaningInputs() {
        const container = document.createElement('div');

        // Hourly Rate Slider
        const rateLabel = document.createElement('label');
        rateLabel.textContent = 'Select Hourly Rate:';
        const rateSlider = document.createElement('input');
        rateSlider.type = 'range';
        rateSlider.min = prices.domesticCleaning.hourlyRateMin;
        rateSlider.max = prices.domesticCleaning.hourlyRateMax;
        rateSlider.value = prices.domesticCleaning.hourlyRateMin;
        rateSlider.id = 'domesticCleaning_hourlyRate';
        rateSlider.step = 1;
        const rateValue = document.createElement('span');
        rateValue.id = 'domesticCleaning_hourlyRateValue';
        rateValue.textContent = `£${rateSlider.value}/hour`;
        rateSlider.addEventListener('input', function() {
            rateValue.textContent = `£${this.value}/hour`;
        });
        container.appendChild(rateLabel);
        container.appendChild(rateSlider);
        container.appendChild(rateValue);

        // Number of Cleaners
        const cleanersLabel = document.createElement('label');
        cleanersLabel.textContent = 'Number of Cleaners:';
        const cleanersInput = document.createElement('input');
        cleanersInput.type = 'number';
        cleanersInput.id = 'domesticCleaning_cleaners';
        cleanersInput.min = 1;
        cleanersInput.value = 2;
        container.appendChild(cleanersLabel);
        container.appendChild(cleanersInput);

        // Number of Hours
        const hoursLabel = document.createElement('label');
        hoursLabel.textContent = `Number of Hours (Minimum ${prices.domesticCleaning.minHours} hours):`;
        const hoursInput = document.createElement('input');
        hoursInput.type = 'number';
        hoursInput.id = 'domesticCleaning_hours';
        hoursInput.min = prices.domesticCleaning.minHours;
        hoursInput.value = prices.domesticCleaning.minHours;
        container.appendChild(hoursLabel);
        container.appendChild(hoursInput);

        return container;
    }

    // Event Listener for Calculate Button
    calculateBtn.addEventListener('click', function() {
        const selectedServices = Array.from(document.querySelectorAll('.service-checkbox:checked')).map(cb => cb.value);
        if(selectedServices.length === 0) {
            alert('Please select at least one service.');
            return;
        }

        let totalEstimate = 0;
        let error = false;

        selectedServices.forEach(service => {
            switch(service) {
                case 'endOfTenancy':
                    const propertyType = document.getElementById('endOfTenancy_propertyType').value;
                    if(!propertyType) {
                        alert('Please select a property type for End of Tenancy Cleaning.');
                        error = true;
                        return;
                    }
                    totalEstimate += prices.endOfTenancy[propertyType];
                    break;
                case 'carpetCleaning':
                    const carpetSelections = Array.from(document.querySelectorAll('#carpetCleaning_container .carpet-checkbox:checked')).map(cb => cb.value);
                    if(carpetSelections.length === 0) {
                        alert('Please select at least one carpet cleaning option.');
                        error = true;
                        return;
                    }
                    let carpetEstimate = 0;
                    carpetSelections.forEach(type => {
                        if(type === 'room' || type === 'lounge' || type === 'hallway' || type === 'bathroom') {
                            const priceRange = prices.carpetCleaning[type];
                            carpetEstimate += (priceRange.min + priceRange.max) / 2;
                        } else if(type === 'stairs') {
                            const stairsCount = parseInt(document.getElementById('carpetCleaning_stairsCount').value) || 0;
                            const fixedPrice = prices.carpetCleaning.stairs.fixed;
                            const perStepMin = prices.carpetCleaning.stairs.perStepMin;
                            const perStepMax = prices.carpetCleaning.stairs.perStepMax;
                            if(stairsCount > 0) {
                                carpetEstimate += fixedPrice + ((perStepMin + perStepMax) / 2) * stairsCount;
                            } else {
                                carpetEstimate += fixedPrice;
                            }
                        } else if(type === 'rug') {
                            const rugCount = parseInt(document.getElementById('carpetCleaning_rugCount').value) || 0;
                            if(rugCount > 0) {
                                carpetEstimate += ((prices.carpetCleaning.rug.min + prices.carpetCleaning.rug.max) / 2) * rugCount;
                            }
                        } else if(type === 'commercial') {
                            const sqm = parseInt(document.getElementById('carpetCleaning_commercialCarpetSqm').value) || 0;
                            if(sqm > 0) {
                                carpetEstimate += ((prices.carpetCleaning.commercial.perSqmMin + prices.carpetCleaning.commercial.perSqmMax) / 2) * sqm;
                            }
                        }
                    });
                    if(carpetEstimate < prices.carpetCleaning.minCharge) {
                        carpetEstimate = prices.carpetCleaning.minCharge;
                    }
                    totalEstimate += carpetEstimate;
                    break;
                case 'buildersCleaning':
                    const buildersCleaners = parseInt(document.getElementById('buildersCleaning_cleaners').value) || 0;
                    const buildersHours = parseInt(document.getElementById('buildersCleaning_hours').value) || 0;
                    if(buildersCleaners <= 0 || buildersHours <= 0) {
                        alert('Please enter valid numbers for cleaners and hours in After Builders Cleaning.');
                        error = true;
                        return;
                    }
                    let buildersEstimate = buildersCleaners * buildersHours * prices.buildersCleaning.hourlyRate;
                    if(buildersEstimate < prices.buildersCleaning.minCharge) {
                        buildersEstimate = prices.buildersCleaning.minCharge;
                    }
                    totalEstimate += buildersEstimate;
                    break;
                case 'upholsteryCleaning':
                    const upholsterySelections = Array.from(document.querySelectorAll('.upholstery-checkbox:checked')).map(cb => cb.value);
                    if(upholsterySelections.length === 0) {
                        alert('Please select at least one upholstery cleaning option.');
                        error = true;
                        return;
                    }
                    upholsterySelections.forEach(type => {
                        totalEstimate += prices.upholsteryCleaning[type];
                    });
                    break;
                case 'leatherCleaning':
                    const leatherSelections = Array.from(document.querySelectorAll('.leather-checkbox:checked')).map(cb => cb.value);
                    if(leatherSelections.length === 0) {
                        alert('Please select at least one leather cleaning option.');
                        error = true;
                        return;
                    }
                    leatherSelections.forEach(type => {
                        totalEstimate += prices.leatherCleaning[type];
                    });
                    break;
                case 'curtainsCleaning':
                    const curtainsType = document.querySelector('input[name="curtainsCleaning_type"]:checked');
                    if(!curtainsType) {
                        alert('Please select a curtains cleaning option.');
                        error = true;
                        return;
                    }
                    totalEstimate += prices.curtainsCleaning[curtainsType.value];
                    break;
                case 'hardFloorCleaning':
                    const floorSelections = Array.from(document.querySelectorAll('#hardFloorCleaning_container .floor-checkbox:checked')).map(cb => cb.value);
                    if(floorSelections.length === 0) {
                        alert('Please select at least one hard floor cleaning option.');
                        error = true;
                        return;
                    }
                    let floorEstimate = 0;
                    floorSelections.forEach(type => {
                        if(type === 'commercial') {
                            const sqm = parseInt(document.getElementById('hardFloorCleaning_commercialFloorSqm').value) || 0;
                            if(sqm > 0) {
                                floorEstimate += prices.hardFloorCleaning.commercial.perSqm * sqm;
                            }
                        } else {
                            floorEstimate += prices.hardFloorCleaning[type];
                        }
                    });
                    totalEstimate += floorEstimate;
                    break;
                case 'domesticCleaning':
                    const hourlyRate = parseInt(document.getElementById('domesticCleaning_hourlyRate').value) || prices.domesticCleaning.hourlyRateMin;
                    const domesticCleaners = parseInt(document.getElementById('domesticCleaning_cleaners').value) || 1;
                    let domesticHours = parseInt(document.getElementById('domesticCleaning_hours').value) || prices.domesticCleaning.minHours;
                    if(domesticHours < prices.domesticCleaning.minHours) {
                        alert(`Number of hours cannot be less than ${prices.domesticCleaning.minHours} in Domestic Cleaning.`);
                        domesticHours = prices.domesticCleaning.minHours;
                    }
                    totalEstimate += hourlyRate * domesticCleaners * domesticHours;
                    break;
                default:
                    break;
            }
        });

        if(error) {
            resultDiv.classList.remove('show');
            return;
        }

        // Display the result with animation
        estimateSpan.textContent = `£${totalEstimate.toFixed(2)}`;
        resultDiv.classList.add('show');
        // Scroll to result
        resultDiv.scrollIntoView({ behavior: 'smooth' });
    });
</script>

</body>
</html>
