$ = jQuery;
function profile(value) {
  document.getElementById("profileSelected").innerHTML = value;
}

function metal(value) {
  document.getElementById("selectedMetal").innerHTML = value;
}

function color(value) {
  document.getElementById("selectedColor").innerHTML = value;
}

function widthFun(value) {
  document.getElementById("selectedWidth").innerHTML = value;
}

function finishFun(value) {
  document.getElementById("selectedFinish").innerHTML = value;
}

function thicknessFun(value) {
  document.getElementById("selectedThick").innerHTML = value;
}

function sizeFun(value) {
  document.getElementById("selectedSize").innerHTML = value;
}

// height of left section
document.addEventListener("DOMContentLoaded", function () {
  function adjustRightMargin() {
    var leftElement = document.querySelector(".band_builder_wrapper .left");
    var builderElement = document.querySelector(
      ".band_builder_wrapper .left .builder-container"
    );
    var rightElement = document.querySelector(".right");
    var headerElement = document.querySelector("header");

    if (leftElement && rightElement && window.innerWidth < 768) {
      var leftHeight = builderElement.offsetHeight;
      var headerHeight = headerElement ? headerElement.offsetHeight : 0;
      rightElement.style.top = headerHeight + leftHeight + "px";

      if (headerElement) {
        var headerHeight1 = headerElement ? headerElement.offsetHeight : 0;
        leftElement.style.top = headerHeight1 + "px";
      }
    } else {
      rightElement.style.marginTop = "";
      leftElement.style.top = "";
    }
  }

  adjustRightMargin();

  window.addEventListener("resize", function () {
    adjustRightMargin();
  });
});

jQuery(document).ready(function ($) {
  function GetpriceFromAPiAjaxCall() {
    $("#preloader").show();
    var ProfileVal = $('input[name="inlineRadioOptions"]:checked').val();
    var MetalTypeVal = $('input[name="metalType"]:checked').val();
    var ColorVal = $('input[name="colorType"]:checked').val();
    var WidthVal = $('input[name="widthType"]:checked').val();
    var FinishVal = $('input[name="finishType"]:checked').val();
    var ThicknessVal = $('input[name="thicknessType"]:checked').val();
    var SizeVal = $("#SizeD").val();

    var ProfileValFullName = $('input[name="inlineRadioOptions"]:checked')
      .parents(".builder-filter-circle-btn")
      .attr("data-bs-title");
    var MetalTypeValName = $('input[name="metalType"]:checked')
      .parents(".builder-filter-circle-btn")
      .attr("data-bs-title");
    var ColorValName = $('input[name="colorType"]:checked')
      .parents(".builder-filter-circle-btn")
      .attr("data-bs-title");
    var WidthValName = $('input[name="widthType"]:checked')
      .parents(".builder-filter-circle-btn")
      .attr("data-bs-title");
    var FinishValName = $('input[name="finishType"]:checked')
      .parents(".builder-filter-circle-btn")
      .attr("data-bs-title");
    var ThicknessValName = $('input[name="thicknessType"]:checked')
      .parents(".builder-filter-circle-btn")
      .attr("data-bs-title");
    var SizeValName = $("#SizeD").val();

    $("#profileSelected").text(ProfileValFullName);
    $("#selectedMetal").text(MetalTypeValName);
    $("#selectedColor").text(ColorValName);
    $("#selectedWidth").text(WidthValName);
    $("#selectedFinish").text(FinishValName);
    $("#selectedThick").text(ThicknessValName);
    $("#selectedSize").text(SizeValName);
    console.log(buildaband_ajax.nonce);
    ajaxurl = $("#ajax_url_BBPWP").val();
    selectedColorId = $('input[name="colorType"][value="' + ColorVal + '"]');
    var filtedata = {
      action: "buildaband_filter_program",
      profile: ProfileVal,
      metaltype: MetalTypeVal,
      color: ColorVal,
      width: WidthVal,
      finish: FinishVal,
      thickness: ThicknessVal,
      size: SizeVal,
      security: buildaband_ajax.nonce
    };

    $.ajax({
      url: buildaband_ajax.ajax_url,
      type: "POST",
      data: filtedata,
      success: function (result) {
        //console.log(result);

        $("#PriceValue").text(result.data.price);
        $(".builder-img-box img").attr("src", result.data.image);

        $("#preloader").hide();
      },
    });

    // Profile_Finish_Color_Width
  }
  //  console.log(response.data.details.metal_color.value);
  $(document).on("change", "input,select", function () {
    GetpriceFromAPiAjaxCall();
  });

  GetpriceFromAPiAjaxCall();
});

$(document).on("click", "#AddPButtCart", function () {
  var ProfileVal = $('input[name="inlineRadioOptions"]:checked').val();
  var MetalTypeVal = $('input[name="metalType"]:checked').val();
  var ColorVal = $('input[name="colorType"]:checked').val();
  var WidthVal = $('input[name="widthType"]:checked').val();
  var FinishVal = $('input[name="finishType"]:checked').val();
  var ThicknessVal = $('input[name="thicknessType"]:checked').val();
  var SizeVal = $("#SizeD").val();
  var PriceValue = $("#PriceValue").text();

  ajaxurl = $("#ajax_url_BBPWP").val();
  Siteurl = $("#Site_Url_BBP").val();

  $("#preloader").show();
  var filtedata = {
    action: "buildaband_add_to_cart_order",
    profile: ProfileVal,
    metaltype: MetalTypeVal,
    color: ColorVal,
    width: WidthVal,
    finish: FinishVal,
    thickness: ThicknessVal,
    size: SizeVal,
    price: PriceValue,
    security: buildaband_addTocartOrder.nonce
  };

  $.ajax({
    url: ajaxurl,
    type: "POST",
    data: filtedata,
    success: function (result) {
      console.log(result);
      window.location.href = Siteurl + "/cart";
      $("#preloader").hide();
    },
  });
});
