function ramProductsInit() {
  let RAM_ID = "";

  async function init() {
    let id;
    if (
      location.search == "" &&
      (location.href.includes("laptops") || location.href.includes("allinones"))
    ) {
      id = await getallproductsFun();
    } else {
      id = await getProductIdService();
    }
    getRamData(id);
  }

  async function getProductsIds(nameArr) {
    let resData = await API_SERVICES_ACTIONS.getAPIService(
      `apis/v4/bizgaze/integrations/products/getallproducts`,
      true
    );
    if (resData.isError) {
      toasterHelper("error", "Something went wrong!");
      return;
    }

    let res = resData.response;

    res = JSON.parse(res.result);
    let ids = [];

    for (let i = 0; i < nameArr.length; i++) {
      const currName = nameArr[i];
      let id = res.find((item) => {
        if (currName === item.productname) {
          return item.productid;
        }
      });
      if (id) {
        ids.push(id);
      }
    }

    return ids;
  }

  async function getallproductsFun() {
    let laptopStr = ["FYRO Flagship", "Zeno Dualbook", "Zeno Sleekbook"];
    let allInOnesStr = ["AIO Zeno", "AIO Fyro"];

    let name = window.location.href;

    name = name.includes("laptops") ? laptopStr : allInOnesStr;

    const ids = await getProductsIds(name);

    console.log(ids);

    return ids;
  }

  function getProductIdService() {
    return new Promise(async (reslove, reject) => {
      let resData = await API_SERVICES_ACTIONS.getAPIService(
        `apis/v4/bizgaze/integrations/products/getallproducts`,
        true
      );
      if (resData.isError) {
        alert(resData.errorMsg.message);
        return;
      }

      let res = resData.response;

      res = JSON.parse(res.result);

      // console.log(res);

      let searchName = window.location.search.split("?")[1];
      let urlPathName = window.location.pathname;
      let searchTerm = "";
      if (urlPathName.includes("ram")) {
        searchTerm = "RAM ORA";
      } else if (urlPathName.includes("storage")) {
        searchTerm = `SSD ORA`;
      } else {
        searchTerm = searchName.replaceAll("%20", " ");
      }
      let resultItem = [];

      if (searchTerm.toLowerCase() === "zeno") {
        for (let i = 0; i < res.length; i++) {
          if (
            res[i].productname.includes("Zeno Sleekbook") ||
            res[i].productname.includes("Zeno Dualbook")
          ) {
            resultItem.push(res[i]);
          }
        }

        return reslove(resultItem);
      } else if (searchTerm.toLowerCase() === "fyro") {
        for (let i = 0; i < res.length; i++) {
          if (res[i].productname.includes("FYRO Flagship")) {
            resultItem.push(res[i]);
            return reslove(resultItem);
          }
        }
      } else {
        for (let i = 0; i < res.length; i++) {
          if (res[i].productname.includes(searchTerm)) {
            resultItem.push(res[i]);
          }
        }

        return reslove(resultItem);
      }
    });
  }

  async function getRamData(ids) {
    let resData;
    let res;
    let data = [];
    let windowSearch = window.location.href;
    for (let i = 0; i < ids.length; i++) {
      let id = ids[i].productid;
      if (
        windowSearch.includes("laptops") ||
        windowSearch.includes("allinones")
      ) {
        resData = await API_SERVICES_ACTIONS.getAPIService(
          `apis/v4/Bizgaze/integrations/products/getitemwithoutbranch/productid/${id}`,
          true
        );
      } else {
        resData = await API_SERVICES_ACTIONS.getAPIService(
          `apis/v4/bizgaze/integrations/products/itemtagscombination/productid/${id}`,
          true
        );
      }
      if (resData.isError) {
        alert(resData.errorMsg.message);
        return;
      }

      res = resData.response;

      res = JSON.parse(res.result);
      data = [...data, ...res];
    }

    console.log(data);
    let html = "";

    for (let i = 0; i < data.length; i++) {
      console.log(data[i].tagids);
      let tags_id = data[i].tagids;
      let tags_filter = tags_id.includes("106631360000087");
      let tags_filter_2 = tags_id.includes("106631360000088");
      let tags_filter_3 = tags_id.includes("106631360000089");

      if (
        tags_filter == false &&
        tags_filter_2 == false &&
        tags_filter_3 == false
      ) {
        if (data[i].itemname.includes("AIO Fyro - 32")) continue;
        html += getRamCardHTML(data[i]);
      } else {
        let data_name = tags_id.includes("106631360000087");
        let name_id = data[i].tagids.includes("106631360000087");
        if (data_name === true && name_id === true) {
          for (let j = 0; j < data.length; j++) {
            if (j == 0) {
              if (data[j].itemname.includes("AIO Fyro - 32")) continue;
              html += getRamCardHTML(data[i]);
            }
          }
        }
      }
    }
    $(".product_card_section").html(html);
    if (window.location.href.includes("?Zeno")) {
      $(".product_card_section div.ram_card:nth-child(1)").addClass("d-none");
      $(".product_card_section div.ram_card:nth-child(6)").addClass("d-none");
    }
    if (window.location.href.includes("?FYRO")) {
      $(".product_card_section div.ram_card:nth-child(3)").addClass("d-none");
      $(".product_card_section div.ram_card:nth-child(7)").addClass("d-none");
      $(".product_card_section div.ram_card:nth-child(8)").addClass("d-none");
    }
    // $('.ramcard').click(function(e){

    //     let sku = $(e.target).data('itemid');
    //     let itemid = $(e.target).data('itemid');

    //     window.location.href = `/productdetails.html?productId=${RAM_ID}#itemid=${itemid}`

    // })
  }

  function getRamCardHTML({
    itemname,
    pricelist,
    itemid,
    sku,
    itemimageurl,
    productid,
    tagnames,
  }) {
    let img = itemimageurl
      ? imgServerNameBuild(itemimageurl)
      : "./dist/assets/imgs/nophoto.png";
    let tags = itemname.split("-");
    let ramTech = tags[tags.length - 2];
    let tag_name = tagnames.split("|");

    let gb = tags[tags.length - 1];
    const [currencySymbol, amount] = getCurrencySymbol(pricelist);
    let priceAmt = `${currencySymbol} ${amount}`;

    let detailPageName;
    let addSearch = "";
    if (window.location.href.includes("laptops")) {
      detailPageName = "laptopdetails";
      let name = itemname.toLowerCase().includes("zeno") ? "Zeno" : "Fyro";
      addSearch = `?${name}`;
    } else {
      detailPageName = "productdetails";
    }

    let color_name = tag_name[tag_name.length - 1].trim();
    let processor_name1 = tagnames.includes("i7");
    let processor_name2 = tagnames.includes("i5");
    let processor_name3 = tagnames.includes("i3");
    let dul_core = itemname.includes("Zeno Dualbook");

    let processor;
    if (processor_name1 === true) {
      if (dul_core === true) {
        processor = `i7`;
      } else {
        processor = `i5 / i7`;
      }
    } else if (processor_name2 === true) {
      if (dul_core === true) {
        processor = `i7`;
      } else {
        processor = `i5 / i7`;
      }
    } else if (processor_name3 === true) {
      processor = `i3`;
    } else if (itemname.includes("I7") || itemname.includes("i7")) {
      let fyro_data_2 = itemname.includes("RTX 4060");
      if (fyro_data_2 === true) {
        processor = `i5 / i7 / i9`;
      } else {
        processor = `i5 / i7`;
      }
    } else if (itemname.includes("I9") || itemname.includes("i9")) {
      let fyro_data_1 = itemname.includes("RTX 4050");
      let fyro_data_2 = itemname.includes("RTX 4060");
      if (fyro_data_1 === true || fyro_data_2 === true) {
        processor = `i5 / i7 / i9`;
      } else {
        processor = `i9`;
      }
    } else if (itemname.includes("I5") || itemname.includes("i5")) {
      let fyro_data = itemname.includes("RTX 4060");
      if (fyro_data === true) {
        processor = `i5 / i7 / i9`;
      } else {
        processor = `i5 / i7 / i9`;
      }
    }

    let item_color_1;
    let item_color_2;
    let item_color_3;
    let item_color_4;
    if (color_name == "Eucalyptus Green" || color_name == "Desert Brown") {
      item_color_1 = `#5e7975`;
      item_color_2 = `#624839`;
      item_color_3 = `#253746`;
    } else if (color_name == "Deep Sea Blue") {
      item_color_1 = `#5e7975`;
      item_color_2 = `#624839`;
      item_color_3 = `#253746`;
    } else {
      if (color_name.length <= 14) {
        item_color_4 = ``;
      } else {
        item_color_4 = `#0d0a08`;
      }
    }
    debugger;
    return `<div class="col-lg-4 col-md-6 mb-4 col-md-6 ram_card cursor-pointer">
            <div class="card border bg-white rounded-3 p-1 h-100">
            
            <a href="/${detailPageName}.html${addSearch}#productId=${productid}#itemid=${itemid}" class="">
            <img  src="${img}" alt="${itemname}" class="p-5" style="width:350px;height:300px"></a>
                <div class="card-body">
                    <a href="/${detailPageName}.html${addSearch}#productId=${productid}#itemid=${itemid}" class="">
                        <h5 class="card-title satoshi_font mb-0 px-2 text-center font-weight-600">${itemname}</h5>
                        </a>
                </div>
                <hr>
                <ul class="border-0 mb-0 d-flex h-100 justify-content-between px-md-3 px-4 list-group-flush p-0 text-secondary" style="list-style: none;">
                    <li class="processor_name"><img src="../dist/assets/imgs/processor.svg" class="w-20p pe-1"/><span class="pt-1">${
                      processor ? processor : ""
                    }</span></li>
                    <li class="d-flex justify-content-between">
                        <p item_color=${item_color_1} class="colors mb-0 me-1" ${
      item_color_1
        ? `style="width:18px;height:18px;border-radius:0%;background-color:${item_color_1}"`
        : ""
    }></p>
                        <p item_color=${item_color_2} class="mb-0 me-1" ${
      item_color_2
        ? `style="width:18px;height:18px;border-radius:0%;background-color:${item_color_2}"`
        : ""
    }></p>
                        <p item_color=${item_color_3} class="mb-0" ${
      item_color_3
        ? `style="width:18px;height:18px;border-radius:0%;background-color:${item_color_3}"`
        : ""
    }></p>
                        <p item_color=${item_color_4} class="mb-0" ${
      item_color_4
        ? `style="width:18px;height:18px;border-radius:0%;background-color:${item_color_4}"`
        : ""
    }></p>
                    </li>
                </ul>
                <ul class="border-0 d-flex h-100 justify-content-between px-md-3 px-4 list-group-flush p-0 text-secondary" style="list-style: none;">
                   
                    <li class="border-0 py-0">
                        <span class="satoshi_font">
                            <h6><img src="../dist/assets/imgs/laptop-icon.png" class="w-20p pe-1"/>${gb}</h6>
                        </span>
                    </li>
                    <li class="border-0 py-0">
                        <span class="satoshi_font"><h6>${
                          pricelist ? priceAmt : "Coming Soon"
                        }</h6></span>
                    </li>
                </ul>
                <div class="card-body text-center">
                    <a href="/${detailPageName}.html${addSearch}#productId=${productid}#itemid=${itemid}" class="btn bg-white font-1-2 px-5 w-100">Details
                    </a>
                </div>
        
            </div>
        </div>`;

    return `<div class="col-lg-4 col-md-6 mb-4 col-md-6 ram_card cursor-pointer">
        <div class="card border bg-white rounded-3 p-1 h-100">
        
        <a href="/productdetails.html?productId=${RAM_ID}#itemid=${itemid}" class=""><img src="${img}" alt="${itemname}" class="w-100 h-100"></a>
            <div class="card-body">
            <a href="/productdetails.html?productId=${RAM_ID}#itemid=${itemid}" class="">
                <h5 class="card-title satoshi_font mb-0 px-2 text-center font-weight-600">${itemname}</h5>
                </a>
            </div>
            <ul class="border-0 d-flex h-100 justify-content-between px-md-3 px-4 list-group-flush p-0 text-secondary" style="list-style: none;">
                <li class="border-0 py-0">
                    <span class="satoshi_font">  <h6>${gb}</h6> <h6>${ramTech}</h6></span>
                </li>
                <li class="border-0 py-0">
                    <span class="satoshi_font"><h6>${priceAmt}</h6></span>
                </li>
            </ul>
            <div class="card-body text-center">
                <a href="/productdetails.html?productId=${RAM_ID}#itemid=${itemid}" class="btn bg-white font-1-2 px-5 w-100">Details
                </a>
            </div>
    
        </div>
    </div>`;

    //abhi anna design
    return ` 
        
            <!--desktop--->
            <div class="col-sm-4 p-3">
                <div class="product_card_3 shadow ram_card">
                    <div class="card-item-header">
                        <div class="card-header-sub-3"><a class=" py-md-1" href="/productdetails.html?productId=${RAM_ID}#itemid=${itemid}">
                        <img src="${img}" class="w-100 h-100"></a>
                        </div>
                    </div>
                    <div class="card-item-body">
                      <h3 cclass="mb-2"> <a href="/productdetails.html?productId=${RAM_ID}#itemid=${itemid}" class="" >  ${itemname} </a></h3>
                      <hr>
                        <h6>${gb}</h6> <h6>${ramTech}</h6><h6>${priceAmt}</h6>
                        <div class="py-2 card_product_footer">
                            <button   data-sku="${sku}" data-itemid="${itemid}" class="w-100 border-0 ramcard bg-transparent satoshi_font ram_btn" data_name="ORA 8GB DDR4 3200MHz Desktop RAM "  data_version="DDR4" data_device="Desktop" data_gb="8GB"   data_price="2900">Details </button>
                        </div>
                    </div>
                </div>
         </div>
           `;
    return `<div class="col-lg-3 col-md-6 ram_card">
        <div class="card shadow border-0 p-1 h-100">
            <a href="#">
                <img src="../dist/assets/imgs/Navbar/ora_ddr5_laptop.png" class="card-img-top" alt="...">
            </a>
            <div class="card-body">
                <a href="#" class="text-decoration-none text-dark">
                    <h5 class="card-title satoshi_font mb-0">
                        ${itemname}
                    </h5>
                </a>
            </div>
            <ul class="list-group list-group-flush">
                <li class="list-group-item border-0 py-0">
                    <span class="satoshi_font">${gb} ${ramTech}</span>
                </li>
                <li class="list-group-item border-0 py-0">
                    <span class="satoshi_font">3200 Mhz</span>
                </li>
            </ul>
            <div class="card-body d-none">
                <button class="btn--md btn-primary w-100 card-link">
                    <span class="cost currency-symbol">₹</span><span class="cost product-price satoshi_font">${pricelist}</span>
                </button>
            </div>
            <div class="card-body text-center">
                <div  data-sku="${sku}" data-itemid="${itemid}" class="bg-black ramcard btn font-1-2 px-5 text-white w-100 satoshi_font" data_des="Upgrade your laptop with DDR4 Laptop
                    Memory, oering 3200 MHz speed in 8, 16,
                    and 32 GB capacities. Experience enhanced
                    thermal performance, increased longevity,
                    and superior performance with our
                    innovative graphene sticker technology." data_name="ORA 8GB DDR4 3200MHz Laptop RAM ">Details
                </div>
            </div>
        </div>
    </div>`;
  }

  init();
}

ramProductsInit();