var email_field = document.querySelector('input[name="email"].form-control');
    var name_field =  document.querySelector('input[name="full_name"].form-control');
    var phoneField = document.querySelector('input[name="phone"]');
  var main = document.querySelector("#locationverification");

  if (main) {

    main.insertAdjacentHTML(

      "afterbegin",

      `<center>

        <select id="locations-list" data-placeholder="Choose name..." width="100%">

          <option value="">Fetching locations...</option>

        </select><div class="verify_form" style="">

        <div class="f-even form-field-container input_field"><div class="form-builder--item"><label id="verifyforemail">Verify Email  <span>*</span></label><input placeholder="Verify Email" type="email" class="form-control maininput" id="emailverify" data-required="true"></div></div>
        <style>
          .verify_form .input_field {
          width: 100%;

          }
            .verify_form .buttonverify {
              margin-top: 50px;
          }
          @media screen and (max-width:570px){
            .verify_form{
                flex-direction:column;
                align-items: flex-start;
          }
           .verify_form .buttonverify {
            margin-top: 0px;
            }
          }
          .btnverify {
           float: left;
           display: block;
           background: #8d8ea8;
           color: white;
           box-shadow: 0 7px 14px 0 rgba(49, 49, 93, 0.10), 0 3px 6px 0 rgba(0, 0, 0, 0.08);
           border-radius: 4px;
           border: 0;
           font-size: 15px;
           font-weight: 400;
           width: 100%;
           padding:10px;
           height: 40px;
           outline: none;
          }
          .verified{
           color: #41b883;
           display: block;
           width: 100%;
          }
          .verify_form{
          display: flex;
          justify-content: space-between;
          align-items: center;
          }
        </style>
        <div class="f-even form-field-container buttonverify">
        <div class="form-builder--item"><label id="verifyforemail">  <span></span></label><a class="btn btn-dark maininput btnverify">Verify</a>
        </div></div></div>
        <span class="msg"></msg>
      </center>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css" integrity="sha512-0nkKORjFgcyxv3HbE4rzFUlENUMNqic/EzDIeYCgsKa/nwqr2B91Vu/tNAu4Q0cBuG4Xe/D1f/freEci/7GDRA==" crossorigin="anonymous" referrerpolicy="no-referrer"/> `
    );

  }

 let cus_id=null;
 var name_r=null;
 var email_r=null;
 var phone_r=null;
  var url = "https://script.google.com/macros/s/AKfycbypzF2fPYG3mT3r55_E5nvsE-PoCO2NH1YWXw3LW8iqmjhz_IYg5KSLNpi-7YqplRD0Qg/exec";
  function loadScript(url, callback) {
    var script = document.createElement("script");
    script.type = "text/javascript";
    if (script.readyState) {
      // only required for IE <9
      script.onreadystatechange = function () {
        if (
          script.readyState === "loaded" ||
          script.readyState === "complete"
        ) {
          script.onreadystatechange = null;
          callback();
        }
      };
    } else {
      //Others
     script.onload = function () {
        callback();
      };
    }
    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);
  }

  loadScript(
    "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js",
    function () {
      $(".verify_form").hide();
      $('input:not(.maininput):not(.chosen-search-input)').attr('disabled','disabled');
      loadScript(
        "https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js",
        getLocations
      );
    }
  );
  function getLocations() {
    $("#locations-list").chosen({ width: "100%" });
    $("body").on("click", ".btnverify", function () {
      $(this).attr("disabled", "disabled");
      $(".btnverify").html("Matching...");
      match_email();
    });
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url+"?action=listlocations");
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4) {
        var data = xhr.responseText;
        data = JSON.parse(data);
        console.log('datadata',data)
        var select = document.querySelector("#locations-list");
        select.innerHTML = "<option value=''>Choose Location</option>";
        data.locations.forEach((xt, index) => {
          select.insertAdjacentHTML(
            "beforeend",
            `<option value="${index}">${xt}</option>`
          );
          if (index == data.locations.length - 1) {
            loadUI();
          }
        });
      }
    };
    xhr.send();
  }
    let location_id=null;
  function match_email() {
    $('input:not(.maininput):not(.chosen-search-input)').attr('disabled','disabled');
    $(".msg").removeClass("error");
    $(".msg").hide();
    $(".msg").removeClass("verified");
     var email = $("#emailverify").val();
    if (
      !email ||
      email.trim() == "" ||
      !email.includes("@") ||
      !email.includes(".")
    ) {
      show_error("Enter valid email address");
      return;
    }
    email = email.replaceAll(" ", "").toLowerCase().trim();
    var xhr = new XMLHttpRequest();
    xhr.open("POST", url);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4) {
        try {
          data = xhr.responseText;
          $(".btnverify").html("Verify");
          $(".btnverify").removeAttr("disabled");
          $(".msg").show();
          if (
            data != "" &&
            data != "null" &&
            data != null &&
            data != false &&
            data != "false"
          ) {
            data = JSON.parse(data);
            try {
              $(".msg").html("Email Verified");
              $(".msg").addClass("verified");
          console.log('dataaaaaaa',data);
              // Set customer details
              cus_id = data.cus_id;
              location_id = data.location_id;
              name_r = data.name;
              email_r = data.email;
              phone_r = data.phone;
          
              var event = new Event("input", { bubbles: true, cancelable: true });
          
              if (name_field != null) {
                  name_field.value = name_r;
                  name_field.dispatchEvent(event);
              }
          
              if (email_field != null) {
                  email_field.value = email_r;
                  email_field.dispatchEvent(event);
              }
          
              if (phoneField != null) {
                  if (window.intlTelInput) {
                      const iti = window.intlTelInputGlobals.getInstance(phoneField);
                      if (iti) {
                                            console.log("phone_r", phone_r)

                          iti.setNumber(phone_r);
                          phoneField.dispatchEvent(event);
                      } else {
                          console.error("intlTelInput instance not found for phoneField.");
                      }
                  } else {
                    console.log("phone_r", phone_r)
                      phoneField.value = phone_r.trim();
                      phoneField.dispatchEvent(event);
                  }
              }
          
              $(".verify_form").hide();
              $('input:not(.maininput)').removeAttr('disabled');
          
              // Additional setting for name and email directly
              var nametxt = document.querySelector("#name");
              if (nametxt) {
                  nametxt.value = data.name;
              }
          
              var emailtxt = document.querySelector("#email");
              if (emailtxt) {
                  emailtxt.value = data.email;
              }
          } catch (err) {
              console.error("Error while updating fields:", err);
          }
          
          } else {
            show_error("Email not matched");
          }
        } catch (er) {}
      }
    };

    var data = `index=${

      document.querySelector("#locations-list").value

    }&email=${email}`;

    xhr.send(data);

  }



  function show_error(msg) {

    $(".msg").show();

    $(".msg").addClass("error1");

    $(".msg").html(msg);

    $(".btnverify").html("Verify");

          

    $(".btnverify").removeAttr("disabled");

  }



  function loadUI() {

    $("#locations-list").trigger("chosen:updated");

    $("body").on("change", "#locations-list", function (e) {

      const select = e.target;

      const value = select.value;

      $(".msg").hide();

      $("#emailverify").val("");

      $('input:not(.maininput):not(.chosen-search-input)').attr('disabled','disabled');

     

      if (value == "") {

        $(".verify_form").hide();

        show_error("Please choose location to continue");

        return;

      }

      const desc = select.selectedOptions[0].text;

      $(".verify_form").show();

      $("#verifyforemail").html(

        "Input the email of " + desc + " for verification process"

      );

    });

  }