<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Cleaning Service Cost Calculator</title>
  <style>
    /* Minimal styling to ensure basic mobile-friendly layout */
    .cleaning-calculator {
      max-width: 400px;
      margin: 0 auto;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 6px;
      font-family: sans-serif;
    }

    .cleaning-calculator h2 {
      margin-top: 0;
      font-size: 1.2rem;
    }

    .cleaning-calculator select,
    .cleaning-calculator input {
      width: 100%;
      padding: 8px;
      margin-top: 6px;
      margin-bottom: 12px;
      box-sizing: border-box;
    }

    .cleaning-calculator button {
      padding: 10px 15px;
      cursor: pointer;
    }

    .cleaning-calculator label {
      font-weight: bold;
      display: block;
    }

    #resultContainer {
      margin-top: 15px;
      border-top: 1px solid #ccc;
      padding-top: 15px;
    }
  </style>
</head>
<body>

<div class="cleaning-calculator">
  <h2>Cleaning Cost Calculator</h2>
  <p>Please select a service type and fill in the required information to get an <strong>approximate</strong> cost. The final quote may vary based on location (especially for Zone 4) and other specifics.</p>

  <!-- Service selection -->
  <label for="serviceSelect">Service Type:</label>
  <select id="serviceSelect">
    <option value="">-- Please choose a service --</option>
  </select>

  <!-- Hourly-based input -->
  <div id="hourlyOptions" style="display: none;">
    <label for="hoursInput">Number of Hours:</label>
    <input type="number" id="hoursInput" min="1" value="1"/>
  </div>

  <!-- One-off cleaning products selection -->
  <div id="oneOffOptions" style="display: none;">
    <label for="oneOffSelect">Products Option:</label>
    <select id="oneOffSelect">
      <option value="">-- Please select an option --</option>
      <option value="client">With Client's Cleaning Products</option>
      <option value="company">With Company's Cleaning Products</option>
    </select>
  </div>

  <!-- Extra bathroom cleaning option -->
  <div id="extraBathroomOption" style="display: none;">
    <label for="extraBathroomHours">Extra Bathroom Cleaning (hours):</label>
    <input type="number" id="extraBathroomHours" min="0" value="0"/>
  </div>

  <!-- Calculate button -->
  <button id="calculateBtn">Calculate</button>

  <!-- Result section -->
  <div id="resultContainer" style="display: none;">
    <p id="estimatedCost" style="font-weight: bold;"></p>
    <p>This is a preliminary estimate. For an exact quote, please contact our representative.</p>
    <button id="contactBtn" style="background-color: #007BFF; color: #fff; border: none; border-radius: 4px;">
      Get in Touch
    </button>
  </div>
</div>

<script>
  // All comments in English, as required.
  // Data structure for available services:
  // - type = "hourly" -> calculates using hours * price
  // - type = "oneoff" -> a special case that uses hours * priceClient or priceCompany
  // - type = "fixed" -> a flat rate for End of Tenancy cleaning

  const services = [
    // Hourly-based services
    { id: "regular_weekly",       name: "Regular Domestic Cleaning (Weekly)",        type: "hourly", price: 18, minHours: 2 },
    { id: "regular_fortnightly",  name: "Regular Domestic Cleaning (Fortnightly)",   type: "hourly", price: 20, minHours: 2 },
    { id: "office_cleaning",      name: "Office Cleaning",                           type: "hourly", price: 18, minHours: 2 },
    { id: "commercial_cleaning",  name: "Commercial Cleaning",                       type: "hourly", price: 20, minHours: 2 },
    { id: "one_off_spring",       name: "One-Off/Spring Cleaning",                   type: "oneoff", priceClient: 22, priceCompany: 25, minHours: 3 },
    { id: "emergency_cleaning",   name: "Emergency Cleaning (With Client’s Products)", type: "hourly", price: 20, minHours: 3 },
    { id: "after_builders",       name: "After Builders Cleaning",                   type: "hourly", price: 22, minHours: 4 },
    { id: "before_after_party",   name: "Before/After Party Cleaning",               type: "hourly", price: 19, minHours: 3 },
    { id: "ironing_services",     name: "Ironing Services",                          type: "hourly", price: 18, minHours: 0 },
    { id: "extra_bathroom_cleaning", name: "Extra Bathroom Cleaning (as an additional service)", type: "hourly", price: 40, minHours: 0 },

    // End of tenancy (fixed rates)
    { id: "studio",               name: "End of Tenancy - Studio Flat",              type: "fixed",  price: 150 },
    { id: "1_bed",                name: "End of Tenancy - 1 Bedroom Flat/House",     type: "fixed",  price: 180 },
    { id: "2_bed_1_bath",         name: "End of Tenancy - 2 Bedroom Flat/House (1 Bath)", type: "fixed",  price: 170 },
    { id: "2_bed_2_bath",         name: "End of Tenancy - 2 Bedroom Flat/House (2 Baths)", type: "fixed",  price: 250 },
    { id: "3_bed_1_bath",         name: "End of Tenancy - 3 Bedroom Flat/House (1 Bath)", type: "fixed",  price: 260 },
    { id: "3_bed_2_bath",         name: "End of Tenancy - 3 Bedroom Flat/House (2 Baths)", type: "fixed",  price: 290 },
    { id: "4_bed_2_bath",         name: "End of Tenancy - 4 Bedroom Flat/House (2 Baths)", type: "fixed",  price: 340 },
  ];

  // DOM elements
  const serviceSelect         = document.getElementById("serviceSelect");
  const hourlyOptions         = document.getElementById("hourlyOptions");
  const hoursInput            = document.getElementById("hoursInput");
  const oneOffOptions         = document.getElementById("oneOffOptions");
  const oneOffSelect          = document.getElementById("oneOffSelect");
  const extraBathroomOption   = document.getElementById("extraBathroomOption");
  const extraBathroomHours    = document.getElementById("extraBathroomHours");
  const calculateBtn          = document.getElementById("calculateBtn");
  const resultContainer       = document.getElementById("resultContainer");
  const estimatedCost         = document.getElementById("estimatedCost");
  const contactBtn            = document.getElementById("contactBtn");

  let selectedService = null;

  // Populate the "Service Type" dropdown
  services.forEach(service => {
    const option = document.createElement("option");
    option.value = service.id;
    option.textContent = service.name;
    serviceSelect.appendChild(option);
  });

  // Helper function to reset fields whenever the user changes the service type
  function resetFields() {
    hourlyOptions.style.display       = "none";
    oneOffOptions.style.display       = "none";
    extraBathroomOption.style.display = "none";
    hoursInput.value                  = 1;
    oneOffSelect.value                = "";
    extraBathroomHours.value          = 0;
  }

  // Handle service select changes
  serviceSelect.addEventListener("change", function() {
    // Hide result container whenever user changes the service
    resultContainer.style.display = "none";

    // Reset all fields to default state
    resetFields();

    // Find which service object is selected
    selectedService = services.find(s => s.id === this.value);

    // Show or hide specific fields based on the selected service type
    if (selectedService) {
      if (selectedService.type === "hourly") {
        hourlyOptions.style.display = "block";
        // Show extra bathroom only if not choosing the extra bathroom service itself
        if (selectedService.id !== "extra_bathroom_cleaning") {
          extraBathroomOption.style.display = "block";
        }
      }
      else if (selectedService.type === "oneoff") {
        hourlyOptions.style.display = "block";
        oneOffOptions.style.display = "block";
        extraBathroomOption.style.display = "block";
      }
      else if (selectedService.type === "fixed") {
        // End of Tenancy cleaning is fixed rate, no hourly input needed
        // We'll skip the extra bathroom input here unless you want to add that logic
      }
    }
  });

  // Main calculation logic
  calculateBtn.addEventListener("click", function() {
    if (!selectedService) {
      alert("Please select a service type first.");
      return;
    }

    let totalCost = 0;

    // Hourly-based services
    if (selectedService.type === "hourly") {
      let hours = parseFloat(hoursInput.value);
      if (hours < selectedService.minHours) {
        hours = selectedService.minHours;
      }
      totalCost = hours * selectedService.price;

      // If user selected an hourly service different from the "Extra Bathroom" itself,
      // we can add the extra bathroom hours
      if (selectedService.id !== "extra_bathroom_cleaning") {
        const extraHours = parseFloat(extraBathroomHours.value);
        if (extraHours > 0) {
          totalCost += extraHours * 40; // £40/hour for extra bathroom cleaning
        }
      }
    }
    // One-off cleaning
    else if (selectedService.type === "oneoff") {
      let hours = parseFloat(hoursInput.value);
      if (hours < selectedService.minHours) {
        hours = selectedService.minHours;
      }
      if (!oneOffSelect.value) {
        alert("Please select the cleaning products option for One-Off/Spring Cleaning.");
        return;
      }

      // Price depends on whether client or company provides the cleaning products
      const pricePerHour = (oneOffSelect.value === "client") 
                             ? selectedService.priceClient 
                             : selectedService.priceCompany;
      totalCost = hours * pricePerHour;

      // Extra bathroom cleaning
      const extraHours = parseFloat(extraBathroomHours.value);
      if (extraHours > 0) {
        totalCost += extraHours * 40;
      }
    }
    // Fixed rate (End of Tenancy)
    else if (selectedService.type === "fixed") {
      totalCost = selectedService.price;
      // If you want to add extra bathroom logic here, you could do it, 
      // but the price list for End of Tenancy is already fixed per property.
    }

    // Show results
    estimatedCost.textContent = `Estimated Cost: £${totalCost.toFixed(2)}`;
    resultContainer.style.display = "block";
  });

  // Contact button logic - can be changed to open a chat, redirect, or show a modal, etc.
  contactBtn.addEventListener("click", function() {
    // Example redirection to contact page or phone link
    window.location.href = "https://qithub.click/"; // or any appropriate link
    alert("Thank you! We will be happy to assist you. Please reach out via phone or email.");
  });
</script>

</body>
</html>
