(function () {
  // Don't block re-execution globally; only guard per-element
const apiUrlNL = "https://api.medspacircle.com/api/v1/";//update
const remoteCssNL = "https://api.medspacircle.com/embed/1/newleads.css";//update
const serviceTokenNL="xGVmcrAcPDufdp1RAEkbM74TMkHuP5TQ";//update

  const fontFamilyNL = "Montserrat";
  const linkUrlNLBase = "https://godev2.medspacircle.com/clinics/";

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

    const styleElement = document.createElement('style');
    styleElement.id = "__newleads_style";
    styleElement.textContent = `
      #NewLeadsMCLoader {
        margin: 0 auto;
        width: 400px;
      }
      .formnewleads { text-align: left; }
      .invalid-feedback { display: none; }
      .invalid-feedback-show {
        color: #FFFFFF;
        background: #ca2c5b;
        margin-bottom: 5px;
        padding: 0 13px;
      }
      .rownewleads 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;
      }
    `;
    document.head.appendChild(styleElement);

    const googleFont = document.createElement('link');
    googleFont.rel = 'stylesheet';
    googleFont.href = `https://fonts.googleapis.com/css2?family=${encodeURIComponent(fontFamilyNL)}`;
    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 slugNL = targetDiv.getAttribute("data-slug-id");
    const clinicidNL = parseInt(targetDiv.getAttribute("data-clinic-id"), 10);
    const currentURL = window.location.href;

    targetDiv.innerHTML = `
      <form id="formMcNewLeads" method="POST" class="formnewleads">
        <div class="mb-3">
          <label class="form-label">Name</label>
          <input type="text" class="form-control" id="fmnl_name" placeholder="Enter your name">
          <div class="invalid-feedback" id="fmnl_name_invalid">Please enter your 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>
        <button type="submit" class="btn btn-primary">Submit</button>
      </form>
      <div id="formMcNewLeadsResult"></div>
    `;

    const form = targetDiv.querySelector("#formMcNewLeads");
    form.addEventListener("submit", function (event) {
      event.preventDefault();

      const name = targetDiv.querySelector("#fmnl_name");
      const email = targetDiv.querySelector("#fmnl_email");
      const phone = targetDiv.querySelector("#fmnl_phone_number");
      const resultDiv = targetDiv.querySelector("#formMcNewLeadsResult");

      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(name, "fmnl_name_invalid");
      validateField(email, "fmnl_email_invalid");
      validateField(phone, "fmnl_phone_number_invalid");

      if (!valid) return;

      resultDiv.innerHTML = `<div class="clearfix">&nbsp;</div><div class="loading-container"><div class="loading-spinner"></div></div>`;

      const xhr = new XMLHttpRequest();
      xhr.open("POST", apiUrlNL + "new_leads/tasks", true);
      xhr.setRequestHeader("Content-Type", "application/json");
      xhr.setRequestHeader("Service-Token", serviceTokenNL);

      xhr.onload = function () {
        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 () {
        resultDiv.innerHTML = `<div class="clearfix">&nbsp;</div><div class="alert alert-danger">Network error occurred</div>`;
      };

      const postData = {
        name: name.value.trim(),
        email: email.value.trim(),
        phone_number: "+1" + cleanPhoneNumber(phone.value),
        description: "new lead",
        source_link: currentURL,
        clinic_id: clinicidNL
      };

      xhr.send(JSON.stringify(postData));
    });
  };

  // Inject styles once
  loadStyles();

  // Initial run for visible containers
  document.querySelectorAll("#NewLeadsMCLoader").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 === "NewLeadsMCLoader") {
            createForm(node);
          } else if (node.nodeType === 1) {
            const nested = node.querySelectorAll("#NewLeadsMCLoader");
            nested.forEach(createForm);
          }
        });
      }
    }
  });

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