<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Cleaning Services Calculator</title>
    <style>
        /* Container to scope the calculator styles */
        .cleaners-calculator {
            font-family: Arial, sans-serif;
            max-width: 600px;
            margin: 20px auto;
            padding: 20px;
            border: 2px solid #4CAF50;
            border-radius: 10px;
            background-color: #f9f9f9;
        }

        .cleaners-calculator h2 {
            text-align: center;
            color: #4CAF50;
        }

        .cleaners-calculator .service {
            margin-top: 15px;
            border-bottom: 1px solid #ddd;
            padding-bottom: 15px;
        }

        .cleaners-calculator .service:last-child {
            border-bottom: none;
        }

        .cleaners-calculator label {
            display: block;
            margin-top: 10px;
            font-weight: bold;
        }

        .cleaners-calculator select,
        .cleaners-calculator input[type="number"],
        .cleaners-calculator input[type="checkbox"],
        .cleaners-calculator input[type="radio"] {
            width: 100%;
            padding: 8px;
            margin-top: 5px;
            box-sizing: border-box;
        }

        .cleaners-calculator .checkbox-group,
        .cleaners-calculator .radio-group {
            display: flex;
            align-items: center;
            margin-top: 10px;
        }

        .cleaners-calculator .checkbox-group input,
        .cleaners-calculator .radio-group input {
            width: auto;
            margin-right: 10px;
        }

        .cleaners-calculator button {
            width: 100%;
            padding: 12px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            margin-top: 25px;
            cursor: pointer;
            font-size: 16px;
        }

        .cleaners-calculator button:hover {
            background-color: #45a049;
        }

        .cleaners-calculator .result {
            margin-top: 25px;
            padding: 20px;
            border: 1px solid #4CAF50;
            border-radius: 5px;
            background-color: #e8f5e9;
            display: none;
        }

        .cleaners-calculator .result p {
            margin: 0;
            font-size: 20px;
            color: #2e7d32;
        }

        .cleaners-calculator .contact-button {
            margin-top: 15px;
            padding: 12px;
            background-color: #ff9800;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            display: none;
            width: 100%;
        }

        .cleaners-calculator .contact-button:hover {
            background-color: #fb8c00;
        }

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

            .cleaners-calculator h2 {
                font-size: 24px;
            }

            .cleaners-calculator button,
            .cleaners-calculator .contact-button {
                font-size: 14px;
                padding: 10px;
            }

            .cleaners-calculator .result p {
                font-size: 18px;
            }
        }
    </style>
</head>
<body>

<div class="cleaners-calculator">
    <h2>Cleaning Services Calculator</h2>
    <!-- Service Selection -->
    <div class="services-selection">
        <label>Select Services:</label>
        <div class="checkbox-group">
            <input type="checkbox" id="regular" value="regular">
            <label for="regular">Regular House Cleaning</label>
        </div>
        <div class="checkbox-group">
            <input type="checkbox" id="oneoff" value="oneoff">
            <label for="oneoff">One-Off Cleaning</label>
        </div>
        <div class="checkbox-group">
            <input type="checkbox" id="deep" value="deep">
            <label for="deep">Deep Cleaning</label>
        </div>
        <div class="checkbox-group">
            <input type="checkbox" id="endTenancy" value="endTenancy">
            <label for="endTenancy">End of Tenancy Cleaning</label>
        </div>
        <div class="checkbox-group">
            <input type="checkbox" id="carpet" value="carpet">
            <label for="carpet">Carpet Cleaning</label>
        </div>
        <div class="checkbox-group">
            <input type="checkbox" id="upholstery" value="upholstery">
            <label for="upholstery">Upholstery Cleaning</label>
        </div>
    </div>

    <!-- Dynamic Inputs Container -->
    <div id="dynamicInputs"></div>

    <!-- Calculate Button -->
    <button id="calculateBtn">Calculate Estimate</button>

    <!-- Result Display -->
    <div class="result" id="result">
        <p id="estimatedPrice"></p>
        <p>Note: This is a preliminary estimate. For an accurate quote, please contact our representative.</p>
        <button class="contact-button" id="contactBtn">Contact Us</button>
    </div>
</div>

<script>
    // Get references to DOM elements
    const serviceCheckboxes = document.querySelectorAll('.services-selection input[type="checkbox"]');
    const dynamicInputs = document.getElementById('dynamicInputs');
    const calculateBtn = document.getElementById('calculateBtn');
    const resultDiv = document.getElementById('result');
    const estimatedPrice = document.getElementById('estimatedPrice');
    const contactBtn = document.getElementById('contactBtn');

    // Object to hold service-specific input elements
    const serviceInputs = {};

    // Add event listeners to service checkboxes
    serviceCheckboxes.forEach(checkbox => {
        checkbox.addEventListener('change', function() {
            if (this.checked) {
                addServiceInputs(this.value);
            } else {
                removeServiceInputs(this.value);
            }
        });
    });

    // Function to add input fields for a selected service
    function addServiceInputs(service) {
        const serviceDiv = document.createElement('div');
        serviceDiv.className = 'service';
        serviceDiv.id = `${service}-inputs`;

        // Title for the service
        const title = document.createElement('h3');
        title.textContent = getServiceTitle(service);
        serviceDiv.appendChild(title);

        // Generate inputs based on service
        switch(service) {
            case 'regular':
                // Number of Hours
                const regHoursLabel = document.createElement('label');
                regHoursLabel.textContent = 'Number of Hours (minimum 2):';
                const regHoursInput = document.createElement('input');
                regHoursInput.type = 'number';
                regHoursInput.id = 'regular_hours';
                regHoursInput.min = 2;
                regHoursInput.value = 2;
                serviceDiv.appendChild(regHoursLabel);
                serviceDiv.appendChild(regHoursInput);

                // Frequency
                const regFrequencyLabel = document.createElement('label');
                regFrequencyLabel.textContent = 'Frequency:';
                const regFrequencySelect = document.createElement('select');
                regFrequencySelect.id = 'regular_frequency';
                const regFrequencies = ['', 'Weekly', 'Fortnightly'];
                regFrequencies.forEach(freq => {
                    const option = document.createElement('option');
                    option.value = freq.toLowerCase();
                    option.textContent = freq ? freq : '-- Please choose an option --';
                    regFrequencySelect.appendChild(option);
                });
                serviceDiv.appendChild(regFrequencyLabel);
                serviceDiv.appendChild(regFrequencySelect);

                // Optional Detergents
                const regDetergentsDiv = document.createElement('div');
                regDetergentsDiv.className = 'checkbox-group';
                const regDetergentsCheckbox = document.createElement('input');
                regDetergentsCheckbox.type = 'checkbox';
                regDetergentsCheckbox.id = 'regular_detergents';
                const regDetergentsLabel = document.createElement('label');
                regDetergentsLabel.htmlFor = 'regular_detergents';
                regDetergentsLabel.textContent = 'Add Optional Detergents (£10 per session)';
                regDetergentsDiv.appendChild(regDetergentsCheckbox);
                regDetergentsDiv.appendChild(regDetergentsLabel);
                serviceDiv.appendChild(regDetergentsDiv);
                break;

            case 'oneoff':
                // Number of Hours
                const oneHoursLabel = document.createElement('label');
                oneHoursLabel.textContent = 'Number of Hours (minimum 2):';
                const oneHoursInput = document.createElement('input');
                oneHoursInput.type = 'number';
                oneHoursInput.id = 'oneoff_hours';
                oneHoursInput.min = 2;
                oneHoursInput.value = 2;
                serviceDiv.appendChild(oneHoursLabel);
                serviceDiv.appendChild(oneHoursInput);

                // Optional Detergents
                const oneDetergentsDiv = document.createElement('div');
                oneDetergentsDiv.className = 'checkbox-group';
                const oneDetergentsCheckbox = document.createElement('input');
                oneDetergentsCheckbox.type = 'checkbox';
                oneDetergentsCheckbox.id = 'oneoff_detergents';
                const oneDetergentsLabel = document.createElement('label');
                oneDetergentsLabel.htmlFor = 'oneoff_detergents';
                oneDetergentsLabel.textContent = 'Add Optional Detergents (£10 per session)';
                oneDetergentsDiv.appendChild(oneDetergentsCheckbox);
                oneDetergentsDiv.appendChild(oneDetergentsLabel);
                serviceDiv.appendChild(oneDetergentsDiv);
                break;

            case 'deep':
                // Number of Hours
                const deepHoursLabel = document.createElement('label');
                deepHoursLabel.textContent = 'Number of Hours (minimum 4):';
                const deepHoursInput = document.createElement('input');
                deepHoursInput.type = 'number';
                deepHoursInput.id = 'deep_hours';
                deepHoursInput.min = 4;
                deepHoursInput.value = 4;
                serviceDiv.appendChild(deepHoursLabel);
                serviceDiv.appendChild(deepHoursInput);
                break;

            case 'endTenancy':
                // Property Type
                const endPropertyLabel = document.createElement('label');
                endPropertyLabel.textContent = 'Select Property Type:';
                const endPropertySelect = document.createElement('select');
                endPropertySelect.id = 'end_propertyType';
                const endProperties = [
                    {value: '', text: '-- Please choose an option --'},
                    {value: 'studio', text: 'Studio Flat (£160)'},
                    {value: '1b1b', text: '1 Bed, 1 Bath (£190)'},
                    {value: '2b1b', text: '2 Bed, 1 Bath (£240)'},
                    {value: '2b2b', text: '2 Bed, 2 Bath (£280)'},
                    {value: '3b1b', text: '3 Bed, 1 Bath (£300)'},
                    {value: '3b2b', text: '3 Bed, 2 Bath (£360)'},
                    {value: '4b1b', text: '4 Bed, 1 Bath (£420)'},
                    {value: '4b2b', text: '4 Bed, 2 Bath (£480)'}
                ];
                endProperties.forEach(prop => {
                    const option = document.createElement('option');
                    option.value = prop.value;
                    option.textContent = prop.text;
                    endPropertySelect.appendChild(option);
                });
                serviceDiv.appendChild(endPropertyLabel);
                serviceDiv.appendChild(endPropertySelect);
                break;

            case 'carpet':
                // Carpet Cleaning Options
                const carpetLabel = document.createElement('label');
                carpetLabel.textContent = 'Select Carpet Cleaning Options:';
                serviceDiv.appendChild(carpetLabel);

                const carpetTypes = [
                    {id: 'bedroom', label: 'Bedroom (up to 22 sq.m.) (£40)', price: 40},
                    {id: 'lounge', label: 'Lounge/Dining Room (13x13 ft) (£40)', price: 40},
                    {id: 'throughLounge', label: 'Through Lounge (27x12 ft) (£55)', price: 55},
                    {id: 'hallway', label: 'Hallway (11x4 ft) (£23)', price: 23},
                    {id: 'staircase', label: 'Staircase (up to 14 steps) (£42)', price: 42},
                    {id: 'smallRug', label: 'Small Rug (up to 4 sq.m.) (£22)', price: 22},
                    {id: 'mediumRug', label: 'Medium Rug (£32)', price: 32},
                    {id: 'largeRug', label: 'Large Rug (£42)', price: 42}
                ];

                carpetTypes.forEach(type => {
                    const container = document.createElement('div');
                    container.className = 'checkbox-group';

                    const checkbox = document.createElement('input');
                    checkbox.type = 'checkbox';
                    checkbox.id = `carpet_${type.id}`;
                    checkbox.value = type.price;
                    checkbox.dataset.label = type.label;

                    const label = document.createElement('label');
                    label.htmlFor = `carpet_${type.id}`;
                    label.textContent = type.label;

                    container.appendChild(checkbox);
                    container.appendChild(label);
                    serviceDiv.appendChild(container);
                });
                break;

            case 'upholstery':
                // Upholstery Cleaning Options
                const upholsteryLabel = document.createElement('label');
                upholsteryLabel.textContent = 'Select Upholstery Cleaning Options:';
                serviceDiv.appendChild(upholsteryLabel);

                const upholsteryItems = [
                    {id: 'armchair', label: 'Armchair (£25)', price: 25},
                    {id: 'twoSeater', label: 'Two-Seater Sofa (£50)', price: 50},
                    {id: 'threeSeater', label: 'Three-Seater Sofa (£75)', price: 75},
                    {id: 'fourSeater', label: 'Four-Seater L-shaped Sofa (£100)', price: 100},
                    {id: 'diningChair', label: 'Dining Chair (£10)', price: 10},
                    {id: 'officeChair', label: 'Office Chair (£10)', price: 10},
                    {id: 'singleMattress', label: 'Single Mattress (£30)', price: 30},
                    {id: 'doubleMattress', label: 'Double Mattress (£40)', price: 40}
                ];

                upholsteryItems.forEach(item => {
                    const container = document.createElement('div');
                    container.className = 'checkbox-group';

                    const checkbox = document.createElement('input');
                    checkbox.type = 'checkbox';
                    checkbox.id = `upholstery_${item.id}`;
                    checkbox.value = item.price;
                    checkbox.dataset.label = item.label;

                    const label = document.createElement('label');
                    label.htmlFor = `upholstery_${item.id}`;
                    label.textContent = item.label;

                    container.appendChild(checkbox);
                    container.appendChild(label);
                    serviceDiv.appendChild(container);
                });
                break;

            default:
                break;
        }

        // Append the service inputs to the dynamic inputs container
        dynamicInputs.appendChild(serviceDiv);
        serviceInputs[service] = serviceDiv;
    }

    // Function to remove input fields for a deselected service
    function removeServiceInputs(service) {
        const serviceDiv = document.getElementById(`${service}-inputs`);
        if (serviceDiv) {
            dynamicInputs.removeChild(serviceDiv);
            delete serviceInputs[service];
        }
    }

    // Function to get service title
    function getServiceTitle(service) {
        switch(service) {
            case 'regular':
                return 'Regular House Cleaning';
            case 'oneoff':
                return 'One-Off Cleaning';
            case 'deep':
                return 'Deep Cleaning';
            case 'endTenancy':
                return 'End of Tenancy Cleaning';
            case 'carpet':
                return 'Carpet Cleaning';
            case 'upholstery':
                return 'Upholstery Cleaning';
            default:
                return '';
        }
    }

    // Event listener for Calculate button
    calculateBtn.addEventListener('click', function() {
        // Hide previous result
        resultDiv.style.display = 'none';
        contactBtn.style.display = 'none';

        let total = 0;
        let isValid = true;

        // Iterate over each selected service to calculate its cost
        Object.keys(serviceInputs).forEach(service => {
            switch(service) {
                case 'regular':
                    const regHours = parseFloat(document.getElementById('regular_hours').value) || 2;
                    const regFrequency = document.getElementById('regular_frequency').value;
                    const regDetergents = document.getElementById('regular_detergents').checked ? 10 : 0;

                    if (regHours < 2) {
                        alert('Regular House Cleaning requires a minimum of 2 hours.');
                        isValid = false;
                        return;
                    }

                    if (!regFrequency) {
                        alert('Please select a frequency for Regular House Cleaning.');
                        isValid = false;
                        return;
                    }

                    total += regHours * 18 + regDetergents;
                    break;

                case 'oneoff':
                    const oneHours = parseFloat(document.getElementById('oneoff_hours').value) || 2;
                    const oneDetergents = document.getElementById('oneoff_detergents').checked ? 10 : 0;

                    if (oneHours < 2) {
                        alert('One-Off Cleaning requires a minimum of 2 hours.');
                        isValid = false;
                        return;
                    }

                    total += oneHours * 20 + oneDetergents;
                    break;

                case 'deep':
                    const deepHours = parseFloat(document.getElementById('deep_hours').value) || 4;

                    if (deepHours < 4) {
                        alert('Deep Cleaning requires a minimum of 4 hours.');
                        isValid = false;
                        return;
                    }

                    total += deepHours * 25;
                    break;

                case 'endTenancy':
                    const propertyType = document.getElementById('end_propertyType').value;
                    const endTenancyPrices = {
                        'studio': 160,
                        '1b1b': 190,
                        '2b1b': 240,
                        '2b2b': 280,
                        '3b1b': 300,
                        '3b2b': 360,
                        '4b1b': 420,
                        '4b2b': 480
                    };

                    if (!propertyType) {
                        alert('Please select a property type for End of Tenancy Cleaning.');
                        isValid = false;
                        return;
                    }

                    total += endTenancyPrices[propertyType] || 0;
                    break;

                case 'carpet':
                    const carpetCheckboxes = serviceInputs[service].querySelectorAll('input[type="checkbox"]:checked');
                    if (carpetCheckboxes.length === 0) {
                        alert('Please select at least one Carpet Cleaning option.');
                        isValid = false;
                        return;
                    }

                    let carpetTotal = 70; // Minimum Call-Out Charge
                    carpetCheckboxes.forEach(cb => {
                        carpetTotal += parseFloat(cb.value);
                    });
                    total += carpetTotal;
                    break;

                case 'upholstery':
                    const upholsteryCheckboxes = serviceInputs[service].querySelectorAll('input[type="checkbox"]:checked');
                    if (upholsteryCheckboxes.length === 0) {
                        alert('Please select at least one Upholstery Cleaning option.');
                        isValid = false;
                        return;
                    }

                    let upholsteryTotal = 70; // Minimum Call-Out Charge
                    upholsteryCheckboxes.forEach(cb => {
                        upholsteryTotal += parseFloat(cb.value);
                    });
                    total += upholsteryTotal;
                    break;

                default:
                    break;
            }
        });

        if (!isValid) return;

        // Display the result
        estimatedPrice.textContent = `Estimated Price: £${total.toFixed(2)}`;
        resultDiv.style.display = 'block';
        contactBtn.style.display = 'block';
    });

    // Event listener for Contact button
    contactBtn.addEventListener('click', function() {
        // Redirect to contact form or open contact modal
        // For demonstration, we'll just open the default email client
        window.location.href = 'mailto:hello@qithub.click?subject=Cleaning Services Inquiry';
    });
</script>

</body>
</html>
