<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Snow White Cleaners - Service Calculator</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        /* Calculator Container */
        #swc-calculator {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            max-width: 500px;
            margin: 20px auto;
            padding: 25px;
            border: 1px solid #4CAF50;
            border-radius: 12px;
            background-color: #ffffff;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        /* Heading */
        #swc-calculator h2 {
            text-align: center;
            color: #4CAF50;
            margin-bottom: 20px;
        }

        /* Form Elements */
        #swc-calculator label {
            display: block;
            margin: 15px 0 5px;
            font-weight: 600;
            color: #333333;
        }

        #swc-calculator select,
        #swc-calculator input[type="number"],
        #swc-calculator input[type="text"] {
            width: 100%;
            padding: 10px;
            margin-top: 5px;
            border: 1px solid #cccccc;
            border-radius: 6px;
            box-sizing: border-box;
            font-size: 16px;
        }

        #swc-calculator select:focus,
        #swc-calculator input[type="number"]:focus,
        #swc-calculator input[type="text"]:focus {
            border-color: #4CAF50;
            outline: none;
        }

        /* Calculate Button */
        #swc-calculator button {
            width: 100%;
            padding: 12px;
            background-color: #4CAF50;
            border: none;
            color: white;
            font-size: 18px;
            border-radius: 6px;
            cursor: pointer;
            margin-top: 20px;
            transition: background-color 0.3s ease;
        }

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

        /* Result Display */
        #swc-calculator .result {
            margin-top: 25px;
            padding: 20px;
            background-color: #e8f5e9;
            border-left: 6px solid #4CAF50;
            display: none;
            border-radius: 6px;
        }

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

        /* Contact Button */
        #swc-calculator .contact-button {
            display: none;
            margin-top: 15px;
            text-align: center;
        }

        #swc-calculator .contact-button a {
            display: inline-block;
            padding: 12px 25px;
            background-color: #2196F3;
            color: white;
            text-decoration: none;
            border-radius: 6px;
            font-size: 16px;
            transition: background-color 0.3s ease;
        }

        #swc-calculator .contact-button a:hover {
            background-color: #0b7dda;
        }

        /* Responsive Design */
        @media (max-width: 600px) {
            #swc-calculator {
                padding: 20px;
                margin: 10px;
            }

            #swc-calculator h2 {
                font-size: 1.5em;
            }

            #swc-calculator button {
                font-size: 16px;
            }

            #swc-calculator .result p {
                font-size: 16px;
            }

            #swc-calculator .contact-button a {
                font-size: 14px;
                padding: 10px 20px;
            }
        }
    </style>
</head>
<body>

<div id="swc-calculator">
    <h2>Service Estimate Calculator</h2>
    <form id="calculator-form">
        <!-- Service Type Selection -->
        <label for="service-type">Select Service Type:</label>
        <select id="service-type" required>
            <option value="">--Please choose an option--</option>
            <option value="domestic">Domestic Cleaning</option>
            <option value="office">Office Cleaning</option>
            <option value="end-tenancy">End of Tenancy Cleaning</option>
            <option value="spring">Spring Cleaning</option>
            <option value="carpet">Carpet Cleaning</option>
            <option value="upholstery">Upholstery Cleaning</option>
            <option value="one-off">One-Off Cleaning</option>
            <option value="gardening">Gardening Services</option>
        </select>

        <!-- Dynamic Inputs Based on Service Type -->
        <div id="service-details"></div>

        <!-- Calculate Button -->
        <button type="submit">Calculate Estimate</button>
    </form>

    <!-- Result Display -->
    <div class="result" id="result">
        <p>Your estimated cost is: <strong id="estimated-cost">£0.00</strong></p>
    </div>

    <!-- Contact Button -->
    <div class="contact-button" id="contact-button">
        <p>For an accurate quote, please contact our representative.</p>
        <a href="mailto:hello@qithub.click">Contact Us</a>
    </div>
</div>

<script>
    // Reference to DOM elements
    const serviceType = document.getElementById('service-type');
    const serviceDetails = document.getElementById('service-details');
    const calculatorForm = document.getElementById('calculator-form');
    const resultDiv = document.getElementById('result');
    const estimatedCost = document.getElementById('estimated-cost');
    const contactButton = document.getElementById('contact-button');

    // Service Pricing Data
    const pricing = {
        domestic: {
            type: 'Domestic Cleaning',
            options: [
                { name: 'Weekly', ratePerHour: 16.50, minCharge: 32.00, minHours: 2 },
                { name: 'Fortnightly', ratePerHour: 17.00, minCharge: 51.00, minHours: 3 }
            ]
        },
        office: {
            type: 'Office Cleaning',
            ratePerHour: 17.00,
            minCharge: 34.00
        },
        'end-tenancy': {
            type: 'End of Tenancy Cleaning',
            options: [
                { name: 'Studio Flat (no carpet)', price: 119 },
                { name: 'Studio Flat (with carpet)', price: 169 },
                { name: 'One-Bedroom (no carpet)', price: 161 },
                { name: 'One-Bedroom (with carpet)', price: 225 },
                { name: 'Two-Bedroom (no carpet)', price: 195 },
                { name: 'Two-Bedroom (with carpet)', price: 289 },
                { name: 'Three-Bedroom (no carpet)', price: 249 },
                { name: 'Three-Bedroom (with carpet)', price: 379 },
                { name: 'Four-Bedroom', price: 'Contact for Quote' }
            ]
        },
        spring: {
            type: 'Spring Cleaning',
            ratePerHour: 20.00,
            minCharge: 80.00,
            minHours: 4
        },
        carpet: {
            type: 'Carpet Cleaning',
            options: [
                { name: 'Single Bedroom', price: 30 },
                { name: 'Double Bedroom', price: 35 },
                { name: 'Living Room', price: 40 },
                { name: 'Dining Room', price: 35 },
                { name: 'Large Lounge', price: 60 },
                { name: 'Bathroom/Toilet', price: 9 },
                { name: 'Landing', price: 8 },
                { name: 'Hallway/Corridor', price: 18 },
                { name: 'Stairs (per step)', price: 3.50 },
                { name: 'Rugs - Small (up to 1 sq.m)', price: 10 },
                { name: 'Rugs - Medium (up to 3 sq.m)', price: 24 },
                { name: 'Rugs - Large (up to 5 sq.m)', price: 30 },
                { name: 'Rugs - Extra Large (5 to 10 sq.m)', price: 45 }
            ]
        },
        upholstery: {
            type: 'Upholstery Cleaning',
            options: [
                { name: 'Two-Seated Sofa', price: 45 },
                { name: 'Three-Seated Sofa', price: 60 },
                { name: 'Four-Seated Sofa', price: 65 },
                { name: 'L-Shaped Sofa', price: 100 },
                { name: 'Armchair', price: 28 },
                { name: 'Dining/Office Chair', price: 10 },
                { name: 'Car Upholstery', price: 80 },
                { name: 'Mattress Sanitizing - Single', price: 26 },
                { name: 'Mattress Sanitizing - Double', price: 35 },
                { name: 'Mattress Sanitizing - King-sized', price: 40 }
            ]
        },
        'one-off': {
            type: 'One-Off Cleaning',
            ratePerHour: 20.00,
            minCharge: 80.00,
            minHours: 4
        },
        gardening: {
            type: 'Gardening Services',
            options: [
                { name: 'Garden Maintenance (per hour)', ratePerHour: 60.00, minCharge: 120.00, minHours: 2 },
                { name: 'Green Waste Removal (per bag)', pricePerBag: 5.00 }
            ]
        }
    };

    /**
     * Function to create dynamic input fields based on selected service
     * @param {string} serviceKey - The key of the selected service
     */
    function createServiceInputs(serviceKey) {
        serviceDetails.innerHTML = ''; // Clear previous inputs

        if (!pricing[serviceKey]) return;

        const service = pricing[serviceKey];

        // Handle services with predefined options (like dropdowns)
        if (serviceKey === 'domestic' || serviceKey === 'end-tenancy' || serviceKey === 'carpet' || serviceKey === 'upholstery' || serviceKey === 'gardening') {
            // Add options dropdown
            const label = document.createElement('label');
            label.htmlFor = 'service-option';
            label.textContent = `Select ${service.type} Option:`;
            serviceDetails.appendChild(label);

            const select = document.createElement('select');
            select.id = 'service-option';
            select.required = true;

            const defaultOption = document.createElement('option');
            defaultOption.value = '';
            defaultOption.textContent = '--Please choose an option--';
            select.appendChild(defaultOption);

            service.options.forEach(option => {
                const opt = document.createElement('option');
                opt.value = option.name;
                opt.textContent = option.name;
                select.appendChild(opt);
            });

            serviceDetails.appendChild(select);

            // Additional inputs based on service
            if (serviceKey === 'gardening') {
                // For Gardening, if Garden Maintenance is selected, ask for number of hours
                select.addEventListener('change', function() {
                    const selectedOption = service.options.find(opt => opt.name === this.value);
                    // Remove existing additional inputs
                    const existing = document.getElementById('additional-input');
                    if (existing) {
                        existing.remove();
                    }

                    if (this.value === 'Garden Maintenance (per hour)') {
                        const div = document.createElement('div');
                        div.id = 'additional-input';

                        const label = document.createElement('label');
                        label.htmlFor = 'gardening-hours';
                        label.textContent = 'Number of Hours:';
                        div.appendChild(label);

                        const input = document.createElement('input');
                        input.type = 'number';
                        input.id = 'gardening-hours';
                        input.min = service.options[0].minHours;
                        input.placeholder = `Minimum ${service.options[0].minHours} hours`;
                        input.required = true;
                        div.appendChild(input);

                        serviceDetails.appendChild(div);
                    } else if (this.value === 'Green Waste Removal (per bag)') {
                        const div = document.createElement('div');
                        div.id = 'additional-input';

                        const label = document.createElement('label');
                        label.htmlFor = 'green-waste-bags';
                        label.textContent = 'Number of Bags:';
                        div.appendChild(label);

                        const input = document.createElement('input');
                        input.type = 'number';
                        input.id = 'green-waste-bags';
                        input.min = 1;
                        input.placeholder = 'Enter number of bags';
                        input.required = true;
                        div.appendChild(input);

                        serviceDetails.appendChild(div);
                    }
                });
            }

        } else if (serviceKey === 'office') {
            // Office Cleaning - Number of Cleaners
            const label = document.createElement('label');
            label.htmlFor = 'office-cleaners';
            label.textContent = 'Number of Cleaners:';
            serviceDetails.appendChild(label);

            const input = document.createElement('input');
            input.type = 'number';
            input.id = 'office-cleaners';
            input.min = 1;
            input.value = 1;
            input.required = true;
            serviceDetails.appendChild(input);
        } else if (serviceKey === 'spring' || serviceKey === 'one-off') {
            // Spring and One-Off Cleaning - Number of Cleaners
            const label = document.createElement('label');
            label.htmlFor = 'cleaning-cleaners';
            label.textContent = 'Number of Cleaners:';
            serviceDetails.appendChild(label);

            const input = document.createElement('input');
            input.type = 'number';
            input.id = 'cleaning-cleaners';
            input.min = 1;
            input.value = 1;
            input.required = true;
            serviceDetails.appendChild(input);
        }

        // Additional handling for Carpet Cleaning and Upholstery
        if (serviceKey === 'carpet') {
            // Carpet Cleaning might require quantity for certain options
            const select = document.getElementById('service-option');
            select.addEventListener('change', function() {
                const selectedOption = pricing[serviceKey].options.find(opt => opt.name === this.value);
                // Remove existing quantity inputs
                const existing = document.getElementById('additional-input');
                if (existing) {
                    existing.remove();
                }

                if (selectedOption) {
                    if (selectedOption.name.includes('Stairs') || selectedOption.name.includes('Rugs')) {
                        const div = document.createElement('div');
                        div.id = 'additional-input';

                        const label = document.createElement('label');
                        label.htmlFor = 'carpet-quantity';
                        label.textContent = 'Quantity:';
                        div.appendChild(label);

                        const input = document.createElement('input');
                        input.type = 'number';
                        input.id = 'carpet-quantity';
                        input.min = 1;
                        input.placeholder = 'Enter quantity';
                        input.required = true;
                        div.appendChild(input);

                        serviceDetails.appendChild(div);
                    }
                }
            });
        }
    }

    /**
     * Event listener for service type selection
     */
    serviceType.addEventListener('change', function() {
        createServiceInputs(this.value);
        // Reset result display and contact button when service type changes
        resultDiv.style.display = 'none';
        contactButton.style.display = 'none';
    });

    /**
     * Form submission handler
     */
    calculatorForm.addEventListener('submit', function(e) {
        e.preventDefault(); // Prevent form from submitting

        const serviceKey = serviceType.value;
        let total = 0;
        let requiresContact = false;

        if (!serviceKey) {
            alert('Please select a service type.');
            return;
        }

        const service = pricing[serviceKey];

        switch(serviceKey) {
            case 'domestic':
                const domesticOption = document.getElementById('service-option').value;
                const selectedDomestic = service.options.find(opt => opt.name === domesticOption);
                if (!selectedDomestic) {
                    alert('Please select a domestic cleaning option.');
                    return;
                }
                const domesticCleaners = 1; // Assuming 1 cleaner as not specified
                total = selectedDomestic.ratePerHour * selectedDomestic.minHours;
                if (total < selectedDomestic.minCharge) {
                    total = selectedDomestic.minCharge;
                }
                break;

            case 'office':
                const officeCleaners = parseInt(document.getElementById('office-cleaners').value);
                if (isNaN(officeCleaners) || officeCleaners < 1) {
                    alert('Please enter a valid number of cleaners.');
                    return;
                }
                total = service.ratePerHour * officeCleaners;
                if (total < service.minCharge) {
                    total = service.minCharge;
                }
                break;

            case 'end-tenancy':
                const endOption = document.getElementById('service-option').value;
                const selectedEnd = service.options.find(opt => opt.name === endOption);
                if (!selectedEnd) {
                    alert('Please select an End of Tenancy Cleaning option.');
                    return;
                }
                if (selectedEnd.price === 'Contact for Quote') {
                    requiresContact = true;
                } else {
                    total = selectedEnd.price;
                }
                break;

            case 'spring':
            case 'one-off':
                const cleaningCleaners = parseInt(document.getElementById('cleaning-cleaners').value);
                if (isNaN(cleaningCleaners) || cleaningCleaners < 1) {
                    alert('Please enter a valid number of cleaners.');
                    return;
                }
                total = service.ratePerHour * cleaningCleaners;
                if (total < service.minCharge) {
                    total = service.minCharge;
                }
                break;

            case 'carpet':
                const carpetOption = document.getElementById('service-option').value;
                const selectedCarpet = service.options.find(opt => opt.name === carpetOption);
                if (!selectedCarpet) {
                    alert('Please select a Carpet Cleaning option.');
                    return;
                }
                if (selectedCarpet.name.includes('Stairs') || selectedCarpet.name.includes('Rugs')) {
                    const quantityInput = document.getElementById('carpet-quantity');
                    if (!quantityInput) {
                        alert('Please enter the quantity.');
                        return;
                    }
                    const quantity = parseInt(quantityInput.value);
                    if (isNaN(quantity) || quantity < 1) {
                        alert('Please enter a valid quantity.');
                        return;
                    }
                    total = selectedCarpet.price * quantity;
                } else {
                    total = selectedCarpet.price;
                }
                break;

            case 'upholstery':
                const upholsteryOption = document.getElementById('service-option').value;
                const selectedUpholstery = service.options.find(opt => opt.name === upholsteryOption);
                if (!selectedUpholstery) {
                    alert('Please select an Upholstery Cleaning option.');
                    return;
                }
                total = selectedUpholstery.price;
                break;

            case 'gardening':
                const gardeningOption = document.getElementById('service-option').value;
                const selectedGardening = service.options.find(opt => opt.name === gardeningOption);
                if (!selectedGardening) {
                    alert('Please select a Gardening Service option.');
                    return;
                }
                if (gardeningOption === 'Garden Maintenance (per hour)') {
                    const hoursInput = document.getElementById('gardening-hours');
                    if (!hoursInput) {
                        alert('Please enter the number of hours.');
                        return;
                    }
                    const hours = parseInt(hoursInput.value);
                    if (isNaN(hours) || hours < selectedGardening.minHours) {
                        alert(`Please enter at least ${selectedGardening.minHours} hours.`);
                        return;
                    }
                    total = selectedGardening.ratePerHour * hours;
                    if (total < selectedGardening.minCharge) {
                        total = selectedGardening.minCharge;
                    }
                } else if (gardeningOption === 'Green Waste Removal (per bag)') {
                    const bagsInput = document.getElementById('green-waste-bags');
                    if (!bagsInput) {
                        alert('Please enter the number of bags.');
                        return;
                    }
                    const bags = parseInt(bagsInput.value);
                    if (isNaN(bags) || bags < 1) {
                        alert('Please enter a valid number of bags.');
                        return;
                    }
                    total = selectedGardening.pricePerBag * bags;
                }
                break;

            default:
                alert('Selected service is not available.');
                return;
        }

        // Display the result
        if (requiresContact) {
            estimatedCost.textContent = 'Please contact us for a quote.';
        } else {
            estimatedCost.textContent = `£${total.toFixed(2)}`;
        }
        resultDiv.style.display = 'block';
        contactButton.style.display = 'block';
    });
</script>

</body>
</html>
