<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Enhanced Cleaning Service Calculator</title>
  <style>
    /* Reset basic elements for consistency */
    body, h1, h2, h3, h4, h5, h6, p, ul, li, form, input, select, button, div {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    body {
      background-color: #eef2f5;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      padding: 20px;
    }

    /* Cleaning Service Calculator Container */
    #cleaning-calculator-container {
      width: 100%;
      max-width: 600px;
      margin: 0 auto;
      padding: 25px;
      border: 1px solid #ddd;
      border-radius: 10px;
      background-color: #ffffff;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    #cleaning-calculator-container h2 {
      text-align: center;
      margin-bottom: 25px;
      color: #333333;
      font-size: 1.8em;
    }

    /* Service Entry Styles */
    .service-entry {
      border: 1px solid #ccc;
      padding: 15px;
      border-radius: 5px;
      margin-bottom: 20px;
      position: relative;
      background-color: #f9f9f9;
    }

    .service-entry:not(:first-child) {
      margin-top: 15px;
    }

    .remove-service-btn {
      position: absolute;
      top: 10px;
      right: 10px;
      background-color: #dc3545;
      border: none;
      color: white;
      padding: 5px 10px;
      border-radius: 3px;
      cursor: pointer;
      font-size: 0.9em;
    }

    .remove-service-btn:hover {
      background-color: #c82333;
    }

    .calculator-field {
      margin-bottom: 15px;
    }

    .calculator-field label {
      display: block;
      margin-bottom: 5px;
      color: #555555;
      font-weight: 500;
    }

    .calculator-field select,
    .calculator-field input[type="checkbox"],
    .calculator-field input[type="number"] {
      width: 100%;
      padding: 8px;
      padding-right: 35px;
      border: 1px solid #ccc;
      border-radius: 5px;
      font-size: 1em;
      background-color: #ffffff;
    }

    .calculator-field input[type="number"] {
      width: 100%;
    }

    .checkbox-group {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
    }

    .checkbox-group input {
      width: auto;
      margin-right: 10px;
    }

    /* Add Service Button */
    #add-service-btn {
      width: 100%;
      padding: 10px;
      background-color: #007bff;
      border: none;
      border-radius: 5px;
      color: #ffffff;
      font-size: 1em;
      cursor: pointer;
      transition: background-color 0.3s ease;
      margin-bottom: 20px;
    }

    #add-service-btn:hover {
      background-color: #0069d9;
    }

    /* Calculate Button */
    #calculate-btn {
      width: 100%;
      padding: 12px;
      background-color: #28a745;
      border: none;
      border-radius: 5px;
      color: #ffffff;
      font-size: 1.1em;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

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

    /* Result Display */
    #result {
      margin-top: 25px;
      padding: 20px;
      background-color: #f1f3f5;
      border-radius: 5px;
      text-align: center;
      display: none;
    }

    #result p {
      margin-bottom: 15px;
      color: #333333;
      font-size: 1.1em;
    }

    #result strong {
      color: #28a745;
      font-size: 1.3em;
    }

    #contact-btn {
      padding: 10px 20px;
      background-color: #007bff;
      border: none;
      border-radius: 5px;
      color: #ffffff;
      font-size: 1em;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    #contact-btn:hover {
      background-color: #0069d9;
    }

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

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

      #calculate-btn,
      #add-service-btn,
      #contact-btn {
        font-size: 0.9em;
        padding: 8px;
      }

      .remove-service-btn {
        padding: 3px 7px;
        font-size: 0.8em;
      }
    }
  </style>
</head>
<body>

  <!-- Cleaning Service Calculator -->
  <div id="cleaning-calculator-container">
    <h2>Cleaning Service Calculator</h2>

    <!-- Services Container -->
    <div id="services-container">
      <!-- Service Entry Template -->
      <div class="service-entry">
        <button type="button" class="remove-service-btn" onclick="removeService(this)">Remove</button>
        <div class="calculator-field">
          <label for="property-type-1">Property Type</label>
          <select id="property-type-1" class="property-type" onchange="toggleFields(this)">
            <option value="">Select Property Type</option>
            <option value="flats">Flats</option>
            <option value="bungalow">Bungalow</option>
            <option value="terraced_house">Terraced House</option>
            <option value="semi_detached_2bed">2-Bed Semi-Detached</option>
            <option value="semi_detached_3bed">3/4-Bed Semi-Detached</option>
            <option value="town_house">Town House</option>
            <option value="detached_4bed">4-Bed Detached</option>
            <option value="larger_bespoke">Larger/Bespoke Homes</option>
            <option value="commercial">Commercial Properties</option>
          </select>
        </div>

        <div class="calculator-field frequency-field" style="display: none;">
          <label for="frequency-1">Service Frequency</label>
          <select id="frequency-1" class="frequency">
            <option value="">Select Frequency</option>
            <option value="monthly">Monthly</option>
            <option value="bi_monthly">Bi-Monthly</option>
          </select>
        </div>

        <div class="calculator-field additional-options" style="display: none;">
          <label>Additional Options</label>
          <div class="checkbox-group">
            <input type="checkbox" id="conservatory-1" class="conservatory" />
            <label for="conservatory-1">With Conservatory (£3.00)</label>
          </div>
          <div class="checkbox-group">
            <input type="checkbox" id="extension-1" class="extension" />
            <label for="extension-1">With Extension (£3.00)</label>
          </div>
        </div>

        <div class="calculator-field">
          <label for="quantity-1">Quantity</label>
          <input type="number" id="quantity-1" class="quantity" min="1" value="1" />
        </div>
      </div>
    </div>

    <!-- Add Service Button -->
    <button type="button" id="add-service-btn" onclick="addService()">Add Another Service</button>

    <!-- Calculate Button -->
    <button type="button" id="calculate-btn" onclick="calculateEstimate()">Calculate Estimate</button>

    <!-- Result Display -->
    <div id="result">
      <p>Your estimated total cost is: <strong id="estimated-cost"></strong></p>
      <p>This is a preliminary estimate. For an accurate quote, please contact our representative.</p>
      <button type="button" id="contact-btn" onclick="contactUs()">Contact Us</button>
    </div>
  </div>

  <script>
    // Cleaning Service Calculator Script

    // Pricing Data
    const pricing = {
      flats: {
        base: 10,
        // Additional window-based pricing can be implemented here if details are provided
      },
      bungalow: {
        monthly: 12.5,
        bi_monthly: 17.5,
        conservatory: 3.0,
        extension: 3.0,
      },
      terraced_house: {
        monthly: 14.5,
        bi_monthly: 19.5,
        conservatory: 3.0,
        extension: 3.0,
      },
      semi_detached_2bed: {
        monthly: 17.5,
        bi_monthly: 22.55,
        conservatory: 3.0,
        extension: 3.0,
      },
      semi_detached_3bed: {
        monthly: 18.5,
        bi_monthly: 23.55,
        conservatory: 5.0,
        extension: 4.0,
      },
      town_house: {
        monthly: 20.5,
        bi_monthly: 25.55,
        conservatory: 5.0,
        extension: 4.0,
      },
      detached_4bed: {
        monthly: 22.55,
        bi_monthly: 27.6,
        conservatory: 5.0,
        extension: 5.0,
      },
      larger_bespoke: null, // Requires contact
      commercial: null, // Requires contact
    };

    let serviceCount = 1; // Initial service entry count

    // Function to add a new service entry
    function addService() {
      serviceCount++;
      const servicesContainer = document.getElementById('services-container');

      const serviceEntry = document.createElement('div');
      serviceEntry.className = 'service-entry';

      serviceEntry.innerHTML = `
        <button type="button" class="remove-service-btn" onclick="removeService(this)">Remove</button>
        <div class="calculator-field">
          <label for="property-type-${serviceCount}">Property Type</label>
          <select id="property-type-${serviceCount}" class="property-type" onchange="toggleFields(this)">
            <option value="">Select Property Type</option>
            <option value="flats">Flats</option>
            <option value="bungalow">Bungalow</option>
            <option value="terraced_house">Terraced House</option>
            <option value="semi_detached_2bed">2-Bed Semi-Detached</option>
            <option value="semi_detached_3bed">3/4-Bed Semi-Detached</option>
            <option value="town_house">Town House</option>
            <option value="detached_4bed">4-Bed Detached</option>
            <option value="larger_bespoke">Larger/Bespoke Homes</option>
            <option value="commercial">Commercial Properties</option>
          </select>
        </div>

        <div class="calculator-field frequency-field" style="display: none;">
          <label for="frequency-${serviceCount}">Service Frequency</label>
          <select id="frequency-${serviceCount}" class="frequency">
            <option value="">Select Frequency</option>
            <option value="monthly">Monthly</option>
            <option value="bi_monthly">Bi-Monthly</option>
          </select>
        </div>

        <div class="calculator-field additional-options" style="display: none;">
          <label>Additional Options</label>
          <div class="checkbox-group">
            <input type="checkbox" id="conservatory-${serviceCount}" class="conservatory" />
            <label for="conservatory-${serviceCount}">With Conservatory (£3.00)</label>
          </div>
          <div class="checkbox-group">
            <input type="checkbox" id="extension-${serviceCount}" class="extension" />
            <label for="extension-${serviceCount}">With Extension (£3.00)</label>
          </div>
        </div>

        <div class="calculator-field">
          <label for="quantity-${serviceCount}">Quantity</label>
          <input type="number" id="quantity-${serviceCount}" class="quantity" min="1" value="1" />
        </div>
      `;

      servicesContainer.appendChild(serviceEntry);
    }

    // Function to remove a service entry
    function removeService(button) {
      const serviceEntry = button.parentElement;
      serviceEntry.remove();
    }

    // Function to toggle visibility of frequency and additional options based on property type
    function toggleFields(selectElement) {
      const serviceEntry = selectElement.parentElement.parentElement;
      const selectedType = selectElement.value;

      const frequencyField = serviceEntry.querySelector('.frequency-field');
      const additionalOptions = serviceEntry.querySelector('.additional-options');

      if (selectedType === 'larger_bespoke' || selectedType === 'commercial') {
        // Hide frequency and additional options
        frequencyField.style.display = 'none';
        additionalOptions.style.display = 'none';
      } else if (selectedType === 'flats') {
        // Flats have base price, show additional options without frequency
        frequencyField.style.display = 'none';
        additionalOptions.style.display = 'block';
      } else {
        // Show frequency and additional options
        frequencyField.style.display = 'block';
        additionalOptions.style.display = 'block';
      }

      // Reset result section when property type changes
      document.getElementById('result').style.display = 'none';
    }

    // Function to calculate the total estimate
    function calculateEstimate() {
      const serviceEntries = document.querySelectorAll('.service-entry');
      let totalEstimate = 0;
      let requiresContact = false;

      for (let entry of serviceEntries) {
        const propertyType = entry.querySelector('.property-type').value;
        const frequency = entry.querySelector('.frequency') ? entry.querySelector('.frequency').value : '';
        const conservatory = entry.querySelector('.conservatory') ? entry.querySelector('.conservatory').checked : false;
        const extension = entry.querySelector('.extension') ? entry.querySelector('.extension').checked : false;
        const quantity = parseInt(entry.querySelector('.quantity').value) || 1;

        if (!propertyType) {
          alert('Please select a property type for all services.');
          return;
        }

        // Handle property types that require contact
        if (propertyType === 'larger_bespoke' || propertyType === 'commercial') {
          requiresContact = true;
          continue;
        }

        let basePrice = 0;

        if (propertyType === 'flats') {
          basePrice = pricing.flats.base;
          // Additional window-based pricing can be added here
        } else {
          if (!frequency) {
            alert('Please select a service frequency for all applicable services.');
            return;
          }
          basePrice = pricing[propertyType][frequency];
        }

        // Calculate additional charges
        let additionalCharges = 0;
        if (conservatory) {
          additionalCharges += pricing[propertyType].conservatory;
        }
        if (extension) {
          additionalCharges += pricing[propertyType].extension;
        }

        const serviceTotal = (basePrice + additionalCharges) * quantity;
        totalEstimate += serviceTotal;
      }

      // Display the result
      const estimatedCostEl = document.getElementById('estimated-cost');
      const resultEl = document.getElementById('result');

      if (requiresContact && totalEstimate > 0) {
        estimatedCostEl.innerHTML = `£${totalEstimate.toFixed(2)} + Contact Us for additional services.`;
      } else if (requiresContact && totalEstimate === 0) {
        estimatedCostEl.textContent = 'Please contact us for a quote.';
      } else {
        estimatedCostEl.textContent = `£${totalEstimate.toFixed(2)}`;
      }

      resultEl.style.display = 'block';
    }

    // Function to handle contact button click
    function contactUs() {
      // Redirect to contact page or open contact form
      // Modify the URL below to match the contact page of your website
      window.location.href = '/contact';
    }
  </script>

</body>
</html>
