var app = {};

app.config = {
  sessionToken: false,
};

app.query = function (el) {
  return document.querySelector(el);
};

app.queryAll = function (el) {
  return document.querySelectorAll(el);
};

app.querySelectorAll = function (el) {
  return document.querySelectorAll(el);
};

app.getParams = function (p) {
  const qs = window.location.search;
  const urlParams = new URLSearchParams(qs);
  return urlParams.get(p);
};

app.setCookie = function (n, v) {
  let e;
  let d = new Date();
  d.setTime(d.getTime() + 1000 * 60 * 60 * 8.3);
  e = "; expires=" + d.toUTCString();
  document.cookie = n + "=" + (v || "") + e + "; path=/";
};

app.getCookie = function (n, callback) {
  var e = n + "=";
  var ca = document.cookie.split(";");
  for (var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == " ") c = c.substring(1, c.length);
    if (c.indexOf(e) == 0)
      return callback(true, c.substring(e.length, c.length));
  }
  return callback(false, null);
};

app.timeSince = function (date) {
  var seconds = Math.floor((new Date() - date) / 1000);
  var interval = seconds / 31536000;
  if (interval > 1) {
    return Math.floor(interval) + " years";
  }
  interval = seconds / 2592000;
  if (interval > 1) {
    return Math.floor(interval) + " months";
  }
  interval = seconds / 86400;
  if (interval > 1) {
    return Math.floor(interval) + " days";
  }
  interval = seconds / 3600;
  if (interval > 1) {
    return Math.floor(interval) + " hours";
  }
  interval = seconds / 60;
  if (interval > 1) {
    return Math.floor(interval) + " minutes";
  }
  return Math.floor(seconds) + " seconds";
};

app.eraseCookie = function (n) {
  document.cookie = n + "=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;";
  app.redirectUrl("../../../../../user/login");
};

app.getSessionToken = function (callback) {
  var tokenString = localStorage.getItem("token");
  if (typeof tokenString == "string") {
    try {
      var token = JSON.parse(tokenString);
      app.config.sessionToken = token;
      callback(true, app.config.sessionToken);
      if (typeof token == "object") {
        app.setLoggedInClass(true);
      } else {
        app.setLoggedInClass(false);
      }
    } catch (e) {
      app.config.sessionToken = false;
      app.setLoggedInClass(false);

      callback(false, null);
      console.log("nothing in here");
      // callback(false)
    }
  }
};

app.setLoggedInClass = function (add) {
  var target = document.querySelector("body");
  if (add) {
    target.classList.add("loggedIn");
  } else {
    target.classList.remove("loggedIn");
  }
};

app.setSessionToken = function (token) {
  app.config.sessionToken = token;
  var tokenString = JSON.stringify(token);
  localStorage.setItem("token", tokenString);
  if (typeof token == "object") {
    app.setLoggedInClass(true);
  } else {
    app.setLoggedInClass(false);
  }
};

app.renewToken = function (callback) {
  var currentToken =
    typeof app.config.sessionToken == "object"
      ? app.config.sessionToken
      : false;
  if (currentToken) {
    // Update the token with a new expiration
    var payload = {
      id: currentToken.id,
      extend: true,
    };
    app.client.request(
      undefined,
      "api/tokens",
      "PUT",
      undefined,
      payload,
      function (statusCode, responsePayload) {
        // Display an error on the form if needed
        if (statusCode == 200) {
          // Get the new token details
          var queryStringObject = { id: currentToken.id };
          app.client.request(
            undefined,
            "api/tokens",
            "GET",
            queryStringObject,
            undefined,
            function (statusCode, responsePayload) {
              // Display an error on the form if needed
              if (statusCode == 200) {
                app.setSessionToken(responsePayload);
                callback(false);
              } else {
                app.setSessionToken(false);
                callback(true);
              }
            }
          );
        } else {
          app.setSessionToken(false);
          callback(true);
        }
      }
    );
  } else {
    app.setSessionToken(false);
    callback(true);
  }
};

app.tokenRenewalLoop = function () {
  setInterval(function () {
    app.renewToken(function (err) {
      if (!err) {
        console.log("Token renewed successfully @ " + Date.now());
      }
    });
  }, 1000 * 60);
};

app.redirectUrl = function (url) {
  window.location = url;
};

/////////////////////////////////////////////////////////////
app.client = {};

app.client.fetch = async (url = "", method, data = {}) => {
  const response = await fetch(url, {
    method: method,
    body: JSON.stringify(data),
    credentials: "include",
  });
  return response.json();
};

app.client.get = async (url, cb) => {
  const response = await fetch(url);
  var obj = await response.json();
  cb(obj);
};

// Error sweet alert
app.client.sweetAlertE = (icon, msg, title) => {
  swal({
    title: title,
    html: msg,
    type: icon,
    timer: 3500,
    padding: "2em",
    onOpen: function () {
      swal.showLoading();
    },
  }).then(function (result) {
    if (result.dismiss === swal.DismissReason.timer) {
    }
  });
};

//Sweet Alert
app.client.sweetAlert = function (icon, msg, title) {
  swal({
    title: title,
    html: msg,
    type: icon,
    timer: 2000,
    padding: "2em",
    onOpen: function () {
      swal.showLoading();
    },
  }).then(function (result) {
    if (result.dismiss === swal.DismissReason.timer) {
      console.log("I was closed by the timer");
    }
  });
};

app.client.sweetAlertS = (icon, msg, title, url) => {
  swal({
    title: title,
    html: msg,
    type: icon,
    timer: 1000,
    padding: "2em",
    onOpen: function () {
      swal.showLoading();
    },
  }).then(function (result) {
    if (result.dismiss === swal.DismissReason.timer) {
      if (url != null) {
        window.location = url;
      }
    }
  });
};

app.client.request = function (
  headers,
  path,
  method,
  queryStringObject,
  payload,
  callback
) {
  // Set defaults
  headers = typeof headers == "object" && headers !== null ? headers : {};
  path = typeof path == "string" ? path : "/";
  method =
    typeof method == "string" &&
      ["POST", "GET", "PUT", "DELETE"].indexOf(method.toUpperCase()) > -1
      ? method.toUpperCase()
      : "GET";
  queryStringObject =
    typeof queryStringObject == "object" && queryStringObject !== null
      ? queryStringObject
      : {};
  payload = typeof payload == "object" && payload !== null ? payload : {};
  callback = typeof callback == "function" ? callback : false;

  // For each query string parameter sent, add it to the path
  var requestUrl = path + "?";
  var counter = 0;
  for (var queryKey in queryStringObject) {
    if (queryStringObject.hasOwnProperty(queryKey)) {
      counter++;
      // If at least one query string parameter has already been added, preprend new ones with an ampersand
      if (counter > 1) {
        requestUrl += "&";
      }
      // Add the key and value
      requestUrl += queryKey + "=" + queryStringObject[queryKey];
    }
  }

  // Form the http request as a JSON type
  var xhr = new XMLHttpRequest();
  xhr.open(method, requestUrl, true);
  xhr.setRequestHeader("Content-type", "application/json");

  // For each header sent, add it to the request
  for (var headerKey in headers) {
    if (headers.hasOwnProperty(headerKey)) {
      xhr.setRequestHeader(headerKey, headers[headerKey]);
    }
  }

  // If there is a current session token set, add that as a header
  if (app.config.sessionToken) {
    xhr.setRequestHeader("token", app.config.sessionToken.id);
  }

  // When the request comes back, handle the response
  xhr.onreadystatechange = function () {
    if (xhr.readyState == XMLHttpRequest.DONE) {
      var statusCode = xhr.status;
      var responseReturned = xhr.responseText;

      // Callback if requested
      if (callback) {
        try {
          var parsedResponse = JSON.parse(responseReturned);
          callback(statusCode, parsedResponse);
        } catch (e) {
          callback(statusCode, false);
        }
      }
    }
  };

  // Send the payload as JSON
  var payloadString = JSON.stringify(payload);
  xhr.send(payloadString);
};

// Email hasher
app.client.hEmail = function (e) {
  var h = "";
  for (i = 0; i < e.length; i++) {
    if (i > 1 && i < e.indexOf("@")) {
      h += "*";
    } else {
      h += e[i];
    }
  }
  return h;
};

app.client.load = function () {
  return `<center>
                <div class="spinner-border text-primary  align-self-center "></div>
            </center>`;
};

let host = window.location.host;
let protocol = window.location.protocol;

// General
app.general = () => {
  app.query(".logout").addEventListener("click", function (e) {
    e.preventDefault();
    app.eraseCookie("azer_token");
  });

  app.getCookie("azer_token", (e, r) => {
    // app.client.get("https://ipapi.co/json/?key=l4HNjGbqprIaNgbt9vQQfblxrAvC3dh4J3B8IwrphiJklNnYu5",
    app.client.get("https://api.yellowcard.io/auth/locale", (e) => {
      app.query(".country_flag").innerHTML = `
      <img src="${protocol + "//" + host
        }/public/images/svg/${e.country_code.toLowerCase()}.svg" class="flag-width" > `;
    });
    app.client
      .fetch(`../../../../../api/notification`, "POST", { token: r })
      .then((x) => {
        if (x.data.length > 0) {
          x.data.sort((a, b) => b.notify_id - a.notify_id);
          x.data.forEach((n) => {
            app.query(".notification-scroll").innerHTML += `
            <div class="dropdown-item">
            <div class="media server-log">
              <div class="media-body">
                <div class="data-info">
                  <h6 class="">${n.notify_title}</h6>
                  <p class="">${app.timeSince(new Date(n.timestamp))}</p>
                </div>
              </div>
            </div>
          </div>`;
          });
        } else {
          app.query(".notification-scroll").innerHTML = `
            <div class="dropdown-item">
            <div class="media server-log">
              <div class="media-body">
                <div class="data-info">
                  <h6 class="">No activities</h6>
                  <p class="">null</p>
                </div>
              </div>
            </div>
          </div>`;
        }
      });
  });

  app.OauthRunTime();
};

app.OauthRunTime = function () {
  const acz = () => {
    app.getCookie("azer_token", (e, r) => {
      if (e) {
        app.client
          .fetch("../../../../api/token", "POST", { token: r })
          .then((x) => {
            if (x.isSuccess === false) {
              app.eraseCookie("azer_token");
              // app.redirectUrl("../../../../../user/login");
            }
          });
      } else {
        app.redirectUrl(`../../../../../user/login`);
      }
    });
  };
  acz();
  setInterval(acz, 10000);
};

app.copyValue = function (e) {
  e.select();
  navigator.clipboard.writeText(e.value);
  app.client.toastS("success", "Copied Successfully", null);
};

app.copyHtml = function (e) {
  e.select();
  navigator.clipboard.writeText(e.innerHTML);
  app.client.toastS("success", "Copied Successfully", null);
};

app.loading = function () {
  return `<div class=" spinner-border text-primary  align-self-center ">Loading...</div>`;
};

// otp verifications
app.verrif = function () {
  if (app.query(".verrif")) {
    app.getCookie("azer_token", (e, r) => {
      if (e) {
        app.redirectUrl(`../dashio/home?azer_token=${r}`);
      }
    });
    // app.query(".azer_img").style.backgroundImage =
    //   "url(../public/images/Pic" + Math.round(Math.random() * 14) + ".jpg)";
    let em;
    const obj = { queryString: app.getParams("v") };
    app.client.fetch("../auth/verifyOTPQueryString", "POST", obj).then((e) => {
      if (e.isSuccess) {
        em = e.result.userEmail;
        app.query(".azer_hm").innerHTML = app.client.hEmail(em);
      } else {
        app.query(".azer_hm").innerHTML =
          '<br /><p style="color: red;"> Invalid otp link</p>';
      }

      app.query(".azer_input").addEventListener("keyup", (e) => {
        if (e.target.value.length === 6) {
          let c = { code: e.target.value, email: em };
          app.client.fetch("../auth/verify_otp", "POST", c).then((e) => {
            if (e.isSuccess) {
              app.setSessionToken(e.token.azer_token);
              app.setCookie("azer_token", e.token.azer_token);
              // app.config.sessionToken = true;
              // console.log(app.config.sessionToken);
              app.client.sweetAlertS(e.icon, e.message, e.title, e.redirectUrl);
            } else {
              app.client.sweetAlertE(e.icon, e.message, e.title);
            }
          });
          swal({
            html: "Loading....",
            padding: "2em",
            onOpen: function () {
              swal.showLoading();
            },
          }).then(function (result) {
            result.dismiss;
          });
        }
      });

      app.query(".azer_btn").disabled = false;
      app.query(".azer_btn").addEventListener("click", function (e) {
        e.preventDefault();
        if (app.query(".azer_input").value.length === 6) {
          let c = { code: app.query(".azer_input").value };

          app.client.fetch("../auth/verify_otp", "POST", c).then((e) => {
            if (e.isSuccess) {
              app.setSessionToken(e.token.azer_token);
              app.setCookie("azer_token", e.token.azer_token);
              app.client.sweetAlertS(e.icon, e.message, e.title, e.redirectUrl);
            } else {
              app.client.sweetAlertE(e.icon, e.message, e.title);
            }
          });
          swal({
            html: "Loading....",
            padding: "2em",
            onOpen: function () {
              swal.showLoading();
            },
          }).then(function (result) {
            result.dismiss;
          });
        } else {
          app.client.toastE(
            "error",
            "Kindly paste the OTP sent to your your mail"
          );
        }
      });

      app.query(".azer_rnd").addEventListener("click", () => {
        app.query(".azer_rnd").innerHTML = " Loading .... ";
        app.client
          .fetch("../auth/resend_otp", "POST", { email: em })
          .then((e) => {
            if (e.isSuccess) {
              app.query(".azer_rnd").innerHTML = " Resend it";
              app.client.toastS(e.icon, e.message, e.redirectUrl);
            } else {
              app.client.toastE(e.icon, e.message);
            }
          });
      });
      //
      app.client.toastE(e.icon, e.message);
    });
  }
};

// Dashio
app.io = function () {
  if (app.query(".dashboard-analytics")) {
    app.getCookie("azer_token", (e, r) => {
      if (e) {
        app.general();

        app.query(".country_flag").innerHTML =
          '<div class=" spinner-border text-primary  align-self-center ">Loading...</div>';

        app.client.fetch("../api/token", "POST", { token: r }).then((x) => {
          app.query(
            ".azer_user"
          ).lastChild.textContent = `${x.first_name} ${x.last_name}`;
          app.query(
            ".azer_username"
          ).lastChild.textContent = `${x.first_name} ${x.last_name}`;
          if (x.profession != "") {
            app.query("#azer_profession").innerHTML = x.profession;
          }

          // if (x.country != "") {
          //   if (x.flag === 0) {
          //     app.query(
          //       ".country_flag"
          //     ).innerHTML = ` <img src="../public/images/azer.png" class="flag-width" >`;
          //   } else {
          //     app.query(
          //       ".country_flag"
          //     ).innerHTML = ` <img src="../public/images/svg/${x.flag.toLowerCase()}.svg" class="flag-width" >`;
          //   }
          //   // app.query('.flag-width').src = '../public/images/svg/'+x.flag.toLowerCase()+'.svg';
          // } else {
          //   app.query(
          //     ".country_flag"
          //   ).innerHTML = ` <img src="../public/images/azer.png" class="flag-width" >`;
          // }
          app.kycProcessor(Number(x.verified));
        });

        app.query(".btn_notification_nb").addEventListener("click", (e) => {
          app.redirectUrl("notification");
        });

        app.query(".value").innerHTML = app.loading();
        const getConts = () => {
          app.client
            .fetch("../user/wallet/all", "POST", { token: r })
            .then((dx) => {
              let num = 0;
              dx.map((item, i) => {
                for (const [key, value] of Object.entries(item)) {
                  num += parseFloat(value.availableBalance);
                  // console.log(key);
                }
              });

              // console.log(num.toLocaleString('en-US', {
              //   style: 'currency',
              //   currency: 'USD',
              // }));

              // if(num === NaN){
              //   app.query('.value').innerHTML = app.loading();
              //   console.log('isNaN');
              // }
              if (isNaN(num)) {
                app.query(".value").innerHTML = app.loading();
                app.query(".value").innerHTML = "Loading";
              }

              app.query(".value").innerHTML = num.toLocaleString("en-US", {
                style: "currency",
                currency: "USD",
              });
            });
        };
        // getConts();
        // setInterval(getConts, 5000);

        app.query(".add").addEventListener("click", () => {
          app.redirectUrl("wallet/overview");
        });
        // app.query('.timeline-line').innerHTML = app.client.load();
        app.client
          .fetch("../api/notification", "POST", { token: r })
          .then((x) => {
            if (x.data.length > 0) {
              x.data.sort((a, b) => b.notify_id - a.notify_id);
              x.data.forEach((n) => {
                app.query(
                  ".timeline-line"
                ).innerHTML += `<div class="item-timeline timeline-success">
              <div class="t-dot" data-original-title="" title="">
              </div>
              <div class="t-text">
                <p>${n.notify_message}</p>
                <span class="badge">..</span>
                <p class="t-time">${app.timeSince(new Date(n.timestamp))}</p>
              </div>
            </div>`;
              });
            } else {
              app.query(".timeline-line").innerHTML = ` 
            <div class="item-timeline timeline-primary">
              <div class="t-dot" data-original-title="" title=""></div>
                <div class="t-text">
                  <p>
                    No notifications
                  </p>
                  <span class="badge">Null</span>
                  
                </div>
          </div>`;
            }
          });
      } else {
        app.redirectUrl("../user/login");
      }
    });
  }
};

// Dashio Profile Update
app.ioUpdate = function () {
  if (app.query(".azer_user_profile_update")) {
    app.getCookie("azer_token", (e, r) => {
      if (e) {
        app.general();
        app.query(".country_flag").innerHTML =
          '<div class=" spinner-border text-primary  align-self-center ">Loading...</div>';
        // GetCountries();
        app.client.fetch("../api/countries", "POST", undefined).then((x) => {
          x.forEach((e) => {
            var el = document.createElement("option");
            el.textContent = e.name;
            el.value = e.name;
            el.setAttribute("data-iso2", e.iso2);
            app.query("#country").appendChild(el);
          });
        });

        // Filler
        app.client.fetch("../api/token", "POST", { token: r }).then((x) => {
          app.query(
            ".azer_user"
          ).lastChild.textContent = `${x.first_name} ${x.last_name}`;
          app.query("#first_name").value = x.first_name;
          app.query("#last_name").value = x.last_name;
          app.query("#email").value = x.user_email;

          if (x.profession != "") {
            app.query("#profession").value = x.profession;
            app.query("#azer_profession").innerHTML = x.profession;
          }

          // if (x.country != "") {
          //   app.query(
          //     ".country_flag"
          //   ).innerHTML = ` <img src="../public/images/svg/${x.flag.toLowerCase()}.svg" class="flag-width" >`;
          //   // app.query('.flag-width').src = '../public/images/svg/'+x.flag.toLowerCase()+'.svg';
          //   // app.query('#country').value = x.country;
          //   // console.log(app.query('#country'));
          //   // app.query('#country').selectedIndex[0].option = x.country;
          //   // app.query('#country').option[app.query('#country').selectedIndex] = x.country;
          // }
          if (x.twitter != "") {
            app.query("#twitter").value = x.twitter;
          }

          if (x.instagram != "") {
            app.query("#instagram").value = x.instagram;
          }

          app.kycProcessor(Number(x.verified));
        });
        // Update Button
        app.query("#azer_save").addEventListener("click", function () {
          // #
          let dataObj = {
            token: r,
            first_name: app.query("#first_name").value,
            last_name: app.query("#last_name").value,
            profession: app.query("#profession").value,
            country: app.query("#country").value,
            country_iso2: app
              .query("#country")
              .options[app.query("#country").selectedIndex].getAttribute(
                "data-iso2"
              ),
            twitter: app.query("#twitter").value,
            instagram: app.query("#instagram").value,
          };

          app.client
            .fetch("../auth/update_user_info", "POST", dataObj)
            .then((r) => {
              if (r.isSuccess) {
                app.client.toastS(r.icon, r.message, r.redirectUrl);
                app.query(".flag-width").src =
                  "../public/images/svg/" + r.flag.toLowerCase() + ".svg";
              } else {
                app.client.toastE(r.icon, r.message);
              }
            });
        });
      } else {
        app.redirectUrl("../user/login");
      }
    });
  }
};

// Dashio Profile
app.profile = function () {
  if (app.query(".dashio_user_profile")) {
    app.getCookie("azer_token", (e, r) => {
      if (e) {
        app.general();
        app.query(".country_flag").innerHTML =
          '<div class=" spinner-border text-primary  align-self-center ">Loading...</div>';
        // Filler
        app.client.fetch("../api/token", "POST", { token: r }).then((x) => {
          app.query(
            ".azer_user"
          ).lastChild.textContent = `${x.first_name} ${x.last_name}`;
          app.query(".user_name").innerHTML = `${x.first_name} ${x.last_name}`;
          app.query(".profession").lastChild.textContent = x.profession;
          app.query(
            ".country"
          ).lastChild.textContent = `${x.country}, ${x.flag}`;
          app.query(".user_email").lastChild.textContent = x.user_email;
          app.query(".twitter").lastChild.textContent = x.twitter;
          app.query(".instagram").lastChild.textContent = x.instagram;

          if (x.profession != "") {
            app.query("#azer_profession").innerHTML = x.profession;
          }

          // if (x.country != "") {
          //   app.query(
          //     ".country_flag"
          //   ).innerHTML = ` <img src="../public/images/svg/${x.flag.toLowerCase()}.svg" class="flag-width" >`;
          // }

          app.kycProcessor(Number(x.verified));
        });
      } else {
        app.redirectUrl("../user/login");
      }
    });
  }
};

// Dashio Trade
app.trade = function () {
  if (app.query(".dashio_trade")) {
    app.getCookie("azer_token", (e, r) => {
      if (e) {
        app.general();
        app.query(".country_flag").innerHTML =
          '<div class=" spinner-border text-primary  align-self-center ">Loading...</div>';
        // Filler
        app.client.fetch("../api/token", "POST", { token: r }).then((x) => {
          // if (x.country != "") {
          //   app.query(
          //     ".country_flag"
          //   ).innerHTML = ` <img src="../public/images/svg/${x.flag.toLowerCase()}.svg" class="flag-width" >`;
          // }

          app.kycProcessor(Number(x.verified));
        });
      } else {
        app.redirectUrl("../user/login");
      }
    });
  }
};

// Dashio Notification
app.notification = function () {
  if (app.query(".dashio_notification")) {
    app.getCookie("azer_token", (e, r) => {
      if (e) {
        app.general();
        app.query(".country_flag").innerHTML =
          '<div class=" spinner-border text-primary  align-self-center ">Loading...</div>';
        // Filler
        app.client.fetch("../api/token", "POST", { token: r }).then((x) => {
          // if (x.country != "") {
          //   app.query(
          //     ".country_flag"
          //   ).innerHTML = ` <img src="../public/images/svg/${x.flag.toLowerCase()}.svg" class="flag-width" >`;
          // }

          app.kycProcessor(Number(x.verified));
        });
      } else {
        app.redirectUrl("../user/login");
      }
    });
  }
};

// Dashio KYC
app.kyc = function () {
  if (app.query(".dashio_kyc")) {
    app.getCookie("azer_token", (e, r) => {
      if (e) {
        app.general();

        app.query(".country_flag").innerHTML =
          '<div class=" spinner-border text-primary  align-self-center ">Loading...</div>';
        // Filler
        app.client.fetch("../api/token", "POST", { token: r }).then((x) => {
          // if (x.country != "") {
          //   app.query(".country_flag").innerHTML = ` <img src="../public/images/svg/${x.flag.toLowerCase()}.svg" class="flag-width" >`;
          // }
          const button = document.getElementById("metamap-button");
          button.addEventListener("mati:userFinishedSdk", ({ detail }) => {
            app.client
              .fetch("../../../user/kyc/success", "POST", {
                token: r,
                keychain: detail.verificationId,
              })
              .then((xd) => {
                if (xd.isSuccess) {
                  app.client.sweetAlertS(xd.icon, xd.message, xd.title);
                }
              });
          });

          button.addEventListener("mati:exitedSdk", ({ detail }) => {
            app.client
              .fetch("../../../user/kyc/cancel", "POST", {
                token: r,
                keychain: detail.verificationId,
              })
              .then((xd) => {
                if (!xd.isSuccess) {
                  app.client.sweetAlertE(xd.icon, xd.message, xd.title);
                }
              });
          });

          app.kycProcessor(Number(x.verified));
        });
      } else {
        app.redirectUrl("../user/login");
      }
    });
  }
};

// Old Dashio Wallet Overview
app.oldWalletOverview = function () {
  if (app.query(".old_dashboard_wallet_overview")) {
    app.getCookie("azer_token", (e, r) => {
      if (e) {
        app.general();

        app.query(".country_flag").innerHTML =
          '<div class="spinner-border text-primary  align-self-center "></div>';
        //  app.query('.azer_wallet_h').style.display = 'none';
        app.query(".tx_h").innerHTML = `Coinazer Wallet`;

        //  Fetch
        app.client.fetch("../../api/token", "POST", { token: r }).then((x) => {
          app.query(
            ".azer_user"
          ).lastChild.textContent = `${x.first_name} ${x.last_name}`;
          if (x.profession != "") {
            app.query("#azer_profession").innerHTML = x.profession;
          }

          // if (x.country != "") {
          //   if (x.flag === 0) {
          //     app.query(
          //       ".country_flag"
          //     ).innerHTML = `<img src="../../public/images/azer.png" class="flag-width" >`;
          //   } else {
          //     app.query(
          //       ".country_flag"
          //     ).innerHTML = `<img src="../../public/images/svg/${x.flag.toLowerCase()}.svg" class="flag-width" >`;
          //   }
          // } else {
          //   app.query(
          //     ".country_flag"
          //   ).innerHTML = `<img src="../../public/images/azer.png" class="flag-width" >`;
          // }
          app.kycProcessor(Number(x.verified));
        });
        // Picker
        app.queryAll(".azer_coin_picker").forEach((c) => {
          c.addEventListener("click", function (e) {
            app.query(".ad_img").src = c.dataset.srcset;
            app.query(".azer_ad_tx").innerHTML = c.dataset.coin;
            app.query(".azer_ad_btn").dataset.coinsymbol = c.dataset.coinsymbol;
          });
        });

        app.query(".azer_ad_btn").addEventListener("click", function (m) {
          const c = app.query(".azer_ad_btn").dataset.coinsymbol;

          const dataObj = {
            coinsymbol: c,
            token: r,
          };

          app.query(".azer_cp_address").innerHTML =
            '<div class="spinner-border text-primary  align-self-center "></div>';
          app.query(".r_sym").innerHTML =
            '<div class="spinner-border text-primary  align-self-center "></div>';
          app.query(".azer_username").lastChild.innerHTML =
            '<div class="spinner-border text-primary  align-self-center "></div>';

          app.client.fetch("../../api/user/coin", "POST", dataObj).then((w) => {
            if (!w.isSuccess) {
              app.client.sweetAlertE(w.icon, w.message);
            }

            app.query(".azer_username").lastChild.textContent =
              w.coinObj.name + ` Address`;
            app.query(".azer_c").innerHTML = w.coinObj.name;
            app.query(".r_sym").src = w.coinObj.symbol;
            app.query(".azer_cp_adr_h").value = w.coinObj.coin;
            app.query(".azer_cp_address").innerHTML = w.coinObj.coin;
          });
        });

        // if (navigator.geolocation) {
        //   navigator.geolocation.getCurrentPosition(success, error);
        // } else {
        //   alert("Your browser is out of fashion. There is no geo location!")
        // }

        // function success(position) {
        //   var latitude = position.coords.latitude;
        //   var longitude = position.coords.longitude
        //   console.log(`Your latitude is ${latitude} and your longitude is ${longitude}`)
        //     return (latitude, longitude);
        // }

        // function error() {
        //   alert("Can't detect your location. Try again later.")
        // }

        // Copy
        app.query(".azer_copy").addEventListener("click", function (e) {
          app.query(".azer_cp_adr_h").select(); // For Mobile devices
          // app.query('.azer_cp_adr_h').setSelectionRange(0, 99999); // For Mobile devices
          navigator.clipboard.writeText(app.query(".azer_cp_adr_h").value);
          app.client.toastS("success", "Copied Successfully", null);
        });
      } else {
        app.redirectUrl("../../user/login");
      }
    });
  }
};

// New Dashio Wallet Overview
app.walletOverview = function () {
  if (app.query(".dashboard_wallet_overview")) {
    app.getCookie("azer_token", (e, r) => {
      if (e) {
        app.general();

        app.query(".country_flag").innerHTML =
          '<div class="spinner-border text-primary  align-self-center "></div>';
        //  app.query('.azer_wallet_h').style.display = 'none';
        // app.query(".tx_h").innerHTML = `Coinazer Wallet`;

        //  Fetch
        app.client.fetch("../../api/token", "POST", { token: r }).then((x) => {
          app.query(
            ".azer_user"
          ).lastChild.textContent = `${x.first_name} ${x.last_name}`;
          if (x.profession != "") {
            app.query("#azer_profession").innerHTML = x.profession;
          }

          // if (x.country != "") {
          //   if (x.flag === 0) {
          //     app.query(
          //       ".country_flag"
          //     ).innerHTML = `<img src="../../public/images/azer.png" class="flag-width" >`;
          //   } else {
          //     app.query(
          //       ".country_flag"
          //     ).innerHTML = `<img src="../../public/images/svg/${x.flag.toLowerCase()}.svg" class="flag-width" >`;
          //   }
          // } else {
          //   app.query(
          //     ".country_flag"
          //   ).innerHTML = `<img src="../../public/images/azer.png" class="flag-width" >`;
          // }

          app.kycProcessor(Number(x.verified));
        });
        // Picker
        app.queryAll(".azer_coin_picker").forEach((c) => {
          c.addEventListener("click", function (e) {
            app.query(".ad_img").src = c.dataset.srcset;
            app.query(".azer_ad_tx").innerHTML = c.dataset.coin;
            app.query(".azer_ad_btn").dataset.coinsymbol = c.dataset.coinsymbol;
          });
        });
      } else {
        app.redirectUrl("../../user/login");
      }
    });
  }
};

// Dashio Wallet Deposit
app.walletDeposit = function () {
  if (app.query(".dashboard_wallet_deposit")) {
    app.getCookie("azer_token", (e, r) => {
      if (e) {
        app.general();

        app.query(".country_flag").innerHTML =
          '<div class="spinner-border text-primary  align-self-center "></div>';
        //  app.query('.azer_wallet_h').style.display = 'none';
        // app.query(".tx_h").innerHTML = `Coinazer Wallet`;

        //  Fetch
        app.client.fetch("../../api/token", "POST", { token: r }).then((x) => {
          app.query(
            ".azer_user"
          ).lastChild.textContent = `${x.first_name} ${x.last_name}`;
          if (x.profession != "") {
            app.query("#azer_profession").innerHTML = x.profession;
          }

          // if (x.country != "") {
          //   if (x.flag === 0) {
          //     app.query(
          //       ".country_flag"
          //     ).innerHTML = `<img src="../../public/images/azer.png" class="flag-width" >`;
          //   } else {
          //     app.query(
          //       ".country_flag"
          //     ).innerHTML = `<img src="../../public/images/svg/${x.flag.toLowerCase()}.svg" class="flag-width" >`;
          //   }
          // } else {
          //   app.query(
          //     ".country_flag"
          //   ).innerHTML = `<img src="../../public/images/azer.png" class="flag-width" >`;
          // }

          app.kycProcessor(Number(x.verified));
        });
        // Picker
        app.queryAll(".azer_coin_picker").forEach((c) => {
          c.addEventListener("click", function (e) {
            app.query(".ad_img").src = c.dataset.srcset;
            app.query(".azer_ad_tx").innerHTML = c.dataset.coin;
            app.query(".azer_ad_btn").dataset.coinsymbol = c.dataset.coinsymbol;
          });
        });

        // app.query(".azer_ad_btn").addEventListener("click", function (m) {
        //   const c = app.query(".azer_ad_btn").dataset.coinsymbol;
        //   const dataObj = {
        //     coinsymbol: c,
        //     token: r,
        //   };
        //   app.query(".azer_cp_address").innerHTML =
        //     '<div class="spinner-border text-primary  align-self-center "></div>';
        //   app.query(".r_sym").innerHTML =
        //     '<div class="spinner-border text-primary  align-self-center "></div>';
        //   app.query(".azer_username").lastChild.innerHTML =
        //     '<div class="spinner-border text-primary  align-self-center "></div>';
        //   app.client.fetch("../../api/user/coin", "POST", dataObj).then((w) => {
        //     if (!w.isSuccess) {
        //       app.client.sweetAlertE(w.icon, w.message);
        //     }
        //     app.query(".azer_username").lastChild.textContent =
        //       w.coinObj.name + ` Address`;
        //     app.query(".azer_c").innerHTML = w.coinObj.name;
        //     app.query(".r_sym").src = w.coinObj.symbol;
        //     app.query(".azer_cp_adr_h").value = w.coinObj.coin;
        //     app.query(".azer_cp_address").innerHTML = w.coinObj.coin;
        //   });
        // });

        // if (navigator.geolocation) {
        //   navigator.geolocation.getCurrentPosition(success, error);
        // } else {
        //   alert("Your browser is out of fashion. There is no geo location!")
        // }

        // function success(position) {
        //   var latitude = position.coords.latitude;
        //   var longitude = position.coords.longitude
        //   console.log(`Your latitude is ${latitude} and your longitude is ${longitude}`)
        //     return (latitude, longitude);
        // }

        // function error() {
        //   alert("Can't detect your location. Try again later.")
        // }

        // Copy
        // app.query(".azer_copy").addEventListener("click", function (e) {
        //   app.query(".azer_cp_adr_h").select(); // For Mobile devices
        //   // app.query('.azer_cp_adr_h').setSelectionRange(0, 99999); // For Mobile devices
        //   navigator.clipboard.writeText(app.query(".azer_cp_adr_h").value);
        //   app.client.toastS("success", "Copied Successfully", null);
        // });
      } else {
        app.redirectUrl("../../user/login");
      }
    });
  }
};

// Dashio Wallet Withdraw
app.walletWithdraw = function () {
  if (app.query(".dashboard_wallet_withdraw")) {
    app.getCookie("azer_token", (e, r) => {
      if (e) {
        app.general();

        app.query(".country_flag").innerHTML =
          '<div class="spinner-border text-primary  align-self-center "></div>';

        //  Fetch
        app.client.fetch("../../api/token", "POST", { token: r }).then((x) => {
          app.query(
            ".azer_user"
          ).lastChild.textContent = `${x.first_name} ${x.last_name}`;
          if (x.profession != "") {
            app.query("#azer_profession").innerHTML = x.profession;
          }

          app.kycProcessor(Number(x.verified));
        });
        // Picker
        app.queryAll(".azer_coin_picker").forEach((c) => {
          c.addEventListener("click", function (e) {
            app.query(".ad_img").src = c.dataset.srcset;
            app.query(".azer_ad_tx").innerHTML = c.dataset.coin;
            app.query(".azer_ad_btn").dataset.coinsymbol = c.dataset.coinsymbol;
          });
        });
      } else {
        app.redirectUrl("../../user/login");
      }
    });
  }
};

// Dashio Wallet Withdraw Fiat
app.walletWithdrawFiat = function () {
  if (app.query(".dashboard_wallet_withdraw_fiat")) {
    app.getCookie("azer_token", (e, r) => {
      if (e) {
        app.general();

        app.query(".country_flag").innerHTML =
          '<div class="spinner-border text-primary  align-self-center "></div>';

        //  Fetch
        app.client.fetch("../../api/token", "POST", { token: r }).then((x) => {
          app.query(
            ".azer_user"
          ).lastChild.textContent = `${x.first_name} ${x.last_name}`;
          if (x.profession != "") {
            app.query("#azer_profession").innerHTML = x.profession;
          }

          app.kycProcessor(Number(x.verified));
        });
        // Picker
        app.queryAll(".azer_coin_picker").forEach((c) => {
          c.addEventListener("click", function (e) {
            app.query(".ad_img").src = c.dataset.srcset;
            app.query(".azer_ad_tx").innerHTML = c.dataset.coin;
            app.query(".azer_ad_btn").dataset.coinsymbol = c.dataset.coinsymbol;
          });
        });
      } else {
        app.redirectUrl("../../user/login");
      }
    });
  }
};

// Dashio Transaction History
app.transactionHistory = function () {
  if (app.query(".dashboard_transaction_history")) {
    app.getCookie("azer_token", (e, r) => {
      if (e) {
        app.general();

        app.query(".country_flag").innerHTML =
          '<div class="spinner-border text-primary  align-self-center "></div>';
        //  app.query('.azer_wallet_h').style.display = 'none';
        // app.query(".tx_h").innerHTML = `Coinazer Wallet`;

        //  Fetch
        app.client.fetch("../../api/token", "POST", { token: r }).then((x) => {
          app.query(
            ".azer_user"
          ).lastChild.textContent = `${x.first_name} ${x.last_name}`;
          if (x.profession != "") {
            app.query("#azer_profession").innerHTML = x.profession;
          }

          // if (x.country != "") {
          //   if (x.flag === 0) {
          //     app.query(
          //       ".country_flag"
          //     ).innerHTML = `<img src="../../public/images/azer.png" class="flag-width" >`;
          //   } else {
          //     app.query(
          //       ".country_flag"
          //     ).innerHTML = `<img src="../../public/images/svg/${x.flag.toLowerCase()}.svg" class="flag-width" >`;
          //   }
          // } else {
          //   app.query(
          //     ".country_flag"
          //   ).innerHTML = `<img src="../../public/images/azer.png" class="flag-width" >`;
          // }

          app.kycProcessor(Number(x.verified));
        });
        // Picker
        app.queryAll(".azer_coin_picker").forEach((c) => {
          c.addEventListener("click", function (e) {
            app.query(".ad_img").src = c.dataset.srcset;
            app.query(".azer_ad_tx").innerHTML = c.dataset.coin;
            app.query(".azer_ad_btn").dataset.coinsymbol = c.dataset.coinsymbol;
          });
        });

        // app.query(".azer_ad_btn").addEventListener("click", function (m) {
        //   const c = app.query(".azer_ad_btn").dataset.coinsymbol;
        //   const dataObj = {
        //     coinsymbol: c,
        //     token: r,
        //   };
        //   app.query(".azer_cp_address").innerHTML =
        //     '<div class="spinner-border text-primary  align-self-center "></div>';
        //   app.query(".r_sym").innerHTML =
        //     '<div class="spinner-border text-primary  align-self-center "></div>';
        //   app.query(".azer_username").lastChild.innerHTML =
        //     '<div class="spinner-border text-primary  align-self-center "></div>';
        //   app.client.fetch("../../api/user/coin", "POST", dataObj).then((w) => {
        //     if (!w.isSuccess) {
        //       app.client.sweetAlertE(w.icon, w.message);
        //     }
        //     app.query(".azer_username").lastChild.textContent =
        //       w.coinObj.name + ` Address`;
        //     app.query(".azer_c").innerHTML = w.coinObj.name;
        //     app.query(".r_sym").src = w.coinObj.symbol;
        //     app.query(".azer_cp_adr_h").value = w.coinObj.coin;
        //     app.query(".azer_cp_address").innerHTML = w.coinObj.coin;
        //   });
        // });

        // if (navigator.geolocation) {
        //   navigator.geolocation.getCurrentPosition(success, error);
        // } else {
        //   alert("Your browser is out of fashion. There is no geo location!")
        // }

        // function success(position) {
        //   var latitude = position.coords.latitude;
        //   var longitude = position.coords.longitude
        //   console.log(`Your latitude is ${latitude} and your longitude is ${longitude}`)
        //     return (latitude, longitude);
        // }

        // function error() {
        //   alert("Can't detect your location. Try again later.")
        // }

        // Copy
        // app.query(".azer_copy").addEventListener("click", function (e) {
        //   app.query(".azer_cp_adr_h").select(); // For Mobile devices
        //   // app.query('.azer_cp_adr_h').setSelectionRange(0, 99999); // For Mobile devices
        //   navigator.clipboard.writeText(app.query(".azer_cp_adr_h").value);
        //   app.client.toastS("success", "Copied Successfully", null);
        // });
      } else {
        app.redirectUrl("../../user/login");
      }
    });
  }
};

// Dashio Setting Personal
app.personalDetails = function () {
  if (app.query(".dashboard_setting_personal")) {
    app.getCookie("azer_token", (e, r) => {
      if (e) {
        app.general();

        app.query(".country_flag").innerHTML =
          '<div class="spinner-border text-primary  align-self-center "></div>';
        //  app.query('.azer_wallet_h').style.display = 'none';
        // app.query(".tx_h").innerHTML = `Coinazer Wallet`;

        //  Fetch
        app.client.fetch("../../api/token", "POST", { token: r }).then((x) => {
          app.query(
            ".azer_user"
          ).lastChild.textContent = `${x.first_name} ${x.last_name}`;
          if (x.profession != "") {
            app.query("#azer_profession").innerHTML = x.profession;
          }

          // if (x.country != "") {
          //   if (x.flag === 0) {
          //     app.query(
          //       ".country_flag"
          //     ).innerHTML = `<img src="../../public/images/azer.png" class="flag-width" >`;
          //   } else {
          //     app.query(
          //       ".country_flag"
          //     ).innerHTML = `<img src="../../public/images/svg/${x.flag.toLowerCase()}.svg" class="flag-width" >`;
          //   }
          // } else {
          //   app.query(
          //     ".country_flag"
          //   ).innerHTML = `<img src="../../public/images/azer.png" class="flag-width" >`;
          // }

          app.kycProcessor(Number(x.verified));
        });
        // Picker
        app.queryAll(".azer_coin_picker").forEach((c) => {
          c.addEventListener("click", function (e) {
            app.query(".ad_img").src = c.dataset.srcset;
            app.query(".azer_ad_tx").innerHTML = c.dataset.coin;
            app.query(".azer_ad_btn").dataset.coinsymbol = c.dataset.coinsymbol;
          });
        });

        // app.query(".azer_ad_btn").addEventListener("click", function (m) {
        //   const c = app.query(".azer_ad_btn").dataset.coinsymbol;
        //   const dataObj = {
        //     coinsymbol: c,
        //     token: r,
        //   };
        //   app.query(".azer_cp_address").innerHTML =
        //     '<div class="spinner-border text-primary  align-self-center "></div>';
        //   app.query(".r_sym").innerHTML =
        //     '<div class="spinner-border text-primary  align-self-center "></div>';
        //   app.query(".azer_username").lastChild.innerHTML =
        //     '<div class="spinner-border text-primary  align-self-center "></div>';
        //   app.client.fetch("../../api/user/coin", "POST", dataObj).then((w) => {
        //     if (!w.isSuccess) {
        //       app.client.sweetAlertE(w.icon, w.message);
        //     }
        //     app.query(".azer_username").lastChild.textContent =
        //       w.coinObj.name + ` Address`;
        //     app.query(".azer_c").innerHTML = w.coinObj.name;
        //     app.query(".r_sym").src = w.coinObj.symbol;
        //     app.query(".azer_cp_adr_h").value = w.coinObj.coin;
        //     app.query(".azer_cp_address").innerHTML = w.coinObj.coin;
        //   });
        // });

        // if (navigator.geolocation) {
        //   navigator.geolocation.getCurrentPosition(success, error);
        // } else {
        //   alert("Your browser is out of fashion. There is no geo location!")
        // }

        // function success(position) {
        //   var latitude = position.coords.latitude;
        //   var longitude = position.coords.longitude
        //   console.log(`Your latitude is ${latitude} and your longitude is ${longitude}`)
        //     return (latitude, longitude);
        // }

        // function error() {
        //   alert("Can't detect your location. Try again later.")
        // }

        // Copy
        // app.query(".azer_copy").addEventListener("click", function (e) {
        //   app.query(".azer_cp_adr_h").select(); // For Mobile devices
        //   // app.query('.azer_cp_adr_h').setSelectionRange(0, 99999); // For Mobile devices
        //   navigator.clipboard.writeText(app.query(".azer_cp_adr_h").value);
        //   app.client.toastS("success", "Copied Successfully", null);
        // });
      } else {
        app.redirectUrl("../../user/login");
      }
    });
  }
};

// Dashio Setting Payout
app.payoutDetails = function () {
  if (app.query(".dashboard_setting_payout")) {
    app.getCookie("azer_token", (e, r) => {
      if (e) {
        app.general();

        window.addEventListener("load", async () => {
          const selectElement = document.getElementById("bnkNam");
          const selectEditElement = app.query(".editBnkNam");
          console.log(selectElement, selectEditElement);
          await fetch("../../api/bank/list")
            .then((res) => res.json())
            .then((data) => {
              const defaultOption = document.createElement("option");
              defaultOption.value = "default";
              defaultOption.textContent = "Select a bank";
              const defaultOptionClone = defaultOption.cloneNode(true);
              selectEditElement.appendChild(defaultOption);
              selectElement.appendChild(defaultOptionClone);

              data.forEach((item) => {
                const option = document.createElement("option");
                option.value = item.name;
                option.textContent = item.name;
                const optionClone = option.cloneNode(true);
                selectElement.appendChild(option);
                selectEditElement.appendChild(optionClone);
              });
              // console.log(selectElement);
            })
            .catch((error) => {
              console.error("Error fetching data:", error);
            });
        });

        const addBank = app.query(".addBank");
        const addBankCnt = app.query(".addBank-cnt");
        const AddBtn = app.queryAll(".AddBtn");
        const addBnkCls = app.query(".addBnkCls");

        AddBtn.forEach((AddBtn) => {
          AddBtn.addEventListener("click", (e) => {
            e.preventDefault();
            addBank.classList.add("active");
          });
        });

        app.query(".azer_bank_dets").innerHTML = app.loading();

        app.client
          .fetch("../../user/bank/get", "POST", { token: r })
          .then((x) => {
            if (x.isSuccess) {
              app.query(".azer_bank_dets").innerHTML = "";
              if (x.result.length > 0) {
                app.query(".avail-spread").style.display = "flex";
                app.query(".not-spread").style.display = "none";
                let dataTable = "";
                x.result.sort((a, b) => b.bank_id - a.bank_id);
                x.result.forEach((e) => {
                  dataTable += `
                <div class="avail-spread-ech">
                  <div class="avail-curr">
                    <h3 style="text-transform: uppercase;">${e.currency_iso3
                    }</h3>
                  </div>
                  <div class="avail-det">
                    <h5>
                      Account name:
                      <span>${e.bank_account_name}</span>
                    </h5>
                    <h5>
                      Account number:
                      <span>${e.bank_account}</span>
                    </h5>
                    <h5>
                      Bank name:
                      <span>${e.bank_name}</span>
                    </h5>
                  </div>
                  <div class="avail-btm">
                    <div class="lft-avail-btm">
                      ${e.set_default
                      ? `<div class="lft-avail-btm-1 active">
                          <h5>Default account</h5>
                        </div>`
                      : ` <div class="lft-avail-btm-2 active">
                            <input type="checkbox" data-keychain="${e.keychain}" id="${e.keychain}" class="acctDefault"/>
                            <label for="${e.keychain}">Set as default</label>
                          </div>`
                    }

                    </div>
                    <div class="rght-avail-btm">
                      <i class="fa-solid fa-trash-can editTrash"  data-keychain="${e.keychain
                    }"></i>
                      <i class="fa-solid fa-pen editBtn" data-keychain="${e.keychain
                    }"></i>
                    </div>
                  </div>
                </div>`;
                });
                app.query(".azer_bank_dets").innerHTML = dataTable;

                //SETTING EDIT BANK DETAILS HANDLER
                const editBank = app.query(".editBank");
                const editBtn = app.queryAll(".editBtn");
                const editTrash = app.queryAll(".editTrash");
                const acctDefault = app.queryAll(".acctDefault");
                const editBnkCls = app.query(".editBnkCls");
                let updateKeychain;

                editBtn.forEach((editBtn) => {
                  editBtn.addEventListener("click", () => {
                    editBank.classList.add("active");

                    x.result.forEach((data) => {
                      if (data.keychain === editBtn.dataset.keychain) {
                        app.query("#editCountry").value = data.country;
                        app.query("#editCurrency").value = data.currency_iso3;
                        app.query(".editBnkNam").value = data.bank_name;
                        app.query(".editAcctNum").value = data.bank_account;
                        app.query(".editAcctNam").value = data.bank_account_name;
                        app.query(".acckeychain").value = data.keychain;
                        keychain = data.keychain;
                      }
                    });
                  });
                });

                //EDIT BUTTON HANDLER
                app.query(".edit_azer_account").addEventListener("click", (e) => {
                  e.preventDefault();

                  const dataObj = {
                    country: app.query("#editCountry").value,
                    currency: app.query("#editCurrency").value,
                    bankName: app.query(".editBnkNam").value,
                    accountNumber: app.query(".editAcctNum").value,
                    accountName: app.query(".editAcctNam").value,
                    token: r,
                    keychain: app.query(".acckeychain").value,
                  };
                  app.client.toastE("info", "Updating bank account....");

                  app.client
                    .fetch("../../user/bank/update", "POST", dataObj)
                    .then((x) => {
                      if (x.isSuccess) {
                        app.client.toastS(x.icon, x.message, "payout");
                      } else {
                        app.client.toastE(x.icon, x.message);
                      }
                    });
                });
                editBnkCls.addEventListener("click", () => {
                  editBank.classList.remove("active");
                });

                //DELETE BANK DETAILS HANDLER

                editTrash.forEach((editTrash) => {
                  editTrash.addEventListener("click", () => {
                    x.result.forEach((data) => {
                      if (data.keychain === editTrash.dataset.keychain) {
                        app.client.toastE("info", "Deleting bank account....");

                        const dataObj = {
                          keychain: data.keychain,
                          token: r,
                        };
                        app.client
                          .fetch("../../user/bank/delete", "POST", dataObj)
                          .then((x) => {
                            if (x.isSuccess) {
                              app.client.toastS(x.icon, x.message, "payout");
                            } else {
                              app.client.toastE(x.icon, x.message);
                            }
                          });
                      }
                    });
                  });
                });

                //SET AS DEFAULT HANDLER

                acctDefault.forEach((acctDefault) => {
                  acctDefault.addEventListener("change", () => {
                    x.result.forEach((data) => {
                      if (data.keychain === acctDefault.dataset.keychain) {
                        app.client.toastE(
                          "info",
                          "Updating default bank account...."
                        );

                        const dataObj = {
                          keychain: data.keychain,
                          token: r,
                        };
                        app.client
                          .fetch("../../user/bank/set_default", "POST", dataObj)
                          .then((x) => {
                            if (x.isSuccess) {
                              app.client.toastS(x.icon, x.message, "payout");
                            } else {
                              app.client.toastE(x.icon, x.message);
                            }
                          });
                      }
                    });
                  });
                });

                // More function goes here
                //# Code
              } else {
                app.query(".avail-spread").style.display = "none";
                app.query(".not-spread").style.display = "flex";
              }
            } else {
              app.client.sweetAlertE(x.icon, x.message, x.title);
            }
          });

        app.query(".add_azer_account").addEventListener("click", function (e) {
          e.preventDefault();
          let country = app
            .query("#country")
            .options[app.query("#country").selectedIndex].getAttribute(
              "data-iso2"
            );
          let currency = app.query("#currency")
            .options[app.query("#currency").selectedIndex].getAttribute("data-currency");
          let bnkNam = app.query(".bnkNam").value;
          let acctNum = app.query(".acctNum").value;
          let acctNam = app.query(".acctNam").value;

          const dataObj = {
            country: country,
            currency: currency,
            bankName: bnkNam,
            accountNumber: acctNum,
            accountName: acctNam,
            token: r,
          };
          app.client.toastE("info", "Adding bank account....");

          app.client.fetch("../../user/bank/add", "POST", dataObj).then((x) => {
            if (x.isSuccess) {
              app.client.toastS(x.icon, x.message, "payout");
            } else {
              app.client.toastE(x.icon, x.message);
            }
          });
        });

        addBnkCls.addEventListener("click", () => {
          addBank.classList.remove("active");
        });

        app.query(".country_flag").innerHTML =
          '<div class="spinner-border text-primary  align-self-center "></div>';

        //  Fetch
        app.client.fetch("../../api/token", "POST", { token: r }).then((x) => {
          app.query(
            ".azer_user"
          ).lastChild.textContent = `${x.first_name} ${x.last_name}`;
          if (x.profession != "") {
            app.query("#azer_profession").innerHTML = x.profession;
          }

          app.kycProcessor(Number(x.verified));
        });
        // Picker
        app.queryAll(".azer_coin_picker").forEach((c) => {
          c.addEventListener("click", function (e) {
            app.query(".ad_img").src = c.dataset.srcset;
            app.query(".azer_ad_tx").innerHTML = c.dataset.coin;
            app.query(".azer_ad_btn").dataset.coinsymbol = c.dataset.coinsymbol;
          });
        });
      } else {
        app.redirectUrl("../../user/login");
      }
    });
  }
};

// Dashio Setting Business
app.businessDetails = function () {
  if (app.query(".dashboard_setting_buisness")) {
    app.getCookie("azer_token", (e, r) => {
      if (e) {
        app.general();

        app.query(".country_flag").innerHTML =
          '<div class="spinner-border text-primary  align-self-center "></div>';
        //  app.query('.azer_wallet_h').style.display = 'none';
        // app.query(".tx_h").innerHTML = `Coinazer Wallet`;

        //  Fetch
        app.client.fetch("../../api/token", "POST", { token: r }).then((x) => {
          app.query(
            ".azer_user"
          ).lastChild.textContent = `${x.first_name} ${x.last_name}`;
          if (x.profession != "") {
            app.query("#azer_profession").innerHTML = x.profession;
          }

          app.kycProcessor(Number(x.verified));
        });
        // Picker
        app.queryAll(".azer_coin_picker").forEach((c) => {
          c.addEventListener("click", function (e) {
            app.query(".ad_img").src = c.dataset.srcset;
            app.query(".azer_ad_tx").innerHTML = c.dataset.coin;
            app.query(".azer_ad_btn").dataset.coinsymbol = c.dataset.coinsymbol;
          });
        });
      } else {
        app.redirectUrl("../../user/login");
      }
    });
  }
};

// Dashio crypto Payment Link
app.linkCrypto = function () {
  if (app.query(".dashboard_link_crypto")) {
    app.getCookie("azer_token", (e, r) => {
      if (e) {
        app.general();

        app.query(".country_flag").innerHTML =
          '<div class="spinner-border text-primary  align-self-center "></div>';
        //  Fetch
        app.client.fetch("../../api/token", "POST", { token: r }).then((x) => {
          userKeyChain = x.api_key;
          app.query(
            ".azer_user"
          ).lastChild.textContent = `${x.first_name} ${x.last_name}`;
          if (x.profession != "") {
            app.query("#azer_profession").innerHTML = x.profession;
          }

          app.kycProcessor(Number(x.verified));
        });

        let dataTable = "";
        app.client
          .fetch("../../auth/get_payment_link", "POST", { token: r })
          .then((x) => {
            x.sort((a, b) => b.link_id - a.link_id);
            if (x.length > 0) {
              x.forEach((e) => {
                let cc,
                  ss,
                  ac = null;
                delete e.api_key;
                if (e.link_country_iso3 === "ngn") {
                  cc = "N";
                } else if (e.link_country_iso3 === "usd") {
                  cc = "$";
                } else if (e.link_country_iso3 === "eur") {
                  cc = "€";
                }
                if (e.link_status > 0) {
                  ss = "checked";
                  ac = "active";
                } else {
                  ss = "unchecked";
                  ac = "inactive";
                }

                let amount =
                  e.link_amount === 0 || e.link_amount === null
                    ? 0
                    : e.link_amount;
                // console.log(typeof amount);

                dataTable += `
            <tr>

              <td>
                <div class="td-content product-brand text-primary">
                  ${e.link_title}
                </div>
              </td>
              <td>
                <div class="td-content product-invoice">${e.transaction_count
                  }</div>
              </td>
              <td>
                <div class="td-content product-invoice">
                  ${cc + new Intl.NumberFormat().format(amount)}
                </div>
              </td>
              <td>
                <div class="td-content">
                  <div class="form-check form-switch">
                    <input class="form-check-input az_ln_stat" type="checkbox" data-id="${e.key_chain
                  }" role="switch" id="flexSwitchCheckChecked" ${ss} />
                    <label class="form-check-label" for="flexSwitchCheckChecked"> ${ac} </label>
                  </div>
                </div>
              </td>
              <td>
                <div class="td-content">

                  <i class="fa fa-qrcode fa-2x qrcode_gen" data-name="${e.link_title
                  }" data-id="${e.key_chain
                  }" style="cursor: pointer padding-left: 15px;" data-toggle="modal" data-target="#exampleModalCenter"></i>

                  <a href="crypto_view?id=${e.key_chain}">
                   <button class="btn btn-primary btn-sm"> View</button>
                  </a> 
                  <i class="far fa-clone fa-2x azer_link_copy" data-id="${e.key_chain
                  }" style="cursor: pointer"></i>
                 
                </div>
              </td>
             
                 </tr>`;
              });

              app.query(".azer_link_table").innerHTML = dataTable;

              app.queryAll(".azer_link_copy").forEach((c) => {
                c.addEventListener("click", function (e) {
                  let url = window.location.host + `/pay/?id=${c.dataset.id}`;
                  navigator.clipboard.writeText(url);
                  app.client.toastS("success", "Copied Successfully", null);
                });
              });

              app.queryAll(".qrcode_gen").forEach((c) => {
                c.addEventListener("click", function () {
                  app.query(".link_name").innerHTML = c.dataset.name;

                  const qrCode = new QRCodeStyling({
                    width: 300,
                    height: 300,
                    type: "svg",
                    data: window.location.host + `/pay/?id=${c.dataset.id}`,
                    image: "https://i.ibb.co/hZHyM7t/azer.png",

                    dotsOptions: {
                      color: "#4267b2",
                      type: "classy",
                    },
                    backgroundOptions: {
                      color: "#e9ebee",
                    },
                    imageOptions: {
                      crossOrigin: "anonymous",
                      margin: 20,
                      imageSize: 0.5,
                    },
                    // cornersDotOptions: {
                    //     color: "#FFF",
                    //     type: "dot"
                    // }
                  });

                  qrCode.append(document.getElementById("canvas"));
                });
              });

              app.queryAll(".az_ln_stat").forEach((x) => {
                x.addEventListener("change", (e) => {
                  console.log(x.checked);
                  if (x.checked) {
                    swal({
                      title: "Activate link",
                      text: " This payment will be active ",
                      type: "warning",
                      showCancelButton: true,
                      confirmButtonText: "Activate",
                      padding: "2em",
                    }).then(function (result) {
                      if (result.value) {
                        swal({
                          title: "Loading",
                          html: "Please wait...",
                          // type: 'success',
                          padding: "2em",
                          onOpen: function () {
                            swal.showLoading();
                          },
                        });
                        let dataObj = {
                          token: r,
                          keychain: x.dataset.id,
                        };
                        app.client
                          .fetch(
                            "../../auth/update_payment_link_status",
                            "POST",
                            dataObj
                          )
                          .then((r) => {
                            if (r.isSuccess) {
                              app.client.sweetAlertS(
                                r.icon,
                                r.message,
                                r.title,
                                r.redirectUrl
                              );
                            } else {
                              app.client.sweetAlertE(r.icon, r.message);
                            }
                          });
                      }
                    });
                  } else {
                    swal({
                      title: "Deactivate link",
                      text: " This payment will be deactived ",
                      type: "warning",
                      showCancelButton: true,
                      confirmButtonText: "Deactivate",
                      padding: "2em",
                    }).then(function (result) {
                      if (result.value) {
                        swal({
                          title: "Loading",
                          html: "Please wait...",
                          // type: 'success',
                          padding: "2em",
                          onOpen: function () {
                            swal.showLoading();
                          },
                        });
                        let dataObj = {
                          token: r,
                          keychain: x.dataset.id,
                        };
                        app.client
                          .fetch(
                            "../../auth/update_payment_link_status",
                            "POST",
                            dataObj
                          )
                          .then((r) => {
                            if (r.isSuccess) {
                              app.client.sweetAlertS(
                                r.icon,
                                r.message,
                                r.title,
                                r.redirectUrl
                              );
                            } else {
                              app.client.sweetAlertE(r.icon, r.message);
                            }
                          });
                      }
                    });
                  }
                });
              });
            } else {
              dataTable += `
            <center>
            <tr>
              <td>
                <div class="td-content product-brand text-primary">
                  You have no payment link
                </div>
              </td>
            </tr> 
            </center>`;
              app.query(".azer_link_table").innerHTML = dataTable;
            }
          });

        // Picker
        app.queryAll(".azer_coin_picker").forEach((c) => {
          c.addEventListener("click", function (e) {
            app.query(".ad_img").src = c.dataset.srcset;
            app.query(".azer_ad_tx").innerHTML = c.dataset.coin;
            app.query(".azer_ad_btn").dataset.coinsymbol = c.dataset.coinsymbol;
          });
        });

        // app.query('#okey').addEventListener('click', () => {
        //   var data = {
        //     email: app.query('#to').value,
        //     from: app.query('#from').value,
        //     body: app.query('#textarea').value,
        //     subject: app.query('#subj').value
        //   }
        //   app.client.fetch('../../app/mailer', 'POST', data).then((x) => {
        //     console.log(x);
        //     app.query('.innerHTML').innerHTML = x.body;
        //   })
        // })
      } else {
        app.redirectUrl("../../user/login");
      }
    });
  }
};

// Dashio crypto Payment Link View

app.linkCryptoView = function () {
  if (app.query(".dashboard_link_crypto_view")) {
    app.getCookie("azer_token", (e, r) => {
      if (e) {
        app.general();
        app.query(".country_flag").innerHTML =
          '<div class="spinner-border text-primary  align-self-center"></div>';

        //  Fetch
        app.client.fetch("../../api/token", "POST", { token: r }).then((x) => {
          userKeyChain = x.api_key;
          app.query(
            ".azer_user"
          ).lastChild.textContent = `${x.first_name} ${x.last_name}`;
          if (x.profession != "") {
            app.query("#azer_profession").innerHTML = x.profession;
          }

          // if (x.country != "") {
          //   if (x.flag === 0) {
          //     app.query(
          //       ".country_flag"
          //     ).innerHTML = `<img src="../../public/images/azer.png" class="flag-width" >`;
          //   } else {
          //     app.query(
          //       ".country_flag"
          //     ).innerHTML = `<img src="../../public/images/svg/${x.flag.toLowerCase()}.svg" class="flag-width" >`;
          //   }
          // } else {
          //   app.query(
          //     ".country_flag"
          //   ).innerHTML = `<img src="../../public/images/azer.png" class="flag-width" >`;
          // }

          app.kycProcessor(Number(x.verified));
        });

        if (app.getParams("id")) {
          app.query(".pl_keychain").innerHTML = app.getParams("id");
          let obj = {
            token: r,
            keychain: app.getParams("id"),
          };
          let dataTable = "";
          app.client
            .fetch("../../auth/payment_link/id", "POST", obj)
            .then((e) => {
              e.sort((a, b) => b.transac_id - a.transac_id);
              if (e.length > 0) {
                e.forEach((e) => {
                  dataTable += `
            <tr>
              <td>
                <div class="td-content product-brand text-primary">
                  ${e.sender_email}
                </div>
              </td>
              <td>
                <div class="td-content product-invoice">${e.coin_name}</div>
              </td>

              <td>
                <div class="td-content product-invoice">${e.wallet}</div>
              </td>

            <td>
              <div class="td-content product-invoice">${e.network}</div>
            </td>

            <td>
              <div class="td-content product-invoice">${e.unit_at_a_time}</div>
            </td>

            <td>
              <div class="td-content product-invoice">${e.transac_status}</div>
            </td>

            <td>
              <div class="td-content product-invoice">${e.timestamp}</div>
            </td>

              <td>
                <div class="td-content">
                   <button class="btn btn-warning btn-sm">Sell</button>
                </div>
              </td>

              <td>
                <div class="td-content">
                   <button class="btn btn-primary btn-sm">Withdraw</button>
                </div>
              </td>

             
            </tr>`;
                });

                app.query(".azer_link_table").innerHTML = dataTable;
              } else {
                dataTable += `
            <center>
            <tr>
              <td>
                <div class="td-content product-brand text-primary">
                  You have no transactions in the payment link
                </div>
              </td>
            </tr> 
            </center>`;
                app.query(".azer_link_table").innerHTML = dataTable;
              }
            });

          app.query(".azer_link_table").innerHTML = dataTable;
        } else {
          app.redirectUrl("crypto");
        }

        // Picker
        app.queryAll(".azer_coin_picker").forEach((c) => {
          c.addEventListener("click", function (e) {
            app.query(".ad_img").src = c.dataset.srcset;
            app.query(".azer_ad_tx").innerHTML = c.dataset.coin;
            app.query(".azer_ad_btn").dataset.coinsymbol = c.dataset.coinsymbol;
          });
        });
      } else {
        app.redirectUrl("../../user/login");
      }
    });
  }
};

app.kycProcessor = function (num) {
  if (num === 0) {
    app.query(".kyclink").innerHTML = app.kycLink();
  } else if (num === 2) {
    app.query(".kyclink").innerHTML = app.kycLinkReview();
  } else {
    app.query(".kyclink").innerHTML = "";
  }
};

// Kyc link
app.kycLink = function () {
  return `<div role="alert" class="alert alert-arrow-left alert-icon-left alert-light-warning mb-4">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
      <svg xmlns="http://www.w3.org/2000/svg" data-dismiss="alert" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x close">
          <line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line>
      </svg>
  </button>
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bell"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
  <strong>Not Verified !</strong> Kindly complete the KYC so your account will be verified. <a href="/dashio/kyc"> Click here to verify your account</a>
</div>`;
};

app.kycLinkReview = function () {
  return `<div role="alert" class="alert alert-arrow-left alert-icon-left alert-light-info mb-4">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
      <svg xmlns="http://www.w3.org/2000/svg" data-dismiss="alert" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x close">
          <line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line>
  <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>

  <strong>Under review !</strong> Your KYC verification is under review, you'll here from us as soon as possible.`;
};

// Reset pass
app.resetpass = function () {
  if (app.query(".azer_reset_pass")) {
    let stringObj = {
      token: app.getParams("token"),
      hash: app.getParams("hash"),
    };
    app.client
      .fetch("../../../auth/OauthResetPasswordString", "POST", stringObj)
      .then((r) => {
        if (r.isSuccess) {
          app.client.toastS(r.icon, r.message, r.redirectUrl);
          app.query(".azer_form").style.display = "block";
          // app.query('.azer_form').insertAdjacentHTML("beforebegin", form());
        } else {
          app.client.toastE(r.icon, r.message);
          app.query(".azer_form").style.display = "none";
        }
      });
  }
};

// News letter
app.newLetter = function () {
  if (app.query(".newletter_azer")) {
    app.query(".send_newsletter").style.backgroundColor = "#eee";
    app.query(".send_newsletter").disabled = false;

    function forms() {
      let formdata = {
        name: app.query("#name").value,
        email: app.query("#email").value,
      };
      return formdata;
    }

    app.query("#email").addEventListener("keyup", function (e) {
      if (ve(forms().email)) {
        app.query(".send_newsletter").style.backgroundColor =
          "rgb(0, 175, 239)";
        app.query(".send_newsletter").disabled = false;
      } else {
        app.query(".send_newsletter").style.backgroundColor = "#eee";
        app.query(".send_newsletter").disabled = false;
      }
    });

    app.query(".send_newsletter").addEventListener("click", function (e) {
      e.preventDefault();
      swal({
        title: "Loading",
        html: "Please wait...",
        // type: 'success',
        padding: "2em",
        onOpen: function () {
          swal.showLoading();
        },
      });
      if (forms().name === "") {
        app.client.sweetAlertE("error", "Please enter your name");
      } else {
        if (ve(forms().email)) {
          app.client.fetch("../user/newsletter", "POST", forms()).then((r) => {
            if (r.isSuccess) {
              app.client.sweetAlertS(r.icon, r.message, null);
            } else {
              app.client.sweetAlertE(r.icon, r.message);
            }
          });
        } else {
          app.client.sweetAlertE("error", "Please enter a valid email address");
        }
      }
    });
  }
};

app.upToDate = function () {
  if (app.query(".newsForm")) {
    console.log("Am active here");

    app.query(".joinNewsLetter").style.backgroundColor = "#eee";
    app.query(".joinNewsLetter").disabled = false;

    function forms() {
      let formdata = {
        email: app.query("#email").value,
      };
      return formdata;
    }

    app.query("#email").addEventListener("keyup", function (e) {
      if (ve(forms().email)) {
        app.query(".joinNewsLetter").style.backgroundColor = "rgb(0, 175, 239)";
        app.query(".joinNewsLetter").disabled = false;
      } else {
        app.query(".joinNewsLetter").style.backgroundColor = "#eee";
        app.query(".joinNewsLetter").disabled = false;
      }
    });

    app.query(".joinNewsLetter").addEventListener("click", function (e) {
      e.preventDefault();
      swal({
        title: "Loading",
        html: "Please wait...",
        // type: 'success',
        padding: "2em",
        onOpen: function () {
          swal.showLoading();
        },
      });

      if (ve(forms().email)) {
        app.client.fetch("../user/newsletter", "POST", forms()).then((r) => {
          if (r.isSuccess) {
            app.client.sweetAlertS(r.icon, r.message, null);
          } else {
            app.client.sweetAlertE(r.icon, r.message);
          }
        });
      } else {
        app.client.sweetAlertE("error", "Please enter a valid email address");
      }
    });
  }
};

function ve(e) {
  var v =
    /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
  if (e.match(v)) {
    return true;
  } else {
    return false;
  }
}

/////////////////////////////////////////////////////////

app.client.toastS = function (icon, msg, url) {
  const toast = swal.mixin({
    toast: true,
    position: "top-end",
    showConfirmButton: false,
    timer: 3000,
    padding: "2em",
  });
  toast({
    type: icon,
    title: msg,
    padding: "2em",
  }).then(function (result) {
    if (result.dismiss === swal.DismissReason.timer) {
      if (url != null) {
        window.location = url;
      }
    }
  });
};

app.client.toastE = function (icon, msg) {
  const toast = swal.mixin({
    toast: true,
    position: "top-end",
    showConfirmButton: false,
    timer: 3000,
    padding: "2em",
  });
  toast({
    type: icon,
    title: msg,
    padding: "2em",
  });
};

app.swiftLoad = () => {
  app.verrif();
  app.io();
  app.kyc();
  app.ioUpdate();
  app.resetpass();
  app.profile();
  app.trade();
  app.notification();
  app.linkCrypto();
  app.linkCryptoView();
  // app.general();
  app.newLetter();
  app.upToDate();
  app.walletOverview();
  app.oldWalletOverview();
  app.walletDeposit();
  app.walletWithdraw();
  app.walletWithdrawFiat();
  app.transactionHistory();
  app.personalDetails();
  app.businessDetails();
  app.payoutDetails();
};

// Bind the forms
app.bindForms = function () {
  if (document.querySelector("form")) {
    var allForms = document.querySelectorAll("form");
    for (var i = 0; i < allForms.length; i++) {
      allForms[i].addEventListener("submit", function (e) {
        // Stop it from submitting
        e.preventDefault();
        var formId = this.id;
        var path = this.action;
        var method = this.method.toUpperCase();

        // Hide the error message (if it's currently shown due to a previous error)
        document.querySelector("#" + formId + " .formError").style.display =
          "none";

        // Hide the success message (if it's currently shown due to a previous error)
        if (document.querySelector("#" + formId + " .formSuccess")) {
          document.querySelector("#" + formId + " .formSuccess").style.display =
            "none";
        }

        // Turn the inputs into a payload
        var payload = {};
        var elements = this.elements;
        for (var i = 0; i < elements.length; i++) {
          if (elements[i].type !== "submit") {
            // Determine class of element and set value accordingly
            var classOfElement =
              typeof elements[i].classList.value == "string" &&
                elements[i].classList.value.length > 0
                ? elements[i].classList.value
                : "";
            var valueOfElement =
              elements[i].type == "checkbox" &&
                classOfElement.indexOf("multiselect") == -1
                ? elements[i].checked
                : classOfElement.indexOf("intval") == -1
                  ? elements[i].value
                  : parseInt(elements[i].value);
            var elementIsChecked = elements[i].checked;
            // Override the method of the form if the input's name is _method
            var nameOfElement = elements[i].name;
            if (nameOfElement == "_method") {
              method = valueOfElement;
            } else {
              // Create an payload field named "method" if the elements name is actually httpmethod
              if (nameOfElement == "httpmethod") {
                nameOfElement = "method";
              }
              // Create an payload field named "id" if the elements name is actually uid
              if (nameOfElement == "uid") {
                nameOfElement = "id";
              }
              // If the element has the class "multiselect" add its value(s) as array elements
              if (classOfElement.indexOf("multiselect") > -1) {
                if (elementIsChecked) {
                  payload[nameOfElement] =
                    typeof payload[nameOfElement] == "object" &&
                      payload[nameOfElement] instanceof Array
                      ? payload[nameOfElement]
                      : [];
                  payload[nameOfElement].push(valueOfElement);
                }
              } else {
                payload[nameOfElement] = valueOfElement;
              }
            }
          }
        }

        // If the method is DELETE, the payload should be a queryStringObject instead
        var queryStringObject = method == "DELETE" ? payload : {};

        // Call the API
        app.client.request(
          undefined,
          path,
          method,
          queryStringObject,
          payload,
          function (statusCode, responsePayload) {
            // Display an error on the form if needed
            if (statusCode !== 200) {
              if (statusCode == 403) {
                // log the user out
                app.logUserOut();
              } else {
                // Try to get the error from the api, or set a default error message
                var error =
                  typeof responsePayload.Error == "string"
                    ? responsePayload.Error
                    : "An error has occured, please try again";

                // Set the formError field with the error text
                document.querySelector("#" + formId + " .formError").innerHTML =
                  error;

                // Show (unhide) the form error field on the form
                document.querySelector(
                  "#" + formId + " .formError"
                ).style.display = "block";
              }
            } else {
              // If successful, send to form response processor
              app.formResponseProcessor(formId, payload, responsePayload);
            }
          }
        );
      });
    }
  }
};

// Init (bootstrapping)
app.init = function () {
  console.log(
    "%c Welcome to " + "%c Coinazer.com",
    "color: red; font-size: 30px;",
    "color: rgb(0, 153, 255); font-size:30px;"
  );
  // app.bindForms(); // Bind all form submissions

  // Bind logout logout button
  // app.bindLogoutButton();

  // Get the token from localstorage
  // app.getSessionToken();

  // Renew token
  // app.tokenRenewalLoop();

  // Load data on page
  // app.loadDataOnPage();
};

// Swift Load
document.addEventListener("DOMContentLoaded", app.swiftLoad(), false);

// Call the init processes after the window loads
window.onload = function () {
  app.init();
  // app.getCookie("azer_token", function (e, r) {
  //   const resetShow = () => {
  //     document.querySelector(".lst-web-sec-logged").classList.remove("active");
  //     document.querySelector(".lst-web-sec").classList.remove("active");
  //   };
  //   if (e) {
  //     app.redirectUrl(`../dashio/home?azer_token=${r}`);
  //     resetShow();
  //     document.querySelector(".lst-web-sec-logged").classList.add("active");
  //   } else {
  //     resetShow();
  //     document.querySelector(".lst-web-sec").classList.add("active");
  //   }
  // });
};