// form inputs
const recordSizeInputs = document.querySelectorAll("input[name='record-size']");
const rpmInputs = document.querySelectorAll("input[name='record-rpm']");
const amountInputs = document.querySelectorAll("input[name='record-amount']");
const recordTypeInputs = document.querySelectorAll("input[name='record-type']");
const jacketTypeInputs = document.querySelectorAll("input[name='jacket-type']");
const labelTypeInputs = document.querySelectorAll("input[name='label-type']");
const innerSleeveTypeInputs = document.querySelectorAll(
  "input[name='sleeve-type']"
);
const printedInsertTypeInputs = document.querySelectorAll(
  "input[name='insert-type']"
);
const outerWrapTypeInputs = document.querySelectorAll(
  "input[name='outerwrap-type']"
);
const obiStripTypeInputs = document.querySelectorAll("input[name='obi-type']");
const recordColorInput = document.querySelector("input[name='record-color']");
const effectColorInput = document.querySelector("input[name='effect-color']");
const effectColorTwoInput = document.getElementById("effect-color-2");
const effectColorThreeInput = document.getElementById("effect-color-3");
const recordCuttingInputs = document.querySelectorAll(
  "input[name='record-cutting']"
);
const labelColorInputs = document.querySelectorAll("input[name='label-color']");
const downloadCardsTypeInputs = document.querySelectorAll(
  "input[name='download-card-type']"
);
const waveTestPressingsInput = document.querySelector(
  "input[name='wave-test-pressings']"
);
const recordMasteringInputs = document.querySelectorAll(
  "input[name='is-mastered']"
);
const barcodeTypeInputs = document.querySelectorAll(
  "input[name='barcode-type']"
);

const recordWeightInputs = document.querySelectorAll(
  "input[name='record-weight']"
);
const jacketColorInputs = document.querySelectorAll(
  "input[name='jacket-color']"
);
const jacketFinishInputs = document.querySelectorAll(
  "input[name='jacket-finish']"
);
const innerSleeveColorInputs = document.querySelectorAll(
  "input[name='sleeve-color']"
);
const innerSleeveFinishInputs = document.querySelectorAll(
  "input[name='inner-sleeve-finish']"
);
const printedInsertSidesInputs = document.querySelectorAll(
  "input[name='insert-sides']"
);
const printedInsertColorInputs = document.querySelectorAll(
  "input[name='insert-color']"
);
const printedInsertFinishInputs = document.querySelectorAll(
  "input[name='insert-finish']"
);

const projectTitleInput = document.querySelector("input[name='project-name']");

const recordColorDisplayContainer = document.querySelector(
  ".record-color-display-container"
);
const recordEffectDisplayContainer = document.querySelector(
  ".record-effect-display-container"
);
const innerSleevePrintedColorOptionsContainer = document.getElementById(
  "printed-sleeve-color-options"
);
const innerSleevePaperColorOptionsContainer = document.getElementById(
  "paper-sleeve-color-options"
);
const innerSleeveUploadContainer = document.getElementById(
  "inner-sleeve-upload-container"
);
const shortRunRecordTypeContainer = document.getElementById(
  "short-run-record-type-options"
);
const testPressingsInputContainer = document.getElementById(
  "test-pressings-input-container"
);
const recordTypeStandardLabels = document.querySelectorAll(
  ".record-type-standard-label"
);
const recordTypeColorDisplay = document.getElementById(
  "record-type-color-display"
);
const recordTypeEffectDisplay = document.getElementById(
  "record-type-effect-display"
);

const recordTypeEffectDisplayTwo = document.getElementById(
  "record-type-effect-display-two"
);
const recordTypeEffectDisplayThree = document.getElementById(
  "record-type-effect-display-three"
);
const standardColorPickerContainers = document.querySelectorAll(
  ".builder-record-color-picker"
);
const splatterColorPickerContainer = document.querySelector(
  ".builder-splatter-color-picker"
);
const swirlColorPickerContainer = document.querySelector(
  ".builder-swirl-color-picker"
);

const jacketFrontUpload = document.querySelector(
  "input[name='jacket-front-upload']"
);
//const labelFrontUpload = document.querySelector("input[name='label-front-upload']");
const innerSleeveUpload = document.querySelector("input[name='sleeve-upload']");
const printedInsertUpload = document.querySelector(
  "input[name='insert-upload']"
);
const obiStripUpload = document.querySelector("input[name='obi-upload']");

const jacketFrontFilenameDisplay = document.getElementById(
  "jacket-front-upload-file-display"
);
const removeJacketFrontImage = document.getElementById(
  "remove-jacket-front-image"
);
//const labelFrontFilenameDisplay = document.getElementById("label-front-upload-file-display");
//const removeLabelFrontImage = document.getElementById("remove-label-front-image");
const sleeveFilenameDisplay = document.getElementById(
  "sleeve-upload-file-display"
);
const removeSleeveImage = document.getElementById("remove-sleeve-image");
const insertFilenameDisplay = document.getElementById(
  "insert-upload-file-display"
);
const removeInsertImage = document.getElementById("remove-insert-image");
const obiFilenameDisplay = document.getElementById("obi-upload-file-display");
const removeObiImage = document.getElementById("remove-obi-image");
const minQtyDisplay = document.getElementById("min-qty-display");
const maxQtyDisplay = document.getElementById("max-qty-display");

const testPressingsInput = document.querySelector(
  "input[name='test-pressings']"
);
const quantityInput = document.querySelector("input[name='record-quantity']");

const testPressingsDisplay = document.querySelector("#test-pressings-display");
const quantityDisplay = document.querySelector("#qty-value-display");

// modal selectors
const closeModalButton = document.getElementById("close-breakdown-modal");
const modalBackground = document.querySelector(".modal-background");
const pricingBreakdownButton = document.getElementById(
  "pricing-breakdown-button"
);
const breakdownContainer = document.querySelector(
  ".builder-breakdown-container"
);
const continueEditingButton = document.getElementById(
  "continue-editing-button"
);
const builderSubmitButton = document.getElementById("builder-submit-button");

// pricing breakdown selectors
// const orderTotalDisplay = document.getElementById("order-total-display");
// const orderTotalPerUnitDisplay = document.getElementById(
//   "order-total-per-unit"
// );
const projectTitleDisplay = document.getElementById("project-title-display");
// returnhere const sliderTotalPriceDisplay = document.getElementById(
//   "slider-total-price-display"
// );
// const sliderTotalPriceDisplayPerUnit = document.getElementById(
//   "slider-total-price-per-unit"
// );

// mobile display components
const mobileSliderContainer = document.getElementById(
  "mobile-slider-container"
);
const mobileQuantityInput = document.getElementById("record-quantity-mobile");
const quantityValueDisplayMobile = document.getElementById(
  "qty-value-display-mobile"
);
const minQtyDisplayMobile = document.getElementById("min-qty-display-mobile");
const maxQtyDisplayMobile = document.getElementById("max-qty-display-mobile");
// returnhere const sliderTotalPriceDisplayMobile = document.getElementById(
//   "slider-total-price-display-mobile"
// );
// const sliderTotalPriceDisplayPerUnitMobile = document.getElementById(
//   "slider-total-price-per-unit-mobile"
// );
const pricingBreakdownButtonMobile = document.getElementById(
  "pricing-breakdown-button-mobile"
);
const mobileQtyActiveDisplay = document.getElementById(
  "mobile-qty-active-display"
);

// breakdown display selectors
const masteringBreakdownDisplay = document.getElementById(
  "mastering-breakdown-display"
);
const setupFeeBreakdownDisplay = document.getElementById(
  "setup-fee-breakdown-display"
);
const cuttingFeeBreakdownDisplay = document.getElementById(
  "cutting-fee-breakdown-display"
);
const platingFeeBreakdownDisplay = document.getElementById(
  "plating-fee-breakdown-display"
);
const stampersFeeBreakdownDisplay = document.getElementById(
  "stampers-fee-breakdown-display"
);
const testPressingsFeeBreakdownDisplay = document.getElementById(
  "test-pressings-fee-breakdown-display"
);
const centerLabelFeeBreakdownDisplay = document.getElementById(
  "center-labels-fee-breakdown-display"
);
const recordsFeeBreakdownDisplay = document.getElementById(
  "records-fee-breakdown-display"
);
const innerSleeveFeeBreakdownDisplay = document.getElementById(
  "inner-sleeve-fee-breakdown-display"
);
const jacketFeeBreakdownDisplay = document.getElementById(
  "jacket-fee-breakdown-display"
);
const insertFeeBreakdownDisplay = document.getElementById(
  "insert-fee-breakdown-display"
);
const outerwrapFeeBreakdownDisplay = document.getElementById(
  "outerwrap-fee-breakdown-display"
);
const downloadCardsFeeBreakdownDisplay = document.getElementById(
  "download-cards-fee-breakdown-display"
);
const miscFeeBreakdownDisplay = document.getElementById(
  "misc-fee-breakdown-display"
);
const insertionFeeBreakdownDisplay = document.getElementById(
  "insertion-fee-breakdown-display"
);
const masteringBreakdownOptionDisplay = document.getElementById(
  "mastering-option-display"
);
const masteringBreakdownOptionPriceDisplay = document.getElementById(
  "mastering-option-sub-price"
);
const setupFeeBreakdownOptionDisplay = document.getElementById(
  "setup-option-display"
);
const setupFeeBreakdownOptionPriceDisplay = document.getElementById(
  "setup-option-sub-price"
);
const cuttingBreakdownOptionDisplay = document.getElementById(
  "cutting-option-display"
);
const cuttingBreakdownOptionPriceDisplay = document.getElementById(
  "cutting-option-sub-price"
);
const platingBreakdownOptionDisplay = document.getElementById(
  "plating-option-display"
);
const platingBreakdownOptionPriceDisplay = document.getElementById(
  "plating-option-sub-price"
);
const testPressingsInitialPriceDisplay = document.getElementById(
  "test-pressings-initial-sub-price"
);
const numOfAdditionalPressingsDisplay = document.getElementById(
  "num-of-additional-pressings-display"
);
const additionalTestPressingsPriceDisplay = document.getElementById(
  "test-pressings-additional-sub-price"
);
const centerLabelBreakdownOptionDisplay = document.getElementById(
  "center-labels-option-display"
);
const centerLabelBreakdownOptionPriceDisplay = document.getElementById(
  "center-labels-option-sub-price"
);
const recordSizeBreakdownDisplay = document.getElementById(
  "record-size-breakdown-display"
);
const recordWeightBreakdownDisplay = document.getElementById(
  "record-weight-breakdown-display"
);
const recordTypeBreakdownDisplay = document.getElementById(
  "record-type-breakdown-display"
);
const recordBreakdownOptionsPriceDisplay = document.getElementById(
  "record-option-sub-price"
);
const sleeveTypeBreakdownDisplay = document.getElementById(
  "sleeve-type-breakdown-display"
);
const sleeveColorBreakdownDisplay = document.getElementById(
  "sleeve-color-breakdown-display"
);
const sleeveFinishBreakdownDisplay = document.getElementById(
  "sleeve-finish-breakdown-display"
);
const sleeveBreakdownOptionPriceDisplay = document.getElementById(
  "sleeve-option-sub-price"
);
const jacketTypeBreakdownDisplay = document.getElementById(
  "jacket-type-breakdown-display"
);
const jacketColorBreakdownDisplay = document.getElementById(
  "jacket-color-breakdown-display"
);
const jacketFinishBreakdownDisplay = document.getElementById(
  "jacket-finish-breakdown-display"
);
const jacketBreakdownOptionPriceDisplay = document.getElementById(
  "jacket-option-sub-price"
);
const insertTypeBreakdownDisplay = document.getElementById(
  "insert-type-breakdown-display"
);
const insertSidesBreakdownDisplay = document.getElementById(
  "insert-sides-breakdown-display"
);
const insertColorBreakdownDisplay = document.getElementById(
  "insert-color-breakdown-display"
);
const insertFinishBreakdownDisplay = document.getElementById(
  "insert-finish-breakdown-display"
);
const insertBreakdownOptionPriceDisplay = document.getElementById(
  "insert-option-sub-price"
);
const outerwrapBreakdownOptionDisplay = document.getElementById(
  "outerwrap-option-display"
);
const outerwrapBreakdownOptionPriceDisplay = document.getElementById(
  "outerwrap-option-sub-price"
);
const downloadCardBreakdownOptionDisplay = document.getElementById(
  "download-card-option-display"
);
const downloadCardBreakdownOptionPriceDisplay = document.getElementById(
  "download-card-option-sub-price"
);
// const insertionOfRecordPriceDisplay = document.getElementById(
//   "insertion-of-record-price-display"
// );
// const insertionOfSleevePriceDisplay = document.getElementById(
//   "insertion-of-sleeve-price-display"
// );
// const insertionOfInsertPriceDisplay = document.getElementById(
//   "insertion-of-insert-price-display"
// );
// const insertionOfJacketPriceDisplay = document.getElementById(
//   "insertion-of-jacket-price-display"
// );
const barcodeBreakdownOptionDisplay = document.getElementById(
  "barcode-option-display"
);
const barcodeBreakdownOptionPriceDisplay = document.getElementById(
  "barcode-option-sub-price"
);
const barcodeFeeBreakdownDisplay = document.getElementById(
  "barcode-fee-breakdown-display"
);
const breakdownEffectColorOneDisplay = document.getElementById(
  "breakdown-effect-color-one"
);
const breakdownEffectColorTwoDisplay = document.getElementById(
  "breakdown-effect-color-two"
);
const breakdownEffectColorThreeDisplay = document.getElementById(
  "breakdown-effect-color-three"
);
const breakdownBaseColorDisplay = document.getElementById(
  "breakdown-base-color-display"
);
const breakdownRpmDisplay = document.getElementById("rpm-option-display");

// hidden form inputs for pricing
const preFlightPriceInput = document.getElementById("pre-flight-price-input");
const setupPriceInput = document.getElementById("setup-price-input");
const cuttingPriceInput = document.getElementById("cutting-price-input");
const platingPriceInput = document.getElementById("plating-price-input");
const stampersPriceInput = document.getElementById("stampers-price-input");
const testPressingsPriceInput = document.getElementById(
  "test-pressings-price-input"
);
const centerLabelPriceInput = document.getElementById(
  "center-label-price-input"
);
const recordPriceInput = document.getElementById("record-price-input");
const innerSleevePriceIput = document.getElementById(
  "inner-sleeve-price-input"
);
const jacketPriceInput = document.getElementById("jacket-price-input");
const insertPriceInput = document.getElementById("insert-price-input");
const downloadCardPriceInput = document.getElementById(
  "download-card-price-input"
);
const outerwrapPriceInput = document.getElementById("outerwrap-price-input");
const insertionPriceInput = document.getElementById("insertion-price-input");
const miscPriceInput = document.getElementById("misc-price-input");
const shippingEstimatePriceInput = document.getElementById(
  "shipping-estimate-price-input"
);
const totalPriceInput = document.getElementById("total-price-input");
// -WB-250306-price per unit
const pricePerUnitInput = document.getElementById("price-per-unit-input-2");
const obiStripPriceInput = document.getElementById("obi-strip-price-input");
const platingDisplayInput = document.getElementById("plating-display-input");
const additionalTestPressingsInput = document.getElementById(
  "additional-test-pressings-input"
);
const additionalTestPressingsPriceInput = document.getElementById(
  "additional-test-pressings-price-input"
);
const insertionOfRecordPriceInput = document.getElementById(
  "insertion-of-record-price-input"
);
const insertionOfInnerSleevePriceInput = document.getElementById(
  "insertion-of-inner-sleeve-price-input"
);
const insertionOfPrintedInsertPriceInput = document.getElementById(
  "insertion-of-printed-insert-price-input"
);
const insertionOfJacketPriceInput = document.getElementById(
  "insertion-of-jacket-price-input"
);
const testPressingsTotalPriceInput = document.getElementById(
  "test-pressings-total-price-input"
);
const barcodePriceInput = document.getElementById("barcode-price-input");

const missingInfoDisplay = document.getElementById("missing-info-display");
const missingInfoContainer = document.getElementById("missing-info-container");
const jacketOptionsContainer = document.getElementById(
  "jacket-options-container"
);
const labelUploadContainer = document.getElementById("label-options-container");
const labelColorOptionsContainer = document.getElementById(
  "blank-label-options-container"
);
const sleeveOptionsContainer = document.getElementById(
  "sleeve-options-container"
);
const insertOptionsContainer = document.getElementById(
  "insert-options-container"
);
const obiOptionsContainer = document.getElementById("obi-options-container");
const obiStripContainer = document.getElementById("obi-strip-container");
const jacketFinishContainer = document.getElementById("jacket-finish-options");
const innerSleeveFinishContainer = document.getElementById(
  "inner-sleeve-finish-options"
);
const innerSleeveFinishOuterContainer = document.getElementById(
  "inner-sleeve-finish-outer-container"
);
const insertFinishContainer = document.getElementById("insert-finish-options");
const shortRunRecordTypeColorContainer = document.getElementById(
  "short-run-record-type-color-container"
);
const insertContainer = document.getElementById("insert-container");

const prepareToSubmit = document.getElementById("prepare-to-submit");
const startNewSubmissionButton = document.getElementById(
  "start-new-submission"
);

// visualizer selectors
const jacketVisualDisplay = document.getElementById(
  "builder-jacket-front-display"
);
const recordVisualDisplay = document.getElementById("builder-record-display");
const visualizerContainer = document.querySelector(".builder-right-container");
const recordVisualDisplayDouble = document.getElementById(
  "builder-record-display-double"
);
const recordVisualDisplayTriple = document.getElementById(
  "builder-record-display-triple"
);

// selectors for record length
const rpm45OptimumDisplay = document.getElementById("45-rpm-optimum-display");
const rpm45MaxDisplay = document.getElementById("45-rpm-max-display");
const rpm33OptimumDisplay = document.getElementById("33-rpm-optimum-display");
const rpm33MaxDisplay = document.getElementById("33-rpm-max-display");
const singleVinylTotalDisplay = document.getElementById(
  "single-vinyl-total-display"
);
const singleVinylPerSideDisplay = document.getElementById(
  "single-vinyl-per-side-display"
);
const doubleVinylTotalDisplay = document.getElementById(
  "double-vinyl-total-display"
);
const doubleVinylPerSideDisplay = document.getElementById(
  "double-vinyl-per-side-display"
);
const tripleVinylTotalDisplay = document.getElementById(
  "triple-vinyl-total-display"
);
const tripleVinylPerSideDisplay = document.getElementById(
  "triple-vinyl-per-side-display"
);

// canvas selectors
const canvas1 = document.getElementById("canvas-layer-one");
const canvas2 = document.getElementById("canvas-layer-two");
const canvas3 = document.getElementById("canvas-layer-three");
const canvas2Context = canvas2.getContext("2d", { willReadFrequently: true });
const canvas1Context = canvas1.getContext("2d", { willReadFrequently: true });
const canvas3Context = canvas3.getContext("2d", { willReadFrequently: true });

const layerOne = {
  imageData: null,
  initialState: null,
  canvas: canvas1,
  context: canvas1Context,
};

const layerTwo = {
  imageData: null,
  initialState: null,
  canvas: canvas2,
  context: canvas2Context,
};

const layerThree = {
  imageData: null,
  initialState: null,
  canvas: canvas3,
  context: canvas3Context,
};

const effectUrls = {
  swirl:
    "https://cdn.prod.website-files.com/66ccc26002226754a4397fa4/66e987518cbed16830a1052d_smoke_new.jpg",
  splatterLayerOne:
    "https://cdn.prod.website-files.com/66ccc26002226754a4397fa4/66e9894f0ea25d61195426ea_SplatterMockup_Layer_One_new.jpg",
  splatterLayerTwo:
    "https://cdn.prod.website-files.com/66ccc26002226754a4397fa4/66e9894e3e0cb7f2087b5103_SplatterMockup_Layer_Two_new.jpg",
  splatterLayerThree:
    "https://cdn.prod.website-files.com/66ccc26002226754a4397fa4/66e9894e9fc33030a8f6df82_SplatterMockup_Layer_Three_new.jpg",
};

const recordVisualUrls = {
  noSelection:
    "https://cdn.prod.website-files.com/66ccc26002226754a4397fa4/66d71a0a7bcb960385dbc5db_blue.png",
  black:
    "https://cdn.prod.website-files.com/66ccc26002226754a4397fa4/66e8804555e9b4d910e76f85_Black.png",
};

function setOffsetForVisualizer() {
  const height = window.getComputedStyle(visualizerContainer).height;
  visualizerContainer.style.transform = "translateY(0)";
  visualizerContainer.style.top = `calc(100vh - ${height})`;
}
setOffsetForVisualizer();

window.addEventListener("resize", setOffsetForVisualizer);

function init() {
  // hide anything that is not an option with the default 100 quantity
  setElementsDisplay([obiStripContainer], "none");
  setInputsRequiredFalse(obiStripContainer.querySelectorAll("input"));

  // hide option containers for anything that doesn't have pre-selected options
  setElementsDisplay(
    [
      recordColorDisplayContainer,
      recordEffectDisplayContainer,
      labelColorOptionsContainer,
      sleeveOptionsContainer,
      insertOptionsContainer,
      recordVisualDisplayDouble,
      recordVisualDisplayTriple,
    ],
    "none"
  );

  recordVisualDisplay.classList.add("record-visual-margin-left-none");
  setDefaultValues();
  setRPMLengthDislayValues();
  setDiscLengthDisplayValues();

  // Fetch prices and calculate totals after setting defaults
  fetchPrices().then(() => {
    getAllPrices();
    getTotalPrice();
  });
}

const selected = {
  recordSize: null,
  rpm: null,
  amount: null,
  recordType: null,
  jacketType: "single pocket",
  labelType: null,
  labelColor: null,
  innerSleeveType: null,
  printedInsertType: null,
  outerWrapType: null,
  obiStripType: null,
  recordWeight: null,
  jacketColor: null,
  jacketFinish: null,
  innerSleeveColor: null,
  innerSleeveFinish: null,
  printedInsertSides: null,
  printedInsertColor: null,
  printedInsertFinish: null,
  testPressings: testPressingsInput.value,
  recordColorName: null,
  recordColorSku: null,
  effectColorName: null,
  effectColorSku: null,
  effectColorTwoName: null,
  effectColorTwoSku: null,
  effectColorThreeName: null,
  effectColorThreeSku: null,
  projectTitle: null,
  quantity: quantityInput.value,
  recordCutting: null,
  downloadCardType: null,
  waveTestPressings: null,
  interimRecordTypeElement: null,
  isMastered: null,
  barcodeType: null,
};

init();

document.body.addEventListener("click", (e) => {
  let allVisibleElements = document.querySelectorAll(".visible");
  document.body.style.overflow = "auto";

  allVisibleElements.forEach((el) => {
    el.classList.remove("visible");
  });
});

document.body.addEventListener("keydown", (e) => {
  if (e.key === "Escape") {
    let allVisibleElements = document.querySelectorAll(".visible");
    document.body.style.overflow = "auto";

    allVisibleElements.forEach((el) => {
      el.classList.remove("visible");
    });
  }
});

function updateCustomRadioSelection(nodeList, name) {
  nodeList.forEach((node) => {
    if (node.checked) {
      selected[name] = node.value;
      node.parentElement.classList.add("selected-radio");
    } else {
      node.parentElement.classList.remove("selected-radio");
    }
  });
}

function updateRadioSelection(nodeList, name) {
  nodeList.forEach((node) => {
    if (node.checked) {
      selected[name] = node.value;
    }
  });
}

function setElementsDisplay(nodeList, display) {
  nodeList.forEach((node) => {
    node.style.display = display;
  });
}

function clearInputs(nodeList, keys) {
  nodeList.forEach((node) => {
    node.parentElement.classList.remove("selected-radio");
    if (node.type === "radio" || node.type === "checkbox") {
      node.checked = false;
    } else {
      node.value = "";
    }

    for (let key of keys) {
      selected[key] = null;
    }
  });
}

function setInputsRequiredTrue(nodeList) {
  nodeList.forEach((node) => {
    if (node.type !== "file") {
      node.setAttribute("required", "true");
    }
  });
}

function setInputsRequiredFalse(nodeList) {
  nodeList.forEach((node) => {
    node.removeAttribute("required");
  });
}

function setDefaultValues() {
  jacketTypeInputs.forEach((input) => {
    if (input.value === "single pocket") {
      input.checked = true;
      input.parentElement.classList.add("selected-radio");
      selected.jacketType = input.value;
    } else {
      input.checked = false;
      input.parentElement.classList.remove("selected-radio");
    }
  });
  jacketColorInputs.forEach((input) => {
    if (input.value === "black & white") {
      input.checked = true;
      selected.jacketColor = input.value;
    } else {
      input.checked = false;
    }
  });
  jacketFinishInputs.forEach((input) => {
    if (input.value === "gloss") {
      input.checked = true;
      selected.jacketFinish = input.value;
    } else {
      input.checked = false;
    }
  });
  labelTypeInputs.forEach((input) => {
    if (input.value === "full color") {
      input.checked = true;
      input.parentElement.classList.add("selected-radio");
      selected.labelType = input.value;
    } else {
      input.checked = false;
      input.parentElement.classList.remove("selected-radio");
    }
  });
  innerSleeveTypeInputs.forEach((input) => {
    if (input.value === "anti-static") {
      input.checked = true;
      input.parentElement.classList.add("selected-radio");
      selected.innerSleeveType = input.value;
    } else {
      input.checked = false;
      input.parentElement.classList.remove("selected-radio");
    }
  });
  printedInsertTypeInputs.forEach((input) => {
    if (input.value === "none") {
      input.checked = true;
      input.parentElement.classList.add("selected-radio");
      selected.printedInsertType = input.value;
    } else {
      input.checked = false;
      input.parentElement.classList.remove("selected-radio");
    }
  });
  downloadCardsTypeInputs.forEach((input) => {
    if (input.value === "none") {
      input.checked = true;
      input.parentElement.classList.add("selected-radio");
      selected.downloadCardType = input.value;
    } else {
      input.checked = false;
      input.parentElement.classList.remove("selected-radio");
    }
  });
  outerWrapTypeInputs.forEach((input) => {
    if (input.value === "polybag") {
      input.checked = true;
      input.parentElement.classList.add("selected-radio");
      selected.outerWrapType = input.value;
    } else {
      input.checked = false;
      input.parentElement.classList.remove("selected-radio");
    }
  });
  barcodeTypeInputs.forEach((input) => {
    if (input.value === "none") {
      input.checked = true;
      input.parentElement.classList.add("selected-radio");
      selected.barcodeType = input.value;
    } else {
      input.checked = false;
      input.parentElement.classList.remove("selected-radio");
    }
  });
}

function setJacketOptions() {
  if (selected.recordSize === "7") {
    setElementsDisplay(
      [document.getElementById("wide-spine").parentElement.parentElement],
      "none"
    );
    setElementsDisplay(
      [document.getElementById("gatefold").parentElement.parentElement],
      "none"
    );

    if (
      selected.jacketType === "wide spine" ||
      selected.jacketType === "gatefold"
    ) {
      clearInputs(jacketTypeInputs, ["jacketType"]);
    }
  } else {
    setElementsDisplay(
      [document.getElementById("gatefold").parentElement.parentElement],
      "flex"
    );
    setElementsDisplay(
      [document.getElementById("wide-spine").parentElement.parentElement],
      "flex"
    );
  }
}

function setJacketTypeBasedOnDiscs() {
  if (selected.amount === "single") {
    let validOptions = [];
    validOptions.push(
      document.getElementById("single-pocket").parentElement.parentElement
    );

    setElementsDisplay(validOptions, "flex");
  } else {
    let invalidOptions = [];
    invalidOptions.push(
      document.getElementById("single-pocket").parentElement.parentElement
    );

    setElementsDisplay(invalidOptions, "none");

    if (selected.jacketType === "single pocket") {
      clearInputs(jacketTypeInputs, ["jacketType"]);
      clearInputs(jacketColorInputs, ["jacketColor"]);
    }
  }
}

function setRecordOptionsBasedOnSize() {
  if (!selected.recordSize) {
    return;
  }

  if (selected.recordSize === "7") {
    const invalidOptions = [];
    invalidOptions.push(document.getElementById("heavyweight").parentElement);
    invalidOptions.push(
      document.getElementById("double").parentElement.parentElement
    );
    invalidOptions.push(
      document.getElementById("triple").parentElement.parentElement
    );
    setElementsDisplay(invalidOptions, "none");

    if (selected.recordWeight === "heavyweight") {
      clearInputs(recordWeightInputs, ["recordWeight"]);
    }

    if (selected.amount === "double" || selected.amount === "triple") {
      clearInputs(amountInputs, ["amount"]);
    }
  } else {
    setElementsDisplay(
      [document.getElementById("heavyweight").parentElement],
      "block"
    );

    const validOptions = [];
    validOptions.push(
      document.getElementById("double").parentElement.parentElement
    );
    validOptions.push(
      document.getElementById("triple").parentElement.parentElement
    );

    setElementsDisplay(validOptions, "flex");
  }
}

function setInsertOptionsBasedOnSize() {
  if (!selected.recordSize) {
    return;
  }

  if (selected.recordSize === "7") {
    const invalidOptions = [];
    invalidOptions.push(insertContainer);
    invalidOptions.push(insertFilenameDisplay);

    setElementsDisplay(invalidOptions, "none");

    clearInputs(printedInsertTypeInputs, ["printedInsertType"]);
    clearInputs(printedInsertColorInputs, ["printedInsertColor"]);
    clearInputs(printedInsertSidesInputs, ["printedInsertSides"]);
    clearInputs(printedInsertFinishInputs, ["printedInsertFinish"]);
    clearInputs([printedInsertUpload], []);
  } else {
    const validOptions = [];
    validOptions.push(insertContainer);

    setElementsDisplay(validOptions, "block");
  }
}

function setInnerSleeveOptionsBasedOnSize() {
  if (!selected.recordSize) {
    return;
  }

  if (selected.recordSize === "7") {
    const invalidOptions = [];
    invalidOptions.push(
      document.getElementById("sleeve-anti-static").parentElement.parentElement
    );

    setElementsDisplay(invalidOptions, "none");

    if (selected.innerSleeveType === "anti-static") {
      clearInputs(innerSleeveTypeInputs, ["innerSleeveType"]);
    }
  } else {
    const validOptions = [];
    validOptions.push(
      document.getElementById("sleeve-anti-static").parentElement.parentElement
    );

    setElementsDisplay(validOptions, "flex");
  }
}

function setMockupDisplayDiscs() {
  if (!selected.amount || selected.amount === "single") {
    setElementsDisplay(
      [recordVisualDisplayDouble, recordVisualDisplayTriple],
      "none"
    );
    recordVisualDisplay.classList.add("record-visual-margin-left-none");
  } else if (selected.amount === "double") {
    let elementsWithMarginLeftNone = document.querySelectorAll(
      ".record-visual-margin-left-none"
    );
    elementsWithMarginLeftNone.forEach((element) => {
      element.classList.remove("record-visual-margin-left-none");
    });

    let backgroundImage = recordVisualDisplay.style.backgroundImage;

    recordVisualDisplayDouble.classList.add("record-visual-margin-left-none");
    recordVisualDisplayDouble.style.backgroundImage = backgroundImage;
    setElementsDisplay([recordVisualDisplayDouble], "flex");
    setElementsDisplay([recordVisualDisplayTriple], "none");
  } else {
    let elementsWithMarginLeftNone = document.querySelectorAll(
      ".record-visual-margin-left-none"
    );
    elementsWithMarginLeftNone.forEach((element) => {
      element.classList.remove("record-visual-margin-left-none");
    });

    let backgroundImage = recordVisualDisplay.style.backgroundImage;

    recordVisualDisplayDouble.style.backgroundImage = backgroundImage;
    recordVisualDisplayTriple.style.backgroundImage = backgroundImage;
    setElementsDisplay(
      [recordVisualDisplayDouble, recordVisualDisplayTriple],
      "flex"
    );
  }
}

function setRPMLengthDislayValues() {
  if (selected.recordSize === "12") {
    rpm33OptimumDisplay.innerText = "24 - 28";
    rpm33MaxDisplay.innerText = "44 - 48";

    rpm45OptimumDisplay.innerText = "18";
    rpm45MaxDisplay.innerText = "24 - 30";
  } else {
    rpm33OptimumDisplay.innerText = "5";
    rpm33MaxDisplay.innerText = "9";

    rpm45OptimumDisplay.innerText = "3";
    rpm45MaxDisplay.innerText = "6";
  }
}

function setDiscLengthDisplayValues() {
  if (selected.rpm === "33") {
    if (selected.recordSize == "12") {
      singleVinylTotalDisplay.innerText = "48";
      singleVinylPerSideDisplay.innerText = "24";

      doubleVinylTotalDisplay.innerText = "96";
      doubleVinylPerSideDisplay.innerText = "24";

      tripleVinylTotalDisplay.innerText = "144";
      tripleVinylPerSideDisplay.innerText = "24";
    } else {
      singleVinylTotalDisplay.innerText = "18";
      singleVinylPerSideDisplay.innerText = "9";

      doubleVinylTotalDisplay.innerText = "36";
      doubleVinylPerSideDisplay.innerText = "9";

      tripleVinylTotalDisplay.innerText = "54";
      tripleVinylPerSideDisplay.innerText = "9";
    }
  } else {
    if (selected.recordSize == "12") {
      singleVinylTotalDisplay.innerText = "30";
      singleVinylPerSideDisplay.innerText = "15";

      doubleVinylTotalDisplay.innerText = "60";
      doubleVinylPerSideDisplay.innerText = "15";

      tripleVinylTotalDisplay.innerText = "90";
      tripleVinylPerSideDisplay.innerText = "15";
    } else {
      singleVinylTotalDisplay.innerText = "12";
      singleVinylPerSideDisplay.innerText = "6";

      doubleVinylTotalDisplay.innerText = "24";
      doubleVinylPerSideDisplay.innerText = "6";

      tripleVinylTotalDisplay.innerText = "36";
      tripleVinylPerSideDisplay.innerText = "6";
    }
  }
}

// event listeners for custom radio buttons
recordMasteringInputs.forEach((input) => {
  input.addEventListener("change", () => {
    updateCustomRadioSelection(recordMasteringInputs, "isMastered");

    getPreFlightPrice();
    getTotalPrice();
  });
});

downloadCardsTypeInputs.forEach((input) => {
  input.addEventListener("change", () => {
    updateCustomRadioSelection(downloadCardsTypeInputs, "downloadCardType");

    getDownloadCardsPrice();
    getTotalPrice();
  });
});

recordCuttingInputs.forEach((input) => {
  input.addEventListener("change", () => {
    updateCustomRadioSelection(recordCuttingInputs, "recordCutting");

    getAllPrices();
    getTotalPrice();
  });
});

recordSizeInputs.forEach((input) => {
  input.addEventListener("change", () => {
    updateCustomRadioSelection(recordSizeInputs, "recordSize");
    setRPMLengthDislayValues();
    setDiscLengthDisplayValues();
    setRecordOptionsBasedOnSize();
    setInsertOptionsBasedOnSize();
    setInnerSleeveOptionsBasedOnSize();
    setJacketOptions();
    getAllPrices();
    getTotalPrice();
  });
});

rpmInputs.forEach((input) => {
  input.addEventListener("change", () => {
    updateCustomRadioSelection(rpmInputs, "rpm");

    setDiscLengthDisplayValues();
  });
});

amountInputs.forEach((input) => {
  input.addEventListener("change", () => {
    updateCustomRadioSelection(amountInputs, "amount");

    setMockupDisplayDiscs();
    setJacketTypeBasedOnDiscs();
    getAllPrices();
    getTotalPrice();
  });
});

function showColorOptions(label) {
  let previouslyOpenedOptions = document.querySelectorAll(".visible");
  previouslyOpenedOptions.forEach((option) => {
    option.classList.remove("visible");
  });

  clearEffectColorOptions();
  clearSelectedClasses();
  clearEffects();
  clearSelectedColors();
  clearInputs(recordTypeInputs, ["recordType"]);

  let colorPicker =
    label.parentElement.parentElement.querySelector(
      ".builder-record-color-picker"
    ) ||
    label.parentElement.parentElement.querySelector(
      ".builder-splatter-color-picker"
    ) ||
    label.parentElement.parentElement.querySelector(
      ".builder-swirl-color-picker"
    );

  colorPicker.classList.add("visible");
}

standardColorPickerContainers.forEach((container) => {
  container.addEventListener("click", (e) => {
    e.stopPropagation();

    if (e.target.classList.contains("color-picker-option")) {
      setElementsDisplay([recordColorDisplayContainer], "block");
      container.classList.remove("visible");

      let colorName = e.target.getAttribute("data-name");
      let colorSku = e.target.getAttribute("data-sku");
      let imageUrl = e.target.getAttribute("data-image-url");
      recordTypeColorDisplay.innerText = `${colorName} ${colorSku}`;
      recordColorInput.value = colorName;
      recordVisualDisplay.style.backgroundImage = `url(${imageUrl})`;

      selected.recordColorName = colorName;
      selected.recordColorSku = colorSku;

      selected.recordType = selected.interimRecordTypeElement.value;
      selected.interimRecordTypeElement.checked = true;
      updateCustomRadioSelection(recordTypeInputs, "recordType");

      setMockupDisplayDiscs();
      getAllPrices();
      getTotalPrice();
    }
  });
});

const splatterOptions = {
  recordColorName: null,
  recordColorSku: null,
  splatterColorOneName: null,
  splatterColorOneSku: null,
  splatterColorTwoName: null,
  splatterColorTwoSku: null,
  splatterColorThreeName: null,
  splatterColorThreeSku: null,
  splatterHexColorOne: null,
  splatterHexColorTwo: null,
  splatterHexColorThree: null,
  imageUrl: null,
};

function clearEffectColorOptions() {
  Object.keys(splatterOptions).forEach((key) => {
    splatterOptions[key] = null;
  });

  Object.keys(swirlOptions).forEach((key) => {
    swirlOptions[key] = null;
  });
}

function clearSelectedClasses() {
  let selectedClasses = Array.from(
    document.querySelectorAll(".selected-effect-color")
  );
  let selectedRecordColor = document.querySelector(".selected-record-color");
  if (selectedRecordColor) {
    selectedClasses.push(selectedRecordColor);
  }

  selectedClasses.forEach((el) => {
    el.classList.remove("selected-effect-color");
    el.classList.remove("selected-record-color");
  });
}

splatterColorPickerContainer.addEventListener("click", async (e) => {
  e.stopPropagation();
  e.preventDefault();

  if (e.target.classList.contains("record-color-option")) {
    splatterOptions.recordColorName = e.target.getAttribute("data-name");
    splatterOptions.recordColorSku = e.target.getAttribute("data-sku");
    splatterOptions.imageUrl = e.target.getAttribute("data-image-url");

    let previouslySelected = document.querySelectorAll(
      ".selected-record-color"
    );
    previouslySelected.forEach((el) => {
      el.classList.remove("selected-record-color");
    });

    e.target.classList.add("selected-record-color");
    recordVisualDisplay.style.backgroundImage = `url(${splatterOptions.imageUrl})`;

    selected.recordColorName = splatterOptions.recordColorName;
    selected.recordColorSku = splatterOptions.recordColorSku;
    recordTypeColorDisplay.innerText = `${selected.recordColorName} ${selected.recordColorSku}`;
    setElementsDisplay([recordColorDisplayContainer], "block");
    recordColorInput.value = selected.recordColorName;
  } else if (e.target.classList.contains("splatter-color-option")) {
    if (!splatterOptions.splatterColorOneName) {
      if (!splatterOptions.splatterColorThreeName) {
        e.target.classList.add("selected-effect-color");
      }

      splatterOptions.splatterColorOneName = e.target.getAttribute("data-name");
      splatterOptions.splatterColorOneSku = e.target.getAttribute("data-sku");
      splatterOptions.splatterHexColorOne = e.target.getAttribute("data-color");
      await initEffect(
        effectUrls.splatterLayerOne,
        layerOne,
        splatterOptions.splatterHexColorOne
      );

      selected.effectColorName = splatterOptions.splatterColorOneName;
      selected.effectColorSku = splatterOptions.splatterColorOneSku;
      recordTypeEffectDisplay.innerText = `${selected.effectColorName} ${selected.effectColorSku}`;

      setElementsDisplay(
        [recordTypeEffectDisplayTwo, recordTypeEffectDisplayThree],
        "none"
      );
      setElementsDisplay([recordTypeEffectDisplay], "flex");
      setElementsDisplay([recordEffectDisplayContainer], "block");
      effectColorInput.value = selected.effectColorName;
    } else if (!splatterOptions.splatterColorTwoName) {
      if (!splatterOptions.splatterColorThreeName) {
        e.target.classList.add("selected-effect-color");
      }

      splatterOptions.splatterColorTwoName = e.target.getAttribute("data-name");
      splatterOptions.splatterColorTwoSku = e.target.getAttribute("data-sku");
      splatterOptions.splatterHexColorTwo = e.target.getAttribute("data-color");
      await initEffect(
        effectUrls.splatterLayerTwo,
        layerTwo,
        splatterOptions.splatterHexColorTwo
      );

      selected.effectColorTwoName = splatterOptions.splatterColorTwoName;
      selected.effectColorTwoSku = splatterOptions.splatterColorTwoSku;

      recordTypeEffectDisplayTwo.innerText = `${selected.effectColorTwoName} ${selected.effectColorTwoSku}`;

      setElementsDisplay([recordTypeEffectDisplayTwo], "flex");
      setElementsDisplay([recordTypeEffectDisplayThree], "none");
      effectColorTwoInput.value = selected.effectColorTwoName;
    } else if (!splatterOptions.splatterColorThreeName) {
      if (!splatterOptions.splatterColorThreeName) {
        e.target.classList.add("selected-effect-color");
      }

      splatterOptions.splatterColorThreeName =
        e.target.getAttribute("data-name");
      splatterOptions.splatterColorThreeSku = e.target.getAttribute("data-sku");
      splatterOptions.splatterHexColorThree =
        e.target.getAttribute("data-color");
      await initEffect(
        effectUrls.splatterLayerThree,
        layerThree,
        splatterOptions.splatterHexColorThree
      );

      selected.effectColorThreeName = splatterOptions.splatterColorThreeName;
      selected.effectColorThreeSku = splatterOptions.splatterColorThreeSku;

      recordTypeEffectDisplayThree.innerText = `${selected.effectColorThreeName} ${selected.effectColorThreeSku}`;
      setElementsDisplay([recordTypeEffectDisplayThree], "flex");
      effectColorThreeInput.value = selected.effectColorThreeName;
    }
  } else if (
    e.target.id === "close-splatter-modal" &&
    splatterOptions.recordColorName &&
    splatterOptions.splatterColorOneName
  ) {
    splatterColorPickerContainer.classList.remove("visible");
  }

  if (splatterOptions.recordColorName && splatterOptions.splatterColorOneName) {
    selected.recordType = selected.interimRecordTypeElement.value;
    selected.interimRecordTypeElement.checked = true;
    updateCustomRadioSelection(recordTypeInputs, "recordType");
  }

  setMockupDisplayDiscs();
  getAllPrices();
  getTotalPrice();
});

const swirlOptions = {
  recordColorName: null,
  recordColorSku: null,
  swirlColorName: null,
  swirlColorSku: null,
  recordImageUrl: null,
  effectHexColor: null,
};

swirlColorPickerContainer.addEventListener("click", (e) => {
  e.stopPropagation();
  e.preventDefault();

  if (e.target.classList.contains("record-color-option")) {
    swirlOptions.recordColorName = e.target.getAttribute("data-name");
    swirlOptions.recordColorSku = e.target.getAttribute("data-sku");

    let previouslySelected = document.querySelectorAll(
      ".selected-record-color"
    );
    previouslySelected.forEach((el) => {
      el.classList.remove("selected-record-color");
    });

    swirlOptions.recordImageUrl = e.target.getAttribute("data-image-url");
    e.target.classList.add("selected-record-color");
    recordVisualDisplay.style.backgroundImage = `url(${swirlOptions.recordImageUrl})`;

    selected.recordColorName = swirlOptions.recordColorName;
    selected.recordColorSku = swirlOptions.recordColorSku;
    recordTypeColorDisplay.innerText = `${selected.recordColorName} ${selected.recordColorSku}`;
    recordColorInput.value = selected.recordColorName;

    setElementsDisplay([recordColorDisplayContainer], "block");
  } else if (e.target.classList.contains("splatter-color-option")) {
    swirlOptions.swirlColorName = e.target.getAttribute("data-name");
    swirlOptions.swirlColorSku = e.target.getAttribute("data-sku");

    let previouslySelected = document.querySelectorAll(
      ".selected-effect-color"
    );
    previouslySelected.forEach((el) => {
      el.classList.remove("selected-effect-color");
    });

    swirlOptions.effectHexColor = e.target.getAttribute("data-color");
    e.target.classList.add("selected-effect-color");

    initEffect(effectUrls.swirl, layerOne, swirlOptions.effectHexColor);

    selected.effectColorName = swirlOptions.swirlColorName;
    selected.effectColorSku = swirlOptions.swirlColorSku;
    recordTypeEffectDisplay.innerText = `${selected.effectColorName} ${selected.effectColorSku}`;
    effectColorInput.value = selected.effectColorName;

    setElementsDisplay([recordTypeEffectDisplay], "flex");
    setElementsDisplay(
      [recordTypeEffectDisplayTwo, recordTypeEffectDisplayThree],
      "none"
    );
    setElementsDisplay([recordEffectDisplayContainer], "block");
  } else if (
    e.target.id === "close-swirl-modal" &&
    swirlOptions.recordColorName &&
    swirlOptions.swirlColorName
  ) {
    swirlColorPickerContainer.classList.remove("visible");
  }

  if (swirlOptions.recordColorName && swirlOptions.swirlColorName) {
    selected.recordType = selected.interimRecordTypeElement.value;
    selected.interimRecordTypeElement.checked = true;
    updateCustomRadioSelection(recordTypeInputs, "recordType");
  }

  setMockupDisplayDiscs();
  getAllPrices();
  getTotalPrice();
});

recordTypeInputs.forEach((input) => {
  input.addEventListener("change", (e) => {
    e.stopPropagation();

    setElementsDisplay(
      [recordColorDisplayContainer, recordEffectDisplayContainer],
      "none"
    );
    clearSelectedColors();
    clearEffects();

    let selectedElement = document.querySelector(
      "input[name='record-type']:checked"
    );

    if (selectedElement.value === "black") {
      setInputsRequiredFalse([recordColorInput, effectColorInput]);
      updateCustomRadioSelection(recordTypeInputs, "recordType");
      recordVisualDisplay.style.backgroundImage = `url(${recordVisualUrls.black})`;
    } else {
      selected.interimRecordTypeElement = selectedElement;
      clearInputs(recordTypeInputs, ["recordType"]);
      showColorOptions(selectedElement.parentElement);
    }

    setMockupDisplayDiscs();
    getAllPrices();
    getTotalPrice();
  });
});

jacketTypeInputs.forEach((input) => {
  input.addEventListener("change", () => {
    updateCustomRadioSelection(jacketTypeInputs, "jacketType");

    let value = document.querySelector(
      "input[name='jacket-type']:checked"
    ).value;
    let allInputs = jacketOptionsContainer.querySelectorAll("input");

    if (value === "none") {
      setElementsDisplay([jacketOptionsContainer], "none");
      jacketVisualDisplay.style.backgroundImage = "";

      clearInputs(allInputs, ["jacketColor", "jacketFinish"]);
      setInputsRequiredFalse(allInputs);

      // remove file upload display if any
      const fileUploadDisplays = jacketOptionsContainer.querySelectorAll(
        ".file-upload-display"
      );
      setElementsDisplay(fileUploadDisplays, "none");
    } else {
      setElementsDisplay([jacketOptionsContainer], "block");

      setInputsRequiredTrue(allInputs);
    }

    getInsertionPrice();
    getJacketPrice();
    getTotalPrice();
  });
});

labelTypeInputs.forEach((input) => {
  input.addEventListener("change", () => {
    updateCustomRadioSelection(labelTypeInputs, "labelType");

    let value = document.querySelector(
      "input[name='label-type']:checked"
    ).value;

    if (value === "blank") {
      let allInputs = labelUploadContainer.querySelectorAll("input");
      setElementsDisplay([labelUploadContainer], "none");
      setElementsDisplay([labelColorOptionsContainer], "block");
      let requiredInputs = labelColorOptionsContainer.querySelectorAll("input");

      setInputsRequiredTrue(requiredInputs);
      clearInputs(allInputs, []);
      setInputsRequiredFalse(allInputs);

      // remove file upload display if any
      const fileUploadDisplays = labelUploadContainer.querySelectorAll(
        ".file-upload-display"
      );
      setElementsDisplay(fileUploadDisplays, "none");
    } else {
      let allInputs = labelColorOptionsContainer.querySelectorAll("input");
      let requiredInputs = labelUploadContainer.querySelectorAll("input");
      setElementsDisplay([labelUploadContainer], "block");
      setElementsDisplay([labelColorOptionsContainer], "none");

      setInputsRequiredTrue(requiredInputs);
      clearInputs(allInputs, ["labelColor"]);
      setInputsRequiredFalse(allInputs);
    }

    getCenterLabelPrice();
    getTotalPrice();
  });
});

innerSleeveTypeInputs.forEach((input) => {
  input.addEventListener("change", () => {
    updateCustomRadioSelection(innerSleeveTypeInputs, "innerSleeveType");

    let value = document.querySelector(
      "input[name='sleeve-type']:checked"
    ).value;
    let allInputs = sleeveOptionsContainer.querySelectorAll("input");

    if (value === "anti-static") {
      setElementsDisplay([sleeveOptionsContainer], "none");

      clearInputs(allInputs, ["innerSleeveColor", "innerSleeveFinish"]);
      setInputsRequiredFalse(allInputs);

      // remove file upload display if any
      const fileUploadDisplays = sleeveOptionsContainer.querySelectorAll(
        ".file-upload-display"
      );
      setElementsDisplay(fileUploadDisplays, "none");
    } else if (value === "printed") {
      setElementsDisplay(
        [sleeveOptionsContainer, innerSleeveFinishOuterContainer],
        "block"
      );
      clearInputs(allInputs, ["innerSleeveColor"]);
      setInputsRequiredTrue(allInputs);

      setElementsDisplay([innerSleevePrintedColorOptionsContainer], "flex");
      setElementsDisplay([innerSleevePaperColorOptionsContainer], "none");
      setElementsDisplay([innerSleeveUploadContainer], "block");
    } else {
      // one of the paper options is selected
      if (
        selected.innerSleeveColor !== "white" &&
        selected.innerSleeveColor !== "black"
      ) {
        clearInputs(allInputs, ["innerSleeveColor", "innerSleeveFinish"]);
      }

      setInputsRequiredTrue(allInputs);
      clearInputs(innerSleeveUploadContainer.querySelectorAll("input"), []);
      const fileUploadDisplays = sleeveOptionsContainer.querySelectorAll(
        ".file-upload-display"
      );

      setElementsDisplay([sleeveOptionsContainer], "block");
      setElementsDisplay(
        [
          innerSleevePrintedColorOptionsContainer,
          innerSleeveFinishOuterContainer,
          innerSleeveUploadContainer,
          ...fileUploadDisplays,
        ],
        "none"
      );
      setElementsDisplay([innerSleevePaperColorOptionsContainer], "flex");
      setInputsRequiredFalse(
        innerSleeveFinishContainer.querySelectorAll("input")
      );
    }

    getInnerSleevePrice();
    getAllPrices();
    getTotalPrice();
  });
});

printedInsertTypeInputs.forEach((input) => {
  input.addEventListener("change", () => {
    updateCustomRadioSelection(printedInsertTypeInputs, "printedInsertType");

    let value = document.querySelector(
      "input[name='insert-type']:checked"
    ).value;
    let allInputs = insertOptionsContainer.querySelectorAll("input");

    if (value === "none") {
      setElementsDisplay([insertOptionsContainer], "none");

      clearInputs(allInputs, [
        "printedInsertColor",
        "printedInsertSides",
        "printedInsertFinish",
      ]);
      setInputsRequiredFalse(allInputs);

      // remove file upload display if any
      const fileUploadDisplays = insertOptionsContainer.querySelectorAll(
        ".file-upload-display"
      );
      setElementsDisplay(fileUploadDisplays, "none");
    } else {
      setElementsDisplay([insertOptionsContainer], "block");

      setInputsRequiredTrue(allInputs);
    }

    getInsertionPrice();
    getInsertPrice();
    getTotalPrice();
  });
});

outerWrapTypeInputs.forEach((input) => {
  input.addEventListener("change", () => {
    updateCustomRadioSelection(outerWrapTypeInputs, "outerWrapType");

    getInsertionPrice();
    getOuterwrapPrice();
    getTotalPrice();
  });
});

barcodeTypeInputs.forEach((input) => {
  input.addEventListener("change", () => {
    updateCustomRadioSelection(barcodeTypeInputs, "barcodeType");

    getBarcodePrice();
    getTotalPrice();
  });
});

obiStripTypeInputs.forEach((input) => {
  input.addEventListener("change", () => {
    updateCustomRadioSelection(obiStripTypeInputs, "obiStripType");

    let value = document.querySelector("input[name='obi-type']:checked").value;
    let allInputs = obiOptionsContainer.querySelectorAll("input");

    if (value === "none") {
      setElementsDisplay([obiOptionsContainer], "none");

      clearInputs(allInputs, []);
      setInputsRequiredFalse(allInputs);

      // remove file upload display if any
      const fileUploadDisplays = obiOptionsContainer.querySelectorAll(
        ".file-upload-display"
      );
      setElementsDisplay(fileUploadDisplays, "none");
    } else {
      setElementsDisplay([obiOptionsContainer], "block");

      setInputsRequiredTrue(allInputs);
    }
  });
});

// event listeners for default radio buttons
recordWeightInputs.forEach((input) => {
  input.addEventListener("change", () => {
    updateRadioSelection(recordWeightInputs, "recordWeight");

    filterColorOptionsForWeight();

    getAllPrices();
    getTotalPrice();
  });
});

jacketColorInputs.forEach((input) => {
  input.addEventListener("change", () => {
    updateRadioSelection(jacketColorInputs, "jacketColor");

    getJacketPrice();
    getTotalPrice();
  });
});

jacketFinishInputs.forEach((input) => {
  input.addEventListener("change", () => {
    updateRadioSelection(jacketFinishInputs, "jacketFinish");

    getJacketPrice();
    getTotalPrice();
  });
});

innerSleeveColorInputs.forEach((input) => {
  input.addEventListener("change", () => {
    updateRadioSelection(innerSleeveColorInputs, "innerSleeveColor");

    getInnerSleevePrice();
    getTotalPrice();
  });
});

innerSleeveFinishInputs.forEach((input) => {
  input.addEventListener("change", () => {
    updateRadioSelection(innerSleeveFinishInputs, "innerSleeveFinish");

    getInnerSleevePrice();
    getTotalPrice();
  });
});

printedInsertSidesInputs.forEach((input) => {
  input.addEventListener("change", () => {
    updateRadioSelection(printedInsertSidesInputs, "printedInsertSides");

    getInsertPrice();
    getTotalPrice();
  });
});

printedInsertColorInputs.forEach((input) => {
  input.addEventListener("change", () => {
    updateRadioSelection(printedInsertColorInputs, "printedInsertColor");

    getInsertPrice();
    getTotalPrice();
  });
});

printedInsertFinishInputs.forEach((input) => {
  input.addEventListener("change", () => {
    updateRadioSelection(printedInsertFinishInputs, "printedInsertFinish");

    getInsertPrice();
    getTotalPrice();
  });
});

labelColorInputs.forEach((input) => {
  input.addEventListener("change", () => {
    updateRadioSelection(labelColorInputs, "labelColor");
  });
});

waveTestPressingsInput.addEventListener("change", () => {
  selected.waveTestPressings = waveTestPressingsInput.checked;

  if (selected.waveTestPressings === true) {
    setElementsDisplay([testPressingsInputContainer], "none");
    testPressingsInput.min = "0";
    testPressingsInput.value = "0";
    selected.testPressings = "0";
  } else {
    setElementsDisplay([testPressingsInputContainer], "block");
    testPressingsInput.min = "5";
    testPressingsInput.value = "5";
    selected.testPressings = "5";
    testPressingsDisplay.innerText = "5";
  }

  getTestPressingsPrice();
  getTotalPrice();
});

// other inputs and ui
projectTitleInput.addEventListener("input", () => {
  selected.projectTitle = projectTitleInput.value;
});

testPressingsInput.addEventListener("input", () => {
  selected.testPressings = testPressingsInput.value;
  testPressingsDisplay.innerText = testPressingsInput.value;
});

testPressingsInput.addEventListener("change", () => {
  getTestPressingsPrice();
  getTotalPrice();
});

quantityInput.addEventListener("input", () => {
  selected.quantity = quantityInput.value;
  updateSliders();
});

mobileQuantityInput.addEventListener("input", () => {
  mobileQtyActiveDisplay.classList.add("active");
  selected.quantity = mobileQuantityInput.value;
  updateSliders();
});

function updateSliders() {
  // desktop slider
  quantityDisplay.innerText = selected.quantity;

  let x = selected.quantity - quantityInput.min;
  let y = quantityInput.max - quantityInput.min;
  let d = (x / y) * 95;
  quantityDisplay.style.left = `${d}%`;

  // mobile slider
  quantityValueDisplayMobile.innerText = selected.quantity;

  x = selected.quantity - mobileQuantityInput.min;
  y = mobileQuantityInput.max - mobileQuantityInput.min;
  d = (x / y) * 95;
  quantityValueDisplayMobile.style.left = `${d}%`;

  // mobile active container
  mobileQtyActiveDisplay.innerText = selected.quantity;

  x = selected.quantity - mobileQuantityInput.min;
  y = mobileQuantityInput.max - mobileQuantityInput.min;
  d = (x / y) * 95;
  mobileQtyActiveDisplay.style.left = Math.min(`${d}`, 75) + "%";
}

quantityInput.addEventListener("change", () => {
  setJacketOptions();
  getAllPrices();
  getTotalPrice();
});

mobileQuantityInput.addEventListener("change", () => {
  setJacketOptions();
  getAllPrices();
  getTotalPrice();
  mobileQtyActiveDisplay.classList.remove("active");
});

// file upload logic
jacketFrontUpload.addEventListener("change", () => {
  let file = jacketFrontUpload.files[0];

  if (file) {
    let imageUrl = URL.createObjectURL(file);
    setElementsDisplay([jacketFrontFilenameDisplay.parentElement], "block");
    jacketFrontFilenameDisplay.innerText = file.name;
    jacketVisualDisplay.style.backgroundImage = `url(${imageUrl})`;
  } else {
    setElementsDisplay([jacketFrontFilenameDisplay.parentElement], "none");
    jacketVisualDisplay.style.backgroundImage = "";
  }
});

// labelFrontUpload.addEventListener("change", () => {
//    let file = labelFrontUpload.files[0];
//
//    if (file) {
//        setElementsDisplay([labelFrontFilenameDisplay.parentElement], "block");
//        labelFrontFilenameDisplay.innerText = file.name
//    } else {
//        setElementsDisplay([labelFrontFilenameDisplay.parentElement], "none");
//    }
// })

innerSleeveUpload.addEventListener("change", () => {
  let file = innerSleeveUpload.files[0];

  if (file) {
    setElementsDisplay([sleeveFilenameDisplay.parentElement], "block");
    sleeveFilenameDisplay.innerText = file.name;
  } else {
    setElementsDisplay([sleeveFilenameDisplay.parentElement], "none");
  }
});

printedInsertUpload.addEventListener("change", () => {
  let file = printedInsertUpload.files[0];

  if (file) {
    setElementsDisplay([insertFilenameDisplay.parentElement], "block");
    insertFilenameDisplay.innerText = file.name;
  } else {
    setElementsDisplay([insertFilenameDisplay.parentElement], "none");
  }
});

obiStripUpload.addEventListener("change", () => {
  let file = obiStripUpload.files[0];

  if (file) {
    setElementsDisplay([obiFilenameDisplay.parentElement], "block");
    obiFilenameDisplay.innerText = file.name;
  } else {
    setElementsDisplay([obiFilenameDisplay.parentElement], "none");
  }
});

// upload file remove event listeners

removeJacketFrontImage.addEventListener("click", () => {
  jacketFrontUpload.value = "";

  setElementsDisplay([jacketFrontFilenameDisplay.parentElement], "none");
  jacketVisualDisplay.style.backgroundImage = "";
});

// removeLabelFrontImage.addEventListener("click", () => {
//    labelFrontUpload.value = "";
//
//    setElementsDisplay([labelFrontFilenameDisplay.parentElement], "none");
// })

removeSleeveImage.addEventListener("click", () => {
  innerSleeveUpload.value = "";

  setElementsDisplay([sleeveFilenameDisplay.parentElement], "none");
});

removeInsertImage.addEventListener("click", () => {
  printedInsertUpload.value = "";

  setElementsDisplay([insertFilenameDisplay.parentElement], "none");
});

removeObiImage.addEventListener("click", () => {
  obiStripUpload.value = "";

  setElementsDisplay([obiFilenameDisplay.parentElement], "none");
});

function clearSelectedColors() {
  recordVisualDisplay.style.backgroundImage = `url(${recordVisualUrls.noSelection})`;

  recordColorInput.value = "";
  effectColorInput.value = "";
  effectColorTwoInput.value = "";
  effectColorThreeInput.value = "";

  selected.recordColorName = null;
  selected.recordColorSku = null;
  selected.effectColorName = null;
  selected.effectColorSku = null;
  selected.effectColorTwoName = null;
  selected.effectColorTwoSku = null;
  selected.effectColorThreeName = null;
  selected.effectColorThreeSku = null;

  setElementsDisplay(
    [
      recordTypeEffectDisplay,
      recordTypeEffectDisplayTwo,
      recordTypeEffectDisplayThree,
      recordColorDisplayContainer,
    ],
    "none"
  );
}

// modal logic
pricingBreakdownButton.addEventListener("click", (e) => {
  e.stopPropagation();
  e.preventDefault();
  document.body.style.overflow = "hidden";

  modalBackground.classList.add("visible");
  updatePricingBreakdownDisplays();
});

pricingBreakdownButtonMobile.addEventListener("click", (e) => {
  e.stopPropagation();
  e.preventDefault();
  document.body.style.overflow = "hidden";

  modalBackground.classList.add("visible");
  updatePricingBreakdownDisplays();
});

builderSubmitButton.addEventListener("click", () => {
  document.body.style.overflow = "auto";
  modalBackground.classList.remove("visible");
});

continueEditingButton.addEventListener("click", (e) => {
  e.preventDefault();
  e.stopPropagation();

  document.body.style.overflow = "auto";
  modalBackground.classList.remove("visible");
});

function formatPrice(num) {
  num = parseFloat(num);

  if (isNaN(num)) {
    return "0.00";
  }

  return num.toLocaleString(undefined, {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2,
  });
}

function updatePricingBreakdownDisplays() {
  projectTitleDisplay.innerText = selected.projectTitle || "Project Title";
  masteringBreakdownDisplay.innerText = "$" + formatPrice(preFlightPrice);
  setupFeeBreakdownDisplay.innerText = "$" + formatPrice(setupPrice);
  cuttingFeeBreakdownDisplay.innerText = "$" + formatPrice(cuttingPrice);
  platingFeeBreakdownDisplay.innerText = "$" + formatPrice(platingPrice);
  stampersFeeBreakdownDisplay.innerText = "$" + formatPrice(stampersPrice);
  testPressingsFeeBreakdownDisplay.innerText =
    "$" + formatPrice(testPressingsPrice + additionalTestPressingsPrice);
  centerLabelFeeBreakdownDisplay.innerText =
    "$" + formatPrice(centerLabelsPrice);
  recordsFeeBreakdownDisplay.innerText = "$" + formatPrice(recordPrice);
  innerSleeveFeeBreakdownDisplay.innerText =
    "$" + formatPrice(innerSleevePrice);
  jacketFeeBreakdownDisplay.innerText = "$" + formatPrice(jacketsPrice);
  insertFeeBreakdownDisplay.innerText = "$" + formatPrice(insertsPrice);
  outerwrapFeeBreakdownDisplay.innerText = "$" + formatPrice(outerwrapPrice);
  downloadCardsFeeBreakdownDisplay.innerText =
    "$" + formatPrice(downloadCardsPrice);
  // miscFeeBreakdownDisplay.innerText = "$" + formatPrice(miscPrice);
  // insertionFeeBreakdownDisplay.innerText = "$" + formatPrice(insertionPrice);

  // update sub-item prices
  masteringBreakdownOptionPriceDisplay.innerText =
    "$" + formatPrice(preFlightPrice);
  setupFeeBreakdownOptionPriceDisplay.innerText = "$" + formatPrice(setupPrice);
  cuttingBreakdownOptionPriceDisplay.innerText =
    "$" + formatPrice(cuttingPrice);
  platingBreakdownOptionPriceDisplay.innerText =
    "$" + formatPrice(platingPrice);
  testPressingsInitialPriceDisplay.innerText =
    "$" + formatPrice(testPressingsPrice);
  additionalTestPressingsPriceDisplay.innerText =
    "$" + formatPrice(additionalTestPressingsPrice);
  centerLabelBreakdownOptionPriceDisplay.innerText =
    "$" + formatPrice(centerLabelsPrice);
  recordBreakdownOptionsPriceDisplay.innerText = "$" + formatPrice(recordPrice);
  sleeveBreakdownOptionPriceDisplay.innerText =
    "$" + formatPrice(innerSleevePrice);
  jacketBreakdownOptionPriceDisplay.innerText = "$" + formatPrice(jacketsPrice);
  insertBreakdownOptionPriceDisplay.innerText = "$" + formatPrice(insertsPrice);
  outerwrapBreakdownOptionPriceDisplay.innerText =
    "$" + formatPrice(outerwrapPrice);
  downloadCardBreakdownOptionPriceDisplay.innerText =
    "$" + formatPrice(downloadCardsPrice);
  // insertionOfRecordPriceDisplay.innerText =
  //   "$" + formatPrice(insertionOfRecordPrice);
  // insertionOfSleevePriceDisplay.innerText =
  //   "$" + formatPrice(insertionOfInnerSleevePrice);
  // insertionOfInsertPriceDisplay.innerText =
  //   "$" + formatPrice(insertionOfPrintedInsertPrice);
  // insertionOfJacketPriceDisplay.innerText =
  //   "$" + formatPrice(insertionOfJacketPrice);
  // barcodeBreakdownOptionPriceDisplay.innerText =
  //   "$" + formatPrice(barcodePrice);

  // update inner text of all sub-item displays
  breakdownRpmDisplay.innerText = selected.rpm + " RPM";
  if (selected.recordColorName) {
    breakdownBaseColorDisplay.parentElement.parentElement.parentElement.style.display =
      "flex";
    breakdownBaseColorDisplay.innerText = selected.recordColorName;
  } else {
    breakdownBaseColorDisplay.parentElement.parentElement.parentElement.style.display =
      "none";
  }
  if (selected.effectColorName) {
    breakdownEffectColorOneDisplay.parentElement.parentElement.parentElement.style.display =
      "flex";
    breakdownEffectColorOneDisplay.innerText = selected.effectColorName;
  } else {
    breakdownEffectColorOneDisplay.parentElement.parentElement.parentElement.style.display =
      "none";
  }
  if (selected.effectColorTwoName) {
    breakdownEffectColorTwoDisplay.parentElement.parentElement.parentElement.style.display =
      "flex";
    breakdownEffectColorTwoDisplay.innerText = selected.effectColorTwoName;
  } else {
    breakdownEffectColorTwoDisplay.parentElement.parentElement.parentElement.style.display =
      "none";
  }
  if (selected.effectColorThreeName) {
    breakdownEffectColorThreeDisplay.parentElement.parentElement.parentElement.style.display =
      "flex";
    breakdownEffectColorThreeDisplay.innerText = selected.effectColorThreeName;
  } else {
    breakdownEffectColorThreeDisplay.parentElement.parentElement.parentElement.style.display =
      "none";
  }
  if (preFlightPrice === 0) {
    masteringBreakdownDisplay.parentElement.style.display = "none";
    masteringBreakdownOptionDisplay.parentElement.style.display = "none";
  } else {
    masteringBreakdownDisplay.parentElement.style.display = "flex";
    masteringBreakdownOptionDisplay.parentElement.style.display = "flex";
  }
  if (setupPrice === 0) {
    setupFeeBreakdownDisplay.parentElement.style.display = "none";
    setupFeeBreakdownOptionDisplay.parentElement.style.display = "none";
  } else {
    setupFeeBreakdownDisplay.parentElement.style.display = "flex";
    setupFeeBreakdownOptionDisplay.parentElement.style.display = "flex";
    setupFeeBreakdownOptionDisplay.innerText =
      toTitleCase(selected.amount) + " LP";
  }
  if (cuttingPrice === 0) {
    cuttingFeeBreakdownDisplay.parentElement.style.display = "none";
    cuttingBreakdownOptionDisplay.parentElement.style.display = "none";
  } else {
    cuttingFeeBreakdownDisplay.parentElement.style.display = "flex";
    cuttingBreakdownOptionDisplay.parentElement.style.display = "flex";
    cuttingBreakdownOptionDisplay.innerText = selected.recordCutting;
  }
  if (platingPrice === 0) {
    platingFeeBreakdownDisplay.parentElement.style.display = "none";
    platingBreakdownOptionDisplay.parentElement.style.display = "none";
  } else {
    platingFeeBreakdownDisplay.parentElement.style.display = "flex";
    platingBreakdownOptionDisplay.parentElement.style.display = "flex";
    platingBreakdownOptionDisplay.innerText = "2-Step Plating";
  }
  if (stampersPrice === 0) {
    stampersFeeBreakdownDisplay.parentElement.style.display = "none";
  } else {
    stampersFeeBreakdownDisplay.parentElement.style.display = "flex";
  }
  if (testPressingsPrice === 0) {
    testPressingsFeeBreakdownDisplay.parentElement.style.display = "none";
    testPressingsInitialPriceDisplay.parentElement.style.display = "none";
  } else {
    testPressingsFeeBreakdownDisplay.parentElement.style.display = "flex";
    testPressingsInitialPriceDisplay.parentElement.style.display = "flex";
  }
  if (additionalTestPressingsPrice === 0) {
    additionalTestPressingsPriceDisplay.parentElement.style.display = "none";
  } else {
    additionalTestPressingsPriceDisplay.parentElement.style.display = "flex";
    numOfAdditionalPressingsDisplay.innerText = selected.testPressings - 5;
  }
  if (centerLabelsPrice === 0) {
    centerLabelFeeBreakdownDisplay.parentElement.style.display = "none";
    centerLabelBreakdownOptionDisplay.parentElement.style.display = "none";
  } else {
    centerLabelFeeBreakdownDisplay.parentElement.style.display = "flex";
    centerLabelBreakdownOptionDisplay.parentElement.style.display = "flex";
    centerLabelBreakdownOptionDisplay.innerText = toTitleCase(
      selected.labelType
    );
  }
  if (recordPrice === 0) {
    recordsFeeBreakdownDisplay.parentElement.style.display = "none";
    recordBreakdownOptionsPriceDisplay.parentElement.style.display = "none";
  } else {
    recordsFeeBreakdownDisplay.parentElement.style.display = "flex";
    recordBreakdownOptionsPriceDisplay.parentElement.style.display = "flex";
    recordSizeBreakdownDisplay.innerText = selected.recordSize + " Inch";
    recordWeightBreakdownDisplay.innerText = toTitleCase(selected.recordWeight);
    recordTypeBreakdownDisplay.innerText = toTitleCase(selected.recordType);
  }
  if (innerSleevePrice === 0) {
    innerSleeveFeeBreakdownDisplay.parentElement.style.display = "none";
    sleeveBreakdownOptionPriceDisplay.parentElement.style.display = "none";
  } else {
    innerSleeveFeeBreakdownDisplay.parentElement.style.display = "flex";
    sleeveBreakdownOptionPriceDisplay.parentElement.style.display = "flex";
    sleeveTypeBreakdownDisplay.innerText = toTitleCase(
      selected.innerSleeveType
    );
    sleeveColorBreakdownDisplay.innerText = toTitleCase(
      selected.innerSleeveColor
    );
    sleeveFinishBreakdownDisplay.innerText = toTitleCase(
      selected.innerSleeveFinish
    );
  }
  if (jacketsPrice === 0) {
    jacketFeeBreakdownDisplay.parentElement.style.display = "none";
    jacketBreakdownOptionPriceDisplay.parentElement.style.display = "none";
  } else {
    jacketFeeBreakdownDisplay.parentElement.style.display = "flex";
    jacketBreakdownOptionPriceDisplay.parentElement.style.display = "flex";
    jacketTypeBreakdownDisplay.innerText = toTitleCase(selected.jacketType);
    jacketColorBreakdownDisplay.innerText = toTitleCase(selected.jacketColor);
    jacketFinishBreakdownDisplay.innerText = toTitleCase(selected.jacketFinish);
  }
  if (insertsPrice === 0) {
    insertFeeBreakdownDisplay.parentElement.style.display = "none";
    insertBreakdownOptionPriceDisplay.parentElement.style.display = "none";
  } else {
    insertFeeBreakdownDisplay.parentElement.style.display = "flex";
    insertBreakdownOptionPriceDisplay.parentElement.style.display = "flex";
    insertTypeBreakdownDisplay.innerText = toTitleCase(
      selected.printedInsertType
    );
    insertSidesBreakdownDisplay.innerText = toTitleCase(
      selected.printedInsertSides
    );
    insertColorBreakdownDisplay.innerText = toTitleCase(
      selected.printedInsertColor
    );
    insertFinishBreakdownDisplay.innerText = toTitleCase(
      selected.printedInsertFinish
    );
  }
  if (outerwrapPrice === 0) {
    outerwrapFeeBreakdownDisplay.parentElement.style.display = "none";
    outerwrapBreakdownOptionPriceDisplay.parentElement.style.display = "none";
  } else {
    outerwrapFeeBreakdownDisplay.parentElement.style.display = "flex";
    outerwrapBreakdownOptionPriceDisplay.parentElement.style.display = "flex";
    outerwrapBreakdownOptionDisplay.innerText = toTitleCase(
      selected.outerWrapType
    );
  }
  if (barcodePrice === 0) {
    barcodeFeeBreakdownDisplay.parentElement.style.display = "none";
    barcodeBreakdownOptionPriceDisplay.parentElement.style.display = "none";
  } else {
    barcodeFeeBreakdownDisplay.parentElement.style.display = "flex";
    barcodeBreakdownOptionPriceDisplay.parentElement.style.display = "flex";
    barcodeBreakdownOptionDisplay.innerText = toTitleCase(selected.barcodeType);
  }
  if (downloadCardsPrice === 0) {
    downloadCardsFeeBreakdownDisplay.parentElement.style.display = "none";
    downloadCardBreakdownOptionPriceDisplay.parentElement.style.display =
      "none";
  } else {
    downloadCardsFeeBreakdownDisplay.parentElement.style.display = "flex";
    downloadCardBreakdownOptionPriceDisplay.parentElement.style.display =
      "flex";
    downloadCardBreakdownOptionDisplay.innerText = toTitleCase(
      selected.downloadCardType
    );
  }
  // if (miscPrice === 0) {
  //   miscFeeBreakdownDisplay.parentElement.style.display = "none";
  // } else {
  //   miscFeeBreakdownDisplay.parentElement.style.display = "flex";
  // }
  if (insertionPrice === 0) {
    insertionFeeBreakdownDisplay.parentElement.style.display = "none";
  } else {
    insertionFeeBreakdownDisplay.parentElement.style.display = "flex";
  }
  // if (insertionOfRecordPrice === 0) {
  //   insertionOfRecordPriceDisplay.parentElement.style.display = "none";
  // } else {
  //   insertionOfRecordPriceDisplay.parentElement.style.display = "flex";
  // }
  // if (insertionOfInnerSleevePrice === 0) {
  //   insertionOfSleevePriceDisplay.parentElement.style.display = "none";
  // } else {
  //   insertionOfSleevePriceDisplay.parentElement.style.display = "flex";
  // }
  // if (insertionOfPrintedInsertPrice === 0) {
  //   insertionOfInsertPriceDisplay.parentElement.style.display = "none";
  // } else {
  //   insertionOfInsertPriceDisplay.parentElement.style.display = "flex";
  // }
  // if (insertionOfJacketPrice === 0) {
  //   insertionOfJacketPriceDisplay.parentElement.style.display = "none";
  // } else {
  //   insertionOfJacketPriceDisplay.parentElement.style.display = "flex";
  // }

  // orderTotalDisplay.innerText = "$" + formatPrice(totalPrice);
  // orderTotalPerUnitDisplay.innerText =
  //   "$" + formatPrice(totalPrice / selected.quantity) + "/copy";
}

closeModalButton.addEventListener("click", (e) => {
  e.stopPropagation();

  document.body.style.overflow = "auto";
  modalBackground.classList.remove("visible");
});

breakdownContainer.addEventListener("click", (e) => {
  e.stopPropagation();
});

modalBackground.addEventListener("click", (e) => {
  e.stopPropagation();
});

function checkRequiredInputs() {
  // I am doing this so that clicking the missing section link will actually take you to the
  // input. Without it if the first input is hidden it will not work
  let requiredInputs = Array.from(
    document.querySelectorAll("input[required]")
  ).filter((el) => {
    return (
      window.getComputedStyle(el.parentElement.parentElement).display !==
        "none" &&
      window.getComputedStyle(el.parentElement.parentElement.parentElement)
        .display !== "none"
    );
  });
  let usedInputs = new Set();
  let isComplete = true;

  requiredInputs.forEach((input) => {
    if (!input.checkValidity() && !usedInputs.has(input.getAttribute("name"))) {
      isComplete = false;
      usedInputs.add(input.getAttribute("name"));
      setElementsDisplay([missingInfoContainer], "block");
      let arrow = `
                <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M9 16.6667L9 2" stroke="#F56412" stroke-width="2"/>
                    <path d="M17 10L9 2L1 10" stroke="#F56412" stroke-width="2"/>
                </svg>
            `;

      let p = document.createElement("p");
      p.innerHTML =
        arrow +
        "&nbsp;&nbsp;" +
        input.getAttribute("name").replaceAll("-", " ");
      p.classList.add("missing-info-p");

      missingInfoDisplay.appendChild(p);

      p.addEventListener("click", () => scollToInput(input));
    }
  });

  if (isComplete) {
    updatePricingBreakdownDisplays();
    modalBackground.classList.add("visible");
  }
}

prepareToSubmit.addEventListener("click", (e) => {
  e.preventDefault();
  e.stopPropagation();

  setElementsDisplay([missingInfoContainer], "none");

  Array.from(missingInfoDisplay.children).forEach((child) => {
    child.parentElement.removeChild(child);
  });
  checkRequiredInputs();
});

startNewSubmissionButton.addEventListener("click", (e) => {
  e.preventDefault();

  location.reload();
});

function scollToInput(node) {
  let yOffset = node.getBoundingClientRect().y;
  let y = window.scrollY;

  window.scroll({ left: 0, top: y + yOffset - 200, behavior: "smooth" });
}

// pricing logic
let prices = null;

let preFlightPrice = 0;
let setupPrice = 0;
let cuttingPrice = 0;
let platingPrice = 0;
let stampersPrice = 0;
let testPressingsPrice = 0;
let additionalTestPressingsPrice = 0;
let centerLabelsPrice = 0;
let recordPrice = 0;
let innerSleevePrice = 0;
let jacketsPrice = 0;
let insertsPrice = 0;
let downloadCardsPrice = 0;
let outerwrapPrice = 0;
let barcodePrice = 0;
let insertionPrice = 0;
let insertionOfRecordPrice = 0;
let insertionOfInnerSleevePrice = 0;
let insertionOfPrintedInsertPrice = 0;
let insertionOfJacketPrice = 0;
let miscPrice = 0;
let shippingEstimatePrice = 60;
let obiStripPrice = 0;

let totalPrice = 0;

const defaultBreakpoints = [
  "300",
  "500",
  "1000",
  "2000",
  "3000",
  "4000",
  "5000",
  "7500",
  "10000",
];

function getDefaultBreakpoint(num) {
  num = parseInt(num);

  if (num < defaultBreakpoints[0]) {
    return defaultBreakpoints[0];
  }

  for (let i = 1; i < defaultBreakpoints.length; i++) {
    if (num < parseInt(defaultBreakpoints[i])) {
      return defaultBreakpoints[i - 1];
    }
  }

  return defaultBreakpoints.at(-1);
}

async function fetchPrices() {
  try {
    let res = await fetch(
      "https://echobase-backend-v9fx.onrender.com/vinyl-ceremony-builder"
    );

    let data = await res.json();
    let items = data.data.boards[0].items_page.items;

    prices = {};
    items.forEach((item) => {
      let idCol = item.column_values.find((el) => el.id === "text__1");
      let priceCol = item.column_values.find((el) => el.id === "numbers__1");

      prices[idCol.text] = priceCol.text;
    });

    getAllPrices();
    getTotalPrice();
  } catch (err) {
    console.error(err);
    prices = null;
  }
}

function getPreFlightPrice() {
  if (!prices || !selected.amount) {
    preFlightPrice = 0;
    return;
  }
  if (selected.isMastered === "yes") {
    preFlightPrice = 0;
    return;
  }

  if (selected.amount === "single") {
    preFlightPrice = parseFloat(prices["PF001"]);
  } else if (selected.amount === "double") {
    preFlightPrice = parseFloat(prices["PF002"]);
  } else {
    preFlightPrice = parseFloat(prices["PF003"]);
  }

  if (isNaN(preFlightPrice)) {
    console.error("error getting pre flight price");
    preFlightPrice = 0;
  }
}

function getSetupFeePrice() {
  if (!prices || !selected.amount) {
    setupPrice = 0;
    return;
  }

  let baseFee = 0;
  if (selected.quantity < 500) {
    baseFee = parseFloat(prices["SU001"]);
  } else {
    baseFee = parseFloat(prices["SU002"]);
  }

  if (selected.amount === "single") {
    setupPrice = baseFee;
  } else if (selected.amount === "double") {
    setupPrice = baseFee * 2;
  } else {
    setupPrice = baseFee * 3;
  }

  if (isNaN(setupPrice)) {
    console.error("error getting set up fee price");
    setupPrice = 0;
  }
}

const cuttingMap = {
  12: "12",
  7: "07",
  lacquer: "LAC",
};

function getCuttingPrice() {
  if (!prices || !selected.amount || !selected.recordCutting) {
    cuttingPrice = 0;
    return;
  }
  if (selected.recordCutting === "no") {
    cuttingPrice = 0;
    return;
  }

  if (selected.recordSize === "12") {
    if (selected.amount === "single") {
      cuttingPrice = parseFloat(prices["CT002"]) * 2;
    } else if (selected.amount === "double") {
      cuttingPrice = parseFloat(prices["CT002"]) * 4;
    } else {
      cuttingPrice = parseFloat(prices["CT002"]) * 6;
    }
  } else {
    if (selected.amount === "single") {
      cuttingPrice = parseFloat(prices["CT005"]) * 2;
    } else if (selected.amount === "double") {
      cuttingPrice = parseFloat(prices["CT005"]) * 4;
    } else {
      cuttingPrice = parseFloat(prices["CT005"]) * 6;
    }
  }

  if (isNaN(cuttingPrice)) {
    console.error("error getting cutting price");
    cuttingPrice = 0;
  }
}

const platingMap = {
  12: "12",
  7: "07",
  lacquer: "LAC",
};

function getPlatingPrice() {
  if (
    !prices ||
    !selected.amount ||
    !selected.recordCutting ||
    !selected.recordSize
  ) {
    platingPrice = 0;
    return;
  }

  if (selected.amount === "single" && selected.recordSize === "12") {
    platingPrice = parseFloat(prices["PLT001"]) * 2;
  } else if (selected.amount === "double" && selected.recordSize === "12") {
    platingPrice = parseFloat(prices["PLT001"]) * 4;
  } else if (selected.amount === "triple" && selected.recordSize === "12") {
    platingPrice = parseFloat(prices["PLT001"]) * 6;
  } else if (selected.amount === "single" && selected.recordSize === "7") {
    platingPrice = parseFloat(prices["PLT002"]) * 2;
  } else if (selected.amount === "double" && selected.recordSize === "7") {
    platingPrice = parseFloat(prices["PLT002"]) * 4;
  } else if (selected.amount === "triple" && selected.recordSize === "7") {
    platingPrice = parseFloat(prices["PLT002"]) * 6;
  }

  if (isNaN(platingPrice)) {
    console.error("error getting plating price");
    platingPrice = 0;
  }
}

const stampersMap = {
  standard: "140G",
  heavyweight: "180G",
};

function getStampersPrice() {
  if (!prices || selected.quantity < 1000) {
    stampersPrice = 0;
    return;
  }

  let numOfStampers = Math.floor(selected.quantity / 1000);
  stampersPrice = parseFloat(prices["AS001"]) * numOfStampers;

  if (isNaN(stampersPrice)) {
    console.error("error getting stampers price");
    stampersPrice = 0;
  }
}

function getTestPressingsPrice() {
  testPressingsPrice = 0;
  additionalTestPressingsPrice = 0;

  if (!prices || selected.waveTestPressings) {
    return;
  }

  testPressingsPrice = parseFloat(prices["TP001"]);

  if (selected.testPressings > 5) {
    let additionalTests = parseFloat(selected.testPressings) - 5;
    additionalTestPressingsPrice =
      parseFloat(prices["AT001"]) * additionalTests;
  }

  if (selected.amount === "double") {
    testPressingsPrice *= 2;
    additionalTestPressingsPrice *= 2;
  } else if (selected.amount === "triple") {
    testPressingsPrice *= 3;
    additionalTestPressingsPrice *= 3;
  }

  if (isNaN(testPressingsPrice)) {
    console.error("error getting test pressings price");
    testPressingsPrice = 0;
  }
  if (isNaN(additionalTestPressingsPrice)) {
    console.error("error getting additional test pressings price");
    additionalTestPressingsPrice = 0;
  }
}

const labelMap = {
  "black and white": "BW",
  "full color": "FC",
};

function getCenterLabelPrice() {
  if (!prices || !selected.labelType) {
    centerLabelsPrice = 0;
    return;
  }

  let lookupNumber =
    "CL" + getDefaultBreakpoint(Math.min(selected.quantity, 5000));
  centerLabelsPrice = parseFloat(prices[lookupNumber]) * selected.quantity;

  // there is a 5% discount on black and white labels
  if (
    selected.labelType === "black and white" ||
    selected.labelType === "blank"
  ) {
    centerLabelsPrice *= 0.95;
  }

  if (isNaN(centerLabelsPrice)) {
    console.error("error getting center label price");
    centerLabelsPrice = 0;
  }
}

const recordMap = {
  black: "CB",
  color: "SC",
  splatter: "SP",
  swirl: "SW",
  7: "07R",
  12: "12R",
  standard: "SV",
  heavyweight: "HV",
};

function getRecordPrice() {
  if (
    !prices ||
    !selected.recordSize ||
    !selected.recordType ||
    !selected.recordWeight
  ) {
    recordPrice = 0;
    return;
  }

  if (selected.recordSize === "12") {
    let useShortRunPricing = false;
    if (
      (selected.recordType === "black" || selected.recordType === "color") &&
      selected.quantity <= 100 &&
      selected.recordWeight === "standard"
    ) {
      useShortRunPricing = true;
    }

    let lookupNumber =
      recordMap[selected.recordWeight] +
      recordMap[selected.recordType] +
      recordMap[selected.recordSize];
    if (useShortRunPricing) lookupNumber += "SR";

    recordPrice = parseFloat(prices[lookupNumber]) * selected.quantity;
  } else {
    // 7 inch record
    let lookupNumber =
      recordMap[selected.recordWeight] +
      recordMap[selected.recordType] +
      recordMap[selected.recordSize];
    recordPrice = parseFloat(prices[lookupNumber]) * selected.quantity;
  }

  if (selected.amount === "double") {
    recordPrice *= 2;
  } else if (selected.amount === "triple") {
    recordPrice *= 3;
  }

  if (isNaN(recordPrice)) {
    console.error("error getting record price");
    recordPrice = 0;
  }
}

const innerSleeveMap = {
  paper: "SP",
  "paper w/ poly lining": "PP",
  "anti-static": "AS",
  printed: "PR",
  white: "WH",
  black: "BL",
  "black & white": "BW",
  "full color": "FC",
  12: "12R",
  7: "07R",
};

function getInnerSleevePrice() {
  if (
    !prices ||
    !selected.innerSleeveType ||
    selected.innerSleeveType === "none"
  ) {
    innerSleevePrice = 0;
    return;
  }

  if (selected.innerSleeveType === "paper") {
    if (!selected.innerSleeveColor) {
      innerSleevePrice = 0;
      return;
    }

    if (selected.innerSleeveColor === "white") {
      innerSleevePrice = parseFloat(prices["SI001"]) * selected.quantity;
    } else {
      innerSleevePrice = parseFloat(prices["SI002"]) * selected.quantity;
    }
  } else if (selected.innerSleeveType === "printed") {
    let lookupNumber = "ISPR" + getDefaultBreakpoint(selected.quantity);
    innerSleevePrice = parseFloat(prices[lookupNumber]) * selected.quantity;
  } else if (selected.innerSleeveType === "anti-static") {
    innerSleevePrice = parseFloat(prices["SI005"]) * selected.quantity;
  } else if (selected.innerSleeveType === "paper w/ poly lining") {
    if (!selected.innerSleeveColor) {
      innerSleevePrice = 0;
      return;
    }

    if (selected.innerSleeveColor === "white") {
      innerSleevePrice = parseFloat(prices["SI004"]) * selected.quantity;
    } else {
      innerSleevePrice = parseFloat(prices["SI003"]) * selected.quantity;
    }
  }

  if (selected.amount === "double") {
    innerSleevePrice *= 2;
  } else if (selected.amount === "triple") {
    innerSleevePrice *= 3;
  }

  if (selected.innerSleeveColor === "black & white") {
    innerSleevePrice *= 0.95;
  }

  if (isNaN(innerSleevePrice)) {
    console.error("error getting inner sleeve price");
    innerSleevePrice = 0;
  }
}

const jacketMap = {
  "single pocket": "SP",
  "wide spine": "WS",
  gatefold: "GF",
  12: "12R",
  7: "07R",
  "black & white": "BW",
  "full color": "FC",
};

function getJacketPrice() {
  if (!prices || !selected.jacketType) {
    jacketsPrice = 0;
    return;
  }

  if (selected.jacketType === "none") {
    jacketsPrice = 0;
    return;
  } else {
    let lookupNumber =
      "JKT" +
      jacketMap[selected.jacketType] +
      jacketMap[selected.recordSize] +
      getDefaultBreakpoint(selected.quantity);

    jacketsPrice = parseFloat(prices[lookupNumber]) * selected.quantity;
  }

  if (selected.jacketColor === "black & white") {
    jacketsPrice *= 0.95;
  }

  if (isNaN(jacketsPrice)) {
    console.error("error getting jacket price");
    jacketsPrice = 0;
  }
}

const insertMap = {
  "12x12": "12x12",
  "24x12": "24x12",
  "one sided": "1S",
  "two sided": "2S",
  "black & white": "FC",
  "full color": "FC",
};

function getInsertPrice() {
  if (
    !prices ||
    !selected.printedInsertType ||
    !selected.printedInsertSides ||
    !selected.printedInsertColor
  ) {
    insertsPrice = 0;
    return;
  }

  if (selected.printedInsertType === "none") {
    insertsPrice = 0;
  } else {
    let lookupNumber =
      "INS" +
      insertMap[selected.printedInsertType] +
      insertMap[selected.printedInsertSides] +
      insertMap[selected.printedInsertColor] +
      getDefaultBreakpoint(selected.quantity);

    insertsPrice = parseFloat(prices[lookupNumber]) * selected.quantity;
  }

  if (selected.printedInsertColor === "black & white") {
    insertsPrice *= 0.95;
  }

  if (isNaN(insertsPrice)) {
    console.error("error getting insert price");
    insertsPrice = 0;
  }
}

function getDownloadCardsPrice() {
  if (!prices || !selected.downloadCardType) {
    downloadCardsPrice = 0;
    return;
  }

  if (selected.downloadCardType === "none") {
    downloadCardsPrice = 0;
  } else {
    downloadCardsPrice = parseFloat(prices["DLC001"]) * selected.quantity;
  }

  if (isNaN(downloadCardsPrice)) {
    console.error("error getting download cards price");
    downloadCardsPrice = 0;
  }
}

function getOuterwrapPrice() {
  if (!prices || !selected.outerWrapType) {
    outerwrapPrice = 0;
    return;
  }

  if (selected.outerWrapType === "none") {
    outerwrapPrice = 0;
    return;
  } else {
    if (selected.outerWrapType === "none") {
      outerwrapPrice = 0;
    } else if (selected.outerWrapType === "shrinkwrap") {
      outerwrapPrice = parseFloat(prices["OW001"]) * selected.quantity;
    } else if (selected.outerWrapType === "polybag") {
      if (selected.quantity <= 100) {
        outerwrapPrice = parseFloat(prices["OW003"]) * selected.quantity;
      } else {
        outerwrapPrice = parseFloat(prices["OW002"]) * selected.quantity;
      }
    }
  }

  if (isNaN(outerwrapPrice)) {
    console.error("error getting outerwrap price");
    outerwrapPrice = 0;
  }
}

function getBarcodePrice() {
  if (!prices || !selected.barcodeType || selected.barcodeType === "none") {
    barcodePrice = 0;
    return;
  }

  if (selected.barcodeType === "barcode only") {
    barcodePrice = 50;
  } else {
    barcodePrice = 50 + 0.5 * selected.quantity;
  }
}

function getInsertionPrice() {
  insertionPrice = 0;
  insertionOfRecordPrice = 0;
  insertionOfInnerSleevePrice = 0;
  insertionOfPrintedInsertPrice = 0;
  insertionOfJacketPrice = 0;

  if (!prices) {
    return;
  }

  let lookupNumber = "IA001";
  // first one is the sleeve which is always there

  if (
    selected.innerSleeveType !== "none" &&
    selected.innerSleeveType !== null
  ) {
    if (selected.amount === "single") {
      insertionOfInnerSleevePrice =
        parseFloat(prices[lookupNumber]) * selected.quantity;
    } else if (selected.amount === "double") {
      insertionOfInnerSleevePrice =
        parseFloat(prices[lookupNumber]) * selected.quantity * 2;
    } else {
      insertionOfInnerSleevePrice =
        parseFloat(prices[lookupNumber]) * selected.quantity * 3;
    }
  }
  if (!selected.jacketType) {
    insertionOfJacketPrice = 0;
  } else if (selected.jacketType !== "none") {
    if (selected.amount === "single") {
      insertionOfJacketPrice =
        parseFloat(prices[lookupNumber]) * selected.quantity;
    } else if (selected.amount === "double") {
      insertionOfJacketPrice =
        parseFloat(prices[lookupNumber]) * selected.quantity * 2;
    } else {
      insertionOfJacketPrice =
        parseFloat(prices[lookupNumber]) * selected.quantity * 3;
    }
  }

  if (!selected.printedInsertType) {
    insertionOfPrintedInsertPrice = 0;
  } else if (selected.printedInsertType !== "none") {
    insertionOfPrintedInsertPrice =
      parseFloat(prices[lookupNumber]) * selected.quantity;
  }

  if (!selected.outerWrapType) {
    insertionOfRecordPrice = 0;
  } else if (selected.outerWrapType === "polybag") {
    insertionOfRecordPrice =
      parseFloat(prices[lookupNumber]) * selected.quantity;
    if (selected.amount === "double") {
      insertionOfRecordPrice *= 2;
    } else if (selected.amount === "triple") {
      insertionOfRecordPrice *= 3;
    }
  }

  insertionPrice =
    insertionOfRecordPrice +
    insertionOfInnerSleevePrice +
    insertionOfPrintedInsertPrice +
    insertionOfJacketPrice;

  if (isNaN(insertionPrice)) {
    console.error("error getting insertion price");
    insertionPrice = 0;
    insertionOfRecordPrice = 0;
    insertionOfInnerSleevePrice = 0;
    insertionOfPrintedInsertPrice = 0;
    insertionOfJacketPrice = 0;
  }
}

function getMiscPrice() {
  if (!prices) {
    miscPrice = 0;
    return;
  }
}

function getObiStripPrice() {
  if (!prices) {
    obiStripPrice = 0;
    return;
  }

  obiStripPrice = 0;
}

function getAllPrices() {
  getPreFlightPrice();
  getSetupFeePrice();
  getCuttingPrice();
  getPlatingPrice();
  getStampersPrice();
  getTestPressingsPrice();
  getCenterLabelPrice();
  getRecordPrice();
  getInnerSleevePrice();
  getJacketPrice();
  getInsertPrice();
  getDownloadCardsPrice();
  getBarcodePrice();
  getOuterwrapPrice();
  getInsertionPrice();
  getMiscPrice();
  getObiStripPrice();
}

function getTotalPrice() {
  totalPrice =
    preFlightPrice +
    setupPrice +
    cuttingPrice +
    platingPrice +
    stampersPrice +
    testPressingsPrice +
    additionalTestPressingsPrice +
    centerLabelsPrice +
    recordPrice +
    innerSleevePrice +
    jacketsPrice +
    insertsPrice +
    downloadCardsPrice +
    outerwrapPrice +
    barcodePrice +
    insertionPrice +
    obiStripPrice +
    miscPrice +
    shippingEstimatePrice;

  // sliderTotalPriceDisplay.innerText = "$" + formatPrice(totalPrice);
  // sliderTotalPriceDisplayPerUnit.innerText =
  //   "$" + formatPrice(totalPrice / selected.quantity);
  // sliderTotalPriceDisplayMobile.innerText = "$" + formatPrice(totalPrice);
  // sliderTotalPriceDisplayPerUnitMobile.innerText =
  //   "$" + formatPrice(totalPrice / selected.quantity);

  // update hidden price inputs
  preFlightPriceInput.value = formatPrice(preFlightPrice);
  setupPriceInput.value = formatPrice(setupPrice);
  cuttingPriceInput.value = formatPrice(cuttingPrice);
  platingPriceInput.value = formatPrice(platingPrice);
  stampersPriceInput.value = formatPrice(stampersPrice);
  testPressingsPriceInput.value = formatPrice(testPressingsPrice);
  centerLabelPriceInput.value = formatPrice(centerLabelsPrice);
  recordPriceInput.value = formatPrice(recordPrice);
  innerSleevePriceIput.value = formatPrice(innerSleevePrice);
  jacketPriceInput.value = formatPrice(jacketsPrice);
  insertPriceInput.value = formatPrice(insertsPrice);
  downloadCardPriceInput.value = formatPrice(downloadCardsPrice);
  outerwrapPriceInput.value = formatPrice(outerwrapPrice);
  insertionPriceInput.value = formatPrice(insertionPrice);
  miscPriceInput.value = formatPrice(miscPrice);
  shippingEstimatePriceInput.value = formatPrice(shippingEstimatePrice);
  obiStripPriceInput.value = formatPrice(obiStripPrice);
  totalPriceInput.value = formatPrice(totalPrice);
  // -WB-250305-Price per unit
  pricePerUnitInput.value = formatPrice(totalPrice / selected.quantity);
  additionalTestPressingsPriceInput.value = formatPrice(
    additionalTestPressingsPrice
  );
  insertionOfRecordPriceInput.value = formatPrice(insertionOfRecordPrice);
  insertionOfInnerSleevePriceInput.value = formatPrice(
    insertionOfInnerSleevePrice
  );
  insertionOfPrintedInsertPriceInput.value = formatPrice(
    insertionOfPrintedInsertPrice
  );
  insertionOfJacketPriceInput.value = formatPrice(insertionOfJacketPrice);
  testPressingsTotalPriceInput.value = formatPrice(
    testPressingsPrice + additionalTestPressingsPrice
  );
  barcodePriceInput.value = formatPrice(barcodePrice);

  platingDisplayInput.value = "2-Step Plating";
  additionalTestPressingsInput.value = Math.max(selected.testPressings - 5, 0);
}

fetchPrices();

function toTitleCase(str) {
  if (typeof str !== "string" || !str.length) {
    return str;
  }

  let arr = str.split("");
  if (arr[0] !== " ") {
    arr[0] = arr[0].toUpperCase();
  }

  for (let i = 1; i < arr.length; i++) {
    if (arr[i - 1] === " " || arr[i - 1] === "-") {
      arr[i] = arr[i].toUpperCase();
    }
  }

  return arr.join("");
}

window.Webflow ||= [];
window.Webflow.push(() => {
  const form = document.getElementById("wf-form-Record-Builder-Form");

  form.addEventListener("submit", () => {
    form.querySelectorAll("input").forEach((input) => {
      input.value = toTitleCase(input.value);
    });
  });
});

// canvas logic
function initEffect(imageUrl, layerObject, color = "#000000") {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.crossOrigin = "anonymous";
    img.src = imageUrl;

    let containerWidth =
      layerObject.canvas.parentElement.parentElement.offsetWidth;
    if (containerWidth < 250) {
      layerObject.canvas.width = containerWidth - 5;
      layerObject.canvas.height = layerObject.canvas.width;
    } else {
      layerObject.canvas.width = containerWidth - 10;
      layerObject.canvas.height = layerObject.canvas.width;
    }

    img.onload = function () {
      const scaleX = layerObject.canvas.width / img.width;
      const scaleY = layerObject.canvas.height / img.height;

      const scale = Math.min(scaleX, scaleY);

      const newWidth = img.width * scale;
      const newHeight = img.height * scale;

      const x = (layerObject.canvas.width - newWidth) / 2;
      const y = (layerObject.canvas.height - newHeight) / 2;

      layerObject.context.drawImage(img, x, y, newWidth, newHeight);

      layerObject.imageData = layerObject.context.getImageData(
        0,
        0,
        layerObject.canvas.width,
        layerObject.canvas.height
      );
      layerObject.initialState = [...layerObject.imageData.data];

      changeEffectColor(layerObject, color);

      resolve();
    };

    img.onerror = function () {
      resolve();
    };
  });
}

function changeEffectColor(layerObject, hex) {
  const data = layerObject.imageData.data;

  for (let i = 0; i < data.length; i += 4) {
    // for some reason there is a line on the top and bottom of canvas on some systems. This removes that
    if (
      i <= layerObject.canvas.width * 4 ||
      i >
        layerObject.canvas.height * layerObject.canvas.width * 4 -
          layerObject.canvas.width * 4
    ) {
      data[i + 3] = 0;
    } else if (
      layerObject.initialState[i] < 255 ||
      layerObject.initialState[i + 1] < 255 ||
      layerObject.initialState[i + 2] < 255
    ) {
      let opacity = 255 - layerObject.initialState[i];
      data[i + 3] = opacity;

      const { r, g, b } = hexToRGB(hex.substring(1));

      if (r === undefined) {
        return;
      }

      data[i] = r;
      data[i + 1] = g;
      data[i + 2] = b;
    } else data[i + 3] = 0;
  }

  layerObject.context.putImageData(layerObject.imageData, 0, 0);
}

function clearEffects() {
  initEffect("", layerTwo);
  initEffect("", layerOne);
  initEffect("", layerThree);
}

function hexToRGB(hex) {
  const r = parseInt(hex.slice(0, 2), 16);
  const g = parseInt(hex.slice(2, 4), 16);
  const b = parseInt(hex.slice(4, 6), 16);

  return { r, g, b };
}

// pdf download logic
const downloadButton = document.getElementById("breakdown-download");

function downloadPDF() {
  const element = document.querySelector(".builder-breakdown-container");
  element.style.maxHeight = "none";
  const height = parseInt(window.getComputedStyle(element).height) + 200;

  const opt = {
    margin: 50,
    filename: "your_quote.pdf",
    image: { scale: 1, type: "jpeg", quality: 0.95 },
    html2canvas: { useCORS: true },
    jsPDF: { unit: "px", format: [1100, height] },
    pagebreak: { mode: "avoid-all" },
  };

  html2pdf()
    .set(opt)
    .from(element)
    .toPdf()
    .save()
    .then(() => (element.style.maxHeight = "100vh"));
}

downloadButton.addEventListener("click", () => {
  downloadPDF();
});

function filterColorOptionsForWeight() {
  if (
    selected.recordWeight === "heavyweight" &&
    selected.recordColorSku &&
    selected.recordColorSku.includes("8")
  ) {
    selected.recordColorName = null;
    selected.recordColorSku = null;
    selected.recordType = null;
    clearSelectedColors();
    // Remove 'selected-radio' class from all record type input parents
    recordTypeInputs.forEach((input) => {
      input.parentElement.classList.remove("selected-radio");
      input.checked = false;
    });
  }
  const allColorPickers = [
    ...document.querySelectorAll(
      ".builder-record-color-picker .color-picker-option"
    ),
    ...document.querySelectorAll(
      ".builder-splatter-color-picker .color-picker-option"
    ),
    ...document.querySelectorAll(
      ".builder-swirl-color-picker .color-picker-option"
    ),
  ];

  if (selected.recordWeight === "heavyweight") {
    allColorPickers.forEach((option) => {
      if (option.getAttribute("data-is-800") === "true") {
        if (option.parentElement) option.parentElement.style.display = "none";
      } else {
        if (option.parentElement) option.parentElement.style.display = "";
      }
    });
  } else {
    allColorPickers.forEach((option) => {
      if (option.parentElement) option.parentElement.style.display = "";
    });
  }
}