<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Cleaning Service Cost Calculator</title>
  
  <!-- Inline CSS for the calculator -->
  <style>
    /* Basic reset for calculator container to avoid conflicts */
    .cleaning-calculator * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
    }
    
    .cleaning-calculator {
      max-width: 600px;
      margin: 20px auto;
      border: 1px solid #ccc;
      border-radius: 8px;
      padding: 16px;
      background-color: #fafafa;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    
    .cleaning-calculator h2 {
      text-align: center;
      margin-bottom: 16px;
    }
    
    .cleaning-calculator .service-section {
      margin-bottom: 16px;
    }
    
    .cleaning-calculator .service-section h3 {
      margin-bottom: 8px;
      font-size: 1.1rem;
      color: #333;
    }
    
    .cleaning-calculator label {
      display: inline-block;
      margin-bottom: 4px;
      color: #555;
      font-size: 0.95rem;
    }
    
    .cleaning-calculator select,
    .cleaning-calculator input[type="number"] {
      width: 100%;
      max-width: 300px;
      margin-bottom: 8px;
      padding: 6px;
      font-size: 0.95rem;
      border: 1px solid #ccc;
      border-radius: 4px;
    }
    
    .cleaning-calculator .checkbox-container {
      display: flex;
      align-items: center;
      margin-bottom: 8px;
    }
    
    .cleaning-calculator .checkbox-container input[type="checkbox"] {
      margin-right: 6px;
    }
    
    .cleaning-calculator button#calculateBtn {
      display: block;
      width: 100%;
      max-width: 200px;
      margin: 20px auto;
      padding: 10px;
      font-size: 1rem;
      color: #fff;
      background-color: #007acc;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    
    .cleaning-calculator button#calculateBtn:hover {
      background-color: #005f99;
    }
    
    .cleaning-calculator #result {
      margin-top: 20px;
      text-align: center;
      display: none; /* Hidden by default, displayed after calculation */
    }
    
    .cleaning-calculator #result p {
      margin: 8px 0;
      font-size: 1rem;
    }
    
    .cleaning-calculator button#quoteBtn {
      display: inline-block;
      margin-top: 8px;
      padding: 10px 16px;
      font-size: 0.95rem;
      color: #fff;
      background-color: #28a745;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    
    .cleaning-calculator button#quoteBtn:hover {
      background-color: #218838;
    }
    
    /* Responsive design for mobile devices */
    @media (max-width: 480px) {
      .cleaning-calculator {
        padding: 10px;
      }
      .cleaning-calculator input[type="number"],
      .cleaning-calculator select {
        max-width: 100%;
      }
    }
  </style>
</head>

<body>

  <div class="cleaning-calculator" id="cleaningCalculator">
    <h2>Cleaning Service Cost Calculator</h2>
    
    <!-- End of Tenancy Cleaning -->
    <div class="service-section">
      <h3>End of Tenancy Cleaning</h3>
      <!-- Comment in English: The user selects the size of the property -->
      <label for="endOfTenancy">Property Size:</label>
      <select id="endOfTenancy">
        <!-- 0 means no selection or skip -->
        <option value="0">-- Select --</option>
        <option value="155">Studio Flat (From £155)</option>
        <option value="175">1 Bedroom (From £175)</option>
        <option value="215">2 Bedrooms (From £215)</option>
        <option value="275">3 Bedrooms (From £275)</option>
        <option value="309">4 Bedrooms (From £309)</option>
      </select>
    </div>
    
    <!-- Upholstery Cleaning -->
    <div class="service-section">
      <h3>Upholstery Cleaning</h3>
      <!-- Comment in English: User inputs the quantity of each item -->
      <label for="diningChairQty">Dining Chair (From £9) - Quantity:</label>
      <input type="number" min="0" value="0" id="diningChairQty">
      
      <label for="armchairQty">Armchair (From £21) - Quantity:</label>
      <input type="number" min="0" value="0" id="armchairQty">
      
      <label for="twoSeaterSofaQty">Two-Seater Sofa (From £28) - Quantity:</label>
      <input type="number" min="0" value="0" id="twoSeaterSofaQty">
      
      <label for="threeSeaterSofaQty">Three-Seater Sofa (From £38) - Quantity:</label>
      <input type="number" min="0" value="0" id="threeSeaterSofaQty">
      
      <label for="fourSeaterSofaQty">Four-Seater Sofa (From £48) - Quantity:</label>
      <input type="number" min="0" value="0" id="fourSeaterSofaQty">
    </div>
    
    <!-- Carpet and Rug Cleaning -->
    <div class="service-section">
      <h3>Carpet and Rug Cleaning</h3>
      <!-- Comment in English: Each field for number of areas or steps -->
      <label for="hallwayQty">Hallway (From £18) - How many hallways?:</label>
      <input type="number" min="0" value="0" id="hallwayQty">
      
      <label for="singleRoomQty">Single Room (From £24) - Quantity:</label>
      <input type="number" min="0" value="0" id="singleRoomQty">
      
      <label for="doubleRoomQty">Double Room (From £29) - Quantity:</label>
      <input type="number" min="0" value="0" id="doubleRoomQty">
      
      <label for="livingRoomQty">Living Room / Lounge (From £35) - Quantity:</label>
      <input type="number" min="0" value="0" id="livingRoomQty">
      
      <label for="bathroomQty">Bathroom (From £9) - Quantity:</label>
      <input type="number" min="0" value="0" id="bathroomQty">
      
      <label for="landingQty">Landing (From £11) - Quantity:</label>
      <input type="number" min="0" value="0" id="landingQty">
      
      <label for="stairsSteps">Stairs (From £3 per step) - Number of steps:</label>
      <input type="number" min="0" value="0" id="stairsSteps">
    </div>
    
    <!-- Domestic Cleaning -->
    <div class="service-section">
      <h3>Domestic Cleaning</h3>
      <!-- Comment in English: Allows user to choose which domestic cleaning service is needed -->
      <label for="domesticType">Select Domestic Cleaning Type:</label>
      <select id="domesticType">
        <option value="none">-- No Domestic Cleaning --</option>
        <option value="regular">Regular Domestic Cleaning (£20/hour)</option>
        <option value="oneOffNoMaterials">One-off / Spring (Client's Materials) (£21/hour)</option>
        <option value="oneOffWithMaterials">One-off / Spring (Including Materials) (£23/hour)</option>
        <option value="fullDay">Cleaner for One Full Day (£168)</option>
      </select>
      
      <!-- Hours input is relevant only for hourly-based options -->
      <label for="domesticHours">How many hours? (If applicable):</label>
      <input type="number" min="0" value="0" id="domesticHours">
      
      <!-- Equipment rental is optional, typically for one-off or spring cleaning -->
      <div class="checkbox-container">
        <input type="checkbox" id="equipmentRental">
        <label for="equipmentRental">Equipment Rental (£45)</label>
      </div>
    </div>
    
    <!-- Oven Cleaning -->
    <div class="service-section">
      <h3>Oven Cleaning</h3>
      <div class="checkbox-container">
        <input type="checkbox" id="ovenCleaning">
        <label for="ovenCleaning">Full Oven Cleaning (From £65)</label>
      </div>
    </div>
    
    <!-- Office Cleaning -->
    <div class="service-section">
      <h3>Office Cleaning</h3>
      <!-- Comment in English: The rate is from £20/hour, user can enter hours to get approximate sum -->
      <label for="officeHours">Office Cleaning (From £20/hour) - How many hours?:</label>
      <input type="number" min="0" value="0" id="officeHours">
    </div>
    
    <!-- Mattress Cleaning -->
    <div class="service-section">
      <h3>Mattress Cleaning</h3>
      <label for="singleMattressQty">Single Mattress (From £24) - Quantity:</label>
      <input type="number" min="0" value="0" id="singleMattressQty">
      
      <label for="doubleMattressQty">Double Mattress (From £35) - Quantity:</label>
      <input type="number" min="0" value="0" id="doubleMattressQty">
    </div>
    
    <!-- Calculate button -->
    <button id="calculateBtn" onclick="calculateTotal()">Calculate</button>
    
    <!-- Result section (hidden by default) -->
    <div id="result">
      <p id="totalPrice"></p>
      <p>This is a preliminary cost. Please contact us for an exact quote.</p>
      <button id="quoteBtn" onclick="contactUsNow()">Contact Us Now</button>
    </div>
  </div>

  <!-- Inline JavaScript for the calculator -->
  <script>
    // Function in English: Calculates total price based on user input
    function calculateTotal() {
      let total = 0;
      
      // End of Tenancy Cleaning (dropdown)
      const endOfTenancyValue = parseFloat(document.getElementById('endOfTenancy').value);
      if (!isNaN(endOfTenancyValue)) {
        total += endOfTenancyValue;
      }

      // Upholstery Cleaning (quantities)
      const diningChairQty = parseInt(document.getElementById('diningChairQty').value) || 0;
      const armchairQty = parseInt(document.getElementById('armchairQty').value) || 0;
      const twoSeaterSofaQty = parseInt(document.getElementById('twoSeaterSofaQty').value) || 0;
      const threeSeaterSofaQty = parseInt(document.getElementById('threeSeaterSofaQty').value) || 0;
      const fourSeaterSofaQty = parseInt(document.getElementById('fourSeaterSofaQty').value) || 0;
      
      total += diningChairQty * 9;
      total += armchairQty * 21;
      total += twoSeaterSofaQty * 28;
      total += threeSeaterSofaQty * 38;
      total += fourSeaterSofaQty * 48;

      // Carpet and Rug Cleaning
      const hallwayQty = parseInt(document.getElementById('hallwayQty').value) || 0;
      const singleRoomQty = parseInt(document.getElementById('singleRoomQty').value) || 0;
      const doubleRoomQty = parseInt(document.getElementById('doubleRoomQty').value) || 0;
      const livingRoomQty = parseInt(document.getElementById('livingRoomQty').value) || 0;
      const bathroomQty = parseInt(document.getElementById('bathroomQty').value) || 0;
      const landingQty = parseInt(document.getElementById('landingQty').value) || 0;
      const stairsSteps = parseInt(document.getElementById('stairsSteps').value) || 0;
      
      total += hallwayQty * 18;
      total += singleRoomQty * 24;
      total += doubleRoomQty * 29;
      total += livingRoomQty * 35;
      total += bathroomQty * 9;
      total += landingQty * 11;
      total += stairsSteps * 3; // £3 per step

      // Domestic Cleaning
      const domesticType = document.getElementById('domesticType').value;
      const domesticHours = parseFloat(document.getElementById('domesticHours').value) || 0;
      const equipmentRentalChecked = document.getElementById('equipmentRental').checked;
      
      if (domesticType === 'regular') {
        // £20/hour
        total += domesticHours * 20;
      } else if (domesticType === 'oneOffNoMaterials') {
        // £21/hour
        total += domesticHours * 21;
      } else if (domesticType === 'oneOffWithMaterials') {
        // £23/hour
        total += domesticHours * 23;
      } else if (domesticType === 'fullDay') {
        // £168 flat
        total += 168;
      }
      
      // Equipment Rental is a flat £45 if checked
      if (equipmentRentalChecked) {
        total += 45;
      }
      
      // Oven Cleaning
      const ovenCleaningChecked = document.getElementById('ovenCleaning').checked;
      if (ovenCleaningChecked) {
        total += 65;
      }
      
      // Office Cleaning
      const officeHours = parseFloat(document.getElementById('officeHours').value) || 0;
      // From £20/hour
      total += officeHours * 20;
      
      // Mattress Cleaning
      const singleMattressQty = parseInt(document.getElementById('singleMattressQty').value) || 0;
      const doubleMattressQty = parseInt(document.getElementById('doubleMattressQty').value) || 0;
      
      total += singleMattressQty * 24;
      total += doubleMattressQty * 35;
      
      // Show the total in the result section
      const resultDiv = document.getElementById('result');
      const totalPriceP = document.getElementById('totalPrice');
      
      // If total is 0, hide the result (assuming user didn't select anything)
      if (total > 0) {
        // We use "From £..." to indicate it's a preliminary cost
        totalPriceP.textContent = "Estimated Price: From £" + total.toFixed(2);
        resultDiv.style.display = "block";
      } else {
        resultDiv.style.display = "none";
      }
    }
    
    // Function in English: Simulates the contact action or opens a contact form
    function contactUsNow() {
      // Here you can add your own logic to open a contact form, redirect to a page, or dial a phone number
      alert("Thank you for your interest! Please call or email us for an exact quote.");
    }
  </script>
</body>
</html>
