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

// configuration js
let m2DriveMaxQty = 4;
let m2DriveSelectedQty = 0;
let nvmeDrivemaxqty = 4;
let nvmeDriveselectedqty = 0;
let hardDriveMaxQty = 10;
let hardDriveSelectedQty = 0;
// configuration items
if (localStorage.getItem("defaultCurrency") === null) {
  localStorage.setItem("defaultCurrency", undefined);
  localStorage.setItem("currentCurrency", undefined);
}

// api for getting current location along with currencies

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,
  },
  {
    id: 5,
    title: "U.2/U.3 NVME DRIVE",
    maxQty: 4,
  },
  {
    id: 6,
    title: "HARD DRIVE",
    maxQty: 10,
  },
];

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: 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: `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: 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,
      },
    ],
  },
];

const NvmeDriveProducts = [
  {
    productcatid: 1,
    productcattitle: `Anwi P4510 Series PCIe 3.1 x4 NVMe Solid State Drives (1x DWPD)`,
    products: [
      {
        id: 1,
        title: `8.0TB Anwi SSD DC P4510 Series U.2 PCIe 3.1 x4 NVMe Solid State Drive`,
        qty: 4,
        price: 99,
      },
    ],
  },
  {
    productcatid: 2,
    productcattitle: `Anwi P5510 Series PCIe 4.0 x4 NVMe Solid State Drives`,
    products: [
      {
        id: 1,
        title: `3.84TB Anwi SSD D7 P5510 Series U.2 PCIe 4.0 x4 NVMe Solid State Drive`,
        qty: 4,
        price: 99,
      },
      {
        id: 2,
        title: `7.68TB Anwi SSD D7 P5510 Series U.2 PCIe 4.0 x4 NVMe Solid State Drive`,
        qty: 4,
        price: 149,
      },
      {
        id: 3,
        title: `1.5TB Intel<sup>®</sup> Optane™ SSD DC P4800X Series U.2 PCIe 3.0 x4 NVMe Solid State Drive`,
        qty: 4,
        price: 269,
      },
    ],
  },
  {
    productcatid: 3,
    productcattitle: `Intel<sup>®</sup> Optane™ DC P4801X Series PCIe 3.0 x4 NVMe Solid State Drives`,
    products: [
      {
        id: 1,
        title: `100GB Intel<sup>®</sup> Optane™ SSD DC P4801X Series U.2 PCIe 3.0 x4 NVMe Solid State Drive`,
        qty: 4,
        price: 99,
      },
    ],
  },
  {
    productcatid: 4,
    productcattitle: `Micron 7400 PRO Series PCIe 4.0 x4 NVMe Solid State Drives (1x DWPD)`,
    products: [
      {
        id: 1,
        title: `960GB Micron 7400 PRO Series U.3 7mm PCIe 4.0 x4 NVMe Solid State Drive`,
        qty: 4,
        price: 99,
      },
      {
        id: 2,
        title: `1.92TB Micron 7400 PRO Series U.3 7mm PCIe 4.0 x4 NVMe Solid State Drive`,
        qty: 4,
        price: 149,
      },
      {
        id: 3,
        title: `3.84TB Micron 7400 PRO Series U.3 7mm PCIe 4.0 x4 NVMe Solid State Drive`,
        qty: 4,
        price: 269,
      },
      {
        id: 4,
        title: `7.68TB Micron 7400 PRO Series U.3 7mm PCIe 4.0 x4 NVMe Solid State Drive`,
        qty: 4,
        price: 269,
      },
    ],
  },
];

const HardDriveProducts = [
  {
    productcatid: 1,
    productcattitle: `Seagate Enterprise-Class 6Gb/s SATA 7.2k Hard Drives`,
    products: [
      {
        id: 1,
        title: `1.0TB SATA 6.0Gb/s 7200RPM - 2.5" - Seagate Exos 7E2000 Series (512e)`,
        qty: 4,
        price: 99,
      },
      {
        id: 2,
        title: `2.0TB SATA 6.0Gb/s 7200RPM - 2.5" - Seagate Exos 7E2000 Series (512e)`,
        qty: 4,
        price: 149,
      },
    ],
  },
  {
    productcatid: 2,
    productcattitle: `Seagate Enterprise-Class 12Gb/s SAS 7.2k Hard Drives`,
    products: [
      {
        id: 1,
        title: `1.0TB SAS 3.0 12.0Gb/s 7200RPM - 2.5" - Seagate Exos 7E2000 Series (512e)`,
        qty: 4,
        price: 99,
      },
      {
        id: 2,
        title: `2.0TB SAS 3.0 12.0Gb/s 7200RPM - 2.5" - Seagate Exos 7E2000 Series (512e)`,
        qty: 4,
        price: 149,
      },
    ],
  },
  {
    productcatid: 3,
    productcattitle: `Intel<sup>®</sup> Optane™ DC P4801X Series PCIe 3.0 x4 NVMe Solid State Drives`,
    products: [
      {
        id: 1,
        title: `100GB Intel<sup>®</sup> Optane™ SSD DC P4801X Series U.2 PCIe 3.0 x4 NVMe Solid State Drive`,
        qty: 4,
        price: 99,
      },
    ],
  },
  {
    productcatid: 4,
    productcattitle: `Seagate Enterprise-Class 12Gb/s SAS 10k Hard Drives`,
    products: [
      {
        id: 1,
        title: `600GB SAS3 12.0Gb/s 10000RPM - 2.5" - Seagate Exos 10E2400 Series (512e/4Kn)`,
        qty: 4,
        price: 99,
      },
      {
        id: 2,
        title: `1.2TB SAS3 12.0Gb/s 10000RPM - 2.5" - Seagate Exos 10E2400 Series (512e/4Kn)`,
        qty: 4,
        price: 149,
      },
      {
        id: 3,
        title: `1.8TB SAS3 12.0Gb/s 10000RPM - 2.5" - Seagate Exos 10E2400 Series (512e/4Kn)`,
        qty: 4,
        price: 269,
      },
      {
        id: 4,
        title: `2.4TB SAS3 12.0Gb/s 10000RPM - 2.5" - Seagate Exos 10E2400 Series (512e/4Kn)`,
        qty: 4,
        price: 269,
      },
    ],
  },
  {
    productcatid: 5,
    productcattitle: `Micron 5300 MAX Enterprise-Class SATA Solid State Drives`,
    products: [
      {
        id: 1,
        title: `240GB Micron 5300 MAX Series 2.5" SATA 6.0Gb/s Solid State Drive`,
        qty: 4,
        price: 99,
      },
      {
        id: 2,
        title: `480GB Micron 5300 MAX Series 2.5" SATA 6.0Gb/s Solid State Drive`,
        qty: 4,
        price: 149,
      },
      {
        id: 3,
        title: `960GB Micron 5300 MAX Series 2.5" SATA 6.0Gb/s Solid State Drive`,
        qty: 4,
        price: 269,
      },
      {
        id: 4,
        title: `1.92TB Micron 5300 MAX Series 2.5" SATA 6.0Gb/s Solid State Drive`,
        qty: 4,
        price: 269,
      },
      {
        id: 5,
        title: `1.92TB Micron 5300 MAX Series 2.5" SATA 6.0Gb/s 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";
    } else if (title == "U.2/U.3 NVME DRIVE") {
      title = "nvme-drive";
    } else if (title == "HARD DRIVE") {
      title = "hard-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>`;
    }

    if (title == "nvme-drive") {
      let quantityHtml = "";
      if (title == "nvme-drive") {
        let qtyProgressBarHtml = "";
        for (let i = 0; i < qty; i++) {
          qtyProgressBarHtml += `<span class="nvdrive 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 nvme 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>`;
    }

    if (title == "hard-drive") {
      let quantityHtml = "";
      if (title == "hard-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();
}

//bindNvmeConfigurations();
updateItemsCount();

// appending&binding -html
function bindAllConfigProducts() {
  bindBareboneAndMemoryProducts("barebone");
  bindBareboneAndMemoryProducts("memory");
  bindProcessorAndM2DriveProducts("processor");
  bindProcessorAndM2DriveProducts("m2-drive");
  bindNVMEHARDDRIVEAndProducts("nvme-drive");
  bindNVMEHARDDRIVEAndProducts("hard-drive");
  bindEventListeners();
}

function bindBareboneAndMemoryProducts(cat) {
  let productHtml = "";
  let productsArr = bareboneProducts;
  let name = "radio-btns-barebone";
  if (cat == "memory") {
    productsArr = memoryProducts;
    name = "radio-btn-memory";
  }
  $.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="checkbox" data-checked="false"  name= "${name}"
            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 product2" id="product1"> <option value="0">Select</option>`;
    for (let i = 1; i <= product.qty; i++) {
      productHtml += `<option value="${i}">Qty: ${i}</option>`;
    }
    if (".product2")
      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);
}

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 sub-section 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 product2"  ${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);
}

function bindNVMEHARDDRIVEAndProducts(cat) {
  let productCatHtml = "";
  // let productsArr = HardDriveProducts;
  // let accordion = 'hardwareProductAccordion';
  // let collapse = 'hardwareProductcollapse';
  let lastSelectDataAttr = "";
  if (cat == "nvme-drive") {
    productsArr = NvmeDriveProducts;
    accordion = "NVMEDRIVEProductAccordion";
    collapse = "NVMEDRIVEProductcollapse";
    lastSelectDataAttr = 'data-lastval="1"';
  }
  if (cat == "hard-drive") {
    productsArr = HardDriveProducts;
    accordion = "hardwareProductAccordion";
    collapse = "hardwareProductcollapse";
    lastSelectDataAttr = 'data-lastval="1"';
  }
  $.each(productsArr, function (i, productcat) {
    const productcatid = productcat.productcatid;
    const productcattitle = productcat.productcattitle;
    productCatHtml += `<div class="accordion sub-section 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">
                      ${appendNVMEHARDDRIVEAndProducts(
                        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 product2"  ${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);
}

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="checkbox" name="processor-radio-btns" data-checked="false"
            id="${cat}-radio-btn-${productcatid}-${id}" value="${title}" >
          <label class="form-check-label" for="${cat}-radio-btn-${productcatid}-${id}">
            <strong>${title}</strong>
          </label>`;
  }
}

function appendNVMEHARDDRIVEAndProducts(cat, id, title, productcatid = 0) {
  if (cat == "nvme-drive") {
    return `<input class="form-check-input product-check" type="checkbox" name="nvme-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-hard-btn" type="checkbox" name="hardware-radio-btns" 
            id="${cat}-check-btn-${productcatid}-${id}" value="${title}" >
          <label class="form-check-label" for="${cat}-check-btn-${productcatid}-${id}">
            <strong>${title}</strong>
          </label>`;
  }
}

// function removeActiveClassForPrice(DOM) {
//   return DOM.removeClass("active");
// }

// select and radio-check-btn-section
// function bindEventListeners() {}
// 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();

    // $(this).toggleClass("checked");
  });

  $(".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(selectEl).val(val);
      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');;
  // });
}

//progress-bars active and remove
function m2DriveProgress() {
  if (m2DriveSelectedQty <= m2DriveMaxQty) {
    $("#config-m2-drive .qty-progress-bars .progress-bar").removeClass(
      "active"
    );
    for (let i = 0; i < m2DriveSelectedQty; i++) {
      $("#config-m2-drive .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);
}

//nvme progress-bars active and remove
function nvmeDriveProgress() {
  if (nvmeDriveselectedqty <= nvmeDrivemaxqty) {
    $("#config-nvme-drive .qty-progress-bars .progress-bar").removeClass(
      "active"
    );
    for (let i = 0; i < nvmeDriveselectedqty; i++) {
      $("#config-nvme-drive .qty-progress-bars .progress-bar")
        .eq(i)
        .addClass("active");
    }
    $("#config-nvme-drive .max-qty-wrap")
      .find(".selected-qty")
      .text(nvmeDriveselectedqty);
  }
  if (nvmeDriveselectedqty == nvmeDrivemaxqty) {
    disablenvmeDriveOptions();
  } else {
    enablenvmeDriveOptions();
  }
}

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

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

//hard-drive progress-bars active and remove
function hardDriveProgress() {
  if (hardDriveSelectedQty <= hardDriveMaxQty) {
    $("#config-hard-drive .qty-progress-bars .progress-bar").removeClass(
      "active"
    );
    for (let i = 0; i < hardDriveSelectedQty; i++) {
      $("#config-hard-drive .qty-progress-bars .progress-bar")
        .eq(i)
        .addClass("active");
    }
    $("#config-hard-drive .max-qty-wrap")
      .find(".selected-qty")
      .text(hardDriveSelectedQty);
  }
  if (hardDriveSelectedQty == hardDriveMaxQty) {
    disablehardDriveOptions();
  } else {
    enablehardDriveOptions();
  }
}

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

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

// summary section
function bindSelectedProduct(
  cat,
  val,
  qty,
  price,
  id,
  productCatId = "",
  ElementId,
  currency = localStorage.getItem("currentCurrency"),
  currencysymbol = rates[currency].symbol
) {
  console.log(cat, val, "qty", 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">${currencysymbol}</span><span class="order-price price-span product-price ml-auto">${price}</span></span>
            </div>
          </li>`;

  console.log(
    $(`#${cat}-summary .summary-list`).find(`[data-accordionid=${ElementId}]`)
      .length
  );
  if (
    $(`#${cat}-summary .summary-list`).find(`[data-accordionid=${ElementId}]`)
      .length
  ) {
    $(`#${cat}-summary .summary-list`)
      .find(`[data-accordionid=${ElementId}]`)
      .remove();
  }

  if (cat == "barebone") {
    if (qty) {
      $(
        `.barebone-cart-product-${id}[data-productcatid = "${productCatId}"]`
      ).remove();
      $(`#${cat}-summary .summary-list`).append(summaryProductHtml);
    } else {
      $(
        `.barebone-cart-product-${id}[data-productcatid = "${productCatId}"]`
      ).remove();
    }
  }

  if (cat == "m2-drive") {
    if (qty) {
      $(
        `.m2-drive-cart-product-${id}[data-productcatid = "${productCatId}`
      ).remove();
      $(`#${cat}-summary .summary-list`).append(summaryProductHtml);
    } else {
      $(
        `.m2-drive-cart-product-${id}[data-productcatid = "${productCatId}`
      ).remove();
    }
  }

  if (cat == "processor") {
    if (qty) {
      $(`.cart-product-item[data-accordionid = "${ElementId}"]`).remove();
      $(`#${cat}-summary .summary-list`).append(summaryProductHtml);
    } else {
      $(`.cart-product-item[data-accordionid = "${ElementId}"]`).remove();
    }
  }

  if (cat == "nvme-drive") {
    if (qty) {
      $(`.cart-product-item[data-accordionid = "${ElementId}"]`).remove();
      $(`#${cat}-summary .summary-list`).append(summaryProductHtml);
    } else {
      $(`.cart-product-item[data-accordionid = "${ElementId}"]`).remove();
    }
  }

  if (cat == "hard-drive") {
    if (qty) {
      $(
        `.hard-drive-cart-product-${id}[data-productcatid = "${productCatId}"] `
      ).remove();
      $(`#${cat}-summary .summary-list`).append(summaryProductHtml);
    } else {
      $(
        `.hard-drive-cart-product-${id}[data-productcatid = "${productCatId}"] `
      ).remove();
    }
  }

  if (cat == "memory") {
    if (qty) {
      $(`.cart-product-item[data-accordionid = "${ElementId}"]`).remove();
      $(`#${cat}-summary .summary-list`).append(summaryProductHtml);
    } else {
      $(`.cart-product-item[data-accordionid = "${ElementId}"]`).remove();
    }
  }

  if ($(`#${cat}-summary .summary-list li`).length) {
    console.log("display if");
    $(`#${cat}-summary`).removeClass("d-none");
  } else {
    console.log("display else");
    $(`#${cat}-summary`).addClass("d-none");
  }
  return;
}

// 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());
      cartTotal = parseFloat(totalPrice).toFixed(2);
    });
  $("#productOrderSummary #total-amount").text(cartTotal);
}

//currency-converter for pricings:
var rates = {
  INR: {
    value: 1,
    symbol: "₹",
    USD: 0.01289,
    INR: 1,
    GBP: 0.01041,
    EUR: 0.01226,
  },
  USD: {
    value: 75,
    symbol: "$",
    USD: 1,
    INR: 77.5624,
    GBP: 0.8074,
    EUR: 0.951,
  },
  GBP: {
    value: 100,
    symbol: "£",
    USD: 1.2384,
    INR: 96.0576,
    GBP: 1,
    EUR: 1.1778,
  },
  EUR: {
    value: 81,
    symbol: "€",
    USD: 1.051428,
    INR: 81.551,
    GBP: 0.8489,
    EUR: 1,
  },
};
//currency-converter rates for configurator:
// 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("currentCurrency")) {
//   usercurency = localStorage.getItem("currentCurrency");
// }
//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);
      // _con = 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);
      // _con = con;
    } else {
      _con = 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);
    // _con = 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());
});

$("#searchTheKey").on("keyup", function () {
  // search functionality
  var value = $(this).val().toString(),
    value = value.toUpperCase();
  $(".product-config-selector")
    .find(".config-content strong")
    .each(function () {
      let reportName = $(this).text();
      if (reportName.toUpperCase().indexOf(value) > -1) {
        $(this).parents(".name-of-config ").css("display", "flex");
        $(this)
          .closest(".name-of-config")
          .each(function () {
            let reportName = $(this).text();
            if (reportName.toUpperCase().indexOf(value) > -1) {
              $(this).parents(".name-of-config").css("display", "flex");
              $("#config-processor").css("display", "block");
              $("#config-barebone").css("display", "block");
              $("#config-memory").css("display", "block");
              $("#config-m2-drive").css("display", "block");
              $("#config-nvme-drive").css("display", "block");
              $("#config-hard-drive").css("display", "block");
            } else {
              $(this).parents(".name-of-config").css("display", "none");
            }
          });
      } else {
        $(this).parents(".name-of-config").css("display", "none");
      }
    });

  if ($("#config-processor").find(".name-of-config:visible").length == 0) {
    $("#config-processor").css("display", "none");
  } else {
    $("#config-processor").css("display", "block");

    $("#config-processor")
      .find(".sub-section")
      .each(function () {
        console.log($(this));
        if ($(this).find(".name-of-config:visible").length == 0) {
          $(this).closest(".accordion").css("display", "none");
        }
      });
  }

  if ($("#config-barebone").find(".name-of-config:visible").length == 0) {
    $("#config-barebone").css("display", "none");
  } else {
    $("#config-barebone").css("display", "block");
  }

  if ($("#config-memory").find(".name-of-config:visible").length == 0) {
    $("#config-memory").css("display", "none");
  } else {
    $("#config-memory").css("display", "block");
  }

  if ($("#config-m2-drive").find(".name-of-config:visible").length == 0) {
    $("#config-m2-drive").css("display", "none");
  } else {
    $("#config-m2-drive").css("display", "block");
    $("#config-m2-drive")
      .find(".sub-section")
      .each(function () {
        console.log($(this));
        if ($(this).find(".name-of-config:visible").length == 0) {
          $(this).closest(".accordion").css("display", "none");
        }
      });
  }

  if ($("#config-nvme-drive").find(".name-of-config:visible").length == 0) {
    $("#config-nvme-drive").css("display", "none");
  } else {
    $("#config-nvme-drive").css("display", "block");

    $("#config-nvme-drive")
      .find(".sub-section")
      .each(function () {
        console.log($(this));
        if ($(this).find(".name-of-config:visible").length == 0) {
          $(this).closest(".accordion").css("display", "none");
        }
      });
  }

  if ($("#config-hard-drive").find(".name-of-config:visible").length == 0) {
    $("#config-hard-drive").css("display", "none");
  } else {
    $("#config-hard-drive").css("display", "block");

    $("#config-hard-drive")
      .find(".sub-section")
      .each(function () {
        console.log($(this));
        if ($(this).find(".name-of-config:visible").length == 0) {
          $(this).closest(".accordion").css("display", "none");
        }
      });
  }
});

setTimeout(function () {
  //handling check for barebone processor and memory
  const productRadioBtns = document.querySelectorAll(".product-radio-btn");
  // console.log(productRadioBtns);
  for (let i = 0; i < productRadioBtns.length; i++) {
    productRadioBtns[i].addEventListener("click", function () {
      const checkEl = $(this);
      const ElementId = $(this).parents(".accordion").attr("id");
      const parentEl = checkEl.parents(".config-product-item");
      const productCatId = parentEl.attr("data-productcatid");
      const cat = parentEl.attr("data-cat");
      const qtySelectEl = parentEl.find(".qty-selector");
      const id = parentEl.attr("data-id");

      if ($(this).parents(".accordion").length) {
        $(this)
          .closest(".accordion")
          .find(".config-price-span")
          .removeClass("active");
        $(this).closest(".accordion").find(".qty-selector").val(0);
      }

      if (this.checked) {
        console.log("checked");
        $(this).parents(".name-of-config").find(".qty-selector").val("1");
        $(this)
          .parents(".name-of-config")
          .find(".config-price-span")
          .addClass("active");
        $(this)
          .closest(".accordion")
          .find(".product-radio-btn")
          .prop("checked", false);
        $(this).prop("checked", true);
      }

      const qty = parseInt(qtySelectEl.val());
      const actualPrice = parentEl.attr("data-price");
      const price = parseFloat(actualPrice).toFixed(2);
      const totalPrice = qty * parseFloat(price).toFixed(2);
      const val = checkEl.val();

      bindSelectedProduct(cat, val, qty, price, id, productCatId, ElementId);
      updateItemsCount();
      updateTotalCartPrice();
    });
  }

  //handling check for m2-drive
  const productCheckBtns = document.querySelectorAll(".product-check-btn");
  for (let i = 0; i < productCheckBtns.length; i++) {
    productCheckBtns[i].addEventListener("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 price = parentEl.attr("data-price");
      const id = parentEl.attr("data-id");

      if ($(this).parents(".accordion").length) {
        $(this)
          .closest(".accordion")
          .find(".config-price-span")
          .removeClass("active");
        $(this).closest(".accordion").find(".qty-selector").val(0);
        $(this)
          .closest(".accordion")
          .find(".config-product-item")
          .removeClass("selected");
      }

      if (this.checked) {
        //   console.log('checked')
        $(this).parents(".name-of-config").find(".qty-selector").val("1");
        $(this)
          .parents(".name-of-config")
          .find(".config-price-span")
          .addClass("active");
        $(this)
          .closest(".accordion")
          .find(".product-check-btn")
          .prop("checked", false);
        $(this).prop("checked", true);
        parentEl.addClass("selected");
      } else {
        parentEl.removeClass("selected");
      }

      const qty = parseInt(qtySelectEl.val());
      const totalPrice = qty * parseFloat(price).toFixed(2);

      let selectedQty = 0;
      parentEl
        .closest(".config-content")
        .find(".qty-selector")
        .each(function () {
          selectedQty = selectedQty + +$(this).val();
        });
      m2DriveSelectedQty = selectedQty;

      if (m2DriveSelectedQty > m2DriveMaxQty) {
        return false;
      } else {
        bindSelectedProduct(
          cat,
          val,
          qty,
          parseFloat(totalPrice).toFixed(2),
          id,
          productCatId,
          ElementId
        );
        updateItemsCount();
        updateTotalCartPrice();
        m2DriveProgress();
      }
    });
  }

  //handling check for nvme-drive
  const productCheckBtns1 = document.querySelectorAll(".product-check");
  for (let i = 0; i < productCheckBtns1.length; i++) {
    productCheckBtns1[i].addEventListener("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 price = parentEl.attr("data-price");
      const id = parentEl.attr("data-id");

      if ($(this).parents(".accordion").length) {
        $(this)
          .closest(".accordion")
          .find(".config-price-span")
          .removeClass("active");
        $(this).closest(".accordion").find(".qty-selector").val(0);
        $(this)
          .closest(".accordion")
          .find(".config-product-item")
          .removeClass("selected");
      }

      if (this.checked) {
        $(this).parents(".name-of-config").find(".qty-selector").val("1");
        $(this)
          .parents(".name-of-config")
          .find(".config-price-span")
          .addClass("active");
        $(this)
          .closest(".accordion")
          .find(".product-check")
          .prop("checked", false);
        $(this).prop("checked", true);
        parentEl.addClass("selected");
      } else {
        parentEl.removeClass("selected");
      }

      const qty = parseInt(qtySelectEl.val());
      const totalPrice = qty * parseFloat(price).toFixed(2);

      let selectedQty = 0;
      parentEl
        .closest(".config-content")
        .find(".qty-selector")
        .each(function () {
          selectedQty = selectedQty + +$(this).val();
        });

      nvmeDriveselectedqty = selectedQty;

      if (nvmeDriveselectedqty > nvmeDrivemaxqty) {
        return false;
      } else {
        bindSelectedProduct(
          cat,
          val,
          qty,
          parseFloat(totalPrice).toFixed(2),
          id,
          productCatId,
          ElementId
        );
        updateItemsCount();
        updateTotalCartPrice();
        nvmeDriveProgress()();
      }
    });
  }

  //handling check for hard-drive
  const productHardBtns = document.querySelectorAll(".product-hard-btn");
  for (let i = 0; i < productHardBtns.length; i++) {
    productHardBtns[i].addEventListener("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 price = parentEl.attr("data-price");
      const id = parentEl.attr("data-id");

      if ($(this).parents(".accordion").length) {
        $(this)
          .closest(".accordion")
          .find(".config-price-span")
          .removeClass("active");
        $(this).closest(".accordion").find(".qty-selector").val(0);
        $(this)
          .closest(".accordion")
          .find(".config-product-item")
          .removeClass("selected");
      }

      if (this.checked) {
        $(this).parents(".name-of-config").find(".qty-selector").val("1");
        $(this)
          .parents(".name-of-config")
          .find(".config-price-span")
          .addClass("active");
        $(this)
          .closest(".accordion")
          .find(".product-hard-btn")
          .prop("checked", false);
        $(this).prop("checked", true);
        parentEl.addClass("selected");
      } else {
        parentEl.removeClass("selected");
      }

      const qty = parseInt(qtySelectEl.val());
      const totalPrice = qty * parseFloat(price).toFixed(2);

      let selectedQty = 0;
      parentEl
        .closest(".config-content")
        .find(".qty-selector")
        .each(function () {
          selectedQty = selectedQty + +$(this).val();
        });

      hardDriveSelectedQty = selectedQty;

      if (hardDriveSelectedQty > hardDriveMaxQty) {
        return false;
      } else {
        bindSelectedProduct(
          cat,
          val,
          qty,
          parseFloat(totalPrice).toFixed(2),
          id,
          productCatId,
          ElementId
        );
        updateItemsCount();
        updateTotalCartPrice();
        hardDriveProgress();
      }
    });
  }

  //qunatity selector handlers
  const qtySelectors = document.querySelectorAll(".qty-selector");
  for (let i = 0; i < qtySelectors.length; i++) {
    qtySelectors[i].addEventListener("change", function () {
      const selectEl = $(this);
      const accordionId = $(this).parents(".accordion").attr("id");
      const parentEl = selectEl.parents(".config-product-item");
      let 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");
      const productCatId = parentEl.attr("data-productcatid");
      const qtySelectEl = parentEl.find(".qty-selector");
      // const qty = parseInt(qtySelectEl.val());

      $(this)
        .closest(".accordion")
        .find(".config-price-span")
        .removeClass("active");
      $(this).closest(".accordion").find(".qty-selector").val(0);

      if (val) {
        parentEl.find(".qty-selector").val(val);
        parentEl.find(".config-price-span").addClass("active");
        $(this)
          .closest(".accordion")
          .find(".form-check-input")
          .prop("checked", false);
        parentEl.find(".form-check-input").prop("checked", true);
      } else {
        $(this).val(0);
        parentEl.find(".config-price-span").removeClass("active");
        parentEl.find(".form-check-input").prop("checked", false);
        parentEl.removeClass("selected");
      }

      let selectedQty = 0;
      parentEl
        .closest(".config-content")
        .find(".qty-selector")
        .each(function () {
          selectedQty = selectedQty + +$(this).val();
        });

      $(this)
        .closest(".accordion")
        .find(".config-product-item")
        .removeClass("selected");

      const qty = parseInt(qtySelectEl.val());
      const price = parentEl.attr("data-price");
      const totalPrice = qty * parseFloat(price).toFixed(2);
      //   const val = checkEl.val();

      parentEl.addClass("selected");

      bindSelectedProduct(
        cat,
        parentEl.find(".form-check-input").val(),
        qty,
        parseFloat(totalPrice).toFixed(2),
        id,
        productCatId,
        accordionId
      );
      updateItemsCount();
      updateTotalCartPrice();

      //handling m2-drive
      if (cat == "m2-drive") {
        if (m2DriveMaxQty >= selectedQty) {
          m2DriveSelectedQty = selectedQty;
          selectEl.attr("data-lastval", val);
          m2DriveProgress();
          // parentEl.find('.product-price').text(parseFloat(price).toFixed(2));
          const selecedSummaryProduct = $(
            `.${cat}-cart-product-${id}[data-accordionid="${accordionId}"]`
          );
          selecedSummaryProduct.find(".summary-total-qty .qty-span").text(val);
          selecedSummaryProduct
            .find(".product-price")
            .text(parseFloat(price).toFixed(2));
          updateTotalCartPrice();
        } else {
          //alert('Limit Reached Please Select 4 Only ');
          // m2DriveSelectedQty  = m2DriveSelectedQty - lastSelectedVal;
          $('[data-bs-target="#alert-modal"]').click();
          // selectEl.val(lastSelectedVal);
          parentEl.find("input").prop("checked", false);
          parentEl.find(".qty-selector").val(0);
          parentEl.find(".config-price-span").removeClass("active");

          let selectedQty = 0;
          parentEl
            .closest(".config-content")
            .find(".qty-selector")
            .each(function () {
              selectedQty = selectedQty + +$(this).val();
              m2DriveSelectedQty = selectedQty;
            });
          m2DriveProgress();
          return false;
        }
      } else {
        // parentEl.find('.product-price').text(parseFloat(price).toFixed(2));
        const selecedSummaryProduct = $(
          `.${cat}-cart-product-${id}[data-accordionid="${accordionId}"]`
        );
        selecedSummaryProduct.find(".summary-total-qty .qty-span").text(val);
        selecedSummaryProduct
          .find(".product-price")
          .text(parseFloat(totalPrice).toFixed(2));
        updateTotalCartPrice();
      }

      //mvme-drive
      if (cat == "nvme-drive") {
        if (nvmeDrivemaxqty >= selectedQty) {
          nvmeDriveselectedqty = selectedQty;
          selectEl.attr("data-lastval", val);
          nvmeDriveProgress();
          // parentEl.find('.product-price').text(parseFloat(price).toFixed(2));
          const selecedSummaryProduct = $(
            `.${cat}-cart-product-${id}[data-accordionid="${accordionId}"]`
          );
          selecedSummaryProduct.find(".summary-total-qty .qty-span").text(val);
          selecedSummaryProduct
            .find(".product-price")
            .text(parseFloat(price).toFixed(2));
          updateTotalCartPrice();
        } else {
          //alert('Limit Reached Please Select 4 Only ');
          nvmeDriveselectedqty = nvmeDriveselectedqty - lastSelectedVal;
          $('[data-bs-target="#alert-modal"]').click();
          selectEl.val(lastSelectedVal);
          parentEl.find("input").trigger("click");
          return false;
        }
      } else {
        // parentEl.find('.product-price').text(parseFloat(price).toFixed(2));
        const selecedSummaryProduct = $(
          `.${cat}-cart-product-${id}[data-accordionid="${accordionId}"]`
        );
        selecedSummaryProduct.find(".summary-total-qty .qty-span").text(val);
        selecedSummaryProduct
          .find(".product-price")
          .text(parseFloat(totalPrice).toFixed(2));
        updateTotalCartPrice();
      }

      //hard-drive
      if (cat == "hard-drive") {
        if (hardDriveMaxQty >= selectedQty) {
          hardDriveSelectedQty = selectedQty;
          selectEl.attr("data-lastval", val);
          hardDriveProgress();
          // parentEl.find(".product-price").text(parseFloat(price).toFixed(2));
          const selecedSummaryProduct = $(
            `.${cat}-cart-product-${id}[data-accordionid="${accordionId}"]`
          );
          selecedSummaryProduct.find(".summary-total-qty .qty-span").text(val);
          // selecedSummaryProduct
          //   .find(".product-price")
          //   .text(parseFloat(price).toFixed(2));
          updateTotalCartPrice();
        } else {
          //alert('Limit Reached Please Select 4 Only ');
          $('[data-bs-target="#alert-modal-hard"]').click();
          selectEl.val(lastSelectedVal);
          parentEl.find("input").trigger("click");
          return false;
        }
      } else {
        // parentEl.find('.product-price').text(parseFloat(price).toFixed(2));
        const selecedSummaryProduct = $(
          `.${cat}-cart-product-${id}[data-accordionid="${accordionId}"]`
        );
        selecedSummaryProduct.find(".summary-total-qty .qty-span").text(val);
        selecedSummaryProduct
          .find(".product-price")
          .text(parseFloat(totalPrice).toFixed(2));
        updateTotalCartPrice();
      }
    });
  }
}, 250);

// updatePrices(rates[usercurency]);