let components = [
  {
    name: "BAREBONE",
    items: [
      {
        name: "Anwi C252 Chipset - 1U - 2x SATA - 1x M.2 - Dual Anwi 1-Gigabit Ethernet (RJ45 - 350W Power Supply",
        price: 99,
        quantity: 1,
      },
    ],
  },
  {
    name: "PROCESSOR",
    serises: [
      {
        name: "Intel<sup>®</sup> Xeon<sup>®</sup> E-2300 Processor Series",

        items: [
          {
            name: "Quad-Core Intel<sup>®</sup> Xeon<sup>®</sup> E-2314 Processor 2.8GHz 8MB Cache (65W)",
            price: 99,
            quantity: 1,
          },
        ],
      },
      {
        name: "Intel<sup>®</sup> Xeon<sup>®</sup> E-2300 Processor Series",
        items: [
          {
            name: "Quad-Core Intel<sup>®</sup> Xeon<sup>®</sup> E-2334 Processor 3.4GHz 8MB Cache (65W)",
            price: 99,
            quantity: 1,
          },
        ],
      },
    ],
  },
  {
    name: "Memory",
    items: [
      {
        name: "16GB PC4-25600 3200MHz DDR4 ECC UDIMM",
        price: 99,
        quantity: 1,
      },
      {
        name: "32GB PC4-25600 3200MHz DDR4 ECC UDIMM",
        price: 99,
        quantity: 1,
      },
    ],
  },
];

$("input:checkbox[name=driver-check-btns]")
  .unbind("change")
  .change(function () {
    if (
      $(this).prop("checked") &&
      $(this)[0].classList[0] == "form-check-input"
    ) {
      let drivetext = $(this).siblings("label").children().text();
      let qty = parseInt(
        $(this).parent().parent().find(".form-select option:selected").val()
      );
      let value = $(this).parent().parent().find(".wish-list-price").text();
      let html =
        '<li class="row my-1 align-items-center"> <span class="col-md-2" id="driver-qty"></span> <span class="order-middle-left col-md-8" id="driver-name">' +
        drivetext +
        '</span><span class="order-price col-md-1"><span id="driver-price" class="price-span "> ' +
        value +
        "</span></span></li>";
      $("#m-2-drive").append(html);
      //$("#driver-name").text($(this).val());
      //$("#driver-price").text('$99.00');
    }
    $(":checkbox").on("change", function () {
      var $list = $("#m-2-drive").empty();
      var name = $(":checkbox:checked")
        .map(function () {
          var title = $(this).next("label").text();
          let value = $(this).parent().parent().find(".wish-list-price").text();
          $(
            `<li class="row my-1 align-items-center"> <span class="col-md-2" id="driver-qty"></span> <span class="order-middle-left col-md-8" id="driver-name"> ${title} </span><span class="order-price col-md-1"><span id="driver-price" class="price-span ">${value}</span></span></li>'`
          ).appendTo($list);
          return title;
        })
        .get();
      console.log(name);
    });
    updateItems();
  });

// driver-config-section
$(this)
  .find(".drivers-1-select")
  .on("change", function () {
    let blockInp = parseInt($(this).val());
    data.driversOne = 99 * blockInp;
    $("#driver-qty").text(blockInp + "X");
    $(this)
      .parent()
      .siblings(".confi-pricing")
      .find(".driversOne-total-price")
      .text(parseFloat(data.driversOne).toFixed(2));
    $("#driver-price").text(parseFloat(data.driversOne).toFixed(2));
    $(driversCheckBox).prop("checked", true);
    $("#driver-name").text($(driversCheckBox).val());
    $("#driver-price").text(
      $(this)
        .parent()
        .siblings(".confi-pricing")
        .find(".driversOne-total-price")
        .html()
    );
    updateItems();
  });
$(this)
  .find(".drivers-2-select")
  .on("change", function () {
    let blockInp = parseInt($(this).val());
    data.driversTwo = 149 * blockInp;
    $("#driver-qty").text(blockInp + "X");
    $(this)
      .parent()
      .siblings(".confi-pricing")
      .find(".driversTwo-total-price")
      .text(parseFloat(data.driversTwo).toFixed(2));
    $("#driver-price").text(parseFloat(data.driversTwo).toFixed(2));
    $(driversCheckBox).prop("checked", true);
    $("#driver-name").text($(driversCheckBox).val());
    $("#driver-price").text(
      $(this)
        .parent()
        .siblings(".confi-pricing")
        .find(".driversTwo-total-price")
        .html()
    );
    updateItems();
  });

$(this)
  .find(".drivers-3-select")
  .on("change", function () {
    let blockInp = parseInt($(this).val());
    data.driversThree = 269 * blockInp;
    $("#driver-qty").text(blockInp + "X");
    $(this)
      .parent()
      .siblings(".confi-pricing")
      .find(".driversThree-total-price")
      .text(parseFloat(data.driversThree).toFixed(2));
    $("#driver-price").text(parseFloat(data.driversThree).toFixed(2));
    $(driversCheckBox).prop("checked", true);
    $("#driver-name").text($(driversCheckBox).val());
    $("#driver-price").text(
      $(this)
        .parent()
        .siblings(".confi-pricing")
        .find(".driversThree-total-price")
        .html()
    );
    updateItems();
  });
$(":checkbox").on("change", function () {
  // if($('#check-btn2[type="checkbox"]').prop("checked")){ // true
  //     $('#check-btn2[type="checkbox"]').prop("checked", false)
  //   }else{
  //     $('#check-btn2[type="checkbox"]').prop("checked", true)
  //   }
  var $list = $("#m-2-drive").empty();
  var name = $(":checkbox:checked")
    .map(function () {
      var title = $(this).next("label").text();
      let value = $(this).parent().parent().find(".wish-list-price").text();
      $(
        `<li class="row my-1 align-items-center"> <span class="col-md-2" id="driver-qty"></span> <span class="order-middle-left col-md-8" id="driver-name"> ${title} </span><span class="order-price col-md-1"><span id="driver-price" class="price-span ">${value}</span></span></li>'`
      ).appendTo($list);
      return title;
    })
    .get();
  console.log(name);
});