<!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</title>

  <!-- Minimal inline styles to avoid conflicts -->
  <style>
    .calc-container {
      max-width: 500px;
      margin: 0 auto;
      padding: 15px;
      border: 1px solid #ccc;
      border-radius: 8px;
      font-family: Arial, sans-serif;
    }
    .calc-section {
      margin-bottom: 15px;
    }
    .calc-label {
      display: block;
      margin-bottom: 5px;
      font-weight: bold;
    }
    .calc-select, .calc-input {
      width: 100%;
      padding: 8px;
      margin-bottom: 10px;
      box-sizing: border-box;
    }
    .additional-areas-container, .carpet-container, .appliances-container {
      margin-left: 10px;
    }
    .btn-calculate, .btn-contact {
      display: inline-block;
      padding: 10px 15px;
      background-color: #007acc;
      color: #fff;
      border: none;
      border-radius: 4px;
      text-decoration: none;
      cursor: pointer;
      font-size: 14px;
    }
    .btn-calculate:hover, .btn-contact:hover {
      background-color: #005ea3;
    }
    .result-section {
      margin-top: 20px;
      padding: 10px;
      background: #f7f7f7;
      border: 1px solid #ccc;
      display: none; /* hidden by default */
    }
    .approx-note {
      font-size: 14px;
      margin: 10px 0;
      color: #555;
    }
    .contact-button-container {
      margin-top: 10px;
    }
    /* Responsive design for mobile devices */
    @media only screen and (max-width: 600px) {
      .calc-container {
        width: 90%;
        padding: 10px;
      }
    }
  </style>
</head>
<body>

<div class="calc-container" id="cleaning-calculator">
  <h2>Cleaning Services Cost Calculator</h2>

  <!-- STEP 1: Choose Main Service (or Standalone Services) -->
  <div class="calc-section">
    <label class="calc-label" for="service-type">1. Select Service Type:</label>
    <select class="calc-select" id="service-type">
      <option value="" disabled selected>Select a service...</option>
      <option value="moveInOut">Move-In & Move-Out Cleaning</option>
      <option value="deep">One-Off Deep Cleaning</option>
      <option value="builders">After Builders Cleaning</option>
      <option value="carpetOnly">Carpet & Upholstery Cleaning (Standalone)</option>
      <option value="appliancesOnly">Appliances Cleaning (Standalone)</option>
    </select>
  </div>

  <!-- STEP 2: Property Type (Only appears for Move-In, Deep, Builders) -->
  <div class="calc-section" id="property-type-section" style="display:none;">
    <label class="calc-label" for="property-type">2. Select Property Type:</label>
    <select class="calc-select" id="property-type">
      <option value="" disabled selected>Select property type...</option>
      <option value="studio">Studio Flat</option>
      <option value="1bed">1 Bed Flat</option>
      <option value="2bed">2 Bed Flat/House</option>
      <option value="3bed">3 Bed House</option>
      <option value="4bed">4 Bed House</option>
      <option value="5bed">5 Bed House</option>
      <option value="6bed">6 Bed House</option>
      <option value="7bed">7 Bed House</option>
      <option value="8bed">8 Bed House</option>
    </select>
  </div>

  <!-- STEP 3: Additional Areas (Only for Move-In, Deep, Builders) -->
  <div class="calc-section" id="additional-areas-section" style="display:none;">
    <p class="calc-label">3. Additional Areas (Select any that apply):</p>
    <!-- Create a list of checkboxes for each extra area -->
    <div class="additional-areas-container">
      <!-- Each checkbox has a data-price attribute to store its additional cost -->
      <label><input type="checkbox" value="35" data-name="Extra Bedroom" /> Extra Bedroom (£35)</label><br/>
      <label><input type="checkbox" value="40" data-name="Bathroom" /> Bathroom (£40)</label><br/>
      <label><input type="checkbox" value="35" data-name="Toilet" /> Toilet (£35)</label><br/>
      <label><input type="checkbox" value="45" data-name="Living Room" /> Living Room (£45)</label><br/>
      <label><input type="checkbox" value="60" data-name="Kitchen" /> Kitchen (£60)</label><br/>
      <label><input type="checkbox" value="45" data-name="Garage" /> Garage (£45)</label><br/>
      <label><input type="checkbox" value="35" data-name="Balcony" /> Balcony (£35)</label><br/>
      <label><input type="checkbox" value="35" data-name="Study Room" /> Study Room (£35)</label><br/>
      <label><input type="checkbox" value="35" data-name="Utility Room" /> Utility Room (£35)</label><br/>
      <label><input type="checkbox" value="40" data-name="Dining Room" /> Dining Room (£40)</label><br/>
      <label><input type="checkbox" value="40" data-name="Guest Room" /> Guest Room (£40)</label><br/>
      <label><input type="checkbox" value="40" data-name="Office Room" /> Office Room (£40)</label><br/>
      <label><input type="checkbox" value="45" data-name="Playroom" /> Playroom (£45)</label><br/>
      <label><input type="checkbox" value="70" data-name="Gym Room" /> Gym Room (£70)</label><br/>
      <label><input type="checkbox" value="65" data-name="Attic" /> Attic (£65)</label><br/>
    </div>
  </div>

  <!-- STEP 4: Carpet & Upholstery (Standalone) -->
  <div class="calc-section" id="carpet-section" style="display:none;">
    <p class="calc-label">Carpet & Upholstery Items (Select quantities):</p>
    <div class="carpet-container">
      <!-- We allow user input for quantity. The data-price will store per-item cost. -->
      <label>Lounge/Dining Room (£40 each):
        <input class="calc-input" type="number" min="0" value="0" data-price="40" id="loungeQty"/>
      </label><br/>
      <label>Through Lounge (£45 each):
        <input class="calc-input" type="number" min="0" value="0" data-price="45" id="throughLoungeQty"/>
      </label><br/>
      <label>Hallway (£40 each):
        <input class="calc-input" type="number" min="0" value="0" data-price="40" id="hallwayQty"/>
      </label><br/>
      <label>Staircase (£30 each):
        <input class="calc-input" type="number" min="0" value="0" data-price="30" id="staircaseQty"/>
      </label><br/>
      <label>Single Bedroom (£35 each):
        <input class="calc-input" type="number" min="0" value="0" data-price="35" id="singleBedCarpetQty"/>
      </label><br/>
      <label>Medium Rug (£30 each):
        <input class="calc-input" type="number" min="0" value="0" data-price="30" id="mediumRugQty"/>
      </label><br/>
    </div>
  </div>

  <!-- STEP 5: Appliances (Standalone) -->
  <div class="calc-section" id="appliances-section" style="display:none;">
    <p class="calc-label">Appliances Cleaning (Select quantities):</p>
    <div class="appliances-container">
      <label>Single Oven (£35 each):
        <input class="calc-input" type="number" min="0" value="0" data-price="35" id="singleOvenQty"/>
      </label><br/>
      <label>Double Oven (£45 each):
        <input class="calc-input" type="number" min="0" value="0" data-price="45" id="doubleOvenQty"/>
      </label><br/>
      <label>AGA Cooker (£70 each):
        <input class="calc-input" type="number" min="0" value="0" data-price="70" id="agaCookerQty"/>
      </label><br/>
    </div>
  </div>

  <!-- CALCULATE BUTTON -->
  <div class="calc-section">
    <button type="button" class="btn-calculate" id="calculateBtn">Calculate Price</button>
  </div>

  <!-- RESULT SECTION -->
  <div class="result-section" id="resultSection">
    <h3>Estimated Price: <span id="totalPrice">£0</span></h3>
    <p class="approx-note">This is a preliminary estimate. The exact quote will be provided after contacting our representative.</p>
    <div class="contact-button-container">
      <!-- Example contact button with call to action -->
      <a href="tel:+441234567890" class="btn-contact" id="contactBtn">
        Contact Us Now
      </a>
    </div>
  </div>

</div>

<script>
// All calculations in this script are approximate and for demonstration purposes only.

// Base prices for Move-In & Out / Deep / Builders, by property type:
const basePrices = {
  'moveInOut': {
    'studio': 125,
    '1bed': 170,
    '2bed': 210,
    '3bed': 241,
    '4bed': 295,
    '5bed': 350,
    '6bed': 390,
    '7bed': 440,
    '8bed': 485
  },
  'deep': {
    'studio': 125,
    '1bed': 175,
    '2bed': 235,
    '3bed': 265,
    '4bed': 310,
    '5bed': 360,
    '6bed': 420,
    '7bed': 490,
    '8bed': 555
  },
  'builders': {
    'studio': 130,
    '1bed': 185,
    '2bed': 240,
    '3bed': 265,
    '4bed': 335,
    '5bed': 380,
    '6bed': 435,
    '7bed': 480,
    '8bed': 570
  }
};

// Function to show or hide certain sections based on the selected service
function updateVisibleSections() {
  const serviceType = document.getElementById('service-type').value;
  const propertyTypeSection = document.getElementById('property-type-section');
  const additionalAreasSection = document.getElementById('additional-areas-section');
  const carpetSection = document.getElementById('carpet-section');
  const appliancesSection = document.getElementById('appliances-section');
  
  // Hide all optional sections by default
  propertyTypeSection.style.display = 'none';
  additionalAreasSection.style.display = 'none';
  carpetSection.style.display = 'none';
  appliancesSection.style.display = 'none';

  // Show relevant sections based on service type
  if (serviceType === 'moveInOut' || serviceType === 'deep' || serviceType === 'builders') {
    propertyTypeSection.style.display = 'block';
    additionalAreasSection.style.display = 'block';
  }
  if (serviceType === 'carpetOnly') {
    carpetSection.style.display = 'block';
  }
  if (serviceType === 'appliancesOnly') {
    appliancesSection.style.display = 'block';
  }
}

// Listen to service type changes
document.getElementById('service-type').addEventListener('change', updateVisibleSections);

// Main calculation function
function calculatePrice() {
  const serviceType = document.getElementById('service-type').value;
  let total = 0;

  // 1. If user selects Move-In & Out / Deep / Builders:
  if (serviceType === 'moveInOut' || serviceType === 'deep' || serviceType === 'builders') {
    // Get property type
    const propertyType = document.getElementById('property-type').value;
    if (!propertyType) {
      alert('Please select a property type.');
      return;
    }
    
    // Base price
    total += basePrices[serviceType][propertyType];
    
    // Additional areas
    const additionalAreasCheckboxes = document.querySelectorAll('.additional-areas-container input[type="checkbox"]');
    additionalAreasCheckboxes.forEach(function(checkbox) {
      if (checkbox.checked) {
        total += parseFloat(checkbox.value);
      }
    });
  }

  // 2. If user selects Carpet & Upholstery Only:
  if (serviceType === 'carpetOnly') {
    // Gather each quantity input in #carpet-section
    const loungeQty = document.getElementById('loungeQty');
    const throughLoungeQty = document.getElementById('throughLoungeQty');
    const hallwayQty = document.getElementById('hallwayQty');
    const staircaseQty = document.getElementById('staircaseQty');
    const singleBedCarpetQty = document.getElementById('singleBedCarpetQty');
    const mediumRugQty = document.getElementById('mediumRugQty');

    total += loungeQty.value * parseFloat(loungeQty.getAttribute('data-price'));
    total += throughLoungeQty.value * parseFloat(throughLoungeQty.getAttribute('data-price'));
    total += hallwayQty.value * parseFloat(hallwayQty.getAttribute('data-price'));
    total += staircaseQty.value * parseFloat(staircaseQty.getAttribute('data-price'));
    total += singleBedCarpetQty.value * parseFloat(singleBedCarpetQty.getAttribute('data-price'));
    total += mediumRugQty.value * parseFloat(mediumRugQty.getAttribute('data-price'));
  }

  // 3. If user selects Appliances Only:
  if (serviceType === 'appliancesOnly') {
    // Gather each quantity input in #appliances-section
    const singleOvenQty = document.getElementById('singleOvenQty');
    const doubleOvenQty = document.getElementById('doubleOvenQty');
    const agaCookerQty = document.getElementById('agaCookerQty');

    total += singleOvenQty.value * parseFloat(singleOvenQty.getAttribute('data-price'));
    total += doubleOvenQty.value * parseFloat(doubleOvenQty.getAttribute('data-price'));
    total += agaCookerQty.value * parseFloat(agaCookerQty.getAttribute('data-price'));
  }

  // 4. Show the result
  if (!serviceType) {
    alert('Please select a service type first.');
    return;
  }

  // Display the result section
  const resultSection = document.getElementById('resultSection');
  resultSection.style.display = 'block';
  document.getElementById('totalPrice').textContent = '£' + total;
}

// Listen to Calculate button
document.getElementById('calculateBtn').addEventListener('click', calculatePrice);

</script>
</body>
</html>
