<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CleaningSure Calculator</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        /* CleaningSure Calculator Styles */
        .cs-calculator-container {
            max-width: 400px;
            margin: 20px auto;
            padding: 20px;
            border: 2px solid #4CAF50;
            border-radius: 10px;
            background-color: #f9f9f9;
            font-family: Arial, sans-serif;
        }

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

        .cs-form-group {
            margin-bottom: 15px;
        }

        .cs-form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }

        .cs-form-group select,
        .cs-form-group input {
            width: 100%;
            padding: 8px;
            box-sizing: border-box;
        }

        .cs-submit-btn {
            width: 100%;
            padding: 10px;
            background-color: #4CAF50;
            border: none;
            color: white;
            font-size: 16px;
            cursor: pointer;
            border-radius: 5px;
        }

        .cs-submit-btn:hover {
            background-color: #45a049;
        }

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

        .cs-result p {
            margin: 0 0 10px 0;
            font-size: 16px;
        }

        .cs-contact-btn {
            display: inline-block;
            padding: 10px 20px;
            background-color: #2196F3;
            color: white;
            text-decoration: none;
            border-radius: 5px;
            font-size: 16px;
        }

        .cs-contact-btn:hover {
            background-color: #0b7dda;
        }

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

            .cs-submit-btn,
            .cs-contact-btn {
                font-size: 14px;
                padding: 8px;
            }

            .cs-result p {
                font-size: 14px;
            }
        }
    </style>
</head>
<body>

<div class="cs-calculator-container">
    <h2>Cleaning Services Calculator</h2>
    <form id="cs-calculator-form">
        <!-- Service Selection -->
        <div class="cs-form-group">
            <label for="service">Select Service:</label>
            <select id="service" required>
                <option value="">--Please choose an option--</option>
                <option value="regular">Regular Domestic Cleaning</option>
                <option value="carpet">Carpet Cleaning</option>
                <option value="endTenancy">End of Tenancy Cleaning</option>
                <option value="oneOff">One-off/Spring Cleaning</option>
                <option value="office">Office Cleaning</option>
                <option value="afterBuilders">After Builders Cleaning</option>
                <option value="afterParty">After Party Cleaning</option>
                <option value="oven">Oven Cleaning</option>
            </select>
        </div>

        <!-- Dynamic Fields Container -->
        <div id="dynamic-fields"></div>

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

    <!-- Result Display -->
    <div class="cs-result" id="cs-result">
        <p id="cs-estimate"></p>
        <a href="mailto:hello@qithub.click" class="cs-contact-btn">Contact Us for Exact Quote</a>
    </div>
</div>

<script>
    // CleaningSure Calculator Script

    document.addEventListener('DOMContentLoaded', function () {
        const serviceSelect = document.getElementById('service');
        const dynamicFields = document.getElementById('dynamic-fields');
        const calculatorForm = document.getElementById('cs-calculator-form');
        const resultDiv = document.getElementById('cs-result');
        const estimateP = document.getElementById('cs-estimate');

        // Event listener for service selection change
        serviceSelect.addEventListener('change', function () {
            renderFields(this.value);
        });

        // Function to render dynamic input fields based on selected service
        function renderFields(service) {
            dynamicFields.innerHTML = ''; // Clear previous fields

            switch (service) {
                case 'regular':
                case 'office':
                    // Frequency Selection and Hours Input
                    dynamicFields.innerHTML += `
                        <div class="cs-form-group">
                            <label for="frequency">Select Frequency:</label>
                            <select id="frequency" required>
                                <option value="">--Please choose--</option>
                                <option value="weekly">Weekly (£18/hr)</option>
                                <option value="fortnightly">Fortnightly (£19/hr)</option>
                                <option value="monthly">Monthly (£21/hr)</option>
                            </select>
                        </div>
                        <div class="cs-form-group">
                            <label for="hours">Number of Hours:</label>
                            <input type="number" id="hours" min="2.5" step="0.5" required>
                        </div>
                    `;
                    break;

                case 'carpet':
                    // Carpet Cleaning Options
                    dynamicFields.innerHTML += `
                        <div class="cs-form-group">
                            <label>Rooms to Clean:</label>
                            <div>
                                <label><input type="checkbox" name="carpet-room" value="single"> Single Room (£25)</label>
                            </div>
                            <div>
                                <label><input type="checkbox" name="carpet-room" value="double"> Double Room (£30)</label>
                            </div>
                            <div>
                                <label><input type="checkbox" name="carpet-room" value="living"> Living Room/Lounge (£40)</label>
                            </div>
                            <div>
                                <label><input type="checkbox" name="carpet-room" value="hallway"> Hallway (£25)</label>
                            </div>
                            <div>
                                <label><input type="checkbox" name="carpet-room" value="landing"> Landing (£20)</label>
                            </div>
                            <div>
                                <label><input type="checkbox" name="carpet-room" value="bathroom"> Bathroom (£20)</label>
                            </div>
                            <div>
                                <label><input type="checkbox" name="carpet-room" value="stairs"> Stairs (£2.5 per step)</label>
                            </div>
                            <div class="cs-form-group">
                                <label for="steps">Number of Steps:</label>
                                <input type="number" id="steps" min="0" step="1">
                            </div>
                        </div>
                    `;
                    break;

                case 'endTenancy':
                    // Property Size Selection
                    dynamicFields.innerHTML += `
                        <div class="cs-form-group">
                            <label for="property-size">Select Property Size:</label>
                            <select id="property-size" required>
                                <option value="">--Please choose--</option>
                                <option value="bedroomHouseShare">Bedroom in House Share (£95)</option>
                                <option value="studioFlat">Studio Flat (£125)</option>
                                <option value="oneBedroom">One-Bedroom Property (£155)</option>
                                <option value="twoBedroom">Two-Bedroom Property (£195)</option>
                                <option value="threeBedroom">Three-Bedroom Property (£245)</option>
                                <option value="fourBedroom">Four-Bedroom Property (£335)</option>
                                <option value="fiveBedroom">Five-Bedroom Property (£395)</option>
                            </select>
                        </div>
                    `;
                    break;

                case 'oneOff':
                    // Hours Input
                    dynamicFields.innerHTML += `
                        <div class="cs-form-group">
                            <label for="oneoff-hours">Number of Hours:</label>
                            <input type="number" id="oneoff-hours" min="4" step="1" required>
                        </div>
                    `;
                    break;

                case 'afterBuilders':
                    // No additional inputs needed
                    break;

                case 'afterParty':
                    // Number of Cleaners
                    dynamicFields.innerHTML += `
                        <div class="cs-form-group">
                            <label for="cleaners">Number of Cleaners:</label>
                            <input type="number" id="cleaners" min="1" step="1" required>
                        </div>
                        <div class="cs-form-group">
                            <label for="party-hours">Number of Hours per Cleaner:</label>
                            <input type="number" id="party-hours" min="4" step="1" required>
                        </div>
                    `;
                    break;

                case 'oven':
                    // Number of Cleaners
                    dynamicFields.innerHTML += `
                        <div class="cs-form-group">
                            <label for="oven-cleaners">Number of Cleaners:</label>
                            <input type="number" id="oven-cleaners" min="1" step="1" required>
                        </div>
                        <div class="cs-form-group">
                            <label for="oven-hours">Number of Hours per Cleaner:</label>
                            <input type="number" id="oven-hours" min="4" step="1" required>
                        </div>
                    `;
                    break;

                default:
                    // No service selected
                    break;
            }
        }

        // Event listener for form submission
        calculatorForm.addEventListener('submit', function (e) {
            e.preventDefault(); // Prevent form from submitting

            const service = serviceSelect.value;
            let estimate = 0;
            let valid = true;

            switch (service) {
                case 'regular':
                case 'office':
                    const frequency = document.getElementById('frequency').value;
                    const hours = parseFloat(document.getElementById('hours').value);
                    if (isNaN(hours) || hours < (service === 'office' ? 2.5 : 2.5)) {
                        valid = false;
                        alert('Please enter a valid number of hours (minimum 2.5).');
                        break;
                    }
                    let rate = 0;
                    if (frequency === 'weekly') rate = 18;
                    else if (frequency === 'fortnightly') rate = 19;
                    else if (frequency === 'monthly') rate = 21;
                    estimate = rate * hours;
                    break;

                case 'carpet':
                    const checkedRooms = document.querySelectorAll('input[name="carpet-room"]:checked');
                    if (checkedRooms.length === 0) {
                        valid = false;
                        alert('Please select at least one room type.');
                        break;
                    }
                    let carpetTotal = 0;
                    checkedRooms.forEach(room => {
                        switch (room.value) {
                            case 'single':
                                carpetTotal += 25;
                                break;
                            case 'double':
                                carpetTotal += 30;
                                break;
                            case 'living':
                                carpetTotal += 40;
                                break;
                            case 'hallway':
                                carpetTotal += 25;
                                break;
                            case 'landing':
                                carpetTotal += 20;
                                break;
                            case 'bathroom':
                                carpetTotal += 20;
                                break;
                            case 'stairs':
                                const steps = parseInt(document.getElementById('steps').value) || 0;
                                carpetTotal += 2.5 * steps;
                                break;
                            default:
                                break;
                        }
                    });
                    // Apply minimum charge
                    if (carpetTotal < 50) {
                        carpetTotal = 50;
                    }
                    estimate = carpetTotal;
                    break;

                case 'endTenancy':
                    const propertySize = document.getElementById('property-size').value;
                    switch (propertySize) {
                        case 'bedroomHouseShare':
                            estimate = 95;
                            break;
                        case 'studioFlat':
                            estimate = 125;
                            break;
                        case 'oneBedroom':
                            estimate = 155;
                            break;
                        case 'twoBedroom':
                            estimate = 195;
                            break;
                        case 'threeBedroom':
                            estimate = 245;
                            break;
                        case 'fourBedroom':
                            estimate = 335;
                            break;
                        case 'fiveBedroom':
                            estimate = 395;
                            break;
                        default:
                            valid = false;
                            alert('Please select a property size.');
                            break;
                    }
                    break;

                case 'oneOff':
                    const oneOffHours = parseInt(document.getElementById('oneoff-hours').value);
                    if (isNaN(oneOffHours) || oneOffHours < 4) {
                        valid = false;
                        alert('Please enter a valid number of hours (minimum 4).');
                        break;
                    }
                    estimate = 25 * oneOffHours;
                    break;

                case 'afterBuilders':
                    estimate = 95; // Starting from £95
                    break;

                case 'afterParty':
                    const cleaners = parseInt(document.getElementById('cleaners').value);
                    const partyHours = parseInt(document.getElementById('party-hours').value);
                    if (isNaN(cleaners) || cleaners < 1 || isNaN(partyHours) || partyHours < 4) {
                        valid = false;
                        alert('Please enter valid numbers of cleaners and hours (minimum 4 hours).');
                        break;
                    }
                    estimate = 25 * cleaners * partyHours;
                    break;

                case 'oven':
                    const ovenCleaners = parseInt(document.getElementById('oven-cleaners').value);
                    const ovenHours = parseInt(document.getElementById('oven-hours').value);
                    if (isNaN(ovenCleaners) || ovenCleaners < 1 || isNaN(ovenHours) || ovenHours < 4) {
                        valid = false;
                        alert('Please enter valid numbers of cleaners and hours (minimum 4 hours).');
                        break;
                    }
                    estimate = 60 * ovenCleaners; // Starting from £60 per cleaner
                    break;

                default:
                    valid = false;
                    alert('Please select a service.');
                    break;
            }

            if (valid) {
                estimateP.textContent = `Your estimated cost is £${estimate.toFixed(2)}. Please contact us for an exact quote.`;
                resultDiv.style.display = 'block';
                // Scroll to result
                resultDiv.scrollIntoView({ behavior: 'smooth' });
            } else {
                resultDiv.style.display = 'none';
            }
        });
    });
</script>

</body>
</html>
