<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Cleaning Services Calculator – FirstMaid UK</title>

  <!-- Minimal styling to avoid conflicts. Prefixing classes with "calc-" -->
  <style>
    .calc-container {
      max-width: 600px;
      margin: 20px auto;
      padding: 10px;
      border: 1px solid #ccc;
    }
    .calc-title {
      font-size: 1.2em;
      margin-bottom: 10px;
      text-align: center;
    }
    .calc-section {
      margin-bottom: 15px;
    }
    .calc-section label {
      display: block;
      margin-top: 5px;
    }
    .calc-section input[type="number"],
    .calc-section select {
      width: 100%;
      padding: 6px;
      box-sizing: border-box;
      margin-top: 3px;
    }
    .calc-flex {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    .calc-flex > div {
      flex: 1;
      min-width: 120px;
    }
    .calc-disclaimer {
      font-size: 0.9em;
      color: #666;
      margin-top: 15px;
    }
    .calc-result {
      margin-top: 10px;
      font-weight: bold;
    }
    .calc-contact-btn {
      display: none; /* Hidden until we have a final calculation */
      margin-top: 10px;
      padding: 10px;
      text-align: center;
      background-color: #007BFF;
      color: #fff;
      text-decoration: none;
      border-radius: 4px;
      cursor: pointer;
    }
    /* Mobile-friendly */
    @media (max-width: 600px) {
      .calc-flex {
        flex-direction: column;
      }
    }
  </style>
</head>
<body>

<div class="calc-container">
  <div class="calc-title">FirstMaid UK – Cleaning Services Calculator</div>

  <!-- Service Selection -->
  <div class="calc-section">
    <label for="calc-service-type">Select Service Type:</label>
    <select id="calc-service-type">
      <option value="">-- Choose an option --</option>
      <option value="hourly">Hourly-Based Cleaning (Regular / One-Off / Ironing / After Alterations)</option>
      <option value="endOfTenancy">End of Tenancy (Vacant)</option>
      <option value="deepCleaning">Spring / Deep Cleaning (Occupied)</option>
      <option value="carpet">Carpet & Upholstery</option>
      <option value="oven">Professional Oven Valet</option>
    </select>
  </div>

  <!-- Hourly-Based Cleaning Section -->
  <div id="calc-hourly-section" class="calc-section" style="display:none;">
    <!-- Explanation: Each sub-service has a rate or a minimum call-out. -->
    <!-- Regular/One-Off/Ironing = £18/h, After Alterations = £20/h, min call-out = £40 if <= 2h -->
    <p style="margin-bottom:5px;"><strong>Please specify the hours required for each type you need:</strong></p>
    <div class="calc-flex">
      <div>
        <label>Regular / One-Off / Ironing (hrs) – £18/h</label>
        <input type="number" id="calc-hourly-regular" value="0" min="0" step="0.5" />
      </div>
      <div>
        <label>After Alterations (hrs) – £20/h</label>
        <input type="number" id="calc-hourly-alter" value="0" min="0" step="0.5" />
      </div>
    </div>
  </div>

  <!-- End of Tenancy (Vacant) Cleaning Section -->
  <div id="calc-endOfTenancy-section" class="calc-section" style="display:none;">
    <label for="calc-endOfTenancy-type">Property Type:</label>
    <select id="calc-endOfTenancy-type">
      <option value="150">Studio Flat – £150</option>
      <option value="160">1 Bed / 1 Bath Apartment – £160</option>
      <option value="170">2 Bed / 1 Bath Apartment – £170</option>
      <option value="180a">3 Bed / 1 Bath Apartment – £180</option>
      <option value="180b">2 Bed / 1 Bath House – £180</option>
      <option value="190">3 Bed / 1 Bath House – £190</option>
      <option value="200">4 Bed / 1 Bath House – £200</option>
      <option value="210">5 Bed / 1 Bath House – £210</option>
    </select>

    <label for="calc-endOfTenancy-rooms">Extra Rooms (each +£20):</label>
    <input type="number" id="calc-endOfTenancy-rooms" value="0" min="0" />

    <label for="calc-endOfTenancy-floors">Extra Floors (each +£20):</label>
    <input type="number" id="calc-endOfTenancy-floors" value="0" min="0" />

    <!-- Optional additional services with approximate starting from cost -->
    <div style="margin-top:10px;">
      <input type="checkbox" id="calc-endOfTenancy-ovenValet" />
      <label for="calc-endOfTenancy-ovenValet">Professional Oven Valet (+£60)</label>
    </div>
    <div>
      <input type="checkbox" id="calc-endOfTenancy-carpet" />
      <label for="calc-endOfTenancy-carpet">Carpet Cleaning (from £50)</label>
    </div>
  </div>

  <!-- Spring / Deep Cleaning (Occupied) Section -->
  <div id="calc-deepCleaning-section" class="calc-section" style="display:none;">
    <label for="calc-deepCleaning-type">Property Type:</label>
    <select id="calc-deepCleaning-type">
      <option value="190">Studio Flat – £190</option>
      <option value="200">1 Bed / 1 Bath Apartment – £200</option>
      <option value="210">2 Bed / 1 Bath Apartment – £210</option>
      <option value="220a">3 Bed / 1 Bath Apartment – £220</option>
      <option value="220b">2 Bed / 1 Bath House – £220</option>
      <option value="230">3 Bed / 1 Bath House – £230</option>
      <option value="240">4 Bed / 1 Bath House – £240</option>
      <option value="250">5 Bed / 1 Bath House – £250</option>
    </select>

    <label for="calc-deepCleaning-rooms">Extra Rooms (each +£25):</label>
    <input type="number" id="calc-deepCleaning-rooms" value="0" min="0" />

    <label for="calc-deepCleaning-floors">Extra Floors (each +£25):</label>
    <input type="number" id="calc-deepCleaning-floors" value="0" min="0" />

    <div style="margin-top:10px;">
      <input type="checkbox" id="calc-deepCleaning-ovenValet" />
      <label for="calc-deepCleaning-ovenValet">Professional Oven Valet (+£60)</label>
    </div>
    <div>
      <input type="checkbox" id="calc-deepCleaning-carpet" />
      <label for="calc-deepCleaning-carpet">Carpet Cleaning (from £50)</label>
    </div>
  </div>

  <!-- Carpet & Upholstery Section -->
  <div id="calc-carpet-section" class="calc-section" style="display:none;">
    <!-- Minimum booking value: £50. 
         Example of itemized approach for demonstration. 
         You can expand this list or replace with property-based combos. -->
    <p><strong>Select items to clean (enter quantities):</strong></p>
    <div class="calc-flex">
      <div>
        <label>Living Room – £45</label>
        <input type="number" id="calc-carpet-living" value="0" min="0" />
      </div>
      <div>
        <label>Dining Room – £40</label>
        <input type="number" id="calc-carpet-dining" value="0" min="0" />
      </div>
      <div>
        <label>Standard Bedroom – £30</label>
        <input type="number" id="calc-carpet-bedroom" value="0" min="0" />
      </div>
    </div>
    <div class="calc-flex">
      <div>
        <label>Sofa (2-Seater) – £60</label>
        <input type="number" id="calc-carpet-sofa2" value="0" min="0" />
      </div>
      <div>
        <label>Sofa (3-Seater) – £70</label>
        <input type="number" id="calc-carpet-sofa3" value="0" min="0" />
      </div>
      <div>
        <label>Corner Sofa (4-5) – £90</label>
        <input type="number" id="calc-carpet-sofaCorner" value="0" min="0" />
      </div>
    </div>
    <p style="font-size:0.9em;margin-top:5px;">
      (Minimum booking value for Carpet & Upholstery is £50. If total is below £50, final price will be £50.)
    </p>
  </div>

  <!-- Professional Oven Valet Section -->
  <div id="calc-oven-section" class="calc-section" style="display:none;">
    <p><strong>Professional Oven Valet:</strong></p>
    <p>Starts from <strong>£60</strong>. Please note the final cost may vary for heavily soiled ovens.</p>
  </div>

  <!-- Calculate Button -->
  <div class="calc-section" style="text-align:center;">
    <button id="calc-calculate-btn">Calculate Estimated Cost</button>
  </div>

  <!-- Output -->
  <div id="calc-output" class="calc-result"></div>
  <div class="calc-disclaimer">*This is a preliminary estimate. Final cost may vary depending on actual conditions. Please contact us for an exact quote.</div>
  <a href="#" id="calc-contact-btn" class="calc-contact-btn">Contact Us Now</a>
</div>

<script>
// === Cleaning Services Calculator – FirstMaid UK ===
// All comments in English as requested.

// Hourly rates and minimum call-out
const RATE_REGULAR = 18;       // £18/hour
const RATE_ALTER = 20;         // £20/hour
const MIN_CALLOUT = 40;        // £40 if 2 hours or less

// Additional static prices
const OVEN_VALET = 60;         // from £60
const CARPET_MIN = 50;         // min booking for carpet is £50

// When user changes service type, show/hide relevant section
document.getElementById('calc-service-type').addEventListener('change', function() {
  const val = this.value;

  // Hide all sections first
  document.getElementById('calc-hourly-section').style.display = 'none';
  document.getElementById('calc-endOfTenancy-section').style.display = 'none';
  document.getElementById('calc-deepCleaning-section').style.display = 'none';
  document.getElementById('calc-carpet-section').style.display = 'none';
  document.getElementById('calc-oven-section').style.display = 'none';

  // Show the relevant section based on choice
  if(val === 'hourly'){
    document.getElementById('calc-hourly-section').style.display = 'block';
  } else if(val === 'endOfTenancy'){
    document.getElementById('calc-endOfTenancy-section').style.display = 'block';
  } else if(val === 'deepCleaning'){
    document.getElementById('calc-deepCleaning-section').style.display = 'block';
  } else if(val === 'carpet'){
    document.getElementById('calc-carpet-section').style.display = 'block';
  } else if(val === 'oven'){
    document.getElementById('calc-oven-section').style.display = 'block';
  }

  // Hide output and contact button if user changes the service type again
  document.getElementById('calc-output').textContent = '';
  document.getElementById('calc-contact-btn').style.display = 'none';
});

// Calculate button event
document.getElementById('calc-calculate-btn').addEventListener('click', function() {
  let totalCost = 0;
  const serviceType = document.getElementById('calc-service-type').value;

  if(!serviceType){
    alert("Please select a service type first.");
    return;
  }

  // 1) Hourly-based
  if(serviceType === 'hourly'){
    // Regular / One-Off / Ironing hours
    const hoursRegular = parseFloat(document.getElementById('calc-hourly-regular').value) || 0;
    // After Alterations hours
    const hoursAlter = parseFloat(document.getElementById('calc-hourly-alter').value) || 0;

    // Calculate cost for regular type
    if(hoursRegular > 0){
      if(hoursRegular <= 2){
        // If 2h or less, min call-out applies
        totalCost += MIN_CALLOUT;
      } else {
        totalCost += hoursRegular * RATE_REGULAR;
      }
    }
    // Calculate cost for after alterations
    if(hoursAlter > 0){
      if(hoursAlter <= 2){
        totalCost += MIN_CALLOUT;
      } else {
        totalCost += hoursAlter * RATE_ALTER;
      }
    }
  }

  // 2) End of Tenancy (Vacant)
  if(serviceType === 'endOfTenancy'){
    const basePriceStr = document.getElementById('calc-endOfTenancy-type').value;
    let basePrice = parseFloat(basePriceStr) || 0;
    // Some 3-bed might share the same price in the dropdown – we handle them as a numeric anyway
    const extraRooms = parseInt(document.getElementById('calc-endOfTenancy-rooms').value) || 0;
    const extraFloors = parseInt(document.getElementById('calc-endOfTenancy-floors').value) || 0;
    const ovenValetChecked = document.getElementById('calc-endOfTenancy-ovenValet').checked;
    const carpetChecked = document.getElementById('calc-endOfTenancy-carpet').checked;

    // Add base
    totalCost += basePrice;
    // Extra rooms/floors
    totalCost += extraRooms * 20;
    totalCost += extraFloors * 20;
    // Additional services
    if(ovenValetChecked) {
      totalCost += OVEN_VALET;
    }
    if(carpetChecked) {
      // from 50
      totalCost += 50;
    }
  }

  // 3) Spring / Deep Cleaning (Occupied)
  if(serviceType === 'deepCleaning'){
    const basePriceStr = document.getElementById('calc-deepCleaning-type').value;
    let basePrice = parseFloat(basePriceStr) || 0;
    const extraRooms = parseInt(document.getElementById('calc-deepCleaning-rooms').value) || 0;
    const extraFloors = parseInt(document.getElementById('calc-deepCleaning-floors').value) || 0;
    const ovenValetChecked = document.getElementById('calc-deepCleaning-ovenValet').checked;
    const carpetChecked = document.getElementById('calc-deepCleaning-carpet').checked;

    totalCost += basePrice;
    totalCost += extraRooms * 25;
    totalCost += extraFloors * 25;
    if(ovenValetChecked) {
      totalCost += OVEN_VALET;
    }
    if(carpetChecked) {
      totalCost += 50;
    }
  }

  // 4) Carpet & Upholstery
  if(serviceType === 'carpet'){
    // Simple item-based approach
    const living = parseInt(document.getElementById('calc-carpet-living').value) || 0;
    const dining = parseInt(document.getElementById('calc-carpet-dining').value) || 0;
    const bedroom = parseInt(document.getElementById('calc-carpet-bedroom').value) || 0;
    const sofa2 = parseInt(document.getElementById('calc-carpet-sofa2').value) || 0;
    const sofa3 = parseInt(document.getElementById('calc-carpet-sofa3').value) || 0;
    const sofaCorner = parseInt(document.getElementById('calc-carpet-sofaCorner').value) || 0;

    let subTotal = 0;
    subTotal += living * 45;
    subTotal += dining * 40;
    subTotal += bedroom * 30;
    subTotal += sofa2 * 60;
    subTotal += sofa3 * 70;
    subTotal += sofaCorner * 90;

    // Enforce minimum booking value of £50
    totalCost += (subTotal < CARPET_MIN && subTotal > 0) ? CARPET_MIN : subTotal;
  }

  // 5) Professional Oven Valet
  if(serviceType === 'oven'){
    totalCost += OVEN_VALET;
  }

  // Display the result
  // If user selected a service and didn't fill anything, totalCost might be 0
  // We'll display the cost anyway
  const outputEl = document.getElementById('calc-output');
  outputEl.textContent = "Estimated Cost: £" + totalCost.toFixed(2);

  // Show the contact button only if totalCost > 0
  const contactBtn = document.getElementById('calc-contact-btn');
  if(totalCost > 0){
    contactBtn.style.display = 'inline-block';
  } else {
    contactBtn.style.display = 'none';
  }
});
</script>

</body>
</html>
