window.addEventListener("load", () => {
  //GET ALL THE FIAT CURRENCY TO DOM
  const getAllFiatHandler = async () => {
    let swapFromFiatHtml = "";
    let swapToFiatHtml = "";

    const data = async () => {
      const fetchCurrency = await getCurrencies();

      fetchCurrency.forEach((data) => {
        swapFromFiatHtml += `
                    <div class="swap-bdy-ech swapFromFiatEch" data-id = ${data.currency_name}>
                        <div class="swap-bdy-ech-img">
                            <img src=${data.img} alt="">
                          </div>
                        <div class="swap-bdy-ech-det">
                            <h2>${data.ident}</h2>
                            <span>${data.currency_name}</span>
                        </div>
                      </div>
                
            `;
        swapToFiatHtml += `
                <div class="swap-bdy-ech swapToFiatEch" data-id = ${data.currency_name}>
                    <div class="swap-bdy-ech-img">
                        <img src=${data.img} alt="">
                      </div>
                    <div class="swap-bdy-ech-det">
                        <h2>${data.ident}</h2>
                        <span>${data.currency_name}</span>
                    </div>
                  </div>
            `;
      });
      app.query(".swap-from-bdy-fiat").innerHTML = swapFromFiatHtml;
      app.query(".swap-to-bdy-fiat").innerHTML = swapToFiatHtml;
    };
    data().then(() => {
      swapFromHandler();
      swapToHandler();
    });
  };

  //GET INITIAL FIAT CURRENCY TO BUTTON
  const getInitialFiatHandler = async () => {
    const fetchedCurrency = await getSingleCurrency("usd");

    fetchedCurrency.forEach((data) => {
      app.query("#swapFromBtn").innerHTML = `
            <div class="btn-img">
              <img src=${data.img} alt=""class="swapFromImg">
          </div>
          <span class="swapFromAbbv"> ${data.currency_name}</span>
          <i class="fa-solid fa-angle-down"></i>
        `;
      app.query(".swapFromLabel").textContent = data.currency_name;
      app.query("#swapFromBtn").dataset.id = data.currency_name;
      app.query("#swapFromBtn").dataset.type = "fiat";
    });
  };

  //GET ALL THE COINS TO DOM
  const getAllCoinsHandler = async () => {
    let fetchedData = [];

    const data = async () => {
      //GETTING ALL THE COIN
      const fetchedCoins = await getCoins();
      const swapFromCoinSerch = app.query("#swapFromCoinSerch");
      const swapToCoinSerch = app.query("#swapToCoinSerch");
      searchOnlyPattern = new RegExp("^[a-zA-Z ]+$");
      let previousValue = "";

      for (const [key, value] of Object.entries(fetchedCoins)) {
        fetchedData.push({ key, ...value });
      }

      //FILTER ARRAY WITH SEARCH INPUT
      swapFromCoinSerch.addEventListener("input", (e) => {
        const sortInput = async () => {
          let currentValue = swapFromCoinSerch.value;

          if (
            e.inputType.includes("delete") ||
            searchOnlyPattern.test(currentValue)
          ) {
            previousValue = currentValue;
          }

          swapFromCoinSerch.value = previousValue;

          const searchString = swapFromCoinSerch.value.toLowerCase();

          const filteredCoins = fetchedData.filter((data) => {
            return data.key.toLowerCase().includes(searchString);
          });
          analyseData(filteredCoins);
        };
        sortInput().then(() => swapFromHandler());
      });

      swapToCoinSerch.addEventListener("input", (e) => {
        const sortInput = async () => {
          let currentValue = swapToCoinSerch.value;

          if (
            e.inputType.includes("delete") ||
            searchOnlyPattern.test(currentValue)
          ) {
            previousValue = currentValue;
          }

          swapToCoinSerch.value = previousValue;

          const searchString = swapToCoinSerch.value.toLowerCase();

          const filteredCoins = fetchedData.filter((data) => {
            return data.key.toLowerCase().includes(searchString);
          });

          analyseData(filteredCoins);
        };
        sortInput().then(() => swapToHandler());
      });

      //LOOPING DATA INTO HTML DOM
      const analyseData = (dataArr) => {
        if (dataArr.length > 0) {
          let swapFromCoinHtml = "";
          let swapToCoinHtml = "";

          //LOOPING THROUGH ARRAY AND INPUTING VALUES INTO HTML
          dataArr.forEach((data) => {
            swapFromCoinHtml += `
                    <div class="swap-bdy-ech swapFromCoinEch" data-id=${data.key} data-asset=${data.abbrv}>
                      <div class="swap-bdy-ech-img">
                          <img src=${data.img} class="swapFromImg" alt="">
                      </div>
                      <div class="swap-bdy-ech-det">
                          <h2>${data.key}</h2>
                          <span>${data.abbrv}</span>
                      </div>
                  </div>
              `;
            swapToCoinHtml += `
                    <div class="swap-bdy-ech swapToCoinEch" data-id=${data.key}  data-asset=${data.abbrv}>
                        <div class="swap-bdy-ech-img">
                            <img src=${data.img} class="swapToImg" alt="">
                        </div>
                        <div class="swap-bdy-ech-det">
                            <h2>${data.key}</h2>
                            <span>${data.abbrv}</span>
                        </div>
                    </div>
            `;
          });

          app.query(".swap-from-bdy-coin").innerHTML = swapFromCoinHtml;
          app.query(".swap-to-bdy-coin").innerHTML = swapToCoinHtml;
        } else {
          app.query(
            ".swap-from-bdy-coin"
          ).innerHTML = ` <div class = "notFound">
                    <i class="fa-solid fa-magnifying-glass"></i>
                    <h3>No match found</h3>
                </div>`;
          app.query(".swap-to-bdy-coin").innerHTML = ` <div class = "notFound">
                    <i class="fa-solid fa-magnifying-glass"></i>
                    <h3>No match found</h3>
                </div>`;
        }
      };

      analyseData(fetchedData);
    };

    data().then(() => {
      swapFromHandler();
      swapToHandler();
    });
  };

  //GET INITIAL COINS TO BUTTON
  const getInitialCoinHandler = async () => {
    let swapFromCoinHtml = "";

    const fetchedCoin = await getSingleCoin("bitcoin");

    for (const [key, value] of Object.entries(fetchedCoin)) {
      swapFromCoinHtml += swapToBtn(value.img, key, value.abbrv);
      app.query("#swapToBtn").dataset.id = key;
      app.query("#swapToBtn").dataset.type = "coin";
      app.query("#swapToBtn").dataset.asset = "btc";
      app.query(".swapToLabel").textContent = value.abbrv;
      app.query(".btnSpan").textContent = value.abbrv;
    }
    app.query("#swapToBtn").innerHTML = swapFromCoinHtml;

    function swapToBtn(img, key, abbrv) {
      return `<div class="btn-img">
                   <img src=${img} alt="" class="swapToImg" />
               </div>
               <span class="swapToAbbv">${abbrv}</span>
               <i class="fa-solid fa-angle-down"></i>`;
    }
  };
  app.query(".form-btn").disabled = true;
  getAllFiatHandler();
  getInitialFiatHandler();
  getAllCoinsHandler();
  getInitialCoinHandler();
  inputHandler();
});

const swapFromHandler = () => {
  const swapFromBtn = app.query("#swapFromBtn");
  const swapFromMain = app.query(".swapFrom");
  const swapFromX = app.query(".swapFromX");
  const swapFromInnerCoinBtn = app.query(".swapFromInnerCoinBtn");
  const swapFromInnerFiatBtn = app.query(".swapFromInnerFiatBtn");
  const swapFromBdyCoin = app.query(".swap-from-bdy-coin-cover");
  const swapFromBdyFiat = app.query(".swap-from-bdy-fiat-cover");
  const swapFromCoinEch = app.queryAll(".swapFromCoinEch");
  const swapFromLabel = app.query(".swapFromLabel");
  const swapFromFiatEch = app.queryAll(".swapFromFiatEch");
  const swapToBtn = app.query("#swapToBtn");

  swapFromBtn.addEventListener("click", (e) => {
    e.preventDefault();
    swapFromMain.classList.add("active");
  });

  swapFromX.addEventListener("click", () => {
    swapFromMain.classList.remove("active");
    resetSwapModal();
  });

  swapFromInnerCoinBtn.addEventListener("click", () => {
    resetSwapDetails();
    swapFromBdyCoin.classList.add("active");
    swapFromInnerCoinBtn.classList.add("active");
  });
  swapFromInnerFiatBtn.addEventListener("click", () => {
    resetSwapDetails();
    swapFromBdyFiat.classList.add("active");
    swapFromInnerFiatBtn.classList.add("active");
  });

  const resetSwapDetails = () => {
    swapFromBdyCoin.classList.remove("active");
    swapFromBdyFiat.classList.remove("active");
    swapFromInnerCoinBtn.classList.remove("active");
    swapFromInnerFiatBtn.classList.remove("active");
  };
  const resetSwapModal = () => {
    swapFromInnerCoinBtn.classList.add("active");
    swapFromInnerFiatBtn.classList.remove("active");
    swapFromBdyCoin.classList.add("active");
    swapFromBdyFiat.classList.remove("active");
  };

  swapFromCoinEch.forEach((swapFromCoinEch) => {
    swapFromCoinEch.addEventListener("click", () => {
      if (swapFromCoinEch.dataset.id === swapToBtn.dataset.id) {
        let img = swapFromBtn.children[0].children[0].getAttribute("src");
        let det = swapFromBtn.children[1].textContent;
        swapToBtn.innerHTML = `
          <div class="btn-img">
              <img src=${img} alt="" class="swapToImg">
          </div>
              <span class="swapToAbbv">${det}</span>
          <i class="fa-solid fa-angle-down"></i>
         `;
        swapToBtn.dataset.id = swapFromBtn.dataset.id;
        swapToBtn.dataset.type = swapFromBtn.dataset.type;
        swapToBtn.dataset.asset = swapFromBtn.dataset.asset;
        app.query(".btnSpan").textContent = det;
        app.query(".swapToLabel").textContent = det;
      }
      let img;
      let det;
      let id;
      img = swapFromCoinEch.children[0].children[0].getAttribute("src");
      det = swapFromCoinEch.children[1].children[1].textContent;
      id = swapFromCoinEch.children[1].children[0].textContent;
      swapFromBtn.innerHTML = swapFromBtnSetter(img, det);
      swapFromBtn.dataset.id = id;
      swapFromBtn.dataset.type = "coin";
      swapFromBtn.dataset.asset = swapFromCoinEch.dataset.asset;
      swapFromLabel.textContent = det;
      swapFromMain.classList.remove("active");
      app.query("#swapFromInput").value = "";
      app.query("#swapToInput").value = "";
      resetSwapModal();
    });
  });

  swapFromFiatEch.forEach((swapFromFiatEch) => {
    swapFromFiatEch.addEventListener("click", () => {
      if (swapFromFiatEch.dataset.id == swapToBtn.dataset.id) {
        let img = swapFromBtn.children[0].children[0].getAttribute("src");
        let det = swapFromBtn.children[1].textContent;
        swapToBtn.innerHTML = `
          <div class="btn-img">
              <img src=${img} alt="" class="swapToImg">
          </div>
              <span class="swapToAbbv">${det}</span>
          <i class="fa-solid fa-angle-down"></i>
         `;
        swapToBtn.dataset.id = swapFromBtn.dataset.id;
        swapToBtn.dataset.type = swapFromBtn.dataset.type;
        app.query(".btnSpan").textContent = det;
        app.query(".swapToLabel").textContent = det;
        console.log(det);
      }
      let img;
      let det;
      let id;
      img = swapFromFiatEch.children[0].children[0].getAttribute("src");
      det = swapFromFiatEch.children[1].children[1].textContent;
      id = swapFromFiatEch.children[1].children[0].textContent;

      swapFromBtn.innerHTML = swapFromBtnSetter(img, det);
      swapFromBtn.dataset.id = det;
      swapFromBtn.dataset.type = "fiat";
      swapFromLabel.textContent = det;
      swapFromMain.classList.remove("active");
      app.query("#swapFromInput").value = "";
      app.query("#swapToInput").value = "";
      resetSwapModal();
    });
  });
  function swapFromBtnSetter(img, det) {
    return `
      <div class="btn-img">
          <img src=${img} alt="" class="swapFromImg">
      </div>
          <span class="swapFromAbbv">${det}</span>
      <i class="fa-solid fa-angle-down"></i>
     `;
  }
};

const swapToHandler = () => {
  const swapToBtn = app.query("#swapToBtn");
  const swapToMain = app.query(".swapTo");
  const swapToX = app.query(".swapToX");
  const swapToInnerCoinBtn = app.query(".swapToInnerCoinBtn");
  const swapToInnerFiatBtn = app.query(".swapToInnerFiatBtn");
  const swapToBdyCoin = app.query(".swap-to-bdy-coin-cover");
  const swapToBdyFiat = app.query(".swap-to-bdy-fiat-cover");
  const swapToCoinEch = app.queryAll(".swapToCoinEch");
  const swapToLabel = app.query(".swapToLabel");
  const swapToFiatEch = app.queryAll(".swapToFiatEch");
  const swapFromBtn = app.query("#swapFromBtn");

  swapToBtn.addEventListener("click", (e) => {
    e.preventDefault();
    swapToMain.classList.add("active");
  });

  swapToX.addEventListener("click", () => {
    swapToMain.classList.remove("active");
    resetSwapModal();
  });

  swapToInnerCoinBtn.addEventListener("click", () => {
    resetSwapDetails();
    swapToBdyCoin.classList.add("active");
    swapToInnerCoinBtn.classList.add("active");
  });
  swapToInnerFiatBtn.addEventListener("click", () => {
    resetSwapDetails();
    swapToBdyFiat.classList.add("active");
    swapToInnerFiatBtn.classList.add("active");
  });

  const resetSwapDetails = () => {
    swapToBdyCoin.classList.remove("active");
    swapToBdyFiat.classList.remove("active");
    swapToInnerCoinBtn.classList.remove("active");
    swapToInnerFiatBtn.classList.remove("active");
  };
  const resetSwapModal = () => {
    swapToInnerCoinBtn.classList.add("active");
    swapToInnerFiatBtn.classList.remove("active");
    swapToBdyCoin.classList.add("active");
    swapToBdyFiat.classList.remove("active");
  };

  swapToCoinEch.forEach((swapToCoinEch) => {
    swapToCoinEch.addEventListener("click", () => {
      if (swapToCoinEch.dataset.id === swapFromBtn.dataset.id) {
        let img = swapToBtn.children[0].children[0].getAttribute("src");
        swapFromBtn.children[0].children[0].classList.remove("class");
        swapFromBtn.children[0].children[0].classList.add("swapFromImg");
        let det = swapToBtn.children[1].textContent;
        let id = swapToCoinEch.children[1].children[0].textContent;
        swapFromBtn.innerHTML = swapToBtnSetter(img, det);
        swapFromBtn.dataset.id = swapToBtn.dataset.id;
        swapFromBtn.dataset.asset = swapToBtn.dataset.asset;
        swapFromBtn.dataset.type = swapToBtn.dataset.type;
      }
      let img;
      let det;
      let id;
      img = swapToCoinEch.children[0].children[0].getAttribute("src");
      det = swapToCoinEch.children[1].children[1].textContent;
      id = swapToCoinEch.children[1].children[0].textContent;
      swapToBtn.innerHTML = `
        <div class="btn-img">
            <img src=${img} alt="" class= "swapFromImg">
        </div>
       <span class="swapFromAbbv">${det}</span>
        <i class="fa-solid fa-angle-down"></i>
       `;
      swapToBtn.dataset.id = id;
      swapToBtn.dataset.type = "coin";
      swapToBtn.dataset.asset = swapToCoinEch.dataset.asset;
      swapToLabel.textContent = det;
      swapToMain.classList.remove("active");
      app.query(".btnSpan").textContent = det;
      app.query("#swapFromInput").value = "";
      app.query("#swapToInput").value = "";
      app.query(".btnSpan").textContent = det;
      resetSwapModal();
    });
  });

  swapToFiatEch.forEach((swapToFiatEch) => {
    swapToFiatEch.addEventListener("click", () => {
      if (swapToFiatEch.dataset.id == swapFromBtn.dataset.id) {
        let img = swapToBtn.children[0].children[0].getAttribute("src");
        let det = swapToBtn.children[1].textContent;
        swapFromBtn.innerHTML = `
          <div class="btn-img">
              <img src=${img} alt="" class= "swapFromImg">
          </div>
         <span class="swapFromAbbv">${det}</span>
          <i class="fa-solid fa-angle-down"></i>
         `;
        swapFromBtn.dataset.id = swapToBtn.dataset.id;
        swapFromBtn.dataset.type = swapToBtn.dataset.type;
      }
      let img;
      let det;
      let id;
      img = swapToFiatEch.children[0].children[0].getAttribute("src");
      det = swapToFiatEch.children[1].children[1].textContent;
      id = swapToFiatEch.children[1].children[0].textContent;
      swapToBtn.innerHTML = swapToBtnSetter(img, det);
      swapToBtn.dataset.id = det;
      swapToBtn.dataset.type = "fiat";
      swapToLabel.textContent = det;
      swapToMain.classList.remove("active");
      app.query("#swapFromInput").value = "";
      app.query("#swapToInput").value = "";
      app.query(".btnSpan").textContent = det;
      resetSwapModal();
    });
  });

  function swapToBtnSetter(img, det) {
    return `
      <div class="btn-img">
          <img src=${img} alt="" class= "swapToImg">
      </div>
     <span class="swapToAbbv">${det}</span>
      <i class="fa-solid fa-angle-down"></i>
     `;
  }
};

const inputHandler = () => {
  const swapFromInput = app.query("#swapFromInput");
  const swapToInput = app.query("#swapToInput");
  const swapFromBtn = app.query("#swapFromBtn");
  const swapToBtn = app.query("#swapToBtn");
  const limitVal = app.query(".limitVal");
  const limitAbb = app.query(".limitAbb");
  const buyIntErr = app.query(".buy-int-err");
  const formBtn = app.query(".form-btn");

  currInputPattern = new RegExp("^[0-9.]+$");
  let currPreviousValue = "";

  //Handling SwapFrom input
  swapFromInput.addEventListener("input", (e) => {
    if (!swapFromInput.value == "") {
      //Sorting only numeric values in input
      let currentValue = swapFromInput.value;
      if (
        e.inputType.includes("delete") ||
        currInputPattern.test(currentValue)
      ) {
        currPreviousValue = currentValue;
      }
      swapFromInput.value = currPreviousValue;
      swapToInput.value = swapFromInput.value;

      const displayCoinHandler = () => {
        //Handling Fiat to coins
        if (
          swapFromBtn.dataset.type === "fiat" &&
          swapToBtn.dataset.type === "coin"
        ) {
          const getAssetHandlers = async () => {
            coinVal = 0;
            coinArr = [];
            let otherVal = 0;
            // Getting single currency array
            const fetchedCurrency = await getSingleCurrency(
              swapFromBtn.dataset.id
            );
            // Getting single coin object
            const fetchedCoin = await getSingleCoin(swapToBtn.dataset.id);

            fetchedCurrency.forEach((data) => {
              otherVal = data.currency_rate_ngn;
              limitAbb.innerHTML = data.currency_name.toUpperCase();
            });

            for (const key of Object.keys(fetchedCoin)) {
              coinArr.push({ key: key, ...fetchedCoin[key] });
            }
            coinArr.forEach((data) => {
              coinVal = data.usd;
            });
            swapToInput.value = (
              swapFromInput.value /
              (otherVal * coinVal)
            ).toFixed(8);

            if (swapFromInput.value < otherVal * 1) {
              buyIntErr.classList.add("active");
              limitVal.innerHTML = otherVal * 1;
              formBtn.disabled = true;
            } else {
              buyIntErr.classList.remove("active");
              // buyValTrue = true;
              formBtn.disabled = false;
            }
          };
          getAssetHandlers();
        }
        //Handling coins to coins
        if (
          swapFromBtn.dataset.type === "coin" &&
          swapToBtn.dataset.type === "coin"
        ) {
          const getAssethandler = async () => {
            const coinArr1 = [];
            const coinArr2 = [];
            let coinFrom = 0;
            let coinTo = 0;
            let coinFromInUsd = 0;
            let result = 0;
            let otherVal = 0;
            // Getting single coin1 object
            const fetchedCoin1 = await getSingleCoin(swapFromBtn.dataset.id);

            for (const key of Object.keys(fetchedCoin1)) {
              coinArr1.push({ key: key, ...fetchedCoin1[key] });
            }
            coinArr1.forEach((data) => {
              coinFrom = data.usd;
              limitAbb.innerHTML = data.abbrv.toUpperCase();
            });
            // Getting single coin1 object
            const fetchedCoin2 = await getSingleCoin(swapToBtn.dataset.id);

            for (const key of Object.keys(fetchedCoin2)) {
              coinArr2.push({ key: key, ...fetchedCoin2[key] });
            }
            coinArr2.forEach((data) => {
              coinTo = data.usd;
            });
            // Getting single usd value for evaluation
            const fetchedCurrency = await getSingleCurrency("usd");

            fetchedCurrency.forEach((data) => {
              otherVal = data.currency_rate_ngn;
            });
            //Getting value of entered asset in usd
            coinFromInUsd = swapFromInput.value * coinFrom;

            //Getting value of entered asset in selected asset
            result = (coinFromInUsd / coinTo).toFixed(8);

            swapToInput.value = result;

            let coinChecker = (otherVal * 1) / coinFrom;
            if (swapFromInput.value < coinChecker) {
              buyIntErr.classList.add("active");
              limitVal.innerHTML = coinChecker.toFixed(8);
              formBtn.disabled = true;
            } else {
              buyIntErr.classList.remove("active");
              formBtn.disabled = false;
            }
          };
          getAssethandler();
        }
        //Handling coins to fiat
        if (
          swapFromBtn.dataset.type === "coin" &&
          swapToBtn.dataset.type === "fiat"
        ) {
          const getAssetHandlers = async () => {
            const swapFromBtn = app.query("#swapFromBtn");
            const swapToBtn = app.query("#swapToBtn");
            coinVal = 0;
            coinArr = [];
            let otherVal = 0;
            // Getting single currency array
            const fetchedCurrency = await getSingleCurrency(
              swapToBtn.dataset.id
            );
            // Getting single coin object
            const fetchedCoin = await getSingleCoin(swapFromBtn.dataset.id);

            fetchedCurrency.forEach((data) => {
              otherVal = data.currency_rate_ngn;
            });

            for (const key of Object.keys(fetchedCoin)) {
              coinArr.push({ key: key, ...fetchedCoin[key] });
            }
            coinArr.forEach((data) => {
              coinVal = data.usd;
              limitAbb.innerHTML = data.abbrv.toUpperCase();
            });

            // Getting single currency for evaluation
            const evalCurrency = await getSingleCurrency("usd");

            evalCurrency.forEach((data) => {
              evalVal = data.currency_rate_ngn;
            });

            swapToInput.value = swapFromInput.value * (otherVal * coinVal);

            const coinChecker = (evalVal * 1) / coinVal;

            if (swapFromInput.value < coinChecker) {
              buyIntErr.classList.add("active");
              limitVal.innerHTML = coinChecker.toFixed(8);
              formBtn.disabled = true;
            } else {
              buyIntErr.classList.remove("active");
              // buyValTrue = true;
              formBtn.disabled = false;
            }
          };
          getAssetHandlers();
        }
        //Handling Fiat to fiat
        if (
          swapFromBtn.dataset.type === "fiat" &&
          swapToBtn.dataset.type === "fiat"
        ) {
          const getAssethandler = async () => {
            let otherVal = 0;
            let otherVal2 = 0;

            // Getting single currency array
            const fetchedCurrency1 = await getSingleCurrency(
              swapFromBtn.dataset.id
            );

            fetchedCurrency1.forEach((data) => {
              otherVal = data.currency_rate_ngn;
            });
            // Getting single currency2 array
            const fetchedCurrency2 = await getSingleCurrency(
              swapToBtn.dataset.id
            );

            fetchedCurrency2.forEach((data) => {
              otherVal2 = data.currency_rate_ngn;
            });
            let result = swapFromInput.value / otherVal;

            swapToInput.value = (result * otherVal2).toLocaleString();
          };
          getAssethandler();
        }
      };
      displayCoinHandler();
    } else {
      swapToInput.value = "";
      buyIntErr.classList.remove("active");
      formBtn.disabled = true;
    }
  });

  //Handling SwapTo input
  swapToInput.addEventListener("input", (e) => {
    if (!swapToInput.value == "") {
      //Sorting only numeric values in input
      let currentValue = swapToInput.value;
      if (
        e.inputType.includes("delete") ||
        currInputPattern.test(currentValue)
      ) {
        currPreviousValue = currentValue;
      }
      swapToInput.value = currPreviousValue;
      swapToInput.value = swapToInput.value;

      const displayCoinHandler = () => {
        //Handling Fiat to coins
        if (
          swapToBtn.dataset.type === "fiat" &&
          swapFromBtn.dataset.type === "coin"
        ) {
          const getAssetHandlers = async () => {
            coinVal = 0;
            coinArr = [];
            let otherVal = 0;
            // Getting single currency array
            const fetchedCurrency = await getSingleCurrency(
              swapToBtn.dataset.id
            );
            // Getting single coin object
            const fetchedCoin = await getSingleCoin(swapFromBtn.dataset.id);

            fetchedCurrency.forEach((data) => {
              otherVal = data.currency_rate_ngn;
            });

            for (const key of Object.keys(fetchedCoin)) {
              coinArr.push({ key: key, ...fetchedCoin[key] });
            }
            coinArr.forEach((data) => {
              coinVal = data.usd;
            });
            swapFromInput.value = (
              swapToInput.value /
              (otherVal * coinVal)
            ).toFixed(8);

            let coinChecker = (otherVal * 1) / coinVal;
            if (swapFromInput.value < coinChecker) {
              buyIntErr.classList.add("active");
              limitVal.innerHTML = coinChecker.toFixed(8);
              formBtn.disabled = true;
            } else {
              buyIntErr.classList.remove("active");
              formBtn.disabled = false;
              // formBtn.removeAttributes("disabled");
            }
          };
          getAssetHandlers();
        }
        //Handling coins to coins
        if (
          swapToBtn.dataset.type === "coin" &&
          swapFromBtn.dataset.type === "coin"
        ) {
          const getAssethandler = async () => {
            const coinArr1 = [];
            const coinArr2 = [];
            let coinFrom = 0;
            let coinTo = 0;
            let coinFromInUsd = 0;
            let result = 0;
            let otherVal = 0;
            // Getting single coin1 object
            const fetchedCoin1 = await getSingleCoin(swapToBtn.dataset.id);

            for (const key of Object.keys(fetchedCoin1)) {
              coinArr1.push({ key: key, ...fetchedCoin1[key] });
            }
            coinArr1.forEach((data) => {
              coinFrom = data.usd;
              limitAbb.innerHTML = data.abbrv.toUpperCase();
            });
            // Getting single coin1 object
            const fetchedCoin2 = await getSingleCoin(swapFromBtn.dataset.id);

            for (const key of Object.keys(fetchedCoin2)) {
              coinArr2.push({ key: key, ...fetchedCoin2[key] });
            }
            coinArr2.forEach((data) => {
              coinTo = data.usd;
            });
            // Getting single usd value for evaluation
            const fetchedCurrency = await getSingleCurrency("usd");

            fetchedCurrency.forEach((data) => {
              otherVal = data.currency_rate_ngn;
            });
            //Getting value of entered asset in usd
            coinFromInUsd = swapToInput.value * coinFrom;

            //Getting value of entered asset in selected asset
            result = (coinFromInUsd / coinTo).toFixed(8);

            swapFromInput.value = result;

            let coinChecker = (otherVal * 1) / coinFrom;
            if (swapFromInput.value < coinChecker) {
              buyIntErr.classList.add("active");
              limitVal.innerHTML = coinChecker.toFixed(8);
              formBtn.disabled = true;
            } else {
              buyIntErr.classList.remove("active");
              formBtn.disabled = true;
              // buyBtn.removeAttribute("disabled");
            }
          };
          getAssethandler();
        }
        //Handling coins to fiat
        if (
          swapToBtn.dataset.type === "coin" &&
          swapFromBtn.dataset.type === "fiat"
        ) {
          const getAssetHandlers = async () => {
            const swapFromBtn = app.query("#swapFromBtn");
            const swapToBtn = app.query("#swapToBtn");
            coinVal = 0;
            coinArr = [];
            let otherVal = 0;
            // Getting single currency array
            const fetchedCurrency = await getSingleCurrency(
              swapFromBtn.dataset.id
            );
            // Getting single coin object
            const fetchedCoin = await getSingleCoin(swapToBtn.dataset.id);

            fetchedCurrency.forEach((data) => {
              otherVal = data.currency_rate_ngn;
              limitAbb.innerHTML = data.currency_name.toUpperCase();
            });

            for (const key of Object.keys(fetchedCoin)) {
              coinArr.push({ key: key, ...fetchedCoin[key] });
            }
            coinArr.forEach((data) => {
              coinVal = data.usd;
            });
            // Getting single currency for evaluation
            const evalCurrency = await getSingleCurrency("usd");

            evalCurrency.forEach((data) => {
              evalVal = data.currency_rate_ngn;
            });
            swapFromInput.value = swapToInput.value * (otherVal * coinVal);

            const coinChecker = (evalVal * 1) / coinVal;

            if (swapFromInput.value < coinChecker) {
              buyIntErr.classList.add("active");
              limitVal.innerHTML = otherVal * 1;
              formBtn.disabled = true;
            } else {
              buyIntErr.classList.remove("active");
              formBtn.disabled = false;
              // buyBtn.removeAttribute("disabled");
            }
          };
          getAssetHandlers();
        }
        //Handling Fiat to fiat
        if (
          swapToBtn.dataset.type === "fiat" &&
          swapFromBtn.dataset.type === "fiat"
        ) {
          const getAssethandler = async () => {
            let otherVal = 0;
            let otherVal2 = 0;

            // Getting single currency array
            const fetchedCurrency1 = await getSingleCurrency(
              swapToBtn.dataset.id
            );

            fetchedCurrency1.forEach((data) => {
              otherVal = data.currency_rate_ngn;
            });
            // Getting single currency2 array
            const fetchedCurrency2 = await getSingleCurrency(
              swapFromBtn.dataset.id
            );

            fetchedCurrency2.forEach((data) => {
              otherVal2 = data.currency_rate_ngn;
            });
            let result = swapToInput.value / otherVal;

            swapFromInput.value = (result * otherVal2).toLocaleString();
          };
          getAssethandler();
        }
      };
      displayCoinHandler();
    } else {
      swapFromInput.value = "";
      buyIntErr.classList.remove("active");
      formBtn.disabled = true;
    }
  });
};

const formBtn = app.query(".form-btn");

formBtn.addEventListener("click", (e) => {
  e.preventDefault();
  const swapFromInput = app.query("#swapFromInput");
  const swapToInput = app.query("#swapToInput");
  const swapFromInputVal = app.query("#swapFromInput").value;
  const swapToInputVal = app.query("#swapToInput").value;
  const swapFromBtn = app.query("#swapFromBtn");
  const sellValidate = app.query(".sell-validate");
  const sellValidateCnt = app.query(".sell-validate-cnt");
  const selVldCls = app.query(".selVldCls");
  const swapFromImg = app.query(".swapFromImg").src;
  const swapToImg = app.query(".swapToImg").src;
  const swapFromAbbv = app.query(".swapFromAbbv").textContent;
  const swapToAbbv = app.query(".swapToAbbv").textContent;
  let coinValUsd = 0;
  let coinValue = 0;
  let revCoinVal = 0;

  //CHECKING IF USER IS LOGGED IN
  app.getCookie("azer_token", function (e, r) {
    if (e) {
      //Handling Coin to Fiat Transactions
      if (
        swapFromBtn.dataset.type === "coin" &&
        swapToBtn.dataset.type === "fiat"
      ) {
        app.getCookie("azer_token", (e, r) => {
          if (e) {
            formBtn.innerHTML = "Initating Transaction...";
            app.client
              .fetch(`../../user/wallet/${swapFromBtn.dataset.asset}`, "POST", {
                token: r,
              })
              .then((dx) => {
                let coinerDataId =
                  swapFromBtn.dataset.id === "tether"
                    ? "usdt"
                    : swapFromBtn.dataset.id === "binancecoin"
                    ? "bnb"
                    : swapFromBtn.dataset.id;

                if (swapFromInputVal > dx[coinerDataId].totalAvailableBalance) {
                  app.client.sweetAlertE(
                    "error",
                    "You do not have enough asset to complete transaction"
                  );
                  formBtn.innerHTML = "Initate Payment";
                  return;
                } else {
                  formBtn.innerHTML = "Initate Payment";
                  sellValidate.classList.add("active");

                  selVldCls.addEventListener("click", () => {
                    swapFromInput.value = "";
                    swapToInput.value = "";

                    sellValidate.classList.remove("active");
                    formBtn.disabled = true;
                  });
                  app.getCookie("azer_token", (e, r) => {
                    app.query(
                      ".sell-vald-bdy"
                    ).innerHTML = `<center class= "center"> ${app.loading()}</center>`;
                    app.query(".sellValBtn").disabled = true;
                    if (e) {
                      app.client
                        .fetch(
                          `/user/wallet/${swapFromBtn.dataset.asset}`,
                          "POST",
                          {
                            token: r,
                          }
                        )
                        .then(async (dx) => {
                          let coinerDataId =
                            swapFromBtn.dataset.id === "tether"
                              ? "usdt"
                              : swapFromBtn.dataset.id === "binancecoin"
                              ? "bnb"
                              : swapFromBtn.dataset.id;
                          coinValUsd = dx[coinerDataId].coinPrice;

                          // Getting single currency array
                          const fetchedCurrency = await getSingleCurrency(
                            swapToBtn.dataset.id
                          );

                          fetchedCurrency.forEach((data) => {
                            coinValue = data.currency_rate_ngn * coinValUsd;
                            revCoinVal = 1 / coinValue;
                          });
                        })
                        .then(() => {
                          app.query(".sellValBtn").disabled = false;
                          app.query(".sell-vald-bdy").innerHTML = `
                          <div class="sell-vald-mid">
                                              <div class="tp-sell-vald-mid">
                                                <div class="lft-tp-sel-mid">
                                                  <div class="lft-tp-sel-mid-img">
                                                    <img
                                                      src=${swapFromImg}
                                                      alt=""
                                                    />
                                                  </div>
                                                  <div class="lft-tp-sel-mid-det">
                                                    <h2>${swapFromInputVal}</h2>
                                                  </div>
                                                </div>
                                                <div class="rght-tp-sel-mid">
                                                  <h2>${swapFromAbbv}</h2>
                                                </div>
                                              </div>
                                              <div class="mid-sell-vald-mid">
                                                <i class="fa-solid fa-arrow-down"></i>
                                                <h3>To receive</h3>
                                              </div>
                                              <div class="tp-sell-vald-mid">
                                                <div class="lft-tp-sel-mid">
                                                  <div class="lft-tp-sel-mid-img">
                                                    <img
                                                      src=${swapToImg}
                                                      alt=""
                                                    />
                                                  </div>
                                                  <div class="lft-tp-sel-mid-det">
                                                    <h2>${Number(
                                                      swapToInputVal
                                                    ).toLocaleString()}</h2>
                                                  </div>
                                                </div>
                                                <div class="rght-tp-sel-mid">
                                                  <h2>${swapToAbbv}</h2>
                                                </div>
                                              </div>
                                            </div>
                                            <div class="sell-val-btm">
                                              <div class="sell-val-btm-ech">
                                                <div class="sell-val-btm-ech-lft">
                                                  <h2>Rate</h2>
                                                </div>
                                                <div class="sell-val-btm-ech-rght">
                                                  <h2 class="upper">1 ${swapFromAbbv} = ${coinValue.toFixed(
                            2
                          )} ${swapToAbbv}</h2>
                                                </div>
                                              </div>
                                              <div class="sell-val-btm-ech">
                                                <div class="sell-val-btm-ech-lft">
                                                  <h2>Inverse Rate</h2>
                                                </div>
                                                <div class="sell-val-btm-ech-rght">
                                                  <h2 class="upper">1 ${swapToAbbv} = ${revCoinVal.toFixed(
                            8
                          )} ${swapFromAbbv}</h2>
                                                </div>
                                              </div>
                                              <div class="sell-val-btm-ech">
                                                <div class="sell-val-btm-ech-lft">
                                                  <h2>Payment Method</h2>
                                                </div>
                                                <div class="sell-val-btm-ech-rght">
                                                  <h2>Azer Wallet</h2>
                                                </div>
                                              </div>
                                              <div class="sell-val-btm-ech">
                                                <div class="sell-val-btm-ech-lft">
                                                  <h2>Transaction Fees</h2>
                                                </div>
                                                <div class="sell-val-btm-ech-rght">
                                                  <h2>No Fees</h2>
                                                </div>
                                              </div>
                                              <div class="sell-val-btm-ech">
                                                <div class="sell-val-btm-ech-lft">
                                                  <h2>What you receive</h2>
                                                </div>
                                                <div class="sell-val-btm-ech-rght">
                                                  <h2 class="upper mn-upper">${Number(
                                                    swapToInputVal
                                                  ).toLocaleString()} ${swapToAbbv}</h2>
                                                </div>
                                              </div>
                                            </div>
      
                          `;
                        });
                    }
                  });

                  //OBJECT TO POST

                  // app.query(".sellValBtn").addEventListener("submit", (e) => {
                  //   e.preventDefault();
                  //   console.log("hello");
                  // });

                  // {
                  //   coin_sold: coinSellBtn.dataset.id,
                  //   coin_val: sellCoinVal,
                  //   curr_val: sellCurrVal,
                  //   curr_purchase: currSellBtn.dataset.id,
                  // }

                  // sellOrder.push({
                  //   coin_sold: coinSellBtn.dataset.id,
                  //   coin_val: sellCoinVal,
                  //   curr_val: sellCurrVal,
                  //   curr_purchase: currSellBtn.dataset.id,
                  // });
                }
              });
          }
        });
      }

      //Handling Coin to Coin Transactions
      if (
        swapFromBtn.dataset.type === "coin" &&
        swapToBtn.dataset.type === "coin"
      ) {
        app.getCookie("azer_token", (e, r) => {
          if (e) {
            formBtn.innerHTML = "Initating Transaction...";
            app.client
              .fetch(`../../user/wallet/${swapFromBtn.dataset.asset}`, "POST", {
                token: r,
              })
              .then((dx) => {
                let coinerDataId =
                  swapFromBtn.dataset.id === "tether"
                    ? "usdt"
                    : swapFromBtn.dataset.id === "binancecoin"
                    ? "bnb"
                    : swapFromBtn.dataset.id;

                if (swapFromInputVal > dx[coinerDataId].totalAvailableBalance) {
                  app.client.sweetAlertE(
                    "error",
                    "You do not have enough asset to complete transaction"
                  );
                  formBtn.innerHTML = "Initate Payment";
                  return;
                } else {
                  formBtn.innerHTML = "Initate Payment";
                  sellValidate.classList.add("active");

                  selVldCls.addEventListener("click", () => {
                    swapFromInput.value = "";
                    swapToInput.value = "";

                    sellValidate.classList.remove("active");
                    formBtn.disabled = true;
                  });
                  app.getCookie("azer_token", (e, r) => {
                    app.query(
                      ".sell-vald-bdy"
                    ).innerHTML = `<center class= "center"> ${app.loading()}</center>`;
                    app.query(".sellValBtn").disabled = true;
                    if (e) {
                      app.client
                        .fetch(
                          `/user/wallet/${swapFromBtn.dataset.asset}`,
                          "POST",
                          {
                            token: r,
                          }
                        )
                        .then(async (dx) => {
                          let coinerDataId =
                            swapFromBtn.dataset.id === "tether"
                              ? "usdt"
                              : swapFromBtn.dataset.id === "binancecoin"
                              ? "bnb"
                              : swapFromBtn.dataset.id;
                          coinValUsd = dx[coinerDataId].coinPrice;

                          app.client
                            .fetch(
                              `../../user/wallet/${swapToBtn.dataset.asset}`,
                              "POST",
                              {
                                token: r,
                              }
                            )
                            .then((dx) => {
                              let coinerDataId =
                                swapToBtn.dataset.id === "tether"
                                  ? "usdt"
                                  : swapToBtn.dataset.id === "binancecoin"
                                  ? "bnb"
                                  : swapToBtn.dataset.id;
                              let swapFromVal = dx[coinerDataId].coinPrice;
                              coinValue = coinValUsd / swapFromVal;
                              revCoinVal = swapFromVal / coinValUsd;
                            })
                            .then(() => {
                              app.query(".sellValBtn").disabled = false;
                              app.query(".sell-vald-bdy").innerHTML = `
                              <div class="sell-vald-mid">
                                                  <div class="tp-sell-vald-mid">
                                                    <div class="lft-tp-sel-mid">
                                                      <div class="lft-tp-sel-mid-img">
                                                        <img
                                                          src=${swapFromImg}
                                                          alt=""
                                                        />
                                                      </div>
                                                      <div class="lft-tp-sel-mid-det">
                                                        <h2>${swapFromInputVal}</h2>
                                                      </div>
                                                    </div>
                                                    <div class="rght-tp-sel-mid">
                                                      <h2>${swapFromAbbv}</h2>
                                                    </div>
                                                  </div>
                                                  <div class="mid-sell-vald-mid">
                                                    <i class="fa-solid fa-arrow-down"></i>
                                                    <h3>To receive</h3>
                                                  </div>
                                                  <div class="tp-sell-vald-mid">
                                                    <div class="lft-tp-sel-mid">
                                                      <div class="lft-tp-sel-mid-img">
                                                        <img
                                                          src=${swapToImg}
                                                          alt=""
                                                        />
                                                      </div>
                                                      <div class="lft-tp-sel-mid-det">
                                                        <h2>${Number(
                                                          swapToInputVal
                                                        ).toLocaleString()}</h2>
                                                      </div>
                                                    </div>
                                                    <div class="rght-tp-sel-mid">
                                                      <h2>${swapToAbbv}</h2>
                                                    </div>
                                                  </div>
                                                </div>
                                                <div class="sell-val-btm">
                                                  <div class="sell-val-btm-ech">
                                                    <div class="sell-val-btm-ech-lft">
                                                      <h2>Rate</h2>
                                                    </div>
                                                    <div class="sell-val-btm-ech-rght">
                                                      <h2 class="upper">1 ${swapFromAbbv} = ${coinValue.toFixed(
                                8
                              )} ${swapToAbbv}</h2>
                                                    </div>
                                                  </div>
                                                  <div class="sell-val-btm-ech">
                                                    <div class="sell-val-btm-ech-lft">
                                                      <h2>Inverse Rate</h2>
                                                    </div>
                                                    <div class="sell-val-btm-ech-rght">
                                                      <h2 class="upper">1 ${swapToAbbv} = ${revCoinVal.toFixed(
                                8
                              )} ${swapFromAbbv}</h2>
                                                    </div>
                                                  </div>
                                                  <div class="sell-val-btm-ech">
                                                    <div class="sell-val-btm-ech-lft">
                                                      <h2>Payment Method</h2>
                                                    </div>
                                                    <div class="sell-val-btm-ech-rght">
                                                      <h2>Azer Wallet</h2>
                                                    </div>
                                                  </div>
                                                  <div class="sell-val-btm-ech">
                                                    <div class="sell-val-btm-ech-lft">
                                                      <h2>Transaction Fees</h2>
                                                    </div>
                                                    <div class="sell-val-btm-ech-rght">
                                                      <h2>No Fees</h2>
                                                    </div>
                                                  </div>
                                                  <div class="sell-val-btm-ech">
                                                    <div class="sell-val-btm-ech-lft">
                                                      <h2>What you receive</h2>
                                                    </div>
                                                    <div class="sell-val-btm-ech-rght">
                                                      <h2 class="upper mn-upper">${Number(
                                                        swapToInputVal
                                                      ).toLocaleString()} ${swapToAbbv}</h2>
                                                    </div>
                                                  </div>
                                                </div>
          
                              `;
                            });
                        });
                    }
                  });

                  //OBJECT TO POST

                  // app.query(".sellValBtn").addEventListener("submit", (e) => {
                  //   e.preventDefault();
                  //   console.log("hello");
                  // });

                  // {
                  //   coin_sold: coinSellBtn.dataset.id,
                  //   coin_val: sellCoinVal,
                  //   curr_val: sellCurrVal,
                  //   curr_purchase: currSellBtn.dataset.id,
                  // }

                  // sellOrder.push({
                  //   coin_sold: coinSellBtn.dataset.id,
                  //   coin_val: sellCoinVal,
                  //   curr_val: sellCurrVal,
                  //   curr_purchase: currSellBtn.dataset.id,
                  // });
                }
              });
          }
        });
      }

      //Handling Fiat to Coin Transactions
      if (
        swapFromBtn.dataset.type === "fiat" &&
        swapToBtn.dataset.type === "coin"
      ) {
        app.getCookie("azer_token", (e, r) => {
          if (e) {
            formBtn.innerHTML = "Initating Transaction...";
            app.client
              .fetch(`../../user/wallet/fiat`, "POST", {
                token: r,
              })
              .then((dx) => {
                withdrawableBalance = dx.AvailableBalance;

                if (swapFromInputVal > withdrawableBalance) {
                  app.client.sweetAlertE(
                    "error",
                    "You do not have enough asset to complete transaction"
                  );
                  formBtn.innerHTML = "Initate Payment";
                  return;
                } else {
                  formBtn.innerHTML = "Initate Payment";
                  sellValidate.classList.add("active");

                  selVldCls.addEventListener("click", () => {
                    swapFromInput.value = "";
                    swapToInput.value = "";

                    sellValidate.classList.remove("active");
                    formBtn.disabled = true;
                  });
                  app.getCookie("azer_token", (e, r) => {
                    app.query(
                      ".sell-vald-bdy"
                    ).innerHTML = `<center class= "center"> ${app.loading()}</center>`;
                    app.query(".sellValBtn").disabled = true;
                    if (e) {
                      app.client
                        .fetch(
                          `/user/wallet/${swapToBtn.dataset.asset}`,
                          "POST",
                          {
                            token: r,
                          }
                        )
                        .then(async (dx) => {
                          let coinerDataId =
                            swapToBtn.dataset.id === "tether"
                              ? "usdt"
                              : swapToBtn.dataset.id === "binancecoin"
                              ? "bnb"
                              : swapToBtn.dataset.id;
                          coinValUsd = dx[coinerDataId].coinPrice;

                          // Getting single currency array
                          const fetchedCurrency = await getSingleCurrency(
                            swapFromBtn.dataset.id
                          );

                          fetchedCurrency.forEach((data) => {
                            coinValue = data.currency_rate_ngn * coinValUsd;
                            revCoinVal = 1 / coinValue;
                          });
                        })
                        .then(() => {
                          app.query(".sellValBtn").disabled = false;
                          app.query(".sell-vald-bdy").innerHTML = `
                          <div class="sell-vald-mid">
                                              <div class="tp-sell-vald-mid">
                                                <div class="lft-tp-sel-mid">
                                                  <div class="lft-tp-sel-mid-img">
                                                    <img
                                                      src=${swapFromImg}
                                                      alt=""
                                                    />
                                                  </div>
                                                  <div class="lft-tp-sel-mid-det">
                                                    <h2>${swapFromInputVal}</h2>
                                                  </div>
                                                </div>
                                                <div class="rght-tp-sel-mid">
                                                  <h2>${swapFromAbbv}</h2>
                                                </div>
                                              </div>
                                              <div class="mid-sell-vald-mid">
                                                <i class="fa-solid fa-arrow-down"></i>
                                                <h3>To receive</h3>
                                              </div>
                                              <div class="tp-sell-vald-mid">
                                                <div class="lft-tp-sel-mid">
                                                  <div class="lft-tp-sel-mid-img">
                                                    <img
                                                      src=${swapToImg}
                                                      alt=""
                                                    />
                                                  </div>
                                                  <div class="lft-tp-sel-mid-det">
                                                    <h2>${Number(
                                                      swapToInputVal
                                                    ).toFixed(8)}</h2>
                                                  </div>
                                                </div>
                                                <div class="rght-tp-sel-mid">
                                                  <h2>${swapToAbbv}</h2>
                                                </div>
                                              </div>
                                            </div>
                                            <div class="sell-val-btm">
                                              <div class="sell-val-btm-ech">
                                                <div class="sell-val-btm-ech-lft">
                                                  <h2>Rate</h2>
                                                </div>
                                                <div class="sell-val-btm-ech-rght">
                                                  <h2 class="upper">1 ${swapFromAbbv} = ${coinValue.toFixed(
                            2
                          )} ${swapToAbbv}</h2>
                                                </div>
                                              </div>
                                              <div class="sell-val-btm-ech">
                                                <div class="sell-val-btm-ech-lft">
                                                  <h2>Inverse Rate</h2>
                                                </div>
                                                <div class="sell-val-btm-ech-rght">
                                                  <h2 class="upper">1 ${swapToAbbv} = ${revCoinVal.toFixed(
                            8
                          )} ${swapFromAbbv}</h2>
                                                </div>
                                              </div>
                                              <div class="sell-val-btm-ech">
                                                <div class="sell-val-btm-ech-lft">
                                                  <h2>Payment Method</h2>
                                                </div>
                                                <div class="sell-val-btm-ech-rght">
                                                  <h2>Azer Wallet</h2>
                                                </div>
                                              </div>
                                              <div class="sell-val-btm-ech">
                                                <div class="sell-val-btm-ech-lft">
                                                  <h2>Transaction Fees</h2>
                                                </div>
                                                <div class="sell-val-btm-ech-rght">
                                                  <h2>No Fees</h2>
                                                </div>
                                              </div>
                                              <div class="sell-val-btm-ech">
                                                <div class="sell-val-btm-ech-lft">
                                                  <h2>What you receive</h2>
                                                </div>
                                                <div class="sell-val-btm-ech-rght">
                                                  <h2 class="upper mn-upper">${Number(
                                                    swapToInputVal
                                                  ).toFixed(
                                                    8
                                                  )} ${swapToAbbv}</h2>
                                                </div>
                                              </div>
                                            </div>
      
                          `;
                        });
                    }
                  });
                  //OBJECT TO POST

                  // app.query(".sellValBtn").addEventListener("submit", (e) => {
                  //   e.preventDefault();
                  //   console.log("hello");
                  // });

                  // {
                  //   coin_sold: coinSellBtn.dataset.id,
                  //   coin_val: sellCoinVal,
                  //   curr_val: sellCurrVal,
                  //   curr_purchase: currSellBtn.dataset.id,
                  // }

                  // sellOrder.push({
                  //   coin_sold: coinSellBtn.dataset.id,
                  //   coin_val: sellCoinVal,
                  //   curr_val: sellCurrVal,
                  //   curr_purchase: currSellBtn.dataset.id,
                  // });
                }
              });
          }
        });
      }
    } else {
      location.href = "/user/login";
    }
  });
});

//PROCEED SELL TRANSACTION

app.query(".sellValBtn").addEventListener("click", (e) => {
  e.preventDefault();
  app.query(".sell-validate-cnt").classList.remove("active");
  app.query(".sell-comp").classList.add("active");
  app.query(".sell-comp-load").innerHTML = app.loading();
  const sellValidate = app.query(".sell-validate");

  app.getCookie("azer_token", (e, r) => {
    const swapFromBtn = app.query("#swapFromBtn");
    const swapToBtn = app.query("#swapToBtn");
    let swapFromInputVal = app.query("#swapFromInput").value;
    let swapToInputVal = app.query("#swapToInput").value;
    let withdrawableBalance = 0;

    //Posting coin to fiat transaction

    if (
      swapFromBtn.dataset.type === "coin" &&
      swapToBtn.dataset.type === "fiat"
    ) {
      if (e) {
        app.client
          .fetch(`/user/wallet/${swapFromBtn.dataset.asset}`, "POST", {
            token: r,
          })
          .then(async (dx) => {
            let coinerDataId =
              swapFromBtn.dataset.id === "tether"
                ? "usdt"
                : swapFromBtn.dataset.id === "binancecoin"
                ? "bnb"
                : swapFromBtn.dataset.id;

            if (swapFromInputVal > dx[coinerDataId].totalAvailableBalance) {
              return;
            } else {
              let ex = await fetch(
                `../../api/convert/sellusd?id=${
                  swapToBtn.dataset.id
                }&ex=${parseFloat(swapToInputVal)}`
              );
              let exc = await ex.json();
              const { usd } = exc;
              let data = {
                coin: swapFromBtn.dataset.id,
                unit: parseFloat(swapFromInputVal),
                amount: parseFloat(swapToInputVal),
                usd: parseFloat(usd),
                currency: swapToBtn.dataset.id,
                token: r,
              };
              app.client
                .fetch(`/user/wallet/sell`, "POST", data)
                .then((dxb) => {
                  if (dxb.isSuccess) {
                    app.query(".sell-comp-load").classList.remove("active");
                    app.query(".sell-comp-bdy").classList.add("active");
                  } else {
                    return;
                  }
                });
            }
          });
      }
    }
    //Posting coin to coin transaction

    if (e) {
      app.client
        .fetch(`/user/wallet/${swapFromBtn.dataset.asset}`, "POST", {
          token: r,
        })
        .then(async (dx) => {
          let coinerDataId =
            swapFromBtn.dataset.id === "tether"
              ? "usdt"
              : swapFromBtn.dataset.id === "binancecoin"
              ? "bnb"
              : swapFromBtn.dataset.id;

          if (swapFromInputVal > dx[coinerDataId].totalAvailableBalance) {
            return;
          } else {
            let data = {
              coinFrom: swapFromBtn.dataset.id,
              coinFromUnit: parseFloat(swapFromInputVal),
              coinToUnit: parseFloat(swapToInputVal),
              coinTo: swapToBtn.dataset.id,
              token: r,
            };
            app.client.fetch(`/user/wallet/sell`, "POST", data).then((dxb) => {
              if (dxb.isSuccess) {
                app.query(".sell-comp-load").classList.remove("active");
                app.query(".sell-comp-bdy").classList.add("active");
              } else {
                return;
              }
            });
          }
        });
    }

    //Posting fiat to coin transaction

    if (
      swapFromBtn.dataset.type === "fiat" &&
      swapToBtn.dataset.type === "coin"
    ) {
      if (e) {
        app.client
          .fetch(`/user/wallet/fiat`, "POST", {
            token: r,
          })
          .then(async (dx) => {
            withdrawableBalance = dx.AvailableBalance;

            if (swapFromInputVal > withdrawableBalance) {
              return;
            } else {
              let ex = await fetch(
                `../../api/convert/sellusd?id=${
                  swapFromBtn.dataset.id
                }&ex=${parseFloat(swapFromInputVal)}`
              );
              let exc = await ex.json();
              const { usd } = exc;
              let data = {
                currencyfrom: swapToBtn.dataset.id,
                amount: parseFloat(swapFromInputVal),
                usd: parseFloat(usd),
                coinTo: swapFromBtn.dataset.id,
                unit: parseFloat(swapToInputVal),
                token: r,
              };
              app.client
                .fetch(`/user/wallet/sell`, "POST", data)
                .then((dxb) => {
                  if (dxb.isSuccess) {
                    app.query(".sell-comp-load").classList.remove("active");
                    app.query(".sell-comp-bdy").classList.add("active");
                  } else {
                    return;
                  }
                });
            }
          });
      }
    }
  });
});

app.query(".conttt").addEventListener("click", (e) => {
  e.preventDefault();
  app.query(".sell-validate").classList.remove("active");
  app.query("#swapFromInput").value = "";
  app.query("#swapToInput").value = "";
  app.query(".sell-validate-cnt").classList.add("active");
  app.query(".sell-comp").classList.remove("active");
});