window.addEventListener("load", () => {
  //   const mainData = [];
  //   let tr = "";
  //   const coinDatas = async () => {
  //     const res = await fetch(
  //       "https://api.coingecko.com/api/v3/simple/price?ids=bitcoin%2Cbinancecoin%2Ctether%2Cethereum%2Cdogecoin%2Clitecoin&vs_currencies=usd&include_market_cap=true&include_24hr_vol=true&include_24hr_change=true&include_last_updated_at=true"
  //     );
  //     const data = await res.json();
  //     for (const key of Object.keys(data)) {
  //       let checker = mainData.some((data) => data);
  //       if (checker) {
  //         var foundIndex = mainData.findIndex((x) => x.key == data.key);
  //         mainData[foundIndex] = data;
  //       } else {
  //         mainData.push({ key: key, ...data[key] });
  //       }
  //       console.log(checker);
  //     }
  //     //looping each arr
  //     mainData.sort((a, b) => parseFloat(b.usd) - parseFloat(a.usd));
  //     mainData.forEach((data) => {
  //       switch (data.key) {
  //         case "bitcoin":
  //           data.assetimg =
  //             "public/assets/images/coins-logo/bitcoin-btc-logo.png";
  //           data.abb = "BTC";
  //           break;
  //         case "ethereum":
  //           data.assetimg = "public/assets/images/coins-logo/ehter.png";
  //           data.abb = "ETH";
  //           break;
  //         case "binancecoin":
  //           data.assetimg =
  //             "public/assets/images/coins-logo/binance-smart-chain.png";
  //           data.abb = "BNB";
  //           break;
  //         case "tether":
  //           data.assetimg = "public/assets/images/coins-logo/tet her.png";
  //           data.abb = "USDT";
  //           break;
  //         case "litecoin":
  //           data.assetimg =
  //             "public/assets/images/coins-logo/litecoin-ltc-logo.png";
  //           data.abb = "LTC";
  //           break;
  //         case "dogecoin":
  //           data.assetimg =
  //             "public/assets/images/coins-logo/dogecoin-doge-logo.png";
  //           data.abb = "DOGE";
  //           break;
  //       }
  //       tr += `<tr>
  //                 <td class="nmnm">
  //                   <div class="coin-nm">
  //                     <div class="coin-nm-img">
  //                       <img
  //                         src=${data.assetimg}
  //                         alt=""
  //                       />
  //                     </div>
  //                     <div class="coin-nm-det">
  //                       <h3>
  //                         ${data.key}
  //                         <span>${data.abb}</span>
  //                       </h3>
  //                     </div>
  //                   </div>
  //                 </td>
  //                 <td>
  //                   <div class="cn-prc"><h3>${data.usd.toLocaleString("en-US", {
  //                     style: "currency",
  //                     currency: "USD",
  //                   })}</h3></div>
  //                 </td>
  //                 <td class="${
  //                   data.usd_24h_change < 0 ? "chg" : "chg-neg"
  //                 }"><h3>${data.usd_24h_change.toFixed(2)}%</h3></td>
  //                 <td>
  //                   <a href="#" class="trd-btn" data-id="${data.key}">BUY</a>
  //                 </td>
  //               </tr>`;
  //     });
  //     console.log(mainData);
  //     // console.log(tr);
  //     document.querySelector(".t-body").innerHTML = tr;
  //   };
  //   coinDatas();
  //   //   setInterval(coinDatas, 2000);
  async function getapi() {
    let str = "";
    const response = await fetch(
      "https://api.coingecko.com/api/v3/simple/price?ids=bitcoin%2Cbinancecoin%2Ctether%2Cethereum&vs_currencies=usd&include_market_cap=true&include_24hr_vol=true&include_24hr_change=true&include_last_updated_at=true"
    );
    var obj = await response.json();

    // obj.dogecoin.image =
    //   "https://cryptologos.cc/logos/dogecoin-doge-logo.png?v=022";
    // obj.dogecoin.abbrv = "DOGE";

    // obj.litecoin.image =
    //   "https://cryptologos.cc/logos/litecoin-ltc-logo.png?v=022";
    // obj.litecoin.abbrv = "LTE";

    obj.bitcoin.image =
      "https://cryptologos.cc/logos/bitcoin-btc-logo.png?v=022";
    obj.bitcoin.abbrv = "BTC";

    obj.ethereum.image =
      "https://cryptologos.cc/logos/ethereum-eth-logo.png?v=022";
    obj.ethereum.abbrv = "ETH";

    obj.binancecoin.image =
      "https://cryptologos.cc/logos/bnb-bnb-logo.png?v=022";
    obj.binancecoin.abbrv = "BNB";

    obj.tether.image =
      "https://cryptologos.cc/logos/tether-usdt-logo.png?v=022";
    obj.tether.abbrv = "USDT";

    for (const [key, value] of Object.entries(obj)) {
      str += feedAzerData(
        value.image,
        key,
        value.abbrv,
        value.usd.toLocaleString("en-US", {
          style: "currency",
          currency: "USD",
        }),
        value.usd_24h_change
      );
    }
    document.querySelector(".t-body").innerHTML = str;
  }

  getapi();
  setInterval(getapi, 4000);

  function feedAzerData(img, key, abbrv, usd, usd_24h_change) {
    return `<tr>
                    <td class="nmnm">
                      <div class="coin-nm">
                        <div class="coin-nm-img">
                          <img
                            src=${img}
                            alt=""
                          />
                        </div>
                        <div class="coin-nm-det">
                          <h3>
                           <span class="web-dip"> ${key}</span>
                            <span class="mob-dip">${abbrv}</span>
                          </h3>
                        </div>
                      </div>
                    </td>
                    <td>
                      <div class="cn-prc ${
                        usd_24h_change < 0 ? "chg" : "chg-neg"
                      }"><h3>${usd}</h3></div>
                    </td>
                    <td class=" chnng ${
                      usd_24h_change < 0 ? "chg" : "chg-neg"
                    }"><h3>${usd_24h_change.toFixed(2)}%</h3></td>
                  </tr>`;
  }
});

window.addEventListener("load", () => {
  const loading = document.querySelectorAll(".loading");

  //GETTING ALL THE CURRENCIES
  const handleCurrencies = async () => {
    const data = async () => {
      let buyCurrencyHtml = "";
      let sellCurrencyHtml = "";

      // GETTING ALL CURRENCIES ARRAY
      const fetchedCurrencies = await getCurrencies();

      fetchedCurrencies.forEach((data) => {
        buyCurrencyHtml += `<div class="curr-sel-ech" data-id = ${data.currency_name}>
        <div class="curr-sel-ech-img">
          <img
            src= ${data.image}
            alt=""
          />
        </div>
        <div class="curr-sel-ech-txt">
          <h4>
            ${data.currency_init}
          </h4>
          <span class="txt">${data.currency_name}</span>
        </div>
                            </div>`;

        sellCurrencyHtml += `<div class="curr-sell-sel-ech" data-id = ${data.currency_name}>
      <div class="coin-sel-ech-img">
        <img
          src= ${data.image}
          alt=""
        />
      </div>
      <div class="coin-sel-ech-txt">
        <h4>
          ${data.currency_init}
        </h4>
        <span>${data.currency_name}</span>
      </div>
      </div>`;
      });
      document.querySelector(".curr-coin").innerHTML = buyCurrencyHtml;
      document.querySelector(".curr-sell-curr").innerHTML = sellCurrencyHtml;
    };

    data().then(() => {
      buyCurrencySetter();
      sellCurrencySetter();
    });
  };

  //GETTING ALL THE COIN
  const handleCoins = async () => {
    let fetchedData = [];
    const searchInput = app.query("#buySearchInput");
    const sellSearchInput = app.query("#sellSearchInput");
    searchOnlyPattern = new RegExp("^[a-zA-Z ]+$");
    let previousValue = "";

    const data = async () => {
      //GETTING ALL THE COIN
      const fetchedCoins = await getCoins();

      for (const [key, value] of Object.entries(fetchedCoins)) {
        fetchedData.push({ key, ...value });
      }
      //FILTER ARRAY WITH SEARCH INPUT

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

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

          sellSearchInput.value = previousValue;

          const searchString = sellSearchInput.value.toLowerCase();

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

          analyseData(filteredCoins);
        };
        sortInput().then(() => sellCoinSetter());
      });
      searchInput.addEventListener("input", (e) => {
        const sortInput = async () => {
          let currentValue = searchInput.value;

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

          searchInput.value = previousValue;

          const searchString = searchInput.value.toLowerCase();

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

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

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

          //LOOPING THROUGH ARRAY AND INPUTING VALUES INTO HTML
          dataArr.forEach((data) => {
            buyCoinHtml += `<div class="coin-sel-ech" data-id = ${data.key} >
            <div class="coin-sel-ech-img">
            <img
                src=${data.img}
                alt=""
              />
            </div>
            <div class="coin-sel-ech-txt">
              <h4 data-test = ${data.key}>
                ${data.key}
                </h4>
              <span>${data.abbrv}</span>
            </div>
            </div>`;
            sellCoinHtml += `<div class="coin-sell-sel-ech" data-id = ${data.key} data-coin=${data.abbrv} >
            <div class="coin-sel-ech-img">
              <img
                src=${data.img}
                alt=""
              />
            </div>
            <div class="coin-sel-ech-txt">
              <h4>
                ${data.key}
              </h4>
              <span>${data.abbrv}</span>
            </div>
          </div>`;
          });

          app.query(".coin-sel-bdy").innerHTML = buyCoinHtml;
          app.query(".sell-coin-sel-bdy").innerHTML = sellCoinHtml;
        } else {
          app.query(".coin-sel-bdy").innerHTML = ` <div class = "notFound">
            <i class="fa-solid fa-magnifying-glass"></i>
            <h3>No match found</h3>
        </div>`;
          app.query(".sell-coin-sel-bdy").innerHTML = ` <div class = "notFound">
            <i class="fa-solid fa-magnifying-glass"></i>
            <h3>No match found</h3>
        </div>`;
        }
      };

      analyseData(fetchedData);
    };

    data().then(() => {
      buyCoinSetter();
      sellCoinSetter();
      // handleMaxSell();
    });
  };

  //SETTING INTIAL CURRENCY BUTTONS
  const initCurrBtn = async () => {
    let buyCurrBtn = "";
    let sellCurrBtn = "";
    let fiatAbbrv = "";

    // GETTING SINGLE CURRENCY
    const fetchedCurrency = await getSingleCurrency("usd");

    fetchedCurrency.forEach((data) => {
      buyCurrBtn += `<button class="curr-btn" data-id = ${data.currency_name}>
      <div class="btn-img">
        <img
          src=${data.image}
          alt=""
          class="shw-img"
        />
      </div>
      <span class="shw-txt">${data.currency_name}</span>
      <i class="fa-solid fa-angle-right"></i>
                    </button>`;

      sellCurrBtn += `<button class="curr-sell-btn" data-id = ${data.currency_name}>
    <div class="btn-img">
      <img
        src=${data.image}
        alt=""
        class="shw-sell-img"
      />
    </div>
    <span class="shw-sell-txt"> ${data.currency_name}</span>
    <i class="fa-solid fa-angle-right"></i>
                    </button>`;

      fiatAbbrv = data.currency_name;
    });

    document.querySelector(".buy-currency-container").innerHTML = buyCurrBtn;
    document.querySelector(".sell-currency-container").innerHTML = sellCurrBtn;
    document.querySelector(".fiat-abb").innerHTML = fiatAbbrv;
    document.querySelector(".sell-curr-abb").innerHTML = fiatAbbrv;
  };

  //SETTING INITIAL COIN BUTTONS
  const initCoinBtn = async () => {
    let buyCoinnBtn = "";
    let sellCoinnBtn = "";
    let coinVal = 0;
    let sellCoinVal = 0;
    let initAbb = "";

    const fetchedCoin = await getSingleCoin("bitcoin");

    for (const [key, value] of Object.entries(fetchedCoin)) {
      buyCoinnBtn += buyCoinBtn(value.img, key, value.abbrv);
      sellCoinnBtn += sellCoinData(value.img, key, value.abbrv);
      coinVal += initBuyCoinvalue(value.usd);
      sellCoinVal += initSellCoinvalue(value.usd);
      initAbb = value.abbrv;
    }
    document.querySelector(".buy-coin-container").innerHTML = buyCoinnBtn;
    document.querySelector(".sell-coin-container").innerHTML = sellCoinnBtn;
    document.querySelector(".fiat-val").innerHTML = coinVal.toLocaleString();
    document.querySelector(".sell-fial-val").innerHTML =
      sellCoinVal.toLocaleString();
    document.querySelector(".coin-abb").innerHTML = `= 1 ${initAbb}`;
    document.querySelector(".sell-coin-abb").innerHTML = `1 ${initAbb} =`;

    function buyCoinBtn(img, key, abbrv) {
      return `<button class="coin-btn" data-id = ${key}>
      <div class="btn-img">
        <img
          src= ${img}
          alt=""
          class="coo-img"
        />
      </div>
      <span class="coin-txt">${abbrv}</span>
      <i class="fa-solid fa-angle-right"></i>
    </button>`;
    }
    function sellCoinData(img, key, abbrv) {
      return `<button class="coin-sell-btn" data-id = ${key} data-coin = ${abbrv}>
      <div class="btn-img">
        <img src=${img} alt="" class="sel-coo-img" />
      </div>
      <span class="coin-sell-txt">${abbrv}</span>
      <i class="fa-solid fa-angle-right"></i>
    </button>`;
    }
    function initBuyCoinvalue(usd) {
      return usd;
    }
    function initSellCoinvalue(usd) {
      return usd;
    }
  };

  initCoinBtn();
  initCurrBtn();
  setInterval(() => {
    //Loading effect to await Fecth
    loading.forEach((loading) => loading.classList.add("active"));
    handleCurrencies();
  }, 5000);
  handleCoins();
  inputChanger();
});
/*

=========CHANGING INPUTS VALUE DYNAMICALLY=======


*/
let buyValTrue = false;
let sellValTrue = false;

const inputChanger = () => {
  const currInput = document.querySelector(".currInput");
  const coinInput = document.querySelector(".coinInput");
  const sellCurrInput = document.querySelector(".sellCurrInput");
  const sellCoinInput = document.querySelector(".sellCoinInput");

  /*

//DEALING WITH INPUT OF BUY CURRENCY

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

  let currPreviousValue = "";

  currInput.addEventListener("input", (e) => {
    const currBtn = document.querySelector(".curr-btn");
    const coinBtn = document.querySelector(".coin-btn");
    if (!currInput.value == "") {
      let currentValue = currInput.value;
      if (
        e.inputType.includes("delete") ||
        currInputPattern.test(currentValue)
      ) {
        currPreviousValue = currentValue;
      }
      currInput.value = currPreviousValue;
      coinInput.value = currInput.value;

      // let currnum = parseInt(currInput.value);

      const showCoinValue = async () => {
        const buyIntErr = document.querySelector(".buy-int-err");
        const limitVal = document.querySelector(".limitVal");
        const limitAbb = document.querySelector(".limitAbb");
        const buyBtn = document.querySelector(".buy-btn");
        otherVal = 0;
        coinVal = 0;
        coinArr = [];

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

        //Getting single coing object
        const fetchedCoin = await getSingleCoin(coinBtn.dataset.id);
        console.log(fetchedCoin);
        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;
        });
        coinInput.value = (currInput.value / (otherVal * coinVal))
          .toFixed(8)
          .toLocaleString();
        if (currInput.value < otherVal * 1) {
          buyIntErr.classList.add("active");
          limitVal.innerHTML = otherVal * 1;
          buyBtn.disabled = true;
        } else {
          buyIntErr.classList.remove("active");
          buyValTrue = true;
          buyBtn.removeAttribute("disabled");
        }
      };
      showCoinValue();
    } else {
      coinInput.value = "";
      document.querySelector(".buy-int-err").classList.remove("active");
    }
  });
  /*

//DEALING WITH INPUT OF BUY COIN

*/
  coinInputPattern = new RegExp("^[0-9.]+$");

  let coinPreviousValue = "";

  coinInput.addEventListener("input", (e) => {
    const currBtn = document.querySelector(".curr-btn");
    const coinBtn = document.querySelector(".coin-btn");
    const buyIntErr = document.querySelector(".buy-int-err");
    const buyBtn = document.querySelector(".buy-btn");

    if (!coinInput.value == "") {
      let currentValue = coinInput.value;
      if (
        e.inputType.includes("delete") ||
        coinInputPattern.test(currentValue)
      ) {
        coinPreviousValue = currentValue;
      }
      coinInput.value = coinPreviousValue;
      currInput.value = coinInput.value;

      // let currnum = parseInt(currInput.value);

      const showCoinValue = async () => {
        const limitVal = document.querySelector(".limitVal");
        const limitAbb = document.querySelector(".limitAbb");
        const buyIntErr = document.querySelector(".buy-int-err");
        const buyBtn = document.querySelector(".buy-btn");
        otherVal = 0;
        coinVal = 0;
        coinArr = [];

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

        //Getting single coin object
        const fetchedCoin = await getSingleCoin(coinBtn.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;
        });
        currInput.value = coinInput.value * (otherVal * coinVal); //.toLocaleString();
        if (currInput.value < otherVal * 1) {
          buyIntErr.classList.add("active");
          limitVal.innerHTML = otherVal * 1;
          buyBtn.disabled = true;
        } else {
          buyIntErr.classList.remove("active");
          buyValTrue = true;
          buyBtn.removeAttribute("disabled");
        }
      };
      showCoinValue();
    } else {
      currInput.value = "";
      document.querySelector(".buy-int-err").classList.remove("active");
    }
  });

  /*

//DEALING WITH INPUT OF SELL CURRENCY

*/
  sellCurrInputPattern = new RegExp("^[0-9.]+$");

  let SellCurrPreviousValue = "";

  sellCurrInput.addEventListener("input", (e) => {
    const currSellBtn = document.querySelector(".curr-sell-btn");
    const coinSellBtn = document.querySelector(".coin-sell-btn");
    if (!sellCurrInput.value == "") {
      let currentValue = sellCurrInput.value;
      if (
        e.inputType.includes("delete") ||
        currInputPattern.test(currentValue)
      ) {
        SellCurrPreviousValue = currentValue;
      }
      sellCurrInput.value = SellCurrPreviousValue;
      sellCurrInput.value = sellCurrInput.value;

      // let currnum = parseInt(currInput.value);

      const showCoinValue = async () => {
        const sellIntErr = document.querySelector(".sell-int-err");
        const sellLimitVal = document.querySelector(".sellLimitVal");
        const sellLimitAbb = document.querySelector(".sellLimitAbb");
        const sellBtn = document.querySelector(".sell-btn");
        otherVal = 0;
        coinVal = 0;
        coinArr = [];

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

        //Getting single coin object
        const fetchedCoin = await getSingleCoin(coinSellBtn.dataset.id);

        fetchedCurrency.forEach((data) => {
          otherVal = data.buy_rate;
          sellLimitAbb.innerHTML = data.currency_name.toUpperCase();
        });

        for (const key of Object.keys(fetchedCoin)) {
          coinArr.push({ key: key, ...fetchedCoin[key] });
        }
        coinArr.forEach((data) => {
          coinVal = data.usd;
        });
        sellCoinInput.value = (sellCurrInput.value / (otherVal * coinVal))
          .toFixed(8)
          .toLocaleString();
        if (sellCurrInput.value < otherVal * 1) {
          sellIntErr.classList.add("active");
          sellLimitVal.innerHTML = otherVal * 1;
          sellBtn.disabled = true;
        } else {
          sellIntErr.classList.remove("active");
          sellValTrue = true;
          sellBtn.removeAttribute("disabled");
        }
      };
      showCoinValue();
    } else {
      sellCoinInput.value = "";
      document.querySelector(".sell-int-err").classList.remove("active");
    }
  });

  /*

//DEALING WITH INPUT FOR SELL COIN

*/

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

  let sellCoinPreviousValue = "";

  sellCoinInput.addEventListener("input", (e) => {
    const currSellBtn = document.querySelector(".curr-sell-btn");
    const coinSellBtn = document.querySelector(".coin-sell-btn");
    if (!sellCoinInput.value == "") {
      let currentValue = sellCoinInput.value;
      if (
        e.inputType.includes("delete") ||
        sellCoinInputPattern.test(currentValue)
      ) {
        sellCoinPreviousValue = currentValue;
      }
      sellCoinInput.value = sellCoinPreviousValue;
      sellCurrInput.value = sellCoinInput.value;

      // let currnum = parseInt(currInput.value);

      const showCoinValue = async () => {
        const sellIntErr = document.querySelector(".sell-int-err");
        const sellLimitVal = document.querySelector(".sellLimitVal");
        const sellLimitAbb = document.querySelector(".sellLimitAbb");
        const sellBtn = document.querySelector(".sell-btn");
        otherVal = 0;
        coinVal = 0;
        coinArr = [];

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

        //Getting single coin object
        const fetchedCoin = await getSingleCoin(coinSellBtn.dataset.id);

        fetchedCurrency.forEach((data) => {
          console.log(data);
          otherVal = data.buy_rate;
          sellLimitAbb.innerHTML = data.currency_name.toUpperCase();
        });

        for (const key of Object.keys(fetchedCoin)) {
          coinArr.push({ key: key, ...fetchedCoin[key] });
        }
        coinArr.forEach((data) => {
          coinVal = data.usd;
        });
        sellCurrInput.value = sellCoinInput.value * (otherVal * coinVal); //.toLocaleString();
        if (sellCurrInput.value < otherVal * 1) {
          sellIntErr.classList.add("active");
          sellLimitVal.innerHTML = otherVal * 1;
          sellBtn.disabled = true;
        } else {
          sellIntErr.classList.remove("active");
          sellValTrue = true;
          sellBtn.removeAttribute("disabled");
        }
      };
      showCoinValue();
    } else {
      sellCurrInput.value = "";
      document.querySelector(".sell-int-err").classList.remove("active");
    }
  });
};

/*

//DEALING WITH GETTING MAX OF COIN

*/
// const handleMaxSell = () => {
//   const maxSell = app.query(".maxSell");
//   const coinSellBtn = app.query(".coin-sell-btn");
//   const currSellBtn = app.query(".curr-sell-btn");
//   let totBalance = 0;
//   coinVal = 0;

//   maxSell.addEventListener("click", () => {
//     app.getCookie("azer_token", (e, r) => {
//       maxSell.textContent = "loading...";
//       if (e) {
//         app.client
//           .fetch(`./user/wallet/${coinSellBtn.dataset.coin}`, "POST", {
//             token: r,
//           })
//           .then((dx) => {
//             console.log(dx);
//             let coinerDataId =
//               coinSellBtn.dataset.id === "tether"
//                 ? "usdt"
//                 : coinSellBtn.dataset.id === "binancecoin"
//                 ? "bnb"
//                 : coinSellBtn.dataset.id;
//             // console.log(coinSellBtn.dataset.id);
//             // totBalance = dx[coinSellBtn.dataset.id].totalAvailableBalance;
//             // coinVal = dx[coinSellBtn.dataset.id].coinPrice;
//             totBalance = dx[coinerDataId].totalAvailableBalance;
//             coinVal = dx[coinerDataId].coinPrice;
//           })
//           .then(async () => {
//             maxSell.textContent = "MAX";
//             app.query(".sellCoinInput").value = totBalance;
//             const sellIntErr = app.query(".sell-int-err");
//             const sellLimitVal = app.query(".sellLimitVal");
//             const sellLimitAbb = app.query(".sellLimitAbb");
//             const sellBtn = app.query(".sell-btn");
//             const sellCurrInput = app.query(".sellCurrInput");
//             const sellCoinInput = app.query(".sellCoinInput");
//             otherVal = 0;

//             coinArr = [];

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

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

//             coinArr.forEach((data) => {
//               coinVal = data.usd;
//             });

//             sellCurrInput.value = (
//               sellCoinInput.value *
//               (otherVal * coinVal)
//             ).toFixed(2); //.toLocaleString();
//             if (sellCurrInput.value < otherVal * 1) {
//               sellIntErr.classList.add("active");
//               sellLimitVal.innerHTML = otherVal * 1;
//               sellBtn.disabled = true;
//             } else {
//               sellIntErr.classList.remove("active");
//               sellValTrue = true;
//               sellBtn.removeAttribute("disabled");
//             }
//           });
//       } else {
//         app.redirectUrl(`/user/login`);
//         maxSell.textContent = "MAX";
//         // app.redirectUrl(`../dashio/home?azer_token=${r}`);
//       }
//     });
//   });
// };

/*







*/
//SETTING BUY CURRENCY

const buyCurrencySetter = () => {
  const currBtn = document.querySelector(".curr-btn");
  const currSelect = document.querySelector(".curr-select");
  const currSelectnt = document.querySelector(".curr-sel-cnt");
  const currSelEch = document.querySelectorAll(".curr-sel-ech");
  const shwImg = document.querySelector(".shw-img");
  const shwTxt = document.querySelector(".shw-txt");
  const currX = document.querySelector(".curr-x");
  const fiatAbb = document.querySelector(".fiat-abb");

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

  currSelEch.forEach((newCoin) => {
    let newImg;
    let newDet;

    newCoin.addEventListener("click", function () {
      const buyIntErr = document.querySelector(".buy-int-err");
      const currInput = document.querySelector(".currInput");
      const coinInput = document.querySelector(".coinInput");
      const coinBtn = document.querySelector(".coin-btn");
      newImg = newCoin.children[0].children[0].getAttribute("src");
      newDet = newCoin.children[1].children[1];
      currBtn.children[0].innerHtml = newImg;
      shwImg.src = newImg;
      shwTxt.textContent = newDet.textContent;
      currBtn.dataset.id = newCoin.dataset.id;
      buyCurrBtnValue = currBtn.dataset.id;

      const changeFiatValue = async () => {
        otherVal = 0;
        coinVal = 0;
        coinArr = [];
        //Getting single currency array
        const fetchedCurrency = await getSingleCurrency(currBtn.dataset.id);

        //Getting single coin object
        const fetchedCoin = await getSingleCoin(coinBtn.dataset.id);

        fetchedCurrency.forEach((data) => {
          otherVal = data.currency_rate_ngn;
        });
        // const data2 = await res2.json();
        for (const key of Object.keys(fetchedCoin)) {
          coinArr.push({ key: key, ...fetchedCoin[key] });
        }
        coinArr.forEach((data) => {
          coinVal = data.usd;
        });
        document.querySelector(".fiat-val").innerHTML = ` ${(
          otherVal * coinVal
        ).toLocaleString()}`;
        // coinInput.value = ` ${(
        //   parseInt(currInput.value) /
        //   (otherVal * coinVal)
        // ).toLocaleString()}`;
      };
      currInput.value = "";
      coinInput.value = "";
      buyIntErr.classList.remove("active");
      changeFiatValue();
      fiatAbb.textContent = newDet.textContent;
      currSelect.classList.remove("active");
    });
  });

  currX.addEventListener("click", () => {
    currSelect.classList.remove("active");
  });

  currSelect.addEventListener("click", (e) => {
    var isClickInsideElement = currSelectnt.contains(e.target);
    if (!isClickInsideElement) {
      currSelect.classList.remove("active");
    }
  });
};

//SETTING BUY COIN

const buyCoinSetter = () => {
  const coinBtn = document.querySelector(".coin-btn");
  const coinSelect = document.querySelector(".coin-select");
  const coinSelectCnt = document.querySelector(".coin-sel-cnt");
  const coinSelEch = document.querySelectorAll(".coin-sel-ech");
  const cooImg = document.querySelector(".coo-img");
  const coinTxt = document.querySelector(".coin-txt");
  const coinX = document.querySelector(".coin-x");
  const coinAbb = document.querySelector(".coin-abb");

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

  coinSelEch.forEach((newCoin) => {
    let newImg;
    let newDet;
    newCoin.addEventListener("click", () => {
      const currBtn = document.querySelector(".curr-btn");
      const currInput = document.querySelector(".currInput");
      const coinInput = document.querySelector(".coinInput");
      const buyIntErr = document.querySelector(".buy-int-err");
      newImg = newCoin.children[0].children[0].getAttribute("src");
      newDet = newCoin.children[1].children[1];
      coinBtn.children[0].innerHtml = newImg;
      cooImg.src = newImg;
      coinTxt.textContent = newDet.textContent;
      coinBtn.dataset.id = newCoin.dataset.id;
      const changeFiatValue = async () => {
        otherVal = 0;
        coinVal = 0;
        coinArr = [];

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

        //Getting single coin object
        const fetchedCoin = await getSingleCoin(coinBtn.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;
        });
        document.querySelector(".fiat-val").innerHTML = ` ${(
          otherVal * coinVal
        ).toLocaleString()}`;
      };
      // currInput.value = ` ${(
      //   parseInt(coinInput.value) *
      //   (otherVal * coinVal)
      // ).toLocaleString()}`;
      currInput.value = "";
      coinInput.value = "";
      buyIntErr.classList.remove("active");
      changeFiatValue();
      coinAbb.textContent = ` = 1 ${newDet.textContent}`;
      coinSelect.classList.remove("active");
    });
  });

  coinX.addEventListener("click", () => {
    coinSelect.classList.remove("active");
  });

  coinSelect.addEventListener("click", (e) => {
    var isClickInsideElement = coinSelectCnt.contains(e.target);
    if (!isClickInsideElement) {
      coinSelect.classList.remove("active");
    }
  });
};

//SETTING SELL COIN

const sellCoinSetter = () => {
  const coinSellBtn = document.querySelector(".coin-sell-btn");
  const coinSellSelect = document.querySelector(".coin-sell-select");
  const coinSellSelectCnt = document.querySelector(".coin-sell-sel-cnt");
  const coinSellSelEch = document.querySelectorAll(".coin-sell-sel-ech");
  const cooSellImg = document.querySelector(".sel-coo-img");
  const coinSellTxt = document.querySelector(".coin-sell-txt");
  const coinsellX = document.querySelector(".coinsellX");
  const sellCoinAbb = document.querySelector(".sell-coin-abb");

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

  coinSellSelEch.forEach((newCoin) => {
    let newImg;
    let newDet;
    newCoin.addEventListener("click", () => {
      const sellCurrInput = document.querySelector(".sellCurrInput");
      const sellCoinInput = document.querySelector(".sellCoinInput");
      const currSellBtn = document.querySelector(".curr-sell-btn");
      const sellIntErr = document.querySelector(".sell-int-err");
      newImg = newCoin.children[0].children[0].getAttribute("src");
      newDet = newCoin.children[1].children[1];
      coinSellBtn.children[0].innerHtml = newImg;
      cooSellImg.src = newImg;
      coinSellTxt.textContent = newDet.textContent;
      coinSellBtn.dataset.id = newCoin.dataset.id;
      coinSellBtn.dataset.coin = newCoin.dataset.coin;

      const changeFiatValue = async () => {
        otherVal = 0;
        coinVal = 0;
        coinArr = [];

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

        //Getting single coin object
        const fetchedCoin = await getSingleCoin(coinSellBtn.dataset.id);

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

        for (const key of Object.keys(fetchedCoin)) {
          coinArr.push({ key: key, ...fetchedCoin[key] });
        }
        coinArr.forEach((data) => {
          coinVal = data.usd;
        });
        document.querySelector(".sell-fial-val").innerHTML = ` ${(
          otherVal * coinVal
        ).toLocaleString()}`;
        // sellCurrInput.value = ` ${(
        //   parseInt(sellCoinInput.value) *
        //   (otherVal * coinVal)
        // ).toLocaleString()}`;
        sellCurrInput.value = "";
        sellCoinInput.value = "";
        sellIntErr.classList.remove("active");
      };
      changeFiatValue();
      sellCoinAbb.textContent = `1 ${newDet.textContent} =`;
      coinSellSelect.classList.remove("active");
    });
  });

  coinsellX.addEventListener("click", () => {
    coinSellSelect.classList.remove("active");
  });

  coinSellSelect.addEventListener("click", (e) => {
    var isClickInsideElement = coinSellSelectCnt.contains(e.target);
    if (!isClickInsideElement) {
      coinSellSelect.classList.remove("active");
    }
  });
};

//SETTING  SELL CURRENCY

const sellCurrencySetter = () => {
  const currSellBtn = document.querySelector(".curr-sell-btn");
  const currSellSelect = document.querySelector(".curr-sell-select");
  const currSellSelectnt = document.querySelector(".curr-sell-sel-cnt");
  const currSellSelEch = document.querySelectorAll(".curr-sell-sel-ech");
  const shwSellImg = document.querySelector(".shw-sell-img");
  const shwSellTxt = document.querySelector(".shw-sell-txt");
  const currSellX = document.querySelector(".curr-sell-x");
  const sellCurrAbb = document.querySelector(".sell-curr-abb");

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

  currSellSelEch.forEach((newCoin) => {
    let newImg;
    let newDet;
    newCoin.addEventListener("click", () => {
      const sellIntErr = document.querySelector(".sell-int-err");
      const sellCurrInput = document.querySelector(".sellCurrInput");
      const sellCoinInput = document.querySelector(".sellCoinInput");
      const coinSellBtn = document.querySelector(".coin-sell-btn");
      newImg = newCoin.children[0].children[0].getAttribute("src");
      newDet = newCoin.children[1].children[1];
      currSellBtn.children[0].innerHtml = newImg;
      shwSellImg.src = newImg;
      shwSellTxt.textContent = newDet.textContent;
      currSellBtn.dataset.id = newCoin.dataset.id;
      const changeFiatValue = async () => {
        otherVal = 0;
        coinVal = 0;
        coinArr = [];

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

        //Getting single coin object
        const fetchedCoin = await getSingleCoin(coinSellBtn.dataset.id);

        fetchedCurrency.forEach((data) => {
          otherVal = data.buy_rate;
        });
        for (const key of Object.keys(fetchedCoin)) {
          coinArr.push({ key: key, ...fetchedCoin[key] });
        }
        coinArr.forEach((data) => {
          coinVal = data.usd;
        });
        document.querySelector(".sell-fial-val").innerHTML = ` ${(
          otherVal * coinVal
        ).toLocaleString()}`;
        // sellCoinInput.value = ` ${(
        //   parseInt(sellCurrInput.value) /
        //   (otherVal * coinVal)
        // ).toLocaleString()}`;
        sellCurrInput.value = "";
        sellCoinInput.value = "";
        sellIntErr.classList.remove("active");
      };
      changeFiatValue();
      sellCurrAbb.textContent = newDet.textContent;
      currSellSelect.classList.remove("active");
    });
  });

  currSellX.addEventListener("click", () => {
    currSellSelect.classList.remove("active");
  });

  currSellSelect.addEventListener("click", (e) => {
    var isClickInsideElement = currSellSelectnt.contains(e.target);
    if (!isClickInsideElement) {
      currSellSelect.classList.remove("active");
    }
  });
};

/*






*/
// DISPLAYING SECTIONS
const secndBtn = document.querySelector(".secondary");
const priBtn = document.querySelector(".primary");
const buySec = document.querySelector(".buy-buy-sec");
const sellSec = document.querySelector(".sel-sell-sec");

secndBtn.addEventListener("click", (e) => {
  e.preventDefault();

  resetSecs();
  sellSec.classList.add("active");
  secndBtn.classList.add("active");
});

priBtn.addEventListener("click", (e) => {
  e.preventDefault();

  resetSecs();
  buySec.classList.add("active");
  priBtn.classList.add("active");
});

function resetSecs() {
  sellSec.classList.remove("active");
  buySec.classList.remove("active");
  secndBtn.classList.remove("active");
  priBtn.classList.remove("active");
}
/*


*/
//INITIATE BUY PAYMENT
const buyForm = document.querySelector(".buy-form");
const buyOrder = [];

buyForm.addEventListener("submit", (e) => {
  e.preventDefault();
  const currBtn = document.querySelector(".curr-btn");
  const coinBtn = app.query(".coin-btn");
  const paySec = app.query(".pay-sec");
  const paySecnt = app.query(".pay-sec-cnt");
  const payClss = app.query(".payClss");
  const bnkTrnfss = app.query(".bnk-trnfss");
  const bnkMode = app.query(".bnk-mode");
  const bnkModeCnt = app.query(".bnk-mode-cnt");
  const bnkMdEch = app.queryAll(".bnk-md-accs-ech");
  const bnkModCls = app.query(".bnkModCls");
  const bnkRetrnn = app.query(".bnk-retrnn");
  const bnkAmnt = document.getElementsByClassName("bnkAmnt");
  const mechSec = app.query(".mech-sec");
  const mechSecCnt = app.query(".mech-sec-cnt");
  const mechCls = app.query(".mechCls");
  const mechRetrnn = app.query(".mechRetrnn");
  const mechAmnt = document.getElementsByClassName("mechAmnt");
  const mechBdyEch = app.queryAll(".mech-bdy-ech");
  const buyBtn = app.query(".buy-btn");
  const btnDepo = app.query(".btn-depo");
  const btnCancelOrder = app.query(".btn-cancel");
  const awaitSec = app.query(".await-sec");
  const awaitHed = app.query(".await-hed-hed");
  const awaitFail = app.query(".await-fail");
  const awaitCls = app.query(".awaitCls");
  const shwSucces = app.query(".shwSucces");
  const succuessTransac = app.query(".suc-transac");
  const addAbbv = app.queryAll(".addAbbv");
  const evaleval = app.query(".evaleval");
  let buyCurrVal = buyForm.currInput.value;
  let buyCoinVal = buyForm.coinInput.value;
  let payFee = 0;
  const enteredCurr = currBtn.dataset.id;
  if (buyValTrue) {
    app.getCookie("azer_token", (e, r) => {
      if (e) {
        //BEGINNING OF SETTING PAYMENT MODAL
        const resetAll = () => {
          paySec.classList.remove("active");
          mechSec.classList.remove("active");
          bnkMode.classList.remove("active");
          bnkMode.classList.remove("active");
          bnkMdEch.forEach((bnkMdEch) => bnkMdEch.classList.remove("active"));
          buyBtn.disabled = true;
        };
        paySec.classList.add("active");
        payClss.addEventListener("click", () => {
          buyBtn.disabled = true;
          paySec.classList.remove("active");
        });
        // paySec.addEventListener("click", (e) => {
        //   if (!paySecnt.contains(e.target)) {
        //     // paySec.classList.remove("active");
        //     resetAll();
        //   }
        // });

        //START BANK TRANSFER TRANSACTION
        bnkTrnfss.addEventListener("click", () => {
          const getSingleCurrency = async () => {
            let res = await fetch("../../api/currency/id?id=ngn");
            let res2 = await fetch(
              `../../api/convert/usd?id=${enteredCurr}&ex=${buyCurrVal}`
            );
            let data = await res.json();
            let data2 = await res2.json();

            const { usd: enterAmountUsd } = data2;
            console.log(data2);
            switch (enteredCurr) {
              case "ngn":
                payFee = buyCurrVal;
                break;

              case "usd":
                payFee = data[0].currency_rate_ngn * enterAmountUsd;
                break;

              case "eur":
                payFee = data[0].currency_rate_ngn * enterAmountUsd;
                break;

              case "ghc":
                payFee = data[0].currency_rate_ngn * enterAmountUsd;
                break;

              default:
                break;
            }

            // console.log(data[0].currency_rate_ngn, payFee);
            //Getting limit for additional fee
            const evalCheck = data[0].currency_rate_ngn * 10;

            //Checking if the entered price is below limit
            let addCheck = false;
            if (payFee < evalCheck) {
              payFee = Number(payFee) + 200;
              addCheck = true;
            }

            //Setting the variables into HTML
            mechAmnt.innerHTML = payFee.toLocaleString();
            bnkAmnt.innerHTML = payFee.toLocaleString();
            evaleval.innerHTML = evalCheck;
            addAbbv.forEach((addAbbv) => {
              addAbbv.innerHTML = data[0].currency_name;
            });

            app.getCookie("azer_token", (e, r) => {
              let dataTable = "";

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

              app.client
                .fetch("../../api/merchants", "POST", { token: r })
                .then((x) => {
                  x.data.sort((a, b) => b.m_id - a.m_id);
                  if (x.data.length > 0) {
                    x.data.forEach((e) => {
                      let completion =
                        (e.total_order / e.completed_order) * (100 / 1);
                      dataTable += `<div class="mech-bdy-ech" data-key="${
                        e.keychain
                      }">
                  <div class="mech-ech-lft">
                    <div class="mech-lft-top">
                      <i class="fa-solid fa-money-bill-wave"></i>
                      <h3>
                        You'll make a transfer of NGN
                        <span class="mechAmnt">${payFee.toLocaleString()}</span>
                        <span class= "dispAdd ${
                          addCheck && "active"
                        }">(NGN 200)</span>
                        
                      </h3>
                    </div>
                    <div class="mech-lft-mid">
                      <div>
                        <i class="fa-solid fa-arrow-up-short-wide"></i>
                        <p>${e.total_order} orders</p>
                      </div>
                      <div>
                        <i class="fa-solid fa-clock"></i>
                        <p>${completion.toFixed(1)}% completion</p>
                      </div>
                    </div>
                    <div class="mech-lft-lst">
                      <div>
                        <span>a</span>
                        <p>Accomplished by ${e.user_name} ( ${
                        e.bank_name
                      } )<i class="fa fa-check-circle-o"></i> </p>
                      </div>
                    </div>
                  </div>
                  <div class="mech-ech-rght">
                    <i class="fa-solid fa-angle-right"></i>
                  </div>
                </div>`;
                    });

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

                    app.query(".bnkAmnt").innerHTML = payFee.toLocaleString();

                    let count = 0;
                    let transacKeychain = null;
                    let chainkey = null;
                    app.query(".bnkAmnt").innerHTML = payFee.toLocaleString();

                    //Setting Merchants Selection
                    app.queryAll(".mech-bdy-ech").forEach((mechBdyEch, i) => {
                      mechBdyEch.addEventListener("click", (e) => {
                        app.client.get(
                          `../../api/merchants?key=${mechBdyEch.dataset.key}`,
                          (a) => {
                            count++;
                            app.query(".bank_name").innerHTML =
                              a.data[0].bank_name;
                            app.query(".bank_acc_num").innerHTML =
                              a.data[0].bank_account_number;
                            app.query(".bank_acc_name").innerHTML =
                              a.data[0].bank_account_name;
                            resetAll();
                            app.query(".dhdhdj").classList.add("active");
                            bnkMode.classList.add("active");

                            let dataObj = {
                              ngn: payFee.toLocaleString(),
                              usd: buyCurrVal,
                              currency: currBtn.dataset.id,
                              coin: coinBtn.dataset.id,
                              unit: buyCoinVal,
                              type: "buy",
                              network: null,
                              payMethod: "bank_tranfer",
                              merchantKeychain: a.data[0].keychain,
                              transacKeychain: transacKeychain,
                              token: r,
                            };

                            app.client
                              .fetch(
                                "../../user/bank/transfer",
                                "POST",
                                dataObj
                              )
                              .then((x) => {
                                app.query(".bank_remark").innerHTML =
                                  x.data.reference;
                                transacKeychain = x.data.keychain;
                                chainkey = x.data.keychain;
                              });
                          }
                        );
                        // Closing with close icon

                        // SETTING AWAITING SECTION

                        const resetAwait = () => {
                          awaitSec.classList.add("active");
                          awaitHed.classList.add("active");
                          awaitFail.classList.remove("active");
                          bnkMode.classList.remove("active");
                        };

                        btnDepo.addEventListener("click", (e) => {
                          e.preventDefault();
                          resetAwait();

                          let Obj = {
                            token: r,
                            keychain: chainkey,
                          };

                          app.client
                            .fetch("../../user/bank/updatestatus", "POST", Obj)
                            .then((xt) => {
                              console.log(xt);
                            });

                          //SETTING THE COUNTDOWN
                          const startingMinutes = 17;
                          let time = startingMinutes * 60;

                          const countDownEl =
                            document.getElementById("countdown");

                          const startCountdown = setInterval(
                            updateCountdown,
                            1000
                          );

                          function updateCountdown() {
                            const minutes = Math.floor(time / 60);
                            let seconds = time % 60;

                            seconds = seconds < 10 ? "0" + seconds : seconds;
                            countDownEl.innerHTML = `<span class = ${
                              seconds > 30 ? "cds" : "cdss"
                            }>${minutes}:${seconds}</span>`;
                            time--;

                            if (minutes == 0 && seconds == 0) {
                              awaitHed.classList.remove("active");
                              awaitFail.classList.add("active");
                              clearInterval(startCountdown);
                            }

                            app.client
                              .fetch("../../user/bank/transaction", "POST", Obj)
                              .then((xm) => {
                                if (xm.isSuccess) {
                                  if (xm.ret[0].status === "received") {
                                    awaitSec.classList.remove("active");
                                    succuessTransac.classList.add("active");
                                    clearInterval(startCountdown);

                                    setTimeout(() => {
                                      succuessTransac.classList.remove(
                                        "active"
                                      );
                                    }, 8000);

                                    app.redirectUrl("./wallet/overview");
                                  }
                                } else {
                                  app.client.sweetAlertE(
                                    xm.icon,
                                    xm.message,
                                    xm.title
                                  );
                                }
                              });
                          }
                          awaitCls.addEventListener("click", () => {
                            awaitSec.classList.remove("active");
                            clearInterval(startCountdown);
                          });

                          // DISPLAY SUCCESFUL TRANSACTION MESSAGE
                          // shwSucces.addEventListener("click", (e) => {
                          //   e.preventDefault();

                          // });
                        });

                        app.client.get(
                          `../../api/merchants?key=${mechBdyEch.dataset.key}`,
                          (a) => {
                            // bnkMdEch.forEach((bnkMdEch, x) => {
                            //   if (i === x) {
                            app.query(".bank_name").innerHTML =
                              a.data[0].bank_name;
                            app.query(".bank_acc_num").innerHTML =
                              a.data[0].bank_account_number;
                            app.query(".bank_acc_name").innerHTML =
                              a.data[0].bank_account_name;
                            resetAll();
                            app.query(".dhdhdj").classList.add("active");
                            bnkMode.classList.add("active");
                            //   }
                            // });
                          }
                        );
                        // Closing with close icon
                      });
                    });
                  } else {
                    dataTable += `
                  <center>
                    <tr>
                      <td>
                        <div class="td-content product-brand text-primary">
                          You have no payment Method
                        </div>
                      </td>
                    </tr> 
                  </center>`;

                    app.query(".merchant").innerHTML = dataTable;
                  }
                });
            });
          };
          getSingleCurrency();
          mechSec.classList.add("active");
          paySec.classList.remove("active");

          mechCls.addEventListener("click", () => resetAll());
          bnkModCls.addEventListener("click", () => {
            resetAll();
          });

          //Closing with modals
          // mechSec.addEventListener("click", (e) => {
          //   if (!mechSecCnt.contains(e.target)) {
          //     resetAll();
          //   }
          // });
          // bnkMode.addEventListener("click", (e) => {
          //   if (!bnkModeCnt.contains(e.target)) {
          //     resetAll();
          //   }
          // });

          //Back arrow functions
          mechRetrnn.addEventListener("click", () => {
            resetAll();
            paySec.classList.add("active");
          });
          bnkRetrnn.addEventListener("click", () => {
            resetAll();
            mechSec.classList.add("active");
          });
        });

        //END OF SETTING PAYMENT MODAL
        buyForm.currInput.value = "";
        buyForm.coinInput.value = "";
      } else {
        app.redirectUrl(`/user/login`);
      }
    });
  }

  // console.log(buyOrder);
});

//INITIATE SELL PAYMENT
//INITIATE SELL PAYMENT
const sellForm = document.querySelector(".sell-form");
const sellBtn = document.querySelector(".sell-btn");
const sellOrder = [];

// app.client.get("http://localhost/coinazer-dashio/track_io", (e) => {
//   console.log(e);
// });

sellBtn.addEventListener("click", (e) => {
  e.preventDefault();
  console.log("/////CLIKCED");
  const currSellBtn = app.query(".curr-sell-btn");
  const coinSellBtn = app.query(".coin-sell-btn");
  const sellValidate = app.query(".sell-validate");
  const sellValidateCnt = app.query(".sell-validate-cnt");
  const selVldCls = app.query(".selVldCls");
  let sellCurrVal = sellForm.sellCurrInput.value;
  let sellCoinVal = sellForm.sellCoinInput.value;
  const sellCurrImg = app.query(".shw-sell-img").src;
  const sellCurrAbbv = app.query(".shw-sell-txt").textContent;
  const sellCoinAbbv = app.query(".coin-sell-txt").textContent;
  const sellCoinImg = app.query(".sel-coo-img").src;
  coinValUsd = 0;
  coinValue = 0;
  revCoinVal = 0;

  app.getCookie("azer_token", (e, r) => {
    if (e) {
      app.query(".sell-btn").innerHTML = "Initating Transaction...";
      app.client
        .fetch(`/user/wallet/${coinSellBtn.dataset.coin}`, "POST", { token: r })
        .then((dx) => {
          let coinerDataId =
            coinSellBtn.dataset.id === "tether"
              ? "usdt"
              : coinSellBtn.dataset.id === "binancecoin"
              ? "bnb"
              : coinSellBtn.dataset.id;

          if (sellCoinVal > dx[coinerDataId].totalAvailableBalance) {
            // app.query(".sell-btn").disabled = true;
            app.client.sweetAlertE(
              "error",
              "You do not have enough asset to complete transaction"
            );
            app.query(".sell-btn").innerHTML = "Initate Payment";
            // app.query(".limit-int-err").classList.add("active");
            // setTimeout(() => {
            //   app.query(".limit-int-err").classList.remove("active");
            // }, 3000);
            return;
          } else if (sellValTrue) {
            app.query(".sell-btn").innerHTML = "Initate Payment";
            sellValidate.classList.add("active");

            selVldCls.addEventListener("click", () => {
              let sellCurrVal = app.query(".sellCurrInput").value;
              let sellCoinVal = app.query(".sellCoinInput").value;
              app.query(".sellCoinInput").value = "";
              app.query(".sellCurrInput").value = "";

              sellValidate.classList.remove("active");
              app.query(".sell-btn").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/${coinSellBtn.dataset.coin}`, "POST", {
                    token: r,
                  })
                  .then(async (dx) => {
                    let coinerDataId =
                      coinSellBtn.dataset.id === "tether"
                        ? "usdt"
                        : coinSellBtn.dataset.id === "binancecoin"
                        ? "bnb"
                        : coinSellBtn.dataset.id;
                    coinValUsd = dx[coinerDataId].coinPrice;

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

                    fetchedCurrency.forEach((data) => {
                      coinValue = data.buy_rate * 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=${sellCoinImg}
                                                alt=""
                                              />
                                            </div>
                                            <div class="lft-tp-sel-mid-det">
                                              <h2>${sellCoinVal}</h2>
                                            </div>
                                          </div>
                                          <div class="rght-tp-sel-mid">
                                            <h2>${sellCoinAbbv}</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=${sellCurrImg}
                                                alt=""
                                              />
                                            </div>
                                            <div class="lft-tp-sel-mid-det">
                                              <h2>${Number(
                                                sellCurrVal
                                              ).toLocaleString()}</h2>
                                            </div>
                                          </div>
                                          <div class="rght-tp-sel-mid">
                                            <h2>${sellCurrAbbv}</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 ${sellCoinAbbv} = ${coinValue.toFixed(
                      2
                    )} ${sellCurrAbbv}</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 ${sellCurrAbbv} = ${revCoinVal.toFixed(
                      8
                    )} ${sellCoinAbbv}</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(
                                              sellCurrVal
                                            ).toLocaleString()} ${sellCurrAbbv}</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 {
      app.redirectUrl(`/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");
  // e.preventDefault();

  app.getCookie("azer_token", (e, r) => {
    const currSellBtn = app.query(".curr-sell-btn");
    const coinSellBtn = app.query(".coin-sell-btn");
    let sellCurrVal = app.query(".sellCurrInput").value;
    let sellCoinVal = app.query(".sellCoinInput").value;
    if (e) {
      app.client
        .fetch(`/user/wallet/${coinSellBtn.dataset.coin}`, "POST", { token: r })
        .then((dx) => {
          let coinerDataId =
            coinSellBtn.dataset.id === "tether"
              ? "usdt"
              : coinSellBtn.dataset.id === "binancecoin"
              ? "bnb"
              : coinSellBtn.dataset.id;

          if (sellCoinVal > dx[coinerDataId].totalAvailableBalance) {
            return;
          } else {
            app.query(".sell-comp-load").classList.remove("active");
            app.query(".sell-comp-bdy").classList.add("active");

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

            console.log(sellOrder);
          }
        });
    }
  });
});

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