var inputs = [];

inputs.push({ fn: "name", fl: "Your name", ft: "input", fr: true });
inputs.push({ fn: "email", fl: "Email", ft: "input", fr: true });
inputs.push({ fn: "postcode", fl: "Postcode from", ft: "input", fr: true });
inputs.push({ fn: "postcodeto", fl: "Postcode to", ft: "input", fr: true });
inputs.push({ fn: "phone", fl: "Phone", ft: "input", fr: true });
inputs.push({ fn: "message", fl: "Message", ft: "textarea" });
inputs.push({
  fn: "send",
  fl: "SEND",
  ft: "button",
  fc: () => amzgfSubmitForm(),
});

var parentEl;

function amzgel(k) {
  if ((e = document.getElementById(k))) return e;
  return false;
}

function amzgfInit() {
  var style = document.createElement("style");
  style.type = "text/css";
  style.innerHTML =
    '#amzgf div.amzgRequiredError input[type="text"], #amzgf div.amzgRequiredError textarea { border: 1px solid red;} .amzgRequired span:after { content: "*"; color: red; } #amzgMessage { text-align: center; font-weight: bold; margin: 10px; font-size: 1.2rem; }';
  document.getElementsByTagName("head")[0].appendChild(style);

  var formEl = document.createElement("div");
  formEl.id = "amzgForm";

  var divEl = document.createElement("div");
  divEl.id = "amzgMessage";
  divEl.style.display = "none";
  parentEl.appendChild(divEl);

  var sdivEl = document.createElement("div");
  sdivEl.id = "amzgStatus";
  sdivEl.style.display = "none";
  parentEl.appendChild(sdivEl);

  inputs.map((inp, key) => {
    var divEl = document.createElement("div");
    divEl.id = "amzgfe" + inp.fn;

    divEl.classList.add("amzgs" + inp.ft);

    if (inp.fr) divEl.classList.add("amzgRequired");

    if (inp.ft !== "button" && inp.ft !== "textarea") {
      var spanEl = document.createElement("span");
      spanEl.innerHTML = inp.fl;
      divEl.appendChild(spanEl);
    }
    var inputEl = document.createElement(inp.ft);
    inputEl.id = "amzgff" + inp.fn;
    if (inp.ft !== "button") inputEl.placeholder = inp.fl;
    else {
      inputEl.innerHTML = inp.fl;
      inputEl.onclick = inp.fc ? inp.fc : null;
      inputEl.classList.add("btn");
    }

    if (inp.ft === "input") inputEl.setAttribute("type", "text");
    if (inp.ft === "input") divEl.classList.add("c_input");
    if (inp.ft === "input") inputEl.classList.add("stinput");
    if (inp.ft === "textarea") divEl.classList.add("c_text");
    if (inp.ft === "button") divEl.classList.add("c_send");


    divEl.appendChild(inputEl);
    formEl.appendChild(divEl);
  });
  parentEl.appendChild(formEl);
}

function amzgfSubmitForm() {
  var errors = 0;
  inputs.map((inp, key) => {
    if (inp.fr && amzgel("amzgffname").value !== "=-=-") {
      var fld = amzgel("amzgff" + inp.fn);

      if (!fld.value) {
        fld.parentElement.classList.add("amzgRequiredError");
        errors = errors + 1;
      } else fld.parentElement.classList.remove("amzgRequiredError");
    }
  });

  if (errors) {
    amzgfShowError("Please fill all required fields.");
  } else {
    amzgfShowError("");
    amzgfSendRequest();
  }
}

function amzgShow(elId) {
  amzgel(elId).style.display = "block";
}

function amzgHide(elId) {
  amzgel(elId).style.display = "none";
}

function amzgfSendRequest() {
  amzgShow("amzgMessage");
  amzgel("amzgMessage").innerHTML = "Sending...";
  amzgHide("amzgForm");

  var xhr = new XMLHttpRequest();
  var url = "https://amzg.uk/f/s/";
  xhr.open("POST", url, true);
  xhr.setRequestHeader("Content-Type", "application/json");
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      var json = JSON.parse(xhr.responseText);

      if (json.log) console.log(json.log);

      if (json.alert) alert(json.alert);

      if (json.error != "") {
        amzgHide("amzgMessage");
        amzgShow("amzgForm");
        amzgfShowError(json.error);
      } else if (json.message) {
        amzgel("amzgMessage").innerHTML = json.message;
      } else {
        amzgfShowError(
          "Your request can not be sent right now. Please call us."
        );
      }
    }
  };

  var valdata = {};
  inputs.map((inp) => {
    valdata = { ...valdata, [inp.fn]: amzgel("amzgff" + inp.fn).value };
  });

  var data = JSON.stringify(valdata);
  xhr.send(data);
}

function amzgfShowError(msg = "") {
  var divEl = amzgel("amzgMessage");
  divEl.innerHTML = msg;
  divEl.style.display = msg ? "block" : "none";
}

if ((parentEl = document.getElementById("amzgf"))) {
  amzgfInit(parentEl);
}