<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cleaning Service Calculator</title>
    <style>
        /* Cleaning Service Calculator Styles */
        #cleaning-calculator {
            font-family: Arial, sans-serif;
            max-width: 600px;
            margin: 20px auto;
            padding: 20px;
            border: 2px solid #f0f0f0;
            border-radius: 10px;
            background: #ffffff;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            position: relative;
            overflow: hidden;
        }

        #cleaning-calculator h2 {
            text-align: center;
            color: #333;
            margin-bottom: 20px;
            animation: slideDown 0.5s ease-out;
        }

        /* Keyframes for Animations */
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

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

        /* Form Styles */
        #cleaning-calculator form {
            display: flex;
            flex-direction: column;
        }

        #cleaning-calculator label {
            color: #555;
            margin-bottom: 5px;
            font-weight: bold;
        }

        #cleaning-calculator select,
        #cleaning-calculator input[type="number"],
        #cleaning-calculator input[type="range"] {
            width: 100%;
            padding: 10px;
            border-radius: 5px;
            border: 1px solid #ccc;
            margin-bottom: 15px;
            box-sizing: border-box;
            transition: border-color 0.3s;
        }

        #cleaning-calculator select:focus,
        #cleaning-calculator input[type="number"]:focus,
        #cleaning-calculator input[type="range"]:focus {
            border-color: #007bff;
            outline: none;
        }

        /* Radio and Checkbox Styles */
        .service-options input[type="radio"],
        .service-options input[type="checkbox"] {
            margin-right: 10px;
            cursor: pointer;
        }

        .service-options label {
            display: inline-block;
            margin-bottom: 10px;
            cursor: pointer;
        }

        /* Buttons */
        #calculate-btn,
        #contact-btn {
            padding: 15px;
            background: #28a745;
            color: #fff;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            transition: background 0.3s;
            margin-top: 10px;
        }

        #calculate-btn:hover {
            background: #218838;
        }

        #contact-btn {
            background: #007bff;
        }

        #contact-btn:hover {
            background: #0056b3;
        }

        /* Result Section */
        #result-section {
            display: none;
            text-align: center;
            margin-top: 20px;
            animation: fadeIn 1s;
        }

        #result-section h3 {
            color: #333;
            margin-bottom: 10px;
        }

        #result-section p {
            color: #555;
            margin-bottom: 20px;
        }

        /* Tooltip Styles */
        .tooltip {
            position: relative;
            display: inline-block;
            cursor: pointer;
            color: #007bff;
            margin-left: 5px;
        }

        .tooltip .tooltiptext {
            visibility: hidden;
            width: 220px;
            background-color: #555;
            color: #fff;
            text-align: left;
            border-radius: 6px;
            padding: 8px;
            position: absolute;
            z-index: 1;
            bottom: 125%; /* Position above the text */
            left: 50%;
            margin-left: -110px;
            opacity: 0;
            transition: opacity 0.3s;
            font-size: 12px;
        }

        .tooltip:hover .tooltiptext {
            visibility: visible;
            opacity: 1;
        }

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

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

            #calculate-btn,
            #contact-btn {
                font-size: 14px;
                padding: 10px;
            }

            .tooltip .tooltiptext {
                width: 180px;
                margin-left: -90px;
            }
        }
    </style>
</head>
<body>

    <!-- Cleaning Service Calculator -->
    <div id="cleaning-calculator">
        <h2>Cleaning Service Calculator</h2>
        <form id="calculator-form">
            <!-- Service Selection -->
            <div style="margin-bottom: 20px;">
                <label for="service-type">Select Service Type:</label>
                <select id="service-type">
                    <option value="">-- Choose an option --</option>
                    <option value="end-tenancy">End of Tenancy Cleaning</option>
                    <option value="domestic">Domestic Cleaning</option>
                    <option value="office">Office Cleaning</option>
                    <option value="carpet">Carpet Cleaning</option>
                    <option value="rug">Rug Cleaning</option>
                    <option value="upholstery">Upholstery Cleaning</option>
                </select>
            </div>

            <!-- End of Tenancy Cleaning Options -->
            <div id="end-tenancy-options" class="service-options" style="display: none;">
                <label>Select Flat Type:</label>
                <div>
                    <input type="radio" id="flatshare" name="flat-type" value="89">
                    <label for="flatshare">Bedroom in flatshare (£89)</label>
                </div>
                <div>
                    <input type="radio" id="studio" name="flat-type" value="160">
                    <label for="studio">Studio flat + 1 bathroom (£160)</label>
                </div>
                <div>
                    <input type="radio" id="1-bedroom" name="flat-type" value="190">
                    <label for="1-bedroom">1-bedroom flat + 1 bathroom (£190)</label>
                </div>
                <div>
                    <input type="radio" id="2-bedroom" name="flat-type" value="230">
                    <label for="2-bedroom">2-bedroom flat + 1 bathroom (£230)</label>
                </div>
                <div>
                    <input type="radio" id="3-bedroom" name="flat-type" value="290">
                    <label for="3-bedroom">3-bedroom flat + 1 bathroom (£290)</label>
                </div>
                <div>
                    <input type="radio" id="4-bedroom" name="flat-type" value="400">
                    <label for="4-bedroom">4-bedroom flat + 1 bathroom (£400)</label>
                </div>
                <div>
                    <label>Select Additional Services:</label>
                    <div>
                        <input type="checkbox" id="extra-rooms" name="additional-services" value="30">
                        <label for="extra-rooms">Extra Rooms (£30)</label>
                    </div>
                    <div>
                        <input type="checkbox" id="storage" name="additional-services" value="30">
                        <label for="storage">Storage (£30)</label>
                    </div>
                    <div>
                        <input type="checkbox" id="stairs" name="additional-services" value="30">
                        <label for="stairs">Stairs (£30)</label>
                    </div>
                    <div>
                        <input type="checkbox" id="fridge" name="additional-services" value="30">
                        <label for="fridge">Fridge Cleaning (£30)</label>
                    </div>
                    <div>
                        <input type="checkbox" id="oven" name="additional-services" value="30">
                        <label for="oven">Oven Cleaning (£30)</label>
                    </div>
                    <div>
                        <input type="checkbox" id="blinds" name="additional-services" value="30">
                        <label for="blinds">Blinds Cleaning (£30)</label>
                    </div>
                    <div>
                        <input type="checkbox" id="balcony" name="additional-services" value="30">
                        <label for="balcony">Balcony Cleaning (£30)</label>
                    </div>
                </div>
            </div>

            <!-- Domestic Cleaning Options -->
            <div id="domestic-options" class="service-options" style="display: none;">
                <label>Select Frequency:</label>
                <select id="domestic-frequency">
                    <option value="22">Weekly, Fortnightly, or One-off (£22/hr, min 3 hrs)</option>
                </select>
                <div>
                    <label for="domestic-hours">Number of Hours:</label>
                    <input type="range" id="domestic-hours" min="3" max="10" value="3">
                    <span id="domestic-hours-value">3</span> hours
                </div>
            </div>

            <!-- Office Cleaning Options -->
            <div id="office-options" class="service-options" style="display: none;">
                <label>Select Cleaning Type:</label>
                <select id="office-cleaning-type">
                    <option value="24">Regular Cleaning (£24/hr, min 3 hrs)</option>
                    <option value="24_one-off">One-off or Spring Cleaning (£24/hr, min 3 hrs)</option>
                    <option value="170">Builders or Deep Cleaning (£170 flat)</option>
                </select>
                <div id="office-hours-container" style="display: none;">
                    <label for="office-hours">Number of Hours:</label>
                    <select id="office-hours">
                        <!-- Options from 3 to 10 -->
                        <option value="3">3 hours</option>
                        <option value="4">4 hours</option>
                        <option value="5">5 hours</option>
                        <option value="6">6 hours</option>
                        <option value="7">7 hours</option>
                        <option value="8">8 hours</option>
                        <option value="9">9 hours</option>
                        <option value="10">10 hours</option>
                    </select>
                </div>
            </div>

            <!-- Carpet Cleaning Options -->
            <div id="carpet-options" class="service-options" style="display: none;">
                <label>Select Areas to Clean:</label>
                <div>
                    <input type="checkbox" id="carpet-single-bedroom" value="30">
                    <label for="carpet-single-bedroom">Single Bedroom (£30)</label>
                </div>
                <div>
                    <input type="checkbox" id="carpet-double-bedroom" value="35">
                    <label for="carpet-double-bedroom">Double Bedroom (£35)</label>
                </div>
                <div>
                    <input type="checkbox" id="carpet-living-room" value="45">
                    <label for="carpet-living-room">Living Room (£45)</label>
                </div>
                <div>
                    <input type="checkbox" id="carpet-dining-room" value="35">
                    <label for="carpet-dining-room">Dining Room (£35)</label>
                </div>
                <div>
                    <input type="checkbox" id="carpet-through-lounge" value="70">
                    <label for="carpet-through-lounge">Through Lounge (£70)</label>
                </div>
                <div>
                    <input type="checkbox" id="carpet-bathroom" value="20">
                    <label for="carpet-bathroom">Bathroom or Toilet (£20)</label>
                </div>
                <div>
                    <label for="carpet-steps">Number of Stairs (£4 per step): <span class="tooltip">?
                        <span class="tooltiptext">Enter the total number of stairs that need cleaning.</span>
                    </span></label>
                    <input type="number" id="carpet-steps" min="0" value="0">
                </div>
                <div>
                    <input type="checkbox" id="carpet-hallway" value="20">
                    <label for="carpet-hallway">Hallway or Landing (£20)</label>
                </div>
            </div>

            <!-- Rug Cleaning Options -->
            <div id="rug-options" class="service-options" style="display: none;">
                <label>Select Rug Size:</label>
                <div>
                    <input type="radio" id="rug-small" name="rug-size" value="30">
                    <label for="rug-small">Small (1x2 meters) (£30)</label>
                </div>
                <div>
                    <input type="radio" id="rug-medium" name="rug-size" value="40">
                    <label for="rug-medium">Medium (2x3 meters) (£40)</label>
                </div>
                <div>
                    <input type="radio" id="rug-large" name="rug-size" value="50">
                    <label for="rug-large">Large (3x4 meters) (£50)</label>
                </div>
            </div>

            <!-- Upholstery Cleaning Options -->
            <div id="upholstery-options" class="service-options" style="display: none;">
                <label>Select Items to Clean:</label>
                <div>
                    <input type="checkbox" id="sofa-2-seat" value="60">
                    <label for="sofa-2-seat">2-Seat Sofa (£60)</label>
                </div>
                <div>
                    <input type="checkbox" id="sofa-3-seat" value="70">
                    <label for="sofa-3-seat">3-Seat Sofa (£70)</label>
                </div>
                <div>
                    <input type="checkbox" id="sofa-l-shaped" value="90">
                    <label for="sofa-l-shaped">L-Shaped Sofa (£90)</label>
                </div>
                <div>
                    <input type="checkbox" id="mattress-single" value="40">
                    <label for="mattress-single">Single Mattress (£40)</label>
                </div>
                <div>
                    <input type="checkbox" id="mattress-double" value="60">
                    <label for="mattress-double">Double Mattress (£60)</label>
                </div>
                <div>
                    <input type="checkbox" id="mattress-king" value="70">
                    <label for="mattress-king">King-Size Mattress (£70)</label>
                </div>
                <div>
                    <input type="checkbox" id="mattress-queen" value="80">
                    <label for="mattress-queen">Queen-Size Mattress (£80)</label>
                </div>
                <div>
                    <input type="checkbox" id="chair-dining" value="25">
                    <label for="chair-dining">Dining Chair (£25)</label>
                </div>
                <div>
                    <input type="checkbox" id="armchair" value="35">
                    <label for="armchair">Armchair (£35)</label>
                </div>
                <div>
                    <input type="checkbox" id="car-upholstery" value="80">
                    <label for="car-upholstery">Car Upholstery (£80)</label>
                </div>
            </div>

            <!-- Calculate Button -->
            <button type="button" id="calculate-btn">Calculate</button>
        </form>

        <!-- Result Section -->
        <div id="result-section">
            <h3>Estimated Cost: £<span id="total-cost">0.00</span></h3>
            <p>This is a preliminary estimate. For an accurate quote, please contact our representative.</p>
            <button id="contact-btn">Contact Us Now</button>
        </div>
    </div>

    <!-- Calculator Script -->
    <script>
        // Get elements
        const serviceType = document.getElementById('service-type');
        const serviceOptions = document.querySelectorAll('.service-options');
        const calculateBtn = document.getElementById('calculate-btn');
        const resultSection = document.getElementById('result-section');
        const totalCostSpan = document.getElementById('total-cost');
        const contactBtn = document.getElementById('contact-btn');

        // Show relevant options based on service type
        serviceType.addEventListener('change', function() {
            serviceOptions.forEach(option => option.style.display = 'none');
            const selected = this.value;
            if(selected) {
                document.getElementById(selected + '-options').style.display = 'block';
            }
            // Hide result section when changing service
            resultSection.style.display = 'none';
        });

        // Update domestic hours display
        const domesticHours = document.getElementById('domestic-hours');
        const domesticHoursValue = document.getElementById('domestic-hours-value');
        domesticHours.addEventListener('input', function() {
            domesticHoursValue.textContent = this.value;
        });

        // Handle Office Cleaning Hours Selection
        const officeCleaningType = document.getElementById('office-cleaning-type');
        const officeHoursContainer = document.getElementById('office-hours-container');
        const officeHoursSelect = document.getElementById('office-hours');

        officeCleaningType.addEventListener('change', function() {
            if(this.value !== '170') {
                officeHoursContainer.style.display = 'block';
            } else {
                officeHoursContainer.style.display = 'none';
            }
        });

        // Calculate total cost
        calculateBtn.addEventListener('click', function() {
            let total = 0;
            const selectedService = serviceType.value;

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

            // End of Tenancy Cleaning
            if(selectedService === 'end-tenancy') {
                const flatType = document.querySelector('input[name="flat-type"]:checked');
                if(!flatType) {
                    alert('Please select a flat type.');
                    return;
                }
                total += parseFloat(flatType.value);
                
                // Get selected additional services
                const additionalServices = document.querySelectorAll('input[name="additional-services"]:checked');
                additionalServices.forEach(service => {
                    total += parseFloat(service.value);
                });
            }

            // Domestic Cleaning
            if(selectedService === 'domestic') {
                const rate = parseFloat(document.getElementById('domestic-frequency').value);
                const hours = parseInt(document.getElementById('domestic-hours').value);
                total += rate * hours;
            }

            // Office Cleaning
            if(selectedService === 'office') {
                const cleaningType = officeCleaningType.value;
                if(cleaningType === '170') {
                    total += 170;
                } else {
                    const rate = parseFloat(cleaningType);
                    const hours = parseInt(officeHoursSelect.value);
                    total += rate * hours;
                }
            }

            // Carpet Cleaning
            if(selectedService === 'carpet') {
                const carpetAreas = document.querySelectorAll('#carpet-options input[type="checkbox"]:checked');
                carpetAreas.forEach(area => {
                    total += parseFloat(area.value);
                });
                const steps = parseInt(document.getElementById('carpet-steps').value) || 0;
                total += steps * 4;
                // Ensure minimum charge
                if(total < 80) {
                    total = 80;
                }
            }

            // Rug Cleaning
            if(selectedService === 'rug') {
                const rugSize = document.querySelector('input[name="rug-size"]:checked');
                if(!rugSize) {
                    alert('Please select a rug size.');
                    return;
                }
                total += parseFloat(rugSize.value);
            }

            // Upholstery Cleaning
            if(selectedService === 'upholstery') {
                const upholsteryItems = document.querySelectorAll('#upholstery-options input[type="checkbox"]:checked');
                upholsteryItems.forEach(item => {
                    total += parseFloat(item.value);
                });
            }

            // Apply discounts if applicable
            // Example: 5% off for combining End of Tenancy and Carpet Cleaning
            // This requires multiple services selection which is not currently handled
            // Future implementation can include multi-service selection

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

        // Contact button action
        contactBtn.addEventListener('click', function() {
            // Redirect to contact form or open contact modal
            // Replace the URL below with your actual contact page URL
            window.location.href = '/contact';
            // Alternatively, you can open a mailto link
            // window.location.href = 'mailto:contact@cleaningservice.com';
        });
    </script>

</body>
</html>
