new.anwisystems.com/enterprise/assets/js/new.js

$(function () {
  // configuration js
  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: `Anwi C252 Chipset - 1U - 2x SATA - 1x M.2 - Dual Anwi 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 Anwi UHD P750 Graphics`,
      products: [
        {
          id: 1,
          title: `Quad-Core Intel<sup>®</sup> Xeon<sup>®</sup> E-2324G Processor 3.1GHz
            8MB Cache (65W)`,
          qty: 1,
          price: 99,
        },
        {
          id: 2,
          title: `Quad-Core Intel<sup>®</sup> Xeon<sup>®</sup> E-2374G Processor 3.7GHz 8MB Cache (80W)`,
          qty: 1,
          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: `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: 2,
          price: 149,
        },
        {
          id: 3,
          title: `Eight-Core Intel<sup>®</sup> Xeon<sup>®</sup> E-2378 Processor 2.6GHz 16MB Cache (65W)`,
          qty: 2,
          price: 269,
        },
      ],
    },
    {
      productcatid: 2,
      productcattitle: `Anwi 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: 1,
          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: 1,
          price: 149,
        },
        {
          id: 3,
          title: `1.0TB Kioxia XG6 M.2 PCIe 3.1 x4 NVMe Solid State Drive`,
          qty: 1,
          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: 1,
          price: 99,
        },
        {
          id: 2,
          title: `960GB Micron 7400 PRO Series M.2 22x80 PCIe 4.0 x4
            NVMe Solid State Drive`,
          qty: 1,
          price: 149,
        },
        {
          id: 3,
          title: `1.92TB Micron 7400 PRO Series M.2 22x110 PCIe 4.0 x4 NVMe Solid
            State Drive`,
          qty: 1,
          price: 269,
        },
      ],
    },
  ];

  //Bind Config Categories
  bindConfigurations();

  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="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 align-items-center mt-1"><span>Max Quantity: ${qty}</span><div><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 float-lg-end d-flex align-items-center config-max-quantity">${quantityHtml}</div>`;
      }
      configCatHtml += `<div class="product-config-selector mb-20" id="config-${title}" data-maxqty='${qty}'>
            <div class="config-heading d-flex justify-content-between 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();
  }

  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" type="radio" name="radio-btns" 
            value="${product.title}" for="Radio-btn-${i}" >
            <b>${product.title}</b>
          </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 = 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 class="total-price-amount">${product.price}</span></span> 
          </div>
        </div>
      </p>`;
    });
    $(`#config-${cat} .config-content`).html(productHtml);
  }

  function bindProcessorAndM2DriveProducts(cat) {
    let productCatHtml = "";
    let productsArr = processorProducts;
    let accordion = "processorProductAccordion";
    let collapse = "processorProductcollapse";
    if (cat == "m2-drive") {
      productsArr = m2driveProducts;
      accordion = "m2DriveProductAccordion";
      collapse = "m2DriveProductcollapse";
    }
    $.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, i, product.title)}
                    </div>
                    <div class="btn-group config-quantity-btn text-black col-lg-2">
                      <select class="form-select fw-bold qty-selector">`;
        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 class="processor-total-price total-price-amount"> ${product.price} </span> </span> 
                </div>
                  </div>`;
      });
      productCatHtml += productHtml;
      productCatHtml += `</div>
                    </div>
                </div>
              </div>`;
    });
    $(`#config-${cat} .config-content`).html(productCatHtml);
  }

  function appendProcessorAndM2DriveInput(cat, id, title) {
    if (cat == "m2-drive") {
      return `<input class="form-check-input product-check-btn" type="checkbox" name="m2Drive-check-btns"
            id="Check-btn-${id}" value="${title}" >
          <label class="form-check-label" for="Check-btn-${id}">
            <strong>${title}</strong>
          </label>`;
    } else {
      return `<input class="form-check-input product-radio-btn" type="radio" name="processor-radio-btns"
            id="Radio-btn${id}" value="${title}" >
          <label class="form-check-label" for="Radio-btn${id}">
            <strong>${title}</strong>
          </label>`;
    }
  }

  function bindEventListeners() {
    $(".product-radio-btn").click(function (e) {
      const radioEl = $(this);
      const parentEl = radioEl.parents(".config-product-item");
      const val = radioEl.val();
      const productCatId = parentEl.data("productcatid");
      const price = parentEl.data("price");
      const cat = parentEl.data("cat");
      const qty = parentEl.find(".qty-selector").val();
      const id = parentEl.data("id");
      const maxQty = $(`#config-${cat}`).data("maxqty");
      $(`#config-${cat}`).find(".config-price-span").removeClass("active");
      parentEl.find(".config-price-span").addClass("active");
      bindSelectedProduct(cat, val, qty, price, id, maxQty, productCatId);
      updateItemsCount();
      updateTotalCartPrice();
    });

    $(".qty-selector").change(function () {
      const selectEl = $(this);
      const parentEl = selectEl.parents(".config-product-item");
      const val = selectEl.val();
      const price = parentEl.data("price");
      const cat = parentEl.data("cat");
      const id = parentEl.data("id");
      if (!parentEl.find("input").is(":checked")) {
        parentEl.find("input").trigger("click");
        parentEl.find(".config-price-span").addClass("active");
      }
      const selecedSummaryProduct = $(`.${cat}-cart-product-${id}`);
      selecedSummaryProduct.find(".summary-total-qty .qty-span").text(val);
      selecedSummaryProduct.find(".price-span").text(price * val);
      updateTotalCartPrice();
    });

    $(".product-check-btn").click(function () {
      const checkEl = $(this);
      const parentEl = checkEl.parents(".config-product-item");
      const val = checkEl.val();
      const productCatId = parentEl.data("productcatid");
      const price = parentEl.data("price");
      const cat = parentEl.data("cat");
      const qty = parentEl.find(".qty-selector").val();
      const id = parentEl.data("id");
      const maxQty = $(`#config-${cat}`).data("maxqty");
      if ($(".product-check-btn:checked").length > maxQty) {
        alert("Max limit reached");
        return false;
      } else {
        parentEl.find(".config-price-span").toggleClass("active");
        bindSelectedProduct(cat, val, qty, price, id, maxQty, productCatId);
        updateItemsCount();
        updateTotalCartPrice();
      }
    });
  }

  function bindSelectedProduct(
    cat,
    val,
    qty,
    price,
    id,
    maxQty,
    productCatId = ""
  ) {
    const summaryProductHtml = `<li class="w-100 my-1 d-flex align-items-center cart-product-item ${cat}-cart-product-${id}" 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"><span class="summary-product-val mr-2">${val}</span>
            <span class="order-price price-span ml-auto">${price}</span></div>
          </li>`;

    if (cat == "m2-drive") {
      let checkedCount = $(".product-check-btn:checked").length;
      if (
        $(`.m2-drive-cart-product-${id}[data-productcatid = "${productCatId}"]`)
          .length
      ) {
        $(
          `.m2-drive-cart-product-${id}[data-productcatid = "${productCatId}"]`
        ).remove();
        $("#config-m2-drive .qty-progress-bars")
          .find(".progress-bar.active")
          .last()
          .removeClass("active");
        $("#config-m2-drive .max-qty-wrap")
          .find(".selected-qty")
          .text(checkedCount);
      } else {
        $("#config-m2-drive .qty-progress-bars")
          .find(".progress-bar")
          .not(".active")
          .first()
          .addClass("active");
        $("#config-m2-drive .max-qty-wrap")
          .find(".selected-qty")
          .text(checkedCount);
        $(`#${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");
    }
  }

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

  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);
  }
});