(function () {

  // Don't block re-execution globally; only guard per-element
const apiUrlRF = "https://api.medspacircle.com/api/v1/";//update
const remoteCssRF = "https://api.medspacircle.com/embed/1/referral-form.css";//update
const serviceTokenRF="Xqz6FgWQtVraaVTdwnZtzJ3NbyVNf9QL";//update service token twilio

  const fontFamilyRF = "Montserrat";
  const linkUrlRFBase = "https://go.medspacircle.com/clinics/";//update

  
  const loadStyles = () => {
    if (document.getElementById("__referral_form_style")) return;   

    const styleElement = document.createElement('style');
    styleElement.id = "__referral_form_style";
    styleElement.textContent = `
      #ReferralFormMCLoader {
        margin: 0 auto;
        width: 400px;
      }
      .formreferral { text-align: left; }
      .invalid-feedback { display: none; }
      .invalid-feedback-show {
        color: #FFFFFF;
        background: #ca2c5b;
        margin-bottom: 5px;
        padding: 0 13px;
      }
      .rowreferral p { font-size: 115%; }
      .form-control.is-invalid,
      .was-validated .form-control:invalid {
        border-color: #dc3545;
        padding-right: calc(1.5em + .75rem);
      }
      .alert-success {
        color: #0f5132;
        background-color: #d1e7dd;
        border-color: #badbcc;
      }
      .hp-field {
        position: absolute;
        left: -10000px;
        top: auto;
        width: 1px;
        height: 1px;
        overflow: hidden;
      }
    `;
    document.head.appendChild(styleElement);

    const googleFont = document.createElement('link');
    googleFont.rel = 'stylesheet';
    googleFont.href = `https://fonts.googleapis.com/css2?family=${encodeURIComponent(fontFamilyRF)}`;
    document.head.appendChild(googleFont);
  };

  const cleanPhoneNumber = (phone) => {
    return phone.trim().replace(/^\+?1/, '').replace(/\D/g, '');
  };

  const createForm = (targetDiv) => {
    if (targetDiv.getAttribute('data-loaded') === 'true') return;
    targetDiv.setAttribute('data-loaded', 'true');

    const slugRF = targetDiv.getAttribute("data-slug-id") ?? "";
    const leadSlugRF = targetDiv.getAttribute("data-leads-slug") ?? "";
    const clinicidRF = parseInt(targetDiv.getAttribute("data-clinic-id") ?? "0", 10);
    const currentURLRF = window.location.href;
    const renderedAtRF = Date.now();
    const recaptchaKeyRF = targetDiv.getAttribute("data-recaptcha-site-key") ?? "";
    if (recaptchaKeyRF && !document.querySelector('script[src*="recaptcha/api.js"]')) {
      const s = document.createElement('script');
      s.src = `https://www.google.com/recaptcha/api.js?render=${encodeURIComponent(recaptchaKeyRF)}`;
      s.defer = true;
      document.head.appendChild(s);
    }

    targetDiv.innerHTML = `
      <form id="formMcReferral" method="POST" class="formreferral">
        <div class="mb-3">
          <label class="form-label">First Name</label>
          <input type="text" class="form-control" id="fmnl_first_name" placeholder="Enter your first name">
          <div class="invalid-feedback" id="fmnl_first_name_invalid">Please enter your first name.</div>
        </div>
        <div class="mb-3">
          <label class="form-label">Last Name</label>
          <input type="text" class="form-control" id="fmnl_last_name" placeholder="Enter your last name">
          <div class="invalid-feedback" id="fmnl_last_name_invalid">Please enter your last name.</div>
        </div>
        <div class="mb-3">
          <label class="form-label">Email</label>
          <input type="email" class="form-control" id="fmnl_email" placeholder="Enter your email">
          <div class="invalid-feedback" id="fmnl_email_invalid">Please enter your email.</div>
        </div>
        <div class="mb-3">
          <label class="form-label">Phone Number</label>
          <input type="text" class="form-control" id="fmnl_phone_number" placeholder="Enter your phone number">
          <div class="invalid-feedback" id="fmnl_phone_number_invalid">Please enter your phone number</div>
        </div>
        <div class="mb-3 hp-field">
          <label class="form-label">Leave this field empty</label>
          <input type="text" class="form-control" id="fmnl_hp_check" name="hp_check" autocomplete="off" tabindex="-1" aria-hidden="true">
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
      </form>
      <div id="formMcReferralResult"></div>
    `;

    const form = targetDiv.querySelector("#formMcReferral");
    form.addEventListener("submit", function (event) {
      event.preventDefault();
      const resultDiv = targetDiv.querySelector("#formMcReferralResult");
      const hpField = targetDiv.querySelector("#fmnl_hp_check");
      if (hpField && hpField.value.trim().length > 0) {
        resultDiv.innerHTML = `<div class="clearfix">&nbsp;</div><div class="alert alert-success">Thank you, we will get in touch very soon.</div>`;
        return;
      }
      const nowRF = Date.now();
      if (nowRF - renderedAtRF < 1500) {
        resultDiv.innerHTML = `<div class="clearfix">&nbsp;</div><div class="alert alert-danger">Please complete the form before submitting.</div>`;
        return;
      }
      const rateKeyRF = `rf_submit_${clinicidRF}`;
      const lastRF = parseInt(localStorage.getItem(rateKeyRF) || "0", 10);
      if (nowRF - lastRF < 15000) {
        resultDiv.innerHTML = `<div class="clearfix">&nbsp;</div><div class="alert alert-danger">Please wait before submitting again.</div>`;
        return;
      }
      localStorage.setItem(rateKeyRF, String(nowRF));
      const submitBtnRF = form.querySelector('button[type="submit"]');
      if (submitBtnRF) submitBtnRF.disabled = true;

      const email = targetDiv.querySelector("#fmnl_email");
      const phone = targetDiv.querySelector("#fmnl_phone_number");

      let valid = true;

      const validateField = (field, invalidId) => {
        if (!field.value.trim() || (field.id === 'fmnl_phone_number' && field.value.length < 9)) {
          field.classList.add("is-invalid");
          targetDiv.querySelector(`#${invalidId}`).classList.remove("invalid-feedback");
          targetDiv.querySelector(`#${invalidId}`).classList.add("invalid-feedback-show");
          valid = false;
        } else {
          field.classList.remove("is-invalid");
          targetDiv.querySelector(`#${invalidId}`).classList.add("invalid-feedback");
          targetDiv.querySelector(`#${invalidId}`).classList.remove("invalid-feedback-show");
        }
      };

      validateField(targetDiv.querySelector("#fmnl_first_name"), "fmnl_first_name_invalid");
      validateField(targetDiv.querySelector("#fmnl_last_name"), "fmnl_last_name_invalid");
      validateField(email, "fmnl_email_invalid");
      validateField(phone, "fmnl_phone_number_invalid");

      if (!valid) { if (submitBtnRF) submitBtnRF.disabled = false; return; }

      resultDiv.innerHTML = `<div class="clearfix">&nbsp;</div><div class="loading-container"><div class="loading-spinner"></div></div>`;
      const postData = {
        first_name: targetDiv.querySelector("#fmnl_first_name").value.trim(),
        last_name: targetDiv.querySelector("#fmnl_last_name").value.trim(),
        email: email.value.trim(),
        phone_number: "+1" + cleanPhoneNumber(phone.value),
        source_link: currentURLRF,
        clinic_id: clinicidRF
      };

      const sendXhr = (recaptchaToken) => {
        const xhr = new XMLHttpRequest();
        xhr.open("POST", apiUrlRF + "users/register_referrer", true);
        xhr.setRequestHeader("Content-Type", "application/json");
        xhr.setRequestHeader("Service-Token", serviceTokenRF);
        const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content || '';
        if (csrfToken) xhr.setRequestHeader("X-CSRF-TOKEN", csrfToken);
        xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
        if (recaptchaToken) xhr.setRequestHeader("X-Recaptcha-Token", recaptchaToken);
        xhr.onload = function () {
          if (submitBtnRF) submitBtnRF.disabled = false;
          if (xhr.status === 201 || xhr.status === 200) {
            resultDiv.innerHTML = `<div class="clearfix">&nbsp;</div><div class="alert alert-success">Thank you, we will get in touch very soon.</div>`;
          } else {
            let msg = 'Submission failed';
            try {
              const responseData = JSON.parse(xhr.responseText);
              msg = responseData.meta?.message || msg;
            } catch (e) {}
            resultDiv.innerHTML = `<div class="clearfix">&nbsp;</div><div class="alert alert-danger">${msg}</div>`;
          }
        };
        xhr.onerror = function () {
          if (submitBtnRF) submitBtnRF.disabled = false;
          resultDiv.innerHTML = `<div class="clearfix">&nbsp;</div><div class="alert alert-danger">Network error occurred</div>`;
        };
        xhr.send(JSON.stringify(postData));
      };

      if (recaptchaKeyRF && window.grecaptcha && typeof window.grecaptcha.execute === 'function') {
        window.grecaptcha.ready(function() {
          window.grecaptcha.execute(recaptchaKeyRF, { action: 'referral_form' }).then(function(token) {
            sendXhr(token);
          }, function() { sendXhr(null); });
        });
      } else {
        sendXhr(null);
      }
    });
  };

  // Inject styles once
  loadStyles();

  // Initial run for visible containers
  document.querySelectorAll("#ReferralFormMCLoader").forEach(createForm);

  // Observe DOM for dynamically injected popup content
  const observer = new MutationObserver((mutationsList) => {
    for (const mutation of mutationsList) {
      if (mutation.type === "childList") {
        mutation.addedNodes.forEach((node) => {
          if (node.nodeType === 1 && node.id === "ReferralFormMCLoader") {
            createForm(node);
          } else if (node.nodeType === 1) {
            const nested = node.querySelectorAll("#ReferralFormMCLoader");
            nested.forEach(createForm);
          }
        });
      }
    }
  });

  observer.observe(document.body, {
    childList: true,
    subtree: true
  });
})();