new.anwisystems.com/enterprise/assets/js/config_new_1-vijay.js

$(function () {
  // configuration js
  let m2DriveMaxQty = 4;
  let m2DriveSelectedQty = 0;
  // configuration items
  localStorage.setItem("currency", "INR");
  const configCatgories = [
    {
      id: 1,
      title: "barebone",
      maxQty: 1,
    },
    {
      id: 2,
      title: "processor",
      maxQty: 3,
    },
    {
      id: 3,
      title: "memory",
      maxQty: 1,
    },
    {
      id: 4,
      title: "m.2 drive",
      maxQty: 4,
    },
  ];

  const bareboneProducts = [
    {
      id: 1,
      title: `Intel<sup>®</sup> C252 Chipset - 1U - 2x SATA - 1x M.2 - Dual Intel<sup>®</sup> 1-Gigabit Ethernet (RJ45) - 350W Power Supply`,
      qty: 3,
      price: 99,
    },
  ];

  const processorProducts = [
    {
      productcatid: 1,
      productcattitle: `Intel<sup>®</sup> Xeon<sup>®</sup> E-2300 Processor Series`,
      products: [
        {
          id: 1,
          title: `Quad-Core Intel<sup>®</sup> Xeon<sup>®</sup> E-2314 Processor 2.8GHz 8MB
            Cache (65W)`,
          qty: 3,
          price: 99,
        },
        {
          id: 2,
          title: `Quad-Core Intel<sup>®</sup> Xeon<sup>®</sup> E-2334 Processor 3.4GHz 8MB Cache (65W)`,
          qty: 3,
          price: 99,
        },
        {
          id: 3,
          title: `Eight-Core Intel<sup>®</sup> Xeon<sup>®</sup> E-2378 Processor 2.6GHz 16MB Cache (65W)`,
          qty: 3,
          price: 99,
        },
      ],
    },
    {
      productcatid: 2,
      productcattitle: `Intel<sup>®</sup> Xeon<sup>®</sup> E-2300 Processor Series with Intel<sup>®</sup> UHD P750 Graphics`,
      products: [
        {
          id: 1,
          title: `Quad-Core Intel<sup>®</sup> Xeon<sup>®</sup> E-2324G Processor 3.1GHz
            8MB Cache (65W)`,
          qty: 3,
          price: 99,
        },
        {
          id: 2,
          title: `Quad-Core Intel<sup>®</sup> Xeon<sup>®</sup> E-2374G Processor 3.7GHz 8MB Cache (80W)`,
          qty: 2,
          price: 99,
        },
        {
          id: 3,
          title: `Six-Core Intel<sup>®</sup> Xeon<sup>®</sup> E-2356G Processor 3.2GHz 12MB Cache (80W)`,
          qty: 1,
          price: 99,
        },
        {
          id: 4,
          title: `Six-Core Intel<sup>®</sup> Xeon<sup>®</sup> E-2386G Processor 3.5GHz 12MB Cache (95W)`,
          qty: 1,
          price: 99,
        },
      ],
    },
  ];

  const memoryProducts = [
    {
      id: 1,
      title: `16GB PC4-25600 3200MHz DDR4 ECC UDIMM`,
      qty: 2,
      price: 99,
    },
    {
      id: 2,
      title: `32GB PC4-25600 3200MHz DDR4 ECC UDIMM`,
      qty: 2,
      price: 220,
    },
  ];

  const m2driveProducts = [
    {
      productcatid: 1,
      productcattitle: `Kioxia XG6 M.2 PCIe 3.1 x4 NVMe Solid State Drives`,
      products: [
        {
          id: 1,
          title: `256GB Kioxia XG6 M.2 PCIe 3.1 x4 NVMe Solid State 
            Drive`,
          qty: 4,
          price: 99,
        },
        {
          id: 2,
          title: `512GB Kioxia XG6 M.2 PCIe 3.1 x4 NVMe Solid State Drive`,
          qty: 4,
          price: 149,
        },
        {
          id: 3,
          title: `1.0TB Kioxia XG6 M.2 PCIe 3.1 x4 NVMe Solid State Drive`,
          qty: 4,
          price: 269,
        },
      ],
    },
    {
      productcatid: 2,
      productcattitle: `Intel<sup>®</sup> DC P4801X M.2 PCIe 3.0 x4 NVMe Solid State Drives`,
      products: [
        {
          id: 1,
          title: `100GB Intel<sup>®</sup> Optane™ SSD DC P4801X Series M.2 PCIe 3.0 x4 NVMe 
            Solid State Drive`,
          qty: 4,
          price: 99,
        },
        {
          id: 2,
          title: `200GB Intel<sup>®</sup> Optane™ SSD DC P4801X Series M.2 PCIe 
            3.0 x4 NVMe Solid State Drive`,
          qty: 4,
          price: 149,
        },
        {
          id: 3,
          title: `1.0TB Kioxia XG6 M.2 PCIe 3.1 x4 NVMe Solid State Drive`,
          qty: 4,
          price: 269,
        },
      ],
    },
    {
      productcatid: 3,
      productcattitle: `Micron 7400 PRO M.2 PCIe 4.0 x4 NVMe Solid State Drives`,
      products: [
        {
          id: 1,
          title: `480GB Micron 7400 PRO Series M.2 22x80 PCIe 4.0 x4 NVMe Solid 
            State Drive`,
          qty: 4,
          price: 99,
        },
        {
          id: 2,
          title: `960GB Micron 7400 PRO Series M.2 22x80 PCIe 4.0 x4 
            NVMe Solid State Drive`,
          qty: 4,
          price: 149,
        },
        {
          id: 3,
          title: `1.92TB Micron 7400 PRO Series M.2 22x110 PCIe 4.0 x4 NVMe Solid 
            State Drive`,
          qty: 4,
          price: 269,
        },
      ],
    },
  ];

  //Bind Config Categories
  bindConfigurations();
  updateItemsCount();
  // max quantity-progress-bar
  function bindConfigurations() {
    let configCatHtml = "";
    $.each(configCatgories, function (i, cat) {
      const id = cat.id;
      let title = cat.title;
      let qty = cat.maxQty;
      let maxQtyHtml = "";
      if (title == "m.2 drive") {
        title = "m2-drive";
      }
      if (title == "m2-drive" || title == "processor") {
        let quantityHtml = "";
        if (title == "m2-drive") {
          let qtyProgressBarHtml = "";
          for (let i = 0; i < qty; i++) {
            qtyProgressBarHtml += `<span class="sms progress-bar progress-bar-${i}"></span>`;
          }
          quantityHtml = `<span>Quantity:</span><div class="max-qty-wrap ml-15"><div class="d-flex justify-content-between align-items-center"><div class="d-flex flex-column"><div class="qty-progress-bars d-flex align-items-center">${qtyProgressBarHtml}</div><div class="d-flex justify-content-between flex-wrap align-items-center mt-1"><span class="small">Max Quantity: ${qty}</span><div class="small"><span class="selected-qty">0</span>/<span class="max-qty-span">${qty}</span></div></div></div></div></div>`;
        }
        maxQtyHtml = `<div class="text-white p-3 border-radius-custom flex-wrap float-lg-end d-flex align-items-center config-max-quantity">${quantityHtml}</div>`;
      }
      configCatHtml += `<div class="product-config-selector accordion mb-20" id="config-${title}" data-maxqty='${qty}'>
            <div class="config-heading d-flex justify-content-between flex-wrap align-items-center">
              <h5 class="text-white p-3 border-radius-custom text-uppercase">${title}
              </h5>
              ${maxQtyHtml}
            </div>
            <div class="config-content p-0"></div>
          </div>`;
    });
    $("#block-content-main").html(configCatHtml);
    bindAllConfigProducts();
  }
  // appending-html
  function bindAllConfigProducts() {
    bindBareboneAndMemoryProducts("barebone");
    bindBareboneAndMemoryProducts("memory");
    bindProcessorAndM2DriveProducts("processor");
    bindProcessorAndM2DriveProducts("m2-drive");
    bindEventListeners();
  }

  function bindBareboneAndMemoryProducts(cat) {
    let productHtml = "";
    let productsArr = bareboneProducts;
    if (cat == "memory") {
      productsArr = memoryProducts;
    }
    $.each(productsArr, function (i, product) {
      productHtml += `<p class="provide-content product-item">
        <div
          class="name-of-config card-body row justify-content-between py-1 align-items-center config-product-item" data-id='${product.id}' data-cat='${cat}' data-price='${product.price}'>
          <div class="form-check mt-2 col-lg-7" id="form-check">
          <input class="form-check-input product-radio-btn" id="${cat}-radio-btn-${product.id}" type="radio" name="radio-btns" 
            value="${product.title}">
            <label class="form-check-label" for="${cat}-radio-btn-${product.id}">
            <strong>${product.title}</strong>
          </label>
        </div>
          <div class="btn-group config-quantity-btn text-black col-lg-2">
            <select class="form-select fw-bold qty-selector">`;
      for (let i = 0; i <= product.qty; i++) {
        productHtml += `<option value="${i}">Qty: ${i}</option>`;
      }
      productHtml += `</select>
          </div>
          <div class="config-pricing col-lg-2">
          <span class="config-price-span p-2 border-radius-custom"><span>+</span><span class="total-price-amount price-wrap d-flex align-items-center"><span class="currency-symbol">&#8377;</span><span class="product-price">${product.price}</span></span></span> 
          </div>
        </div>
      </p>`;
    });
    $(`#config-${cat} .config-content`).html(productHtml);
    $('.qty-selector option[value="0"]').text("Select");
  }

  function bindProcessorAndM2DriveProducts(cat) {
    let productCatHtml = "";
    let productsArr = processorProducts;
    let accordion = "processorProductAccordion";
    let collapse = "processorProductcollapse";
    let lastSelectDataAttr = "";
    if (cat == "m2-drive") {
      productsArr = m2driveProducts;
      accordion = "m2DriveProductAccordion";
      collapse = "m2DriveProductcollapse";
      lastSelectDataAttr = 'data-lastval="1"';
    }
    $.each(productsArr, function (i, productcat) {
      const productcatid = productcat.productcatid;
      const productcattitle = productcat.productcattitle;
      productCatHtml += `<div class="accordion mt-4 border-radius-custom" id="${accordion}-${productcatid}">
            <div class="accordion-item">
              <h2 class="accordion-header">
                <button class="accordion-button" style="color:#4e4c7d; background-color: #e7e9f4;"
                  type="button" data-bs-toggle="collapse" data-bs-target="#${collapse}-${productcatid}"
                  aria-expanded="true" aria-controls="${collapse}-${productcatid}">
                  <strong>${productcattitle}</strong>
                </button>
              </h2>
              <div id="${collapse}-${productcatid}" class="accordion-collapse collapse show" data-bs-parent="#${accordion}-${productcatid}">
              <div class="accordion-body">`;
      let productHtml = "";

      $.each(productcat.products, function (i, product) {
        productHtml += `
                  <div class="name-of-config row justify-content-between py-1 align-items-center config-product-item" data-id='${
                    product.id
                  }' data-cat='${cat}' data-price='${
          product.price
        }' data-productcatid='${productcatid}'>
                    <div class="form-check mt-2 col-lg-7" id="form-check">
                      ${appendProcessorAndM2DriveInput(
                        cat,
                        product.id,
                        product.title,
                        productcatid
                      )}
                    </div>
                    <div class="btn-group config-quantity-btn text-black col-lg-2">
                      <select class="form-select fw-bold qty-selector" ${lastSelectDataAttr}><option value="0">Select</option>`;
        for (let i = 1; i <= product.qty; i++) {
          productHtml += `<option value="${i}">Qty: ${i}</option>`;
        }
        productHtml += `</select>
                    </div>
                    <div class="config-pricing col-lg-2">
                    <span class="config-price-span p-2 border-radius-custom"><span>+</span><span class="processor-total-price total-price-amount price-wrap d-flex align-items-center"><span class="currency-symbol">&#8377;</span><span class="product-price">${product.price}</span></span> </span> 
                </div>
                  </div>`;
      });
      productCatHtml += productHtml;
      productCatHtml += `</div>
                    </div>
                </div>
              </div>`;
    });
    $(`#config-${cat} .config-content`).html(productCatHtml);
    //$('.qty-selector option[value="0"]').text('Select')
  }

  function appendProcessorAndM2DriveInput(cat, id, title, productcatid = 0) {
    if (cat == "m2-drive") {
      return `<input class="form-check-input product-check-btn" type="checkbox" name="m2Drive-check-btns"
            id="${cat}-check-btn-${productcatid}-${id}" value="${title}" >
          <label class="form-check-label" for="${cat}-check-btn-${productcatid}-${id}">
            <strong>${title}</strong>
          </label>`;
    } else {
      return `<input class="form-check-input product-radio-btn" type="radio" name="processor-radio-btns"
            id="${cat}-radio-btn-${productcatid}-${id}" value="${title}" >
          <label class="form-check-label" for="${cat}-radio-btn-${productcatid}-${id}">
            <strong>${title}</strong>
          </label>`;
    }
  }
  // select and radio-check-btn-section
  function bindEventListeners() {
    var alertBox = `<div class="alert alert-warning alert-dismissible fade show" role="alert">
       <strong>Holy guacamole!</strong> You should check in on some of those fields below.
       <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
     </div>`;
    $(".product-radio-btn").click(function (e) {
      const radioEl = $(this);
      const accordionID = $(this).parents(".accordion").attr("id");
      const parentEl = radioEl.parents(".config-product-item");
      const val = radioEl.val();
      const productCatId = parentEl.attr("data-id");
      const cat = parentEl.attr("data-cat");
      const qty = parseInt(parentEl.find(".qty-selector").val("1"));
      const price = qty * parseInt(parentEl.attr("data-price"));
      const id = parentEl.attr("data-id");
      $(`#config-${cat}`).find(".config-price-span").removeClass("active");
      parentEl.find(".config-price-span").addClass("active");
      bindSelectedProduct(cat, val, qty, price, id, productCatId, accordionID);
      updateItemsCount();
      updateTotalCartPrice();
    });

    $(".qty-selector").change(function () {
      const selectEl = $(this);
      const accordionId = $(this).parents(".accordion").attr("id");
      const parentEl = selectEl.parents(".config-product-item");
      const val = parseInt(selectEl.val());
      const lastSelectedVal = parseInt(selectEl.attr("data-lastval"));
      const price = val * parseFloat(parentEl.attr("data-price")).toFixed(2);
      const cat = parentEl.attr("data-cat");
      const id = parentEl.attr("data-id");
      if (!parentEl.find("input").is(":checked")) {
        parentEl.find("input").trigger("click");
        parentEl.find(".config-price-span").addClass("active");
      }

      const selectedQty = val - lastSelectedVal;
      if (cat == "m2-drive") {
        if (m2DriveMaxQty >= m2DriveSelectedQty + selectedQty) {
          m2DriveSelectedQty += selectedQty;
          selectEl.attr("data-lastval", val);
          m2DriveProgress();
          parentEl.find(".product-price").text(price);
          const selecedSummaryProduct = $(
            `.${cat}-cart-product-${id}[data-accordionid="${accordionId}"]`
          );
          selecedSummaryProduct.find(".summary-total-qty .qty-span").text(val);
          selecedSummaryProduct.find(".product-price").text(price);
          updateTotalCartPrice();
        } else {
          alert("Quantity Max limit reached");
          selectEl.val(lastSelectedVal);
          parentEl.find("input").trigger("click");
          return false;
        }
      } else {
        parentEl.find(".product-price").text(price);
        const selecedSummaryProduct = $(
          `.${cat}-cart-product-${id}[data-accordionid="${accordionId}"]`
        );
        selecedSummaryProduct.find(".summary-total-qty .qty-span").text(val);
        selecedSummaryProduct.find(".product-price").text(price);
        updateTotalCartPrice();
      }
    });

    $(".product-check-btn").click(function () {
      const checkEl = $(this);
      const ElementId = $(this).parents(".accordion").attr("id");
      const parentEl = checkEl.parents(".config-product-item");
      const val = checkEl.val();
      const productCatId = parentEl.attr("data-productcatid");
      const cat = parentEl.attr("data-cat");
      const qtySelectEl = parentEl.find(".qty-selector");
      const qty = parseInt(qtySelectEl.val("1"));
      const price = parentEl.attr("data-price");
      const totalPrice = qty * parseFloat(price).toFixed(2);
      const id = parentEl.attr("data-id");

      if (checkEl.is(":checked")) {
        m2DriveSelectedQty++;
        parentEl.addClass("selected");
      } else {
        m2DriveSelectedQty -= qty;
        qtySelectEl.val("1").attr("data-lastval", "1").trigger("change");
        parentEl.removeClass("selected").find(".product-price").text(price);
      }

      if (m2DriveSelectedQty > m2DriveMaxQty) {
        alert("Quantity Max limit reached");
        return false;
      } else {
        parentEl.find(".config-price-span").toggleClass("active");
        bindSelectedProduct(
          cat,
          val,
          qty,
          totalPrice,
          id,
          productCatId,
          ElementId
        );
        updateItemsCount();
        updateTotalCartPrice();
        m2DriveProgress();
      }
    });
    // $('.product-check-btn ,.product-radio-btn').click(function() {
    //     qtySelectEl.val('1').attr('data-lastval', '1').trigger('change');;
    // });
  }

  function m2DriveProgress() {
    if (m2DriveSelectedQty <= m2DriveMaxQty) {
      $(".qty-progress-bars .progress-bar").removeClass("active");
      for (let i = 0; i < m2DriveSelectedQty; i++) {
        $(".qty-progress-bars .progress-bar").eq(i).addClass("active");
      }
      $("#config-m2-drive .max-qty-wrap")
        .find(".selected-qty")
        .text(m2DriveSelectedQty);
    }
    if (m2DriveSelectedQty == m2DriveMaxQty) {
      disableM2DriveOptions();
    } else {
      enableM2DriveOptions();
    }
  }

  function enableM2DriveOptions() {
    $(".product-check-btn").prop("disabled", false);
    $("#config-m2-drive .qty-selector").prop("disabled", false);
  }

  function disableM2DriveOptions() {
    $(".product-check-btn").not(":checked").prop("disabled", true);
    $("#config-m2-drive .config-product-item")
      .not(".selected")
      .find(".qty-selector")
      .prop("disabled", true);
  }

  // summary section
  function bindSelectedProduct(
    cat,
    val,
    qty,
    price,
    id,
    productCatId = "",
    ElementId
  ) {
    const summaryProductHtml = `<li class="w-100 my-1 d-flex align-items-center cart-product-item ${cat}-cart-product-${id}" data-accordionid="${ElementId}" data-productcatid='${productCatId}'><span class="summary-total-qty"><span class="qty-span">${qty}</span><i class="fa fa-times"></i></span>
            <div class="flex-grow-1 d-flex align-items-center justify-content-between"><span class="summary-product-val mr-2">${val}</span>
            <span class="price-wrap d-flex align-items-center"><span class="summary-plus-sign">+</span><span class="currency-symbol" id="summary-currency-symbol">&#8377;</span><span class="order-price price-span product-price ml-auto">${price}</span></span>
            </div>
          </li>`;

    if (cat == "m2-drive") {
      if (
        $(
          `.m2-drive-cart-product-${id}[data-productcatid = "${productCatId}"] `
        ).length
      ) {
        $(
          `.m2-drive-cart-product-${id}[data-productcatid = "${productCatId}"]`
        ).remove();
      } else {
        $(`#${cat}-summary .summary-list`).append(summaryProductHtml);
      }
    } else {
      $(`#${cat}-summary .summary-list`).html(summaryProductHtml);
    }
    if ($(`#${cat}-summary .summary-list li`).length) {
      $(`#${cat}-summary`).removeClass("d-none");
    } else {
      $(`#${cat}-summary`).addClass("d-none");
    }
  }

  // items-count
  function updateItemsCount() {
    const cartProductCount = $(
      "#productOrderSummary .cart-product-item"
    ).length;
    $(".summary-head #items-count").text(cartProductCount);

    if (cartProductCount >= 1) {
      $(".your-order-wrap").show();
      $(".your-order-wrap-empty").hide();
    } else {
      $(".your-order-wrap").hide();
      $(".your-order-wrap-empty").show();
    }
  }

  // total-cart-price
  function updateTotalCartPrice() {
    let totalPrice = 0;
    $("#productOrderSummary .cart-product-item")
      .find(".price-span")
      .each(function (i, e) {
        totalPrice += Number($(e).text().trim());
      });
    $("#productOrderSummary #total-amount").text(totalPrice);
  }

  //currency-converter:
  var rates = {
    INR: {
      value: 1,
      symbol: "₹",
      USD: 0.01311,
      INR: 1,
      GBP: 0.01,
    },
    USD: {
      value: 75,
      symbol: "$",
      USD: 1,
      INR: 76.32,
      GBP: 0.76,
    },
    GBP: {
      value: 100,
      symbol: "£",
      USD: 1.31,
      INR: 100,
      GBP: 1,
    },
  };

  let usercurency;
  if (localStorage.getItem("currency")) {
    usercurency = localStorage.getItem("currency");
  } else {
    usercurency = "INR";
  }

  $("#custom-selects").val(usercurency.toLowerCase());

  function updatePrices(previousCurrency, currentCurrency) {
    $(".product-price").each(function (i, el) {
      console.log(currentCurrency);
      let val = parseFloat($(el).text());
      let con = val * rates[previousCurrency][currentCurrency],
        _con;
      if (currentCurrency == "INR") {
        _con = Math.round(con);
      } else {
        _con = con;
      }
      let curentSymbol = rates[currentCurrency];
      $(el).text(_con.toFixed(2));

      $(el).siblings(".currency-symbol").text(curentSymbol.symbol);
    });
    $("[data-price]").each(function (i, e) {
      let val = parseFloat($(this).attr("data-price"));
      let con = val * rates[previousCurrency][currentCurrency],
        _con;
      if (currentCurrency == "INR") {
        _con = Math.round(con);
      } else {
        _con = parseInt(con);
      }
      $(this).attr("data-price", con);
    });
    let amount = parseFloat($("#total-amount").text()).toFixed(2);
    let curentSymbol = rates[currentCurrency];
    let conVal = amount * rates[previousCurrency][currentCurrency],
      _con;
    if (currentCurrency == "INR") {
      _con = Math.round(conVal);
    } else {
      _con = conVal;
    }
    $("#total-amount").text(parseFloat(_con).toFixed(2));
    $(".currency-symbol").text(curentSymbol.symbol);
  }

  $("#custom-selects").on("change", function (e) {
    let previousCurrency = localStorage.getItem("currency");
    localStorage.setItem("currency", e.target.value.toUpperCase());
    updatePrices(previousCurrency, e.target.value.toUpperCase());
  });

  updatePrices(rates[usercurency]);
});