<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>FastKlean Cleaning Service Calculator</title>
  <style>
    /* FastKlean Cleaning Service Calculator Styles */
    #fastklean-calculator {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      max-width: 600px;
      margin: 40px auto;
      padding: 25px;
      border: 1px solid #e0e0e0;
      border-radius: 10px;
      background: linear-gradient(135deg, #f0f4f8, #d9e2ec);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    #fastklean-calculator h2 {
      text-align: center;
      margin-bottom: 25px;
      color: #2c3e50;
      font-size: 1.8em;
      position: relative;
    }

    #fastklean-calculator h2::after {
      content: '';
      width: 50px;
      height: 4px;
      background-color: #27ae60;
      position: absolute;
      bottom: -10px;
      left: 50%;
      transform: translateX(-50%);
      border-radius: 2px;
    }

    #fastklean-calculator .service-selection {
      margin-bottom: 25px;
    }

    #fastklean-calculator .service-selection label {
      display: block;
      margin-bottom: 10px;
      color: #34495e;
      font-weight: 600;
      font-size: 1.1em;
    }

    #fastklean-calculator .services-list {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    #fastklean-calculator .services-list label {
      display: flex;
      align-items: center;
      background-color: #ffffff;
      padding: 8px 12px;
      border-radius: 5px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
      cursor: pointer;
      transition: background-color 0.3s, transform 0.3s;
      flex: 1 1 45%;
    }

    #fastklean-calculator .services-list label:hover {
      background-color: #e1f5fe;
      transform: translateY(-2px);
    }

    #fastklean-calculator .services-list input {
      margin-right: 8px;
      accent-color: #27ae60;
    }

    #fastklean-calculator .dynamic-options {
      margin-bottom: 25px;
    }

    .service-options {
      border: 1px solid #b0bec5;
      padding: 20px;
      border-radius: 8px;
      margin-bottom: 20px;
      background-color: #ffffff;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
      transition: all 0.3s;
    }

    .service-options h3 {
      margin-top: 0;
      margin-bottom: 15px;
      color: #2c3e50;
      font-size: 1.3em;
      border-bottom: 2px solid #27ae60;
      padding-bottom: 5px;
    }

    .service-options label {
      display: block;
      margin-bottom: 8px;
      color: #555555;
      font-weight: 500;
    }

    .service-options select,
    .service-options input {
      width: 100%;
      padding: 10px;
      border-radius: 6px;
      border: 1px solid #cfd8dc;
      margin-bottom: 15px;
      box-sizing: border-box;
      transition: border-color 0.3s;
    }

    .service-options select:focus,
    .service-options input:focus {
      border-color: #27ae60;
      outline: none;
      box-shadow: 0 0 5px rgba(39, 174, 96, 0.5);
    }

    #calculate-btn {
      width: 100%;
      padding: 15px;
      background-color: #27ae60;
      color: #ffffff;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      font-size: 1.1em;
      font-weight: bold;
      transition: background-color 0.3s, transform 0.2s;
    }

    #calculate-btn:hover {
      background-color: #219150;
      transform: scale(1.02);
    }

    #result {
      margin-top: 30px;
      display: none;
      text-align: center;
      padding: 20px;
      border-top: 2px solid #e0e0e0;
      background-color: #f7f9fb;
      border-radius: 8px;
    }

    #result p {
      font-size: 1.4em;
      margin-bottom: 15px;
      color: #2c3e50;
      font-weight: 600;
    }

    #contact-btn {
      padding: 12px 25px;
      background-color: #2980b9;
      color: #ffffff;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      font-size: 1em;
      transition: background-color 0.3s, transform 0.2s;
    }

    #contact-btn:hover {
      background-color: #1f6391;
      transform: scale(1.02);
    }

    #result p.note {
      margin-top: 15px;
      font-size: 0.95em;
      color: #7f8c8d;
    }

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

      #fastklean-calculator h2 {
        font-size: 1.6em;
      }

      .services-list label {
        flex: 1 1 100%;
      }
    }

    @media (max-width: 480px) {
      #fastklean-calculator {
        padding: 15px;
        margin: 20px;
      }

      #fastklean-calculator h2 {
        font-size: 1.4em;
      }

      #calculate-btn {
        font-size: 1em;
        padding: 12px;
      }

      #result p {
        font-size: 1.2em;
      }

      #contact-btn {
        font-size: 0.95em;
        padding: 10px 20px;
      }
    }
  </style>
</head>
<body>

  <!-- FastKlean Cleaning Service Calculator -->
  <div id="fastklean-calculator">
    <h2>Cleaning Service Calculator</h2>
    
    <!-- Service Selection -->
    <div class="service-selection">
      <label>Select Services:</label>
      <div class="services-list">
        <label><input type="checkbox" value="regular-domestic"> Regular Domestic Cleaning</label>
        <label><input type="checkbox" value="one-off"> One-Off / Spring Cleaning</label>
        <label><input type="checkbox" value="after-builders"> After Builders Cleaning</label>
        <label><input type="checkbox" value="hard-floor"> Hard Floor Cleaning</label>
        <label><input type="checkbox" value="gardening-maintenance"> Gardening Maintenance</label>
        <label><input type="checkbox" value="gardening-subscription"> Gardening Subscription Plan</label>
      </div>
    </div>
    
    <!-- Dynamic Options Container -->
    <div id="dynamic-options" class="dynamic-options"></div>
    
    <!-- Calculate Button -->
    <button id="calculate-btn">Calculate Estimate</button>
    
    <!-- Result Display -->
    <div id="result">
      <p>Estimated Cost: £<span id="estimated-cost">0.00</span></p>
      <button id="contact-btn">Contact Us for a Precise Quote</button>
      <p class="note">This is an initial estimate. For an accurate quote, please contact our representatives.</p>
    </div>
  </div>
  
  <!-- Inline JavaScript to handle calculator logic -->
  <script>
    // Get references to DOM elements
    const serviceCheckboxes = document.querySelectorAll('#fastklean-calculator .services-list input[type="checkbox"]');
    const dynamicOptions = document.getElementById('dynamic-options');
    const calculateBtn = document.getElementById('calculate-btn');
    const resultDiv = document.getElementById('result');
    const estimatedCostSpan = document.getElementById('estimated-cost');
    const contactBtn = document.getElementById('contact-btn');

    // Function to clear dynamic options
    function clearDynamicOptions() {
      dynamicOptions.innerHTML = '';
    }

    // Function to create input elements
    function createInput(labelText, inputType, inputId, placeholder = '') {
      const wrapper = document.createElement('div');

      const label = document.createElement('label');
      label.htmlFor = inputId;
      label.textContent = labelText;

      const input = document.createElement('input');
      input.type = inputType;
      input.id = inputId;
      input.placeholder = placeholder;

      wrapper.appendChild(label);
      wrapper.appendChild(input);

      return wrapper;
    }

    // Function to create select elements
    function createSelect(labelText, selectId, optionsArray) {
      const wrapper = document.createElement('div');

      const label = document.createElement('label');
      label.htmlFor = selectId;
      label.textContent = labelText;

      const select = document.createElement('select');
      select.id = selectId;

      optionsArray.forEach(optionData => {
        const option = document.createElement('option');
        option.value = optionData.value;
        option.textContent = optionData.text;
        select.appendChild(option);
      });

      wrapper.appendChild(label);
      wrapper.appendChild(select);

      return wrapper;
    }

    // Function to handle service checkbox changes
    serviceCheckboxes.forEach(checkbox => {
      checkbox.addEventListener('change', function() {
        if (this.checked) {
          addServiceOptions(this.value);
        } else {
          removeServiceOptions(this.value);
        }
        // Hide result if services change
        resultDiv.style.display = 'none';
      });
    });

    // Function to add service options
    function addServiceOptions(service) {
      const serviceDiv = document.createElement('div');
      serviceDiv.classList.add('service-options');
      serviceDiv.id = `options-${service}`;

      const serviceName = getServiceName(service);
      const heading = document.createElement('h3');
      heading.textContent = serviceName;
      serviceDiv.appendChild(heading);

      switch(service) {
        case 'regular-domestic':
          // Frequency Selection
          const frequencyOptions = [
            { value: '', text: '--Choose Frequency--' },
            { value: 'weekly-2', text: 'Weekly (Minimum 2 hours)' },
            { value: 'fortnightly-3', text: 'Fortnightly (Minimum 3 hours)' },
            { value: 'weekly-6', text: 'Weekly (6+ hours)' },
            { value: 'weekly-10', text: 'Weekly (10+ hours)' },
            { value: 'weekly-20', text: 'Weekly (20+ hours)' }
          ];
          serviceDiv.appendChild(createSelect('Select Frequency:', `frequency-${service}`, frequencyOptions));
          break;
        
        case 'one-off':
          // Hours Input
          serviceDiv.appendChild(createInput('Number of Hours (minimum 5):', 'number', `one-off-hours`, '5'));
          break;
        
        case 'after-builders':
          // Hours Input
          serviceDiv.appendChild(createInput('Number of Hours (minimum 5):', 'number', `after-builders-hours`, '5'));
          break;
        
        case 'hard-floor':
          // Area Input
          serviceDiv.appendChild(createInput('Area in Square Meters:', 'number', `hard-floor-area`, ''));
          break;
        
        case 'gardening-maintenance':
          // Gardening Maintenance Options
          serviceDiv.appendChild(createInput('Number of Green Waste Bags (60L):', 'number', `gw-bags-60`, '0'));
          serviceDiv.appendChild(createInput('Number of Green Waste Bags (120L):', 'number', `gw-bags-120`, '0'));
          serviceDiv.appendChild(createInput('Number of Jumbo Bags:', 'number', `jumbo-bags`, '0'));
          serviceDiv.appendChild(createInput('Additional Hours:', 'number', `gardening-add-hours`, '0'));
          break;
        
        case 'gardening-subscription':
          // Subscription Plan Selection
          const planOptions = [
            { value: '', text: '--Choose Plan--' },
            { value: '3-month', text: '3-Month Plan' },
            { value: '6-month', text: '6-Month Plan' },
            { value: '9-month', text: '9-Month Plan' },
            { value: '12-month', text: '12-Month Plan' }
          ];
          serviceDiv.appendChild(createSelect('Select Subscription Plan:', `subscription-plan-${service}`, planOptions));
          
          // Visits Per Month Selection
          const visitsOptions = [
            { value: '', text: '--Choose Frequency--' },
            { value: 'monthly', text: 'Monthly' },
            { value: 'twice', text: 'Twice a Month' },
            { value: 'weekly', text: 'Weekly' }
          ];
          serviceDiv.appendChild(createSelect('Number of Visits Per Month:', `visits-per-month-${service}`, visitsOptions));
          break;
        
        default:
          break;
      }

      dynamicOptions.appendChild(serviceDiv);
    }

    // Function to remove service options
    function removeServiceOptions(service) {
      const serviceDiv = document.getElementById(`options-${service}`);
      if (serviceDiv) {
        dynamicOptions.removeChild(serviceDiv);
      }
    }

    // Function to get service display name
    function getServiceName(service) {
      const serviceNames = {
        'regular-domestic': 'Regular Domestic Cleaning',
        'one-off': 'One-Off / Spring Cleaning',
        'after-builders': 'After Builders Cleaning',
        'hard-floor': 'Hard Floor Cleaning',
        'gardening-maintenance': 'Gardening Maintenance',
        'gardening-subscription': 'Gardening Subscription Plan'
      };
      return serviceNames[service] || 'Service';
    }

    // Function to calculate the estimate
    calculateBtn.addEventListener('click', function() {
      let totalEstimate = 0;
      let selectedServices = [];

      serviceCheckboxes.forEach(checkbox => {
        if (checkbox.checked) {
          selectedServices.push(checkbox.value);
        }
      });

      if (selectedServices.length === 0) {
        alert('Please select at least one service.');
        return;
      }

      for (let service of selectedServices) {
        switch(service) {
          case 'regular-domestic':
            const frequency = document.getElementById(`frequency-${service}`).value;
            if (!frequency) {
              alert('Please select a frequency for Regular Domestic Cleaning.');
              return;
            }
            switch(frequency) {
              case 'weekly-2':
                totalEstimate += 2 * 18.00;
                break;
              case 'fortnightly-3':
                totalEstimate += 3 * 18.00;
                break;
              case 'weekly-6':
                totalEstimate += 6 * 17.00;
                break;
              case 'weekly-10':
                totalEstimate += 10 * 17.00;
                break;
              case 'weekly-20':
                totalEstimate += 20 * 16.00;
                break;
              default:
                break;
            }
            break;
          
          case 'one-off':
            const oneOffHours = parseFloat(document.getElementById(`one-off-hours`).value);
            if (isNaN(oneOffHours) || oneOffHours < 5) {
              alert('Please enter a minimum of 5 hours for One-Off / Spring Cleaning.');
              return;
            }
            totalEstimate += oneOffHours * 27.00;
            break;
          
          case 'after-builders':
            const buildersHours = parseFloat(document.getElementById(`after-builders-hours`).value);
            if (isNaN(buildersHours) || buildersHours < 5) {
              alert('Please enter a minimum of 5 hours for After Builders Cleaning.');
              return;
            }
            totalEstimate += buildersHours * 29.00;
            break;
          
          case 'hard-floor':
            const area = parseFloat(document.getElementById(`hard-floor-area`).value);
            if (isNaN(area) || area <= 0) {
              alert('Please enter a valid area in square meters for Hard Floor Cleaning.');
              return;
            }
            totalEstimate += area * 3.50;
            break;
          
          case 'gardening-maintenance':
            const gw60 = parseInt(document.getElementById(`gw-bags-60`).value) || 0;
            const gw120 = parseInt(document.getElementById(`gw-bags-120`).value) || 0;
            const jumbo = parseInt(document.getElementById(`jumbo-bags`).value) || 0;
            const addHours = parseFloat(document.getElementById(`gardening-add-hours`).value) || 0;
            
            totalEstimate += (gw60 * 4.00) + (gw120 * 5.50) + (jumbo * 60.00) + (addHours * 60.00);
            break;
          
          case 'gardening-subscription':
            const plan = document.getElementById(`subscription-plan-${service}`).value;
            const visits = document.getElementById(`visits-per-month-${service}`).value;
            if (!plan || !visits) {
              alert('Please select both a subscription plan and number of visits for Gardening Subscription Plan.');
              return;
            }
            
            // Define pricing based on plans and visits
            const pricing = {
              '3-month': { 'monthly': 117, 'twice': 115, 'weekly': 114 },
              '6-month': { 'monthly': 115, 'twice': 112, 'weekly': 111 },
              '9-month': { 'monthly': 112, 'twice': 110, 'weekly': 109 },
              '12-month': { 'monthly': 110, 'twice': 108, 'weekly': 107 }
            };
            
            if (pricing[plan] && pricing[plan][visits]) {
              totalEstimate += pricing[plan][visits];
            } else {
              alert('Invalid subscription plan or visit frequency selected.');
              return;
            }
            break;
          
          default:
            break;
        }
      }

      // Apply 5% discount for online booking
      totalEstimate = totalEstimate * 0.95;

      // Round to two decimal places
      totalEstimate = totalEstimate.toFixed(2);

      // Display the result
      estimatedCostSpan.textContent = totalEstimate;
      resultDiv.style.display = 'block';
    });

    // Contact button click handler
    contactBtn.addEventListener('click', function() {
      // Redirect to contact form or open contact modal
      // For demonstration, we'll use a mailto link
      window.location.href = 'mailto:hello@qithub.click?subject=Cleaning%20Service%20Quote';
    });
  </script>

</body>
</html>
