/* ==============================
  Contact Form Property Insights
============================== */

(function(){

  const form = document.querySelector(".PIGUIDEForm");
  if(!form) return;

  const steps = Array.from(form.querySelectorAll(".PIGUIDEStep"));

  const nextBtn = form.querySelector(".PIGUIDENext");
  const backBtn = form.querySelector(".PIGUIDEBack");
  const submitBtn = form.querySelector(".PIGUIDESubmit");

  let currentStep = 0;

  function showStep(index){

    steps.forEach((step,i)=>{
      step.classList.toggle("active", i === index);
    });

    backBtn.style.display = index === 0 ? "none" : "block";
    nextBtn.style.display = index === steps.length - 1 ? "none" : "block";
    submitBtn.style.display = index === steps.length - 1 ? "block" : "none";

  }

  function validateStep(){

    const step = steps[currentStep];
    const requiredInputs = step.querySelectorAll("input[required], select[required]");

    for(const input of requiredInputs){

      if(!input.value.trim()){
        input.focus();
        input.reportValidity();
        return false;
      }

    }

    return true;
  }

  nextBtn.addEventListener("click", function(){

    if(!validateStep()) return;

    if(currentStep < steps.length - 1){
      currentStep++;
      showStep(currentStep);
    }

  });

  backBtn.addEventListener("click", function(){

    if(currentStep > 0){
      currentStep--;
      showStep(currentStep);
    }

  });

  form.addEventListener("submit", function(e){

    e.preventDefault();

    if(!validateStep()) return;

    submitBtn.disabled = true;
    submitBtn.textContent = "Submitting...";

    const formData = new FormData(form);

    fetch(form.action,{
      method:"POST",
      body:formData,
      headers:{
        "Accept":"application/json"
      }
    })
    .then(function(response){

      if(response.ok){
        form.innerHTML = `
          <div style="text-align:center;padding:30px 10px;">
            <div style="
              display:inline-flex;
              padding:7px 16px;
              border-radius:999px;
              background:linear-gradient(135deg,#c69a45,#a9791d);
              color:#fff;
              font-size:11px;
              font-weight:800;
              margin-bottom:14px;
            ">
              SUCCESSFULLY SUBMITTED
            </div>

            <h2 style="
              margin:0 0 12px;
              color:#071a35;
              font-size:34px;
              line-height:1.1;
              font-weight:800;
            ">
              Thank You!
            </h2>

            <p style="
              margin:0 auto;
              max-width:460px;
              color:#4b5563;
              font-size:15px;
              line-height:1.6;
            ">
              Your request has been submitted successfully. We will contact you shortly with personalised property advice.
            </p>
          </div>
        `;
      }else{
        throw new Error();
      }

    })
    .catch(function(){

      alert("Something went wrong. Please try again.");

      submitBtn.disabled = false;
      submitBtn.textContent = "Request Consultation";

    });

  });

  showStep(currentStep);

})();