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

        /* Section Titles */
        .prolux-calculator-container h2 {
            text-align: center;
            margin-bottom: 20px;
            color: #333333;
        }

        /* Service Category Titles */
        .prolux-calculator-container .service-category {
            font-size: 1.2em;
            font-weight: bold;
            margin-top: 20px;
            margin-bottom: 10px;
            color: #2c3e50;
            border-bottom: 2px solid #f0f0f0;
            padding-bottom: 5px;
        }

        /* Form Groups */
        .prolux-calculator-container .form-group {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 20px;
        }

        /* Service Options */
        .prolux-calculator-container .service-option {
            flex: 1 1 45%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px;
            border: 1px solid #e0e0e0;
            border-radius: 5px;
            background-color: #fafafa;
        }

        /* Labels */
        .prolux-calculator-container .service-option label {
            flex: 1;
            margin-right: 10px;
            font-weight: normal;
            color: #555555;
        }

        /* Price Display */
        .prolux-calculator-container .service-option .price {
            flex: 0 0 60px;
            text-align: right;
            color: #333333;
            font-weight: bold;
        }

        /* Quantity Input */
        .prolux-calculator-container .service-option input[type="number"] {
            width: 50px;
            padding: 5px;
            border: 1px solid #cccccc;
            border-radius: 5px;
            margin-left: 5px;
        }

        /* Unit Display */
        .prolux-calculator-container .service-option .unit {
            margin-left: 5px;
            color: #777777;
            font-size: 0.9em;
        }

        /* Additional Services */
        .prolux-calculator-container .additional-services {
            margin-bottom: 20px;
        }

        .prolux-calculator-container .additional-services label {
            font-weight: normal;
            color: #555555;
        }

        /* Calculate Button */
        .prolux-calculator-container .calculate-btn {
            width: 100%;
            padding: 12px;
            background-color: #4CAF50;
            color: #ffffff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 18px;
            transition: background-color 0.3s ease;
        }

        .prolux-calculator-container .calculate-btn:hover {
            background-color: #45a049;
        }

        /* Result Section */
        .prolux-calculator-container .result {
            margin-top: 20px;
            padding: 15px;
            background-color: #f9f9f9;
            border-left: 4px solid #4CAF50;
            display: none;
            border-radius: 5px;
        }

        .prolux-calculator-container .result p {
            margin: 0 0 10px 0;
            color: #333333;
            font-size: 1.1em;
        }

        /* Contact Button */
        .prolux-calculator-container .contact-btn {
            display: none;
            width: 100%;
            padding: 12px;
            background-color: #007BFF;
            color: #ffffff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 18px;
            text-align: center;
            text-decoration: none;
            transition: background-color 0.3s ease;
        }

        .prolux-calculator-container .contact-btn:hover {
            background-color: #0056b3;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .prolux-calculator-container {
                max-width: 90%;
                padding: 15px;
            }

            .prolux-calculator-container .service-option {
                flex: 1 1 100%;
            }

            .prolux-calculator-container .service-category {
                font-size: 1.1em;
            }

            .prolux-calculator-container .calculate-btn,
            .prolux-calculator-container .contact-btn {
                font-size: 16px;
                padding: 10px;
            }
        }

        @media (max-width: 480px) {
            .prolux-calculator-container .service-option {
                flex-direction: column;
                align-items: flex-start;
            }

            .prolux-calculator-container .service-option .price,
            .prolux-calculator-container .service-option .unit {
                margin-top: 5px;
            }

            .prolux-calculator-container .service-option input[type="number"] {
                margin-left: 0;
                margin-top: 5px;
            }
        }
    </style>
</head>
<body>

    <div class="prolux-calculator-container">
        <h2>Cleaning Service Calculator</h2>
        <form id="calculator-form">
            <!-- Carpet Cleaning Section -->
            <div class="service-category">Carpet Cleaning:</div>
            <div class="form-group">
                <div class="service-option">
                    <label for="carpet-bedroom">Bedroom</label>
                    <span class="price">£35</span>
                    <input type="number" id="carpet-bedroom" name="carpet-bedroom" min="0" value="0" placeholder="0">
                    <span class="unit">Bedrooms</span>
                </div>
                <div class="service-option">
                    <label for="carpet-living">Living Room/Dining Room</label>
                    <span class="price">£45</span>
                    <input type="number" id="carpet-living" name="carpet-living" min="0" value="0" placeholder="0">
                    <span class="unit">Rooms</span>
                </div>
                <div class="service-option">
                    <label for="carpet-staircase">Staircase</label>
                    <span class="price">£40</span>
                    <input type="number" id="carpet-staircase" name="carpet-staircase" min="0" value="0" placeholder="0">
                    <span class="unit">Staircases</span>
                </div>
                <div class="service-option">
                    <label for="carpet-hallway">Hallway</label>
                    <span class="price">£20</span>
                    <input type="number" id="carpet-hallway" name="carpet-hallway" min="0" value="0" placeholder="0">
                    <span class="unit">Hallways</span>
                </div>
            </div>

            <!-- Rug Cleaning Section -->
            <div class="service-category">Rug Cleaning:</div>
            <div class="form-group">
                <div class="service-option">
                    <label for="rug-small">Small Rug (2x3m)</label>
                    <span class="price">£30</span>
                    <input type="number" id="rug-small" name="rug-small" min="0" value="0" placeholder="0">
                    <span class="unit">Rugs</span>
                </div>
                <div class="service-option">
                    <label for="rug-medium">Medium Rug (3x4m)</label>
                    <span class="price">£35</span>
                    <input type="number" id="rug-medium" name="rug-medium" min="0" value="0" placeholder="0">
                    <span class="unit">Rugs</span>
                </div>
                <div class="service-option">
                    <label for="rug-large">Large Rug (4x5m)</label>
                    <span class="price">£40</span>
                    <input type="number" id="rug-large" name="rug-large" min="0" value="0" placeholder="0">
                    <span class="unit">Rugs</span>
                </div>
            </div>

            <!-- Mattress Cleaning Section -->
            <div class="service-category">Mattress Cleaning:</div>
            <div class="form-group">
                <div class="service-option">
                    <label for="mattress-single">Single Mattress</label>
                    <span class="price">£40</span>
                    <input type="number" id="mattress-single" name="mattress-single" min="0" value="0" placeholder="0">
                    <span class="unit">Mattresses</span>
                </div>
                <div class="service-option">
                    <label for="mattress-double">Double Mattress</label>
                    <span class="price">£45</span>
                    <input type="number" id="mattress-double" name="mattress-double" min="0" value="0" placeholder="0">
                    <span class="unit">Mattresses</span>
                </div>
                <div class="service-option">
                    <label for="mattress-king">King Size Mattress</label>
                    <span class="price">£55</span>
                    <input type="number" id="mattress-king" name="mattress-king" min="0" value="0" placeholder="0">
                    <span class="unit">Mattresses</span>
                </div>
                <div class="service-option">
                    <label for="mattress-super-king">Super King Size Mattress</label>
                    <span class="price">£60</span>
                    <input type="number" id="mattress-super-king" name="mattress-super-king" min="0" value="0" placeholder="0">
                    <span class="unit">Mattresses</span>
                </div>
                <div class="service-option">
                    <label for="mattress-queen">Queen Size Mattress</label>
                    <span class="price">£65</span>
                    <input type="number" id="mattress-queen" name="mattress-queen" min="0" value="0" placeholder="0">
                    <span class="unit">Mattresses</span>
                </div>
            </div>

            <!-- Curtain Cleaning Section -->
            <div class="service-category">Curtain Cleaning:</div>
            <div class="form-group">
                <div class="service-option">
                    <label for="curtain-half">Half-length Curtain (1.5m x 4m)</label>
                    <span class="price">£40</span>
                    <input type="number" id="curtain-half" name="curtain-half" min="0" value="0" placeholder="0">
                    <span class="unit">Curtains</span>
                </div>
                <div class="service-option">
                    <label for="curtain-full">Full-length Curtain (2.5m x 4m)</label>
                    <span class="price">£50</span>
                    <input type="number" id="curtain-full" name="curtain-full" min="0" value="0" placeholder="0">
                    <span class="unit">Curtains</span>
                </div>
            </div>

            <!-- Upholstery Cleaning Section -->
            <div class="service-category">Upholstery Cleaning (Fabric):</div>
            <div class="form-group">
                <div class="service-option">
                    <label for="upholstery-2seater">2-Seater Sofa</label>
                    <span class="price">£55</span>
                    <input type="number" id="upholstery-2seater" name="upholstery-2seater" min="0" value="0" placeholder="0">
                    <span class="unit">Sofas</span>
                </div>
                <div class="service-option">
                    <label for="upholstery-3seater">3-Seater Sofa</label>
                    <span class="price">£70</span>
                    <input type="number" id="upholstery-3seater" name="upholstery-3seater" min="0" value="0" placeholder="0">
                    <span class="unit">Sofas</span>
                </div>
                <div class="service-option">
                    <label for="upholstery-4seater">4-Seater Sofa</label>
                    <span class="price">£85</span>
                    <input type="number" id="upholstery-4seater" name="upholstery-4seater" min="0" value="0" placeholder="0">
                    <span class="unit">Sofas</span>
                </div>
                <div class="service-option">
                    <label for="upholstery-armchair">Armchair</label>
                    <span class="price">£30</span>
                    <input type="number" id="upholstery-armchair" name="upholstery-armchair" min="0" value="0" placeholder="0">
                    <span class="unit">Armchairs</span>
                </div>
            </div>

            <!-- Leather Upholstery Cleaning Section -->
            <div class="service-category">Leather Upholstery Cleaning:</div>
            <div class="form-group">
                <div class="service-option">
                    <label for="leather-2seater">2-Seater Sofa</label>
                    <span class="price">£70</span>
                    <input type="number" id="leather-2seater" name="leather-2seater" min="0" value="0" placeholder="0">
                    <span class="unit">Sofas</span>
                </div>
                <div class="service-option">
                    <label for="leather-3seater">3-Seater Sofa</label>
                    <span class="price">£90</span>
                    <input type="number" id="leather-3seater" name="leather-3seater" min="0" value="0" placeholder="0">
                    <span class="unit">Sofas</span>
                </div>
                <div class="service-option">
                    <label for="leather-4seater">4-Seater Sofa</label>
                    <span class="price">£110</span>
                    <input type="number" id="leather-4seater" name="leather-4seater" min="0" value="0" placeholder="0">
                    <span class="unit">Sofas</span>
                </div>
                <div class="service-option">
                    <label for="leather-armchair">Armchair</label>
                    <span class="price">£40</span>
                    <input type="number" id="leather-armchair" name="leather-armchair" min="0" value="0" placeholder="0">
                    <span class="unit">Armchairs</span>
                </div>
            </div>

            <!-- Car Interior Cleaning Section -->
            <div class="service-category">Car Interior Cleaning:</div>
            <div class="form-group">
                <div class="service-option">
                    <label for="car-seats-two">Seats of a Two-Seater Sports Car/Roadster</label>
                    <span class="price">£79</span>
                    <input type="number" id="car-seats-two" name="car-seats-two" min="0" value="0" placeholder="0">
                    <span class="unit">Cars</span>
                </div>
                <div class="service-option">
                    <label for="car-standard-fabric">Standard Car Interior - Fabric</label>
                    <span class="price">£79</span>
                    <input type="number" id="car-standard-fabric" name="car-standard-fabric" min="0" value="0" placeholder="0">
                    <span class="unit">Cars</span>
                </div>
                <div class="service-option">
                    <label for="car-standard-leather">Standard Car Interior - Leather</label>
                    <span class="price">£89</span>
                    <input type="number" id="car-standard-leather" name="car-standard-leather" min="0" value="0" placeholder="0">
                    <span class="unit">Cars</span>
                </div>
                <div class="service-option">
                    <label for="car-suv-fabric">SUV Standard Interior - Fabric</label>
                    <span class="price">£99</span>
                    <input type="number" id="car-suv-fabric" name="car-suv-fabric" min="0" value="0" placeholder="0">
                    <span class="unit">SUVs</span>
                </div>
                <div class="service-option">
                    <label for="car-suv-leather">SUV Standard Interior - Leather</label>
                    <span class="price">£109</span>
                    <input type="number" id="car-suv-leather" name="car-suv-leather" min="0" value="0" placeholder="0">
                    <span class="unit">SUVs</span>
                </div>
                <div class="service-option">
                    <label for="car-mpv-fabric">MPV Standard Interior (7-seater) - Fabric</label>
                    <span class="price">£119</span>
                    <input type="number" id="car-mpv-fabric" name="car-mpv-fabric" min="0" value="0" placeholder="0">
                    <span class="unit">MPVs</span>
                </div>
                <div class="service-option">
                    <label for="car-mpv-leather">MPV Standard Interior (7-seater) - Leather</label>
                    <span class="price">£129</span>
                    <input type="number" id="car-mpv-leather" name="car-mpv-leather" min="0" value="0" placeholder="0">
                    <span class="unit">MPVs</span>
                </div>
                <div class="service-option">
                    <label for="car-add-seat-fabric">Additional Seat Cleaning - Fabric</label>
                    <span class="price">£20</span>
                    <input type="number" id="car-add-seat-fabric" name="car-add-seat-fabric" min="0" value="0" placeholder="0">
                    <span class="unit">Seats</span>
                </div>
                <div class="service-option">
                    <label for="car-add-seat-leather">Additional Seat Cleaning - Leather</label>
                    <span class="price">£30</span>
                    <input type="number" id="car-add-seat-leather" name="car-add-seat-leather" min="0" value="0" placeholder="0">
                    <span class="unit">Seats</span>
                </div>
                <div class="service-option">
                    <label for="car-full-fabric">Full Car Interior - Fabric</label>
                    <span class="price">£120</span>
                    <input type="number" id="car-full-fabric" name="car-full-fabric" min="0" value="0" placeholder="0">
                    <span class="unit">Cars</span>
                </div>
                <div class="service-option">
                    <label for="car-full-leather">Full Car Interior - Leather</label>
                    <span class="price">£130</span>
                    <input type="number" id="car-full-leather" name="car-full-leather" min="0" value="0" placeholder="0">
                    <span class="unit">Cars</span>
                </div>
                <div class="service-option">
                    <label for="car-ozone">Ozone Cleaning</label>
                    <span class="price">£25</span>
                    <input type="number" id="car-ozone" name="car-ozone" min="0" value="0" placeholder="0">
                    <span class="unit">Sessions</span>
                </div>
            </div>

            <!-- Additional Services -->
            <div class="additional-services">
                <label>Additional Services:</label>
                <div>
                    <input type="checkbox" id="stain-protection" name="additional-services" value="stain-protection">
                    <label for="stain-protection">Stain Protection Spray (50% off)</label>
                </div>
                <div>
                    <input type="checkbox" id="bundle-discount" name="additional-services" value="bundle-discount">
                    <label for="bundle-discount">Bundle Discount (Up to 18% off)</label>
                </div>
            </div>

            <!-- Calculate Button -->
            <button type="button" class="calculate-btn" onclick="calculateTotal()">Calculate</button>
        </form>

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

    <script>
        /**
         * Function to calculate the total cost based on selected services and quantities
         */
        function calculateTotal() {
            let total = 0;

            // Carpet Cleaning Prices (Discounted)
            const carpetPrices = {
                'carpet-bedroom': 35,
                'carpet-living': 45,
                'carpet-staircase': 40,
                'carpet-hallway': 20
            };

            // Iterate through Carpet Cleaning options
            for (let id in carpetPrices) {
                const quantity = parseInt(document.getElementById(id).value) || 0;
                total += carpetPrices[id] * quantity;
            }

            // Rug Cleaning Prices (Discounted)
            const rugPrices = {
                'rug-small': 30,
                'rug-medium': 35,
                'rug-large': 40
            };

            // Iterate through Rug Cleaning options
            for (let id in rugPrices) {
                const quantity = parseInt(document.getElementById(id).value) || 0;
                total += rugPrices[id] * quantity;
            }

            // Mattress Cleaning Prices (Discounted)
            const mattressPrices = {
                'mattress-single': 40,
                'mattress-double': 45,
                'mattress-king': 55,
                'mattress-super-king': 60,
                'mattress-queen': 65
            };

            // Iterate through Mattress Cleaning options
            for (let id in mattressPrices) {
                const quantity = parseInt(document.getElementById(id).value) || 0;
                total += mattressPrices[id] * quantity;
            }

            // Curtain Cleaning Prices (Discounted)
            const curtainPrices = {
                'curtain-half': 40,
                'curtain-full': 50
            };

            // Iterate through Curtain Cleaning options
            for (let id in curtainPrices) {
                const quantity = parseInt(document.getElementById(id).value) || 0;
                total += curtainPrices[id] * quantity;
            }

            // Upholstery Cleaning Prices (Fabric, Discounted)
            const upholsteryPrices = {
                'upholstery-2seater': 55,
                'upholstery-3seater': 70,
                'upholstery-4seater': 85,
                'upholstery-armchair': 30
            };

            // Iterate through Upholstery Cleaning options
            for (let id in upholsteryPrices) {
                const quantity = parseInt(document.getElementById(id).value) || 0;
                total += upholsteryPrices[id] * quantity;
            }

            // Leather Upholstery Cleaning Prices (Discounted)
            const leatherUpholsteryPrices = {
                'leather-2seater': 70,
                'leather-3seater': 90,
                'leather-4seater': 110,
                'leather-armchair': 40
            };

            // Iterate through Leather Upholstery Cleaning options
            for (let id in leatherUpholsteryPrices) {
                const quantity = parseInt(document.getElementById(id).value) || 0;
                total += leatherUpholsteryPrices[id] * quantity;
            }

            // Car Interior Cleaning Prices (Discounted)
            const carInteriorPrices = {
                'car-seats-two': 79,
                'car-standard-fabric': 79,
                'car-standard-leather': 89,
                'car-suv-fabric': 99,
                'car-suv-leather': 109,
                'car-mpv-fabric': 119,
                'car-mpv-leather': 129,
                'car-add-seat-fabric': 20,
                'car-add-seat-leather': 30,
                'car-full-fabric': 120,
                'car-full-leather': 130,
                'car-ozone': 25
            };

            // Iterate through Car Interior Cleaning options
            for (let id in carInteriorPrices) {
                const quantity = parseInt(document.getElementById(id).value) || 0;
                total += carInteriorPrices[id] * quantity;
            }

            // Apply minimum charge
            if (total < 80) {
                total = 80;
            }

            // Handle additional services
            const stainProtection = document.getElementById('stain-protection').checked;
            if (stainProtection) {
                // Assuming Stain Protection Spray costs £20 before 50% discount
                total += 10; // 50% of £20
            }

            const bundleDiscount = document.getElementById('bundle-discount').checked;
            if (bundleDiscount) {
                // Apply up to 18% discount on the total
                total = total * 0.82;
            }

            // Round to two decimal places
            total = Math.round(total * 100) / 100;

            // Display the result
            document.getElementById('total-amount').innerText = `£${total}`;
            document.getElementById('result').style.display = 'block';
            document.getElementById('contact-btn').style.display = 'block';
        }
    </script>

</body>
</html>
