<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Cleaning Service Calculator</title>
  <!-- Styles for the Cleaning Service Calculator -->
  <style>
    /* Container Styling */
    #cleaning-calculator-container {
      max-width: 900px;
      margin: 40px auto;
      padding: 20px;
      box-sizing: border-box;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-color: #ffffff;
      border-radius: 10px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    }

    /* Heading Styling */
    #cleaning-calculator-container h2 {
      text-align: center;
      color: #2c3e50;
      margin-bottom: 30px;
      font-size: 28px;
    }

    /* Accordion Styling */
    .accordion {
      background-color: #f1f1f1;
      color: #2c3e50;
      cursor: pointer;
      padding: 15px;
      width: 100%;
      text-align: left;
      border: none;
      outline: none;
      transition: background-color 0.3s ease;
      font-size: 18px;
      border-radius: 5px;
      margin-bottom: 10px;
    }

    .active, .accordion:hover {
      background-color: #3498db;
      color: #ffffff;
    }

    .panel {
      padding: 0 15px;
      display: none;
      background-color: #fafafa;
      overflow: hidden;
      border-radius: 5px;
      margin-bottom: 15px;
    }

    /* Label and Input Styling */
    .service-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 0;
      border-bottom: 1px solid #e0e0e0;
    }

    .service-item:last-child {
      border-bottom: none;
    }

    .service-item label {
      flex: 1;
      cursor: pointer;
      display: flex;
      align-items: center;
      font-size: 16px;
    }

    .service-item input[type="number"] {
      width: 60px;
      padding: 5px;
      margin-left: 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
      text-align: right;
    }

    .service-item input[type="checkbox"] {
      margin-left: 10px;
      transform: scale(1.2);
    }

    /* Calculate Button Styling */
    #calculate-button {
      width: 100%;
      padding: 15px;
      background-color: #27ae60;
      color: white;
      border: none;
      border-radius: 5px;
      font-size: 20px;
      cursor: pointer;
      transition: background-color 0.3s ease;
      margin-top: 20px;
    }

    #calculate-button:hover {
      background-color: #219150;
    }

    /* Result Section Styling */
    #result-section {
      display: none;
      margin-top: 30px;
      text-align: center;
      padding: 20px;
      background-color: #ecf0f1;
      border-radius: 5px;
    }

    #estimated-price {
      font-size: 24px;
      font-weight: bold;
      color: #2c3e50;
      margin-bottom: 20px;
    }

    /* Contact Button Styling */
    #contact-button {
      padding: 12px 25px;
      background-color: #2980b9;
      color: white;
      border: none;
      border-radius: 5px;
      font-size: 18px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    #contact-button:hover {
      background-color: #1f6391;
    }

    /* Responsive Adjustments */
    @media (max-width: 768px) {
      #cleaning-calculator-container {
        padding: 15px;
        margin: 20px;
      }

      .accordion {
        font-size: 16px;
        padding: 12px;
      }

      .service-item label {
        font-size: 14px;
      }

      .service-item input[type="number"] {
        width: 50px;
      }

      #calculate-button {
        font-size: 18px;
        padding: 12px;
      }

      #estimated-price {
        font-size: 20px;
      }

      #contact-button {
        font-size: 16px;
        padding: 10px 20px;
      }
    }
  </style>
</head>
<body>

  <!-- Cleaning Service Calculator -->
  <div id="cleaning-calculator-container">
    <h2>Cleaning Service Calculator</h2>
    
    <!-- Form for Selecting Services -->
    <form id="cleaning-calculator-form">
      
      <!-- Carpet Cleaning Section -->
      <button type="button" class="accordion">Carpet Cleaning</button>
      <div class="panel">
        <div class="service-item">
          <label for="carpet-hallway">Hallway (£18):</label>
          <input type="number" min="0" value="0" id="carpet-hallway">
        </div>
        <div class="service-item">
          <label for="carpet-single-room">Single Room (£24):</label>
          <input type="number" min="0" value="0" id="carpet-single-room">
        </div>
        <div class="service-item">
          <label for="carpet-double-room">Double Room (£29):</label>
          <input type="number" min="0" value="0" id="carpet-double-room">
        </div>
        <div class="service-item">
          <label for="carpet-living-room">Living Room / Lounge (£35):</label>
          <input type="number" min="0" value="0" id="carpet-living-room">
        </div>
        <div class="service-item">
          <label for="carpet-bathroom">Bathroom (£9):</label>
          <input type="number" min="0" value="0" id="carpet-bathroom">
        </div>
        <div class="service-item">
          <label for="carpet-landing">Landing (£11):</label>
          <input type="number" min="0" value="0" id="carpet-landing">
        </div>
        <div class="service-item">
          <label for="carpet-stairs">Stairs (£3 per step):</label>
          <input type="number" min="0" value="0" id="carpet-stairs">
        </div>
      </div>
      
      <!-- End of Tenancy Cleaning Section -->
      <button type="button" class="accordion">End of Tenancy Cleaning</button>
      <div class="panel">
        <div class="service-item">
          <label for="et-cleaning-studio">Studio Flat (From £129):</label>
          <input type="number" min="0" value="0" id="et-cleaning-studio">
        </div>
        <div class="service-item">
          <label for="et-cleaning-one-bedroom">One-Bedroom Property (From £145):</label>
          <input type="number" min="0" value="0" id="et-cleaning-one-bedroom">
        </div>
        <div class="service-item">
          <label for="et-cleaning-two-bedroom">Two-Bedroom Property (From £184):</label>
          <input type="number" min="0" value="0" id="et-cleaning-two-bedroom">
        </div>
        <div class="service-item">
          <label for="et-cleaning-three-bedroom">Three-Bedroom Property (From £249):</label>
          <input type="number" min="0" value="0" id="et-cleaning-three-bedroom">
        </div>
        <div class="service-item">
          <label for="et-cleaning-four-bedroom">Four-Bedroom Property (From £274):</label>
          <input type="number" min="0" value="0" id="et-cleaning-four-bedroom">
        </div>
        <div class="service-item">
          <label for="et-cleaning-five-bedroom">Five-Bedroom Property (From £425):</label>
          <input type="number" min="0" value="0" id="et-cleaning-five-bedroom">
        </div>
      </div>
      
      <!-- One-Off Cleaning Section -->
      <button type="button" class="accordion">One-Off Cleaning</button>
      <div class="panel">
        <div class="service-item">
          <label for="oneoff-hours-customer">Hours (Customer Provided Materials £20/hour):</label>
          <input type="number" min="0" value="0" id="oneoff-hours-customer">
        </div>
        <div class="service-item">
          <label for="oneoff-hours-company">Hours (Company Provided Materials £22/hour):</label>
          <input type="number" min="0" value="0" id="oneoff-hours-company">
        </div>
        <div class="service-item">
          <label for="oneoff-equipment">Cleaning Equipment (£40, min 3 hours):</label>
          <input type="checkbox" id="oneoff-equipment">
        </div>
      </div>
      
      <!-- House Cleaning Section -->
      <button type="button" class="accordion">House Cleaning</button>
      <div class="panel">
        <div class="service-item">
          <label for="house-cleaning-fortnightly">Hours (Fortnightly/Regular £19/hour):</label>
          <input type="number" min="0" value="0" id="house-cleaning-fortnightly">
        </div>
        <div class="service-item">
          <label for="house-cleaning-weekly">Hours (Weekly £19/hour):</label>
          <input type="number" min="0" value="0" id="house-cleaning-weekly">
        </div>
      </div>
      
      <!-- After Builders Cleaning Section -->
      <button type="button" class="accordion">After Builders Cleaning</button>
      <div class="panel">
        <div class="service-item">
          <label for="builders-cleaning-hours">Hours (From £24/hour):</label>
          <input type="number" min="0" value="0" id="builders-cleaning-hours">
        </div>
      </div>
      
      <!-- Upholstery Cleaning Section -->
      <button type="button" class="accordion">Upholstery Cleaning</button>
      <div class="panel">
        <div class="service-item">
          <label for="upholstery-dining-chair">Dining Chair (£9):</label>
          <input type="number" min="0" value="0" id="upholstery-dining-chair">
        </div>
        <div class="service-item">
          <label for="upholstery-armchair">Armchair (£21):</label>
          <input type="number" min="0" value="0" id="upholstery-armchair">
        </div>
        <div class="service-item">
          <label for="upholstery-two-seater">Two-Seater Sofa (£28):</label>
          <input type="number" min="0" value="0" id="upholstery-two-seater">
        </div>
        <div class="service-item">
          <label for="upholstery-three-seater">Three-Seater Sofa (£38):</label>
          <input type="number" min="0" value="0" id="upholstery-three-seater">
        </div>
        <div class="service-item">
          <label for="upholstery-four-seater">Four-Seater Sofa (£48):</label>
          <input type="number" min="0" value="0" id="upholstery-four-seater">
        </div>
      </div>
      
      <!-- Mattress Cleaning Section -->
      <button type="button" class="accordion">Mattress Cleaning</button>
      <div class="panel">
        <div class="service-item">
          <label for="mattress-single">Single Mattress (£24):</label>
          <input type="number" min="0" value="0" id="mattress-single">
        </div>
        <div class="service-item">
          <label for="mattress-double">Double Mattress (£35):</label>
          <input type="number" min="0" value="0" id="mattress-double">
        </div>
      </div>
      
      <!-- Curtain Cleaning Section -->
      <button type="button" class="accordion">Curtain Cleaning</button>
      <div class="panel">
        <div class="service-item">
          <label for="curtain-half">Pair of Curtains (Half Length £29):</label>
          <input type="number" min="0" value="0" id="curtain-half">
        </div>
        <div class="service-item">
          <label for="curtain-full">Pair of Curtains (Full Length £35):</label>
          <input type="number" min="0" value="0" id="curtain-full">
        </div>
      </div>
      
      <!-- Rug Cleaning Section -->
      <button type="button" class="accordion">Rug Cleaning</button>
      <div class="panel">
        <div class="service-item">
          <label for="rug-small">Small Rug (120cm x 160cm £18):</label>
          <input type="number" min="0" value="0" id="rug-small">
        </div>
        <div class="service-item">
          <label for="rug-medium">Medium Rug (160cm x 230cm £24):</label>
          <input type="number" min="0" value="0" id="rug-medium">
        </div>
        <div class="service-item">
          <label for="rug-large">Large Rug (200cm x 300cm £29):</label>
          <input type="number" min="0" value="0" id="rug-large">
        </div>
      </div>
      
      <!-- Calculate Button -->
      <button type="button" id="calculate-button">Calculate Estimate</button>
    </form>
    
    <!-- Result Display -->
    <div id="result-section">
      <p id="estimated-price">Estimated Total: £0</p>
      <button id="contact-button">Contact Us for Exact Quote</button>
      <p style="margin-top: 10px; font-size: 14px; color: #7f8c8d;">This is a preliminary estimate. For an accurate quote, please contact our representative.</p>
    </div>
  </div>
  
  <!-- JavaScript for Calculator Functionality -->
  <script>
    // Accordion functionality
    const accordions = document.getElementsByClassName("accordion");
    for (let i = 0; i < accordions.length; i++) {
      accordions[i].addEventListener("click", function() {
        this.classList.toggle("active");
        const panel = this.nextElementSibling;
        if (panel.style.display === "block") {
          panel.style.display = "none";
        } else {
          panel.style.display = "block";
        }
      });
    }

    // Function to calculate the total estimate
    function calculateEstimate() {
      let total = 0;
      
      // Helper function to get integer value
      function getValue(id) {
        return parseInt(document.getElementById(id).value) || 0;
      }

      // Carpet Cleaning Prices
      total += getValue('carpet-hallway') * 18;
      total += getValue('carpet-single-room') * 24;
      total += getValue('carpet-double-room') * 29;
      total += getValue('carpet-living-room') * 35;
      total += getValue('carpet-bathroom') * 9;
      total += getValue('carpet-landing') * 11;
      total += getValue('carpet-stairs') * 3;
      
      // End of Tenancy Cleaning Prices
      total += getValue('et-cleaning-studio') * 129;
      total += getValue('et-cleaning-one-bedroom') * 145;
      total += getValue('et-cleaning-two-bedroom') * 184;
      total += getValue('et-cleaning-three-bedroom') * 249;
      total += getValue('et-cleaning-four-bedroom') * 274;
      total += getValue('et-cleaning-five-bedroom') * 425;
      
      // One-Off Cleaning Prices
      let oneOffHoursCustomer = getValue('oneoff-hours-customer');
      let oneOffHoursCompany = getValue('oneoff-hours-company');
      let oneOffEquipment = document.getElementById('oneoff-equipment').checked ? 40 : 0;
      let oneOffTotal = (oneOffHoursCustomer * 20) + (oneOffHoursCompany * 22) + oneOffEquipment;
      if (oneOffEquipment > 0 && (oneOffHoursCustomer + oneOffHoursCompany) < 3) {
        oneOffTotal += (3 - (oneOffHoursCustomer + oneOffHoursCompany)) * 20; // Minimum 3 hours
      }
      total += oneOffTotal;
      
      // House Cleaning Prices
      total += getValue('house-cleaning-fortnightly') * 19;
      total += getValue('house-cleaning-weekly') * 19;
      
      // After Builders Cleaning Prices
      total += getValue('builders-cleaning-hours') * 24;
      
      // Upholstery Cleaning Prices
      total += getValue('upholstery-dining-chair') * 9;
      total += getValue('upholstery-armchair') * 21;
      total += getValue('upholstery-two-seater') * 28;
      total += getValue('upholstery-three-seater') * 38;
      total += getValue('upholstery-four-seater') * 48;
      
      // Mattress Cleaning Prices
      total += getValue('mattress-single') * 24;
      total += getValue('mattress-double') * 35;
      
      // Curtain Cleaning Prices
      total += getValue('curtain-half') * 29;
      total += getValue('curtain-full') * 35;
      
      // Rug Cleaning Prices
      total += getValue('rug-small') * 18;
      total += getValue('rug-medium') * 24;
      total += getValue('rug-large') * 29;
      
      // Minimum charge for carpet and upholstery cleaning
      let carpetAndUpholsteryTotal = 0;
      carpetAndUpholsteryTotal += getValue('carpet-hallway') * 18;
      carpetAndUpholsteryTotal += getValue('carpet-single-room') * 24;
      carpetAndUpholsteryTotal += getValue('carpet-double-room') * 29;
      carpetAndUpholsteryTotal += getValue('carpet-living-room') * 35;
      carpetAndUpholsteryTotal += getValue('carpet-bathroom') * 9;
      carpetAndUpholsteryTotal += getValue('carpet-landing') * 11;
      carpetAndUpholsteryTotal += getValue('carpet-stairs') * 3;
      carpetAndUpholsteryTotal += getValue('upholstery-dining-chair') * 9;
      carpetAndUpholsteryTotal += getValue('upholstery-armchair') * 21;
      carpetAndUpholsteryTotal += getValue('upholstery-two-seater') * 28;
      carpetAndUpholsteryTotal += getValue('upholstery-three-seater') * 38;
      carpetAndUpholsteryTotal += getValue('upholstery-four-seater') * 48;
      
      if (carpetAndUpholsteryTotal > 0 && carpetAndUpholsteryTotal < 60) {
        total += (60 - carpetAndUpholsteryTotal);
      }
      
      // Display the result
      document.getElementById('estimated-price').innerText = `Estimated Total: £${total}`;
      document.getElementById('result-section').style.display = 'block';
      
      // Scroll to result
      document.getElementById('result-section').scrollIntoView({ behavior: 'smooth' });
    }
    
    // Event listener for Calculate button
    document.getElementById('calculate-button').addEventListener('click', calculateEstimate);
    
    // Event listener for Contact button
    document.getElementById('contact-button').addEventListener('click', function() {
      // Redirect to contact form or open contact modal
      // Customize this based on your website's contact method
      window.location.href = "mailto:hello@qithub.click?subject=Cleaning%20Service%20Quote";
    });
  </script>
  
</body>
</html>
