<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modern Cleaning Service Calculator</title>
    <style>
        /* Reset Styles */
        .cc-container * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        /* Container Styling */
        .cc-container {
            max-width: 800px;
            margin: 40px auto;
            padding: 30px;
            background-color: #ffffff;
            border-radius: 12px;
            box-shadow: 0 8px 16px rgba(0,0,0,0.1);
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        }

        /* Header */
        .cc-header {
            text-align: center;
            margin-bottom: 30px;
        }

        .cc-header h2 {
            font-size: 2em;
            color: #2c3e50;
            margin-bottom: 10px;
        }

        .cc-header p {
            font-size: 1em;
            color: #7f8c8d;
        }

        /* Services Selection */
        .cc-services {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            justify-content: space-between;
            margin-bottom: 30px;
        }

        .cc-service-card {
            flex: 1 1 calc(50% - 20px);
            background-color: #ecf0f1;
            border-radius: 10px;
            padding: 20px;
            cursor: pointer;
            transition: transform 0.2s, background-color 0.2s;
            position: relative;
        }

        .cc-service-card:hover {
            transform: translateY(-5px);
            background-color: #dfe6e9;
        }

        .cc-service-card input {
            position: absolute;
            top: 15px;
            left: 15px;
            transform: scale(1.5);
            cursor: pointer;
        }

        .cc-service-card label {
            margin-left: 40px;
            font-size: 1.1em;
            color: #2c3e50;
            display: flex;
            align-items: center;
            height: 100%;
            cursor: pointer;
        }

        /* Dynamic Fields */
        .cc-dynamic-fields {
            margin-bottom: 30px;
        }

        .cc-dynamic-section {
            margin-bottom: 25px;
            padding: 20px;
            border: 1px solid #bdc3c7;
            border-radius: 8px;
            background-color: #f7f9f9;
        }

        .cc-dynamic-section h3 {
            margin-bottom: 15px;
            color: #34495e;
            font-size: 1.2em;
        }

        .cc-dynamic-section .cc-field {
            display: flex;
            flex-direction: column;
            margin-bottom: 15px;
        }

        .cc-dynamic-section .cc-field label {
            margin-bottom: 5px;
            color: #2c3e50;
            font-weight: 500;
        }

        .cc-dynamic-section .cc-field input,
        .cc-dynamic-section .cc-field select {
            padding: 10px;
            border: 1px solid #bdc3c7;
            border-radius: 6px;
            font-size: 1em;
            transition: border-color 0.3s;
        }

        .cc-dynamic-section .cc-field input:focus,
        .cc-dynamic-section .cc-field select:focus {
            border-color: #3498db;
            outline: none;
        }

        /* Submit Button */
        .cc-submit-btn {
            width: 100%;
            padding: 15px;
            background-color: #3498db;
            color: #ffffff;
            border: none;
            border-radius: 8px;
            font-size: 1.2em;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .cc-submit-btn:hover {
            background-color: #2980b9;
        }

        /* Result Section */
        .cc-result {
            display: none;
            margin-top: 30px;
            padding: 25px;
            border: 1px solid #2ecc71;
            border-radius: 10px;
            background-color: #e8f8f5;
            text-align: center;
        }

        .cc-result p {
            font-size: 1.2em;
            color: #27ae60;
            margin-bottom: 15px;
        }

        .cc-result strong {
            font-size: 1.5em;
            color: #2c3e50;
        }

        /* Contact Button */
        .cc-contact-btn {
            padding: 12px 25px;
            background-color: #e67e22;
            color: #ffffff;
            border: none;
            border-radius: 6px;
            font-size: 1em;
            cursor: pointer;
            transition: background-color 0.3s;
            text-decoration: none;
            display: inline-block;
        }

        .cc-contact-btn:hover {
            background-color: #d35400;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .cc-service-card {
                flex: 1 1 100%;
            }
        }
    </style>
</head>
<body>

<div class="cc-container">
    <div class="cc-header">
        <h2>Estimate Your Cleaning Services</h2>
        <p>Select the services you require and get a preliminary estimate instantly.</p>
    </div>

    <form id="cc-form">
        <!-- Services Selection -->
        <div class="cc-services">
            <div class="cc-service-card">
                <input type="checkbox" id="service-afterParty" name="services" value="afterParty">
                <label for="service-afterParty">After Party Cleaning</label>
            </div>
            <div class="cc-service-card">
                <input type="checkbox" id="service-carpet" name="services" value="carpet">
                <label for="service-carpet">Carpet Cleaning</label>
            </div>
            <div class="cc-service-card">
                <input type="checkbox" id="service-domestic" name="services" value="domestic">
                <label for="service-domestic">Domestic Cleaning</label>
            </div>
            <div class="cc-service-card">
                <input type="checkbox" id="service-endOfTenancy" name="services" value="endOfTenancy">
                <label for="service-endOfTenancy">End of Tenancy Cleaning</label>
            </div>
            <div class="cc-service-card">
                <input type="checkbox" id="service-housekeeper" name="services" value="housekeeper">
                <label for="service-housekeeper">Housekeeper Service</label>
            </div>
            <div class="cc-service-card">
                <input type="checkbox" id="service-oneOff" name="services" value="oneOff">
                <label for="service-oneOff">One-Off Cleaning</label>
            </div>
            <div class="cc-service-card">
                <input type="checkbox" id="service-oven" name="services" value="oven">
                <label for="service-oven">Oven Cleaning</label>
            </div>
            <div class="cc-service-card">
                <input type="checkbox" id="service-spring" name="services" value="spring">
                <label for="service-spring">Spring Cleaning</label>
            </div>
            <div class="cc-service-card">
                <input type="checkbox" id="service-upholstery" name="services" value="upholstery">
                <label for="service-upholstery">Upholstery Cleaning</label>
            </div>
            <div class="cc-service-card">
                <input type="checkbox" id="service-window" name="services" value="window">
                <label for="service-window">Window Cleaning</label>
            </div>
        </div>

        <!-- Dynamic Fields -->
        <div class="cc-dynamic-fields" id="cc-dynamic-fields">
            <!-- Dynamic content will be injected here -->
        </div>

        <!-- Submit Button -->
        <button type="submit" class="cc-submit-btn">Calculate Estimate</button>
    </form>

    <!-- Result Section -->
    <div class="cc-result" id="cc-result">
        <p>Your estimated total cost is: <strong>£<span id="cc-estimate">0.00</span></strong></p>
        <p>This is a preliminary estimate. For an exact quote, please contact our representative.</p>
        <a href="mailto:hello@qithub.click" class="cc-contact-btn">Contact Us</a>
    </div>
</div>

<script>
    // Modern Cleaning Service Calculator Script

    // Service Prices Data
    const serviceData = {
        afterParty: {
            type: 'hourly',
            rate: 23.26,
            minCleaners: 2,
            minHours: 3,
            description: 'After Party Cleaning: £23.26 per hour per cleaner (Min 2 cleaners for 3 hours)'
        },
        carpet: {
            type: 'multiple',
            items: {
                singleBedroom: { label: 'Single Bedroom', price: 25.55 },
                doubleBedroom: { label: 'Double Bedroom', price: 28.88 },
                lounge: { label: 'Lounge', price: 31.10 },
                hallway: { label: 'Hallway', price: 17.28 },
                staircase: { label: 'Staircase (up to 12 steps)', price: 24.44 },
                smallRug: { label: 'Small Rug', price: 18.36 },
                largeRug: { label: 'Large Rug', price: 29.99 }
            }
        },
        domestic: {
            type: 'subscription',
            options: {
                weekly: { label: 'Weekly (3 hours)', rate: 21.96, hours: 3 },
                fortnightly: { label: 'Fortnightly (3 hours)', rate: 23.26, hours: 3 }
            }
        },
        endOfTenancy: {
            type: 'fixed',
            properties: {
                studio: { label: 'Studio', price: 203.92 },
                oneBedOneBath: { label: '1 Bed, 1 Bath Flat', price: 249.24 },
                twoBedOneBath: { label: '2 Bed, 1 Bath Flat', price: 287.78 },
                fourBedTwoBath: { label: '4 Bed, 2 Bath House', price: 498.47 }
            }
        },
        housekeeper: {
            type: 'hourly',
            rate: 31.14,
            minHours: 3,
            description: 'Housekeeper Service: £31.14 per hour (Min 3 hours per visit)'
        },
        oneOff: {
            type: 'hourly',
            rate: 23.26,
            minCleaners: 2,
            minHours: 3,
            description: 'One-Off Cleaning: £23.26 per hour per cleaner (Min 2 cleaners for 3 hours)'
        },
        oven: {
            type: 'multiple',
            items: {
                singleOven: { label: 'Single Oven', price: 58.87 },
                doubleOven: { label: 'Double Oven', price: 79.97 },
                rangeCooker: { label: 'Range Cooker', price: 96.60 },
                ovenHob: { label: 'Oven + Hob Combination', priceRange: [76.65, 125.48] }
            }
        },
        spring: {
            type: 'fixed',
            properties: {
                studio: { label: 'Studio', price: 227.03 },
                twoBedOneBath: { label: '2 Bed, 1 Bath Flat', price: 339.87 },
                fourBedTwoBath: { label: '4 Bed, 2 Bath House', price: 543.78 }
            }
        },
        upholstery: {
            type: 'multiple',
            items: {
                diningChairFabric: { label: 'Dining Chair (Fabric)', price: 12.22 },
                twoSeatSofaFabric: { label: '2-Seat Sofa (Fabric)', price: 41.10 },
                threeSeatSofaLeather: { label: '3-Seat Sofa (Leather)', price: 58.87 }
            }
        },
        window: {
            type: 'multiple',
            items: {
                semiDetached: { label: 'Semi-Detached (2–4 beds)', price: 78.41 },
                conservatory: { label: 'Conservatory Cleaning', price: 119.41 },
                interiorWindows: { label: 'Interior Windows', price: 37.22 }
            }
        }
    };

    // Get DOM Elements
    const serviceCheckboxes = document.querySelectorAll('input[name="services"]');
    const dynamicFields = document.getElementById('cc-dynamic-fields');
    const form = document.getElementById('cc-form');
    const resultSection = document.getElementById('cc-result');
    const estimateSpan = document.getElementById('cc-estimate');

    // Handle Service Selection Change
    serviceCheckboxes.forEach(checkbox => {
        checkbox.addEventListener('change', function() {
            generateDynamicFields();
        });
    });

    // Function to Generate Dynamic Fields for Selected Services
    function generateDynamicFields() {
        dynamicFields.innerHTML = ''; // Clear previous fields
        const selectedServices = getSelectedServices();

        selectedServices.forEach(serviceKey => {
            const service = serviceData[serviceKey];
            if (!service) return;

            const serviceSection = document.createElement('div');
            serviceSection.classList.add('cc-dynamic-section');

            const serviceTitle = document.createElement('h3');
            serviceTitle.textContent = getServiceLabel(serviceKey);
            serviceSection.appendChild(serviceTitle);

            switch(service.type) {
                case 'hourly':
                    serviceSection.appendChild(createHourlyFields(service, serviceKey));
                    break;
                case 'multiple':
                    serviceSection.appendChild(createMultipleFields(service, serviceKey));
                    break;
                case 'subscription':
                    serviceSection.appendChild(createSubscriptionFields(service, serviceKey));
                    break;
                case 'fixed':
                    serviceSection.appendChild(createFixedFields(service, serviceKey));
                    break;
                default:
                    break;
            }

            dynamicFields.appendChild(serviceSection);
        });
    }

    // Utility Function to Get Selected Services
    function getSelectedServices() {
        const selected = [];
        serviceCheckboxes.forEach(checkbox => {
            if (checkbox.checked) {
                selected.push(checkbox.value);
            }
        });
        return selected;
    }

    // Function to Get Service Label
    function getServiceLabel(serviceKey) {
        const labels = {
            afterParty: 'After Party Cleaning',
            carpet: 'Carpet Cleaning',
            domestic: 'Domestic Cleaning',
            endOfTenancy: 'End of Tenancy Cleaning',
            housekeeper: 'Housekeeper Service',
            oneOff: 'One-Off Cleaning',
            oven: 'Oven Cleaning',
            spring: 'Spring Cleaning',
            upholstery: 'Upholstery Cleaning',
            window: 'Window Cleaning'
        };
        return labels[serviceKey] || serviceKey;
    }

    // Function to Create Hourly Fields
    function createHourlyFields(service, serviceKey) {
        const container = document.createElement('div');

        // Number of Cleaners
        if (service.minCleaners) {
            const fieldCleaners = document.createElement('div');
            fieldCleaners.classList.add('cc-field');

            const labelCleaners = document.createElement('label');
            labelCleaners.setAttribute('for', `cc-${serviceKey}-cleaners`);
            labelCleaners.textContent = 'Number of Cleaners:';
            fieldCleaners.appendChild(labelCleaners);

            const inputCleaners = document.createElement('input');
            inputCleaners.type = 'number';
            inputCleaners.min = service.minCleaners;
            inputCleaners.value = service.minCleaners;
            inputCleaners.required = true;
            inputCleaners.id = `cc-${serviceKey}-cleaners`;
            inputCleaners.name = `${serviceKey}-cleaners`;
            fieldCleaners.appendChild(inputCleaners);

            container.appendChild(fieldCleaners);
        }

        // Number of Hours
        if (service.minHours) {
            const fieldHours = document.createElement('div');
            fieldHours.classList.add('cc-field');

            const labelHours = document.createElement('label');
            labelHours.setAttribute('for', `cc-${serviceKey}-hours`);
            labelHours.textContent = 'Number of Hours:';
            fieldHours.appendChild(labelHours);

            const inputHours = document.createElement('input');
            inputHours.type = 'number';
            inputHours.min = service.minHours;
            inputHours.value = service.minHours;
            inputHours.required = true;
            inputHours.id = `cc-${serviceKey}-hours`;
            inputHours.name = `${serviceKey}-hours`;
            fieldHours.appendChild(inputHours);

            container.appendChild(fieldHours);
        }

        return container;
    }

    // Function to Create Multiple Item Fields
    function createMultipleFields(service, serviceKey) {
        const container = document.createElement('div');
        const items = service.items;

        for (const key in items) {
            const item = items[key];
            const field = document.createElement('div');
            field.classList.add('cc-field');

            const label = document.createElement('label');
            label.setAttribute('for', `cc-${serviceKey}-${key}`);
            label.textContent = `${item.label}:`;
            field.appendChild(label);

            const input = document.createElement('input');
            input.type = 'number';
            input.min = 0;
            input.value = 0;
            input.id = `cc-${serviceKey}-${key}`;
            input.name = `${serviceKey}-${key}`;
            input.placeholder = 'Quantity';
            field.appendChild(input);

            container.appendChild(field);
        }

        return container;
    }

    // Function to Create Subscription Fields
    function createSubscriptionFields(service, serviceKey) {
        const container = document.createElement('div');

        const fieldOption = document.createElement('div');
        fieldOption.classList.add('cc-field');

        const labelOption = document.createElement('label');
        labelOption.setAttribute('for', `cc-${serviceKey}-subscription`);
        labelOption.textContent = 'Select Frequency:';
        fieldOption.appendChild(labelOption);

        const selectOption = document.createElement('select');
        selectOption.id = `cc-${serviceKey}-subscription`;
        selectOption.name = `${serviceKey}-subscription`;
        selectOption.required = true;

        const defaultOption = document.createElement('option');
        defaultOption.value = '';
        defaultOption.disabled = true;
        defaultOption.selected = true;
        defaultOption.textContent = '-- Choose Frequency --';
        selectOption.appendChild(defaultOption);

        for (const optionKey in service.options) {
            const option = service.options[optionKey];
            const opt = document.createElement('option');
            opt.value = optionKey;
            opt.textContent = option.label;
            selectOption.appendChild(opt);
        }

        fieldOption.appendChild(selectOption);
        container.appendChild(fieldOption);

        return container;
    }

    // Function to Create Fixed Price Fields
    function createFixedFields(service, serviceKey) {
        const container = document.createElement('div');

        const fieldProperty = document.createElement('div');
        fieldProperty.classList.add('cc-field');

        const labelProperty = document.createElement('label');
        labelProperty.setAttribute('for', `cc-${serviceKey}-property`);
        labelProperty.textContent = 'Select Property Type:';
        fieldProperty.appendChild(labelProperty);

        const selectProperty = document.createElement('select');
        selectProperty.id = `cc-${serviceKey}-property`;
        selectProperty.name = `${serviceKey}-property`;
        selectProperty.required = true;

        const defaultOption = document.createElement('option');
        defaultOption.value = '';
        defaultOption.disabled = true;
        defaultOption.selected = true;
        defaultOption.textContent = '-- Choose Property --';
        selectProperty.appendChild(defaultOption);

        for (const propKey in service.properties) {
            const prop = service.properties[propKey];
            const opt = document.createElement('option');
            opt.value = propKey;
            opt.textContent = prop.label;
            selectProperty.appendChild(opt);
        }

        fieldProperty.appendChild(selectProperty);
        container.appendChild(fieldProperty);

        return container;
    }

    // Handle Form Submission
    form.addEventListener('submit', function(e) {
        e.preventDefault(); // Prevent form from submitting

        const selectedServices = getSelectedServices();
        if (selectedServices.length === 0) {
            alert('Please select at least one service.');
            return;
        }

        let total = 0;

        selectedServices.forEach(serviceKey => {
            const service = serviceData[serviceKey];
            if (!service) return;

            switch(service.type) {
                case 'hourly':
                    total += calculateHourly(service, serviceKey);
                    break;
                case 'multiple':
                    total += calculateMultiple(service, serviceKey);
                    break;
                case 'subscription':
                    total += calculateSubscription(service, serviceKey);
                    break;
                case 'fixed':
                    total += calculateFixed(service, serviceKey);
                    break;
                default:
                    break;
            }
        });

        // Display the result
        estimateSpan.textContent = total.toFixed(2);
        resultSection.style.display = 'block';
        // Scroll to result
        resultSection.scrollIntoView({ behavior: 'smooth' });
    });

    // Calculation Functions
    function calculateHourly(service, serviceKey) {
        let cleaners = service.minCleaners || 1;
        let hours = service.minHours || 1;

        if (service.minCleaners) {
            const inputCleaners = document.getElementById(`cc-${serviceKey}-cleaners`);
            if (inputCleaners) {
                cleaners = Math.max(parseInt(inputCleaners.value) || service.minCleaners, service.minCleaners);
            }
        }

        if (service.minHours) {
            const inputHours = document.getElementById(`cc-${serviceKey}-hours`);
            if (inputHours) {
                hours = Math.max(parseInt(inputHours.value) || service.minHours, service.minHours);
            }
        }

        return cleaners * hours * service.rate;
    }

    function calculateMultiple(service, serviceKey) {
        let total = 0;
        const items = service.items;

        for (const key in items) {
            const item = items[key];
            const input = document.getElementById(`cc-${serviceKey}-${key}`);
            const quantity = parseInt(input.value) || 0;

            if (item.priceRange) {
                // Calculate average price for range
                const average = (item.priceRange[0] + item.priceRange[1]) / 2;
                total += quantity * average;
            } else {
                total += quantity * item.price;
            }
        }

        return total;
    }

    function calculateSubscription(service, serviceKey) {
        const select = document.getElementById(`cc-${serviceKey}-subscription`);
        const frequency = select.value;
        if (!frequency || !service.options[frequency]) return 0;
        const option = service.options[frequency];
        return option.rate * option.hours;
    }

    function calculateFixed(service, serviceKey) {
        const select = document.getElementById(`cc-${serviceKey}-property`);
        const property = select.value;
        if (!property || !service.properties[property]) return 0;
        return service.properties[property].price;
    }
</script>

</body>
</html>
