{% if product.tags contains "badge: Özelleştirilebilir" %}

<!--
    Custom Carpet Order Widget
    Embed this in your Shopify product page
    -->

<style>
  .carpet-widget * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  .carpet-widget {
    --cw-bg: #ffffff;
    --cw-bg-secondary: #f5f5f5;
    --cw-border: #e0e0e0;
    --cw-text: #1a1a1a;
    --cw-text-muted: #6b6b6b;
    --cw-accent: #2d2d2d;
    --cw-accent-hover: #404040;
    --cw-success: #22c55e;
    --cw-error: #ef4444;
    --cw-radius: 8px;
    --cw-transition: all 0.2s ease;

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
      sans-serif;
    background: var(--cw-bg);
    border: 1px solid var(--cw-border);
    border-radius: var(--cw-radius);
    padding: 24px;
    max-width: 480px;
    color: var(--cw-text);
  }

  .carpet-widget__title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--cw-border);
  }

  .carpet-widget__section {
    margin-bottom: 20px;
  }

  .carpet-widget__label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--cw-text-muted);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .carpet-widget__input-group {
    display: flex;
    gap: 12px;
  }

  .carpet-widget__input-wrapper {
    flex: 1;
    position: relative;
  }

  .carpet-widget__input-label {
    font-size: 11px;
    color: var(--cw-text-muted);
    margin-bottom: 4px;
    display: block;
  }

  .carpet-widget__input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--cw-border);
    border-radius: var(--cw-radius);
    font-size: 15px;
    color: var(--cw-text);
    background: var(--cw-bg);
    transition: var(--cw-transition);
    -moz-appearance: textfield;
  }

  .carpet-widget__input::-webkit-outer-spin-button,
  .carpet-widget__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  .carpet-widget__input:focus {
    outline: none;
    border-color: var(--cw-accent);
  }

  .carpet-widget__input::placeholder {
    color: #bbb;
  }

  .carpet-widget__input--error {
    border-color: var(--cw-error) !important;
    background-color: #fef2f2;
  }

  .carpet-widget__input--error:focus {
    border-color: var(--cw-error) !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
  }

  /* Inline Error Message */
  .carpet-widget__inline-error {
    display: none;
    font-size: 11px;
    color: var(--cw-error);
    margin-top: 4px;
  }

  .carpet-widget__inline-error.show {
    display: block;
  }

  .carpet-widget__input--small {
    max-width: 80px;
  }

  .carpet-widget__feet-row {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .carpet-widget__feet-row span {
    color: var(--cw-text-muted);
    font-size: 14px;
  }

  /* Shape Selection */
  .carpet-widget__shapes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }

  .carpet-widget__shape {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 14px 8px;
    border: 1px solid var(--cw-border);
    border-radius: var(--cw-radius);
    cursor: pointer;
    transition: var(--cw-transition);
    background: var(--cw-bg);
  }

  .carpet-widget__shape:hover:not(.disabled) {
    border-color: var(--cw-accent);
  }

  .carpet-widget__shape.active {
    border-color: var(--cw-accent);
    background: var(--cw-bg-secondary);
  }

  .carpet-widget__shape.disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
  }

  .carpet-widget__shape-icon {
    width: 32px;
    height: 32px;
    margin-bottom: 6px;
    stroke: var(--cw-text);
    fill: none;
    stroke-width: 1.5;
  }

  .carpet-widget__shape-name {
    font-size: 11px;
    text-align: center;
    color: var(--cw-text-muted);
  }

  /* Dropdown Select */
  .carpet-widget__select {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--cw-border);
    border-radius: var(--cw-radius);
    font-size: 14px;
    color: var(--cw-text);
    background: var(--cw-bg);
    cursor: pointer;
    transition: var(--cw-transition);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b6b6b' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
  }

  .carpet-widget__select:focus {
    outline: none;
    border-color: var(--cw-accent);
  }

  /* Price Display */
  .carpet-widget__price-section {
    background: var(--cw-bg-secondary);
    border-radius: var(--cw-radius);
    padding: 16px;
    margin-bottom: 16px;
  }

  .carpet-widget__price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
  }

  .carpet-widget__price-row:last-child {
    margin-bottom: 0;
    padding-top: 12px;
    border-top: 1px solid var(--cw-border);
  }

  .carpet-widget__price-label {
    font-size: 13px;
    color: var(--cw-text-muted);
  }

  .carpet-widget__price-value {
    font-size: 13px;
    color: var(--cw-text);
  }

  .carpet-widget__price-total {
    font-size: 20px;
    font-weight: 600;
  }

  /* Button */
  .carpet-widget__button {
    width: 100%;
    padding: 16px;
    background: var(--cw-accent);
    color: white;
    border: none;
    border-radius: var(--cw-radius);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--cw-transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 54px;
  }

  .carpet-widget__button:hover:not(:disabled) {
    background: var(--cw-accent-hover);
  }

  .carpet-widget__button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .carpet-widget__button--loading {
    pointer-events: none;
  }

  .carpet-widget__spinner {
    display: inline-block !important;
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    -webkit-animation: cw-spin 0.8s linear infinite;
    animation: cw-spin 0.8s linear infinite;
  }

  @-webkit-keyframes cw-spin {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }

  @keyframes cw-spin {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }

  /* Messages */
  .carpet-widget__message {
    padding: 12px 14px;
    border-radius: var(--cw-radius);
    font-size: 13px;
    margin-top: 12px;
    display: none;
  }

  .carpet-widget__message--error {
    background: #fef2f2;
    color: var(--cw-error);
    border: 1px solid #fecaca;
  }

  .carpet-widget__message--success {
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
  }

  .carpet-widget__message.show {
    display: block;
  }

  /* Responsive */
  @media (max-width: 480px) {
    .carpet-widget {
      padding: 16px;
    }

    .carpet-widget__shapes {
      grid-template-columns: repeat(2, 1fr);
    }

    .carpet-widget__input-group {
      flex-direction: column;
      gap: 8px;
    }

    .carpet-widget__feet-row {
      flex-wrap: wrap;
    }
  }
</style>

<div class="carpet-widget" id="carpetWidget">
  <!-- Hidden inputs for Liquid data -->
  <input
    type="hidden"
    id="cwBasePrice"
    value="{{ product.metafields.custom.custombirimfiyat | default: 100 }}"
  />
  <input
    type="hidden"
    id="cwMaxWidth"
    value="{{ product.metafields.custom.yenienlimit | default: 500 }}"
  />
  <input type="hidden" id="cwProductId" value="{{ product.id }}" />
  <input
    type="hidden"
    id="cwProductTitle"
    value="{{ product.title | escape }}"
  />
  <input
    type="hidden"
    id="cwProductImage"
    value="{{ product.featured_image | image_url: width: 800 }}"
  />
  <input
    type="hidden"
    id="cwProductGid"
    value="gid://shopify/Product/{{ product.id }}"
  />
  <input type="hidden" id="cwStore" value="tr" />
  <input type="hidden" id="cwLang" value="tr" />

  <h3
    class="carpet-widget__title"
    data-tr="Özel Boyut Sipariş"
    data-en="Custom Size Order"
  ></h3>

  <!-- Dimensions Section - Metric (TR) -->
  <div class="carpet-widget__section carpet-widget__metric-inputs">
    <label
      class="carpet-widget__label"
      data-tr="Boyutlar (cm)"
      data-en="Dimensions (cm)"
    ></label>
    <div class="carpet-widget__input-group">
      <div class="carpet-widget__input-wrapper">
        <span
          class="carpet-widget__input-label"
          data-tr="Genişlik (En)"
          data-en="Width"
        ></span>
        <input
          type="number"
          class="carpet-widget__input"
          id="cwWidth"
          placeholder="200"
          min="1"
        />
        <div class="carpet-widget__inline-error" id="cwWidthError"></div>
      </div>
      <div class="carpet-widget__input-wrapper">
        <span
          class="carpet-widget__input-label"
          data-tr="Uzunluk (Boy)"
          data-en="Length"
        ></span>
        <input
          type="number"
          class="carpet-widget__input"
          id="cwHeight"
          placeholder="300"
          min="1"
        />
      </div>
    </div>
  </div>

  <!-- Dimensions Section - Imperial (US) -->
  <div
    class="carpet-widget__section carpet-widget__imperial-inputs"
    style="display: none"
  >
    <label
      class="carpet-widget__label"
      data-tr="Boyutlar"
      data-en="Dimensions"
    ></label>

    <div class="carpet-widget__input-wrapper" style="margin-bottom: 12px">
      <span
        class="carpet-widget__input-label"
        data-tr="Genişlik (En)"
        data-en="Width"
      ></span>
      <div class="carpet-widget__feet-row">
        <input
          type="number"
          class="carpet-widget__input carpet-widget__input--small"
          id="cwWidthFeet"
          placeholder="3"
          min="0"
        />
        <span>ft</span>
        <input
          type="number"
          class="carpet-widget__input carpet-widget__input--small"
          id="cwWidthInch"
          placeholder="11"
          min="0"
          max="11"
        />
        <span>in</span>
      </div>
      <div class="carpet-widget__inline-error" id="cwWidthErrorUS"></div>
    </div>

    <div class="carpet-widget__input-wrapper">
      <span
        class="carpet-widget__input-label"
        data-tr="Uzunluk (Boy)"
        data-en="Length"
      ></span>
      <div class="carpet-widget__feet-row">
        <input
          type="number"
          class="carpet-widget__input carpet-widget__input--small"
          id="cwHeightFeet"
          placeholder="5"
          min="0"
        />
        <span>ft</span>
        <input
          type="number"
          class="carpet-widget__input carpet-widget__input--small"
          id="cwHeightInch"
          placeholder="0"
          min="0"
          max="11"
        />
        <span>in</span>
      </div>
    </div>
  </div>

  <!-- Shape Selection -->
  <div class="carpet-widget__section">
    <label class="carpet-widget__label" data-tr="Şekil" data-en="Shape"></label>
    <div class="carpet-widget__shapes">
      <div class="carpet-widget__shape active" data-shape="DIKDORTGEN">
        <svg class="carpet-widget__shape-icon" viewBox="0 0 32 32">
          <rect x="4" y="8" width="24" height="16" rx="1" />
        </svg>
        <span
          class="carpet-widget__shape-name"
          data-tr="Dikdörtgen"
          data-en="Rectangle"
        ></span>
      </div>
      <div class="carpet-widget__shape" data-shape="KARE">
        <svg class="carpet-widget__shape-icon" viewBox="0 0 32 32">
          <rect x="6" y="6" width="20" height="20" rx="1" />
        </svg>
        <span
          class="carpet-widget__shape-name"
          data-tr="Kare"
          data-en="Square"
        ></span>
      </div>
      <div class="carpet-widget__shape" data-shape="YUVARLAK">
        <svg class="carpet-widget__shape-icon" viewBox="0 0 32 32">
          <circle cx="16" cy="16" r="12" />
        </svg>
        <span
          class="carpet-widget__shape-name"
          data-tr="Yuvarlak"
          data-en="Round"
        ></span>
      </div>
      <div class="carpet-widget__shape" data-shape="OVAL">
        <svg class="carpet-widget__shape-icon" viewBox="0 0 32 32">
          <ellipse cx="16" cy="16" rx="14" ry="9" />
        </svg>
        <span
          class="carpet-widget__shape-name"
          data-tr="Oval"
          data-en="Oval"
        ></span>
      </div>
    </div>
  </div>

  <!-- Fringe Dropdown -->
  <div class="carpet-widget__section">
    <label
      class="carpet-widget__label"
      data-tr="Saçak Seçimi"
      data-en="Fringe Option"
    ></label>
    <select class="carpet-widget__select" id="cwFringeSelect">
      <option value="0" data-tr="Saçaksız" data-en="Without Fringe"></option>
      <option value="1" data-tr="Saçaklı" data-en="With Fringe"></option>
    </select>
    <div
      style="font-size: 11px; color: var(--cw-text-muted); margin-top: 6px"
      id="cwFringePriceNote"
    ></div>
  </div>

  <!-- Price Display -->
  <div class="carpet-widget__price-section">
    <div class="carpet-widget__price-row">
      <span
        class="carpet-widget__price-label"
        data-tr="Boyut"
        data-en="Size"
      ></span>
      <span class="carpet-widget__price-value" id="cwSizeDisplay">-</span>
    </div>
    <div class="carpet-widget__price-row">
      <span
        class="carpet-widget__price-label"
        data-tr="Alan"
        data-en="Area"
      ></span>
      <span class="carpet-widget__price-value" id="cwAreaDisplay">- m²</span>
    </div>
    <div class="carpet-widget__price-row">
      <span
        class="carpet-widget__price-label"
        data-tr="Toplam Fiyat"
        data-en="Total Price"
      ></span>
      <span
        class="carpet-widget__price-value carpet-widget__price-total"
        id="cwTotalPrice"
        >-</span
      >
    </div>
  </div>

  <!-- Submit Button -->
  <button class="carpet-widget__button" id="cwSubmitBtn" disabled>
    <span id="cwBtnText" data-tr="Sepete Ekle" data-en="Add to Cart"></span>
  </button>

  <!-- Messages -->
  <div
    class="carpet-widget__message carpet-widget__message--error"
    id="cwErrorMsg"
  ></div>
  <div
    class="carpet-widget__message carpet-widget__message--success"
    id="cwSuccessMsg"
  ></div>
</div>

<script>
  (function () {
    "use strict";

    const API_URL = "https://bespokyserver.com/api.php";

    const widget = document.getElementById("carpetWidget");
    const basePrice =
      parseFloat(document.getElementById("cwBasePrice").value) || 100;
    const maxWidth =
      parseFloat(document.getElementById("cwMaxWidth").value) || 500;
    const productId = document.getElementById("cwProductId").value;
    const productGid = document.getElementById("cwProductGid").value;
    const productTitle = document.getElementById("cwProductTitle").value;
    const productImage = document.getElementById("cwProductImage").value;
    const store = document.getElementById("cwStore").value;
    const lang = document.getElementById("cwLang").value;

    const config = {
      tr: { currency: "₺", currencyCode: "TRY", unit: "cm", fringePrice: 10 },
      us: { currency: "$", currencyCode: "USD", unit: "inch", fringePrice: 1 },
    }[store];

    let state = {
      width: 0,
      height: 0,
      shape: "DIKDORTGEN",
      fringed: false,
    };

    function init() {
      setupLanguage();
      setupInputMode();
      setupEventListeners();
      updateFringeInfo();
    }

    function setupLanguage() {
      widget.querySelectorAll("[data-" + lang + "]").forEach((el) => {
        if (el.tagName === "OPTION") {
          el.textContent = el.getAttribute("data-" + lang);
        } else {
          el.textContent = el.getAttribute("data-" + lang);
        }
      });
    }

    function setupInputMode() {
      const metricInputs = widget.querySelector(
        ".carpet-widget__metric-inputs"
      );
      const imperialInputs = widget.querySelector(
        ".carpet-widget__imperial-inputs"
      );

      if (store === "us") {
        metricInputs.style.display = "none";
        imperialInputs.style.display = "block";
      } else {
        metricInputs.style.display = "block";
        imperialInputs.style.display = "none";
      }
    }

    function updateFringeInfo() {
      const note = document.getElementById("cwFringePriceNote");
      note.textContent =
        lang === "tr"
          ? "Saçaklı seçeneği +" +
            config.currency +
            config.fringePrice +
            " ekler"
          : "Fringe option adds +" + config.currency + config.fringePrice;
    }

    function setupEventListeners() {
      document
        .getElementById("cwWidth")
        .addEventListener("input", handleDimensionChange);
      document
        .getElementById("cwHeight")
        .addEventListener("input", handleDimensionChange);

      ["cwWidthFeet", "cwWidthInch", "cwHeightFeet", "cwHeightInch"].forEach(
        (id) => {
          document
            .getElementById(id)
            .addEventListener("input", handleDimensionChange);
        }
      );

      widget.querySelectorAll(".carpet-widget__shape").forEach((el) => {
        el.addEventListener("click", function () {
          if (this.classList.contains("disabled")) return;
          widget
            .querySelectorAll(".carpet-widget__shape")
            .forEach((s) => s.classList.remove("active"));
          this.classList.add("active");
          state.shape = this.getAttribute("data-shape");
          updatePrice();
        });
      });

      document
        .getElementById("cwFringeSelect")
        .addEventListener("change", function () {
          state.fringed = this.value === "1";
          updatePrice();
        });

      document
        .getElementById("cwSubmitBtn")
        .addEventListener("click", handleSubmit);
    }

    function handleDimensionChange() {
      if (store === "us") {
        const widthFeet =
          parseInt(document.getElementById("cwWidthFeet").value) || 0;
        const widthInch =
          parseInt(document.getElementById("cwWidthInch").value) || 0;
        const heightFeet =
          parseInt(document.getElementById("cwHeightFeet").value) || 0;
        const heightInch =
          parseInt(document.getElementById("cwHeightInch").value) || 0;

        state.width = widthFeet * 12 + widthInch;
        state.height = heightFeet * 12 + heightInch;
      } else {
        state.width = parseFloat(document.getElementById("cwWidth").value) || 0;
        state.height =
          parseFloat(document.getElementById("cwHeight").value) || 0;
      }

      updateShapeAvailability();
      validateWidthInput();
      updatePrice();
    }

    function updateShapeAvailability() {
      const isSquare =
        state.width > 0 && state.height > 0 && state.width === state.height;
      const isRectangle =
        state.width > 0 && state.height > 0 && state.width !== state.height;
      const noDimensions = state.width === 0 || state.height === 0;

      const shapes = {
        DIKDORTGEN: widget.querySelector('[data-shape="DIKDORTGEN"]'),
        KARE: widget.querySelector('[data-shape="KARE"]'),
        YUVARLAK: widget.querySelector('[data-shape="YUVARLAK"]'),
        OVAL: widget.querySelector('[data-shape="OVAL"]'),
      };

      // Enable all shapes initially
      Object.values(shapes).forEach((s) => s.classList.remove("disabled"));

      if (noDimensions) {
        // All shapes enabled when no dimensions entered
        return;
      }

      if (isSquare) {
        shapes.DIKDORTGEN.classList.add("disabled");
        shapes.OVAL.classList.add("disabled");

        if (state.shape === "DIKDORTGEN" || state.shape === "OVAL") {
          state.shape = "KARE";
          updateActiveShape();
        }
      } else if (isRectangle) {
        shapes.KARE.classList.add("disabled");
        shapes.YUVARLAK.classList.add("disabled");

        if (state.shape === "KARE" || state.shape === "YUVARLAK") {
          state.shape = "DIKDORTGEN";
          updateActiveShape();
        }
      }
    }

    function updateActiveShape() {
      widget.querySelectorAll(".carpet-widget__shape").forEach((el) => {
        el.classList.remove("active");
        if (el.getAttribute("data-shape") === state.shape) {
          el.classList.add("active");
        }
      });
    }

    function validateWidthInput() {
      const widthInput = document.getElementById("cwWidth");
      const widthFeetInput = document.getElementById("cwWidthFeet");
      const widthInchInput = document.getElementById("cwWidthInch");
      const widthError = document.getElementById("cwWidthError");
      const widthErrorUS = document.getElementById("cwWidthErrorUS");

      const widthExceeds = maxWidth > 0 && state.width > maxWidth;

      const errorText =
        lang === "tr"
          ? "Maksimum: " + maxWidth + " " + config.unit
          : "Maximum: " + maxWidth + " " + config.unit;

      if (store === "us") {
        if (widthExceeds) {
          widthFeetInput.classList.add("carpet-widget__input--error");
          widthInchInput.classList.add("carpet-widget__input--error");
          widthErrorUS.textContent = errorText;
          widthErrorUS.classList.add("show");
        } else {
          widthFeetInput.classList.remove("carpet-widget__input--error");
          widthInchInput.classList.remove("carpet-widget__input--error");
          widthErrorUS.classList.remove("show");
        }
      } else {
        if (widthExceeds) {
          widthInput.classList.add("carpet-widget__input--error");
          widthError.textContent = errorText;
          widthError.classList.add("show");
        } else {
          widthInput.classList.remove("carpet-widget__input--error");
          widthError.classList.remove("show");
        }
      }

      return !widthExceeds;
    }

    function calculateArea(width, height) {
      let widthM, heightM;
      if (store === "us") {
        widthM = width * 0.0254;
        heightM = height * 0.0254;
      } else {
        widthM = width / 100;
        heightM = height / 100;
      }
      return widthM * heightM;
    }

    function formatDimensions(width, height, shape) {
      if (store === "us") {
        const wFeet = Math.floor(width / 12);
        const wInch = width % 12;
        const hFeet = Math.floor(height / 12);
        const hInch = height % 12;

        if (shape === "YUVARLAK" || shape === "KARE") {
          return wFeet + "'" + wInch + '" x ' + wFeet + "'" + wInch + '"';
        }
        return wFeet + "'" + wInch + '" x ' + hFeet + "'" + hInch + '"';
      } else {
        if (shape === "YUVARLAK" || shape === "KARE") {
          return width + " x " + width + " cm";
        }
        return width + " x " + height + " cm";
      }
    }

    function updatePrice() {
      const sizeDisplay = document.getElementById("cwSizeDisplay");
      const areaDisplay = document.getElementById("cwAreaDisplay");
      const totalDisplay = document.getElementById("cwTotalPrice");
      const submitBtn = document.getElementById("cwSubmitBtn");

      const isValid = state.width > 0 && state.height > 0;
      const widthValid = validateWidthInput();

      if (!widthValid) {
        submitBtn.disabled = true;
        return;
      }

      if (!isValid) {
        sizeDisplay.textContent = "-";
        areaDisplay.textContent = "- m²";
        totalDisplay.textContent = "-";
        submitBtn.disabled = true;
        return;
      }

      const area = calculateArea(state.width, state.height);
      let price = area * basePrice;

      if (state.fringed) {
        price += config.fringePrice;
      }

      sizeDisplay.textContent = formatDimensions(
        state.width,
        state.height,
        state.shape
      );
      areaDisplay.textContent = area.toFixed(2) + " m²";
      totalDisplay.textContent = config.currency + price.toFixed(2);
      submitBtn.disabled = false;
    }

    async function handleSubmit() {
      const submitBtn = document.getElementById("cwSubmitBtn");
      const btnText = document.getElementById("cwBtnText");
      const errorMsg = document.getElementById("cwErrorMsg");
      const successMsg = document.getElementById("cwSuccessMsg");

      errorMsg.classList.remove("show");
      successMsg.classList.remove("show");

      // Show loading spinner
      submitBtn.disabled = true;
      submitBtn.classList.add("carpet-widget__button--loading");
      btnText.style.display = "none";

      const spinner = document.createElement("div");
      spinner.className = "carpet-widget__spinner";
      spinner.id = "cwSpinner";
      submitBtn.appendChild(spinner);

      try {
        const response = await fetch(API_URL, {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({
            width: state.width,
            height: state.height,
            shape: state.shape,
            fringed: state.fringed,
            store: store,
            base_price: basePrice,
            max_width: maxWidth,
            product_id: productId,
            product_gid: productGid,
            product_title: productTitle,
            product_image: productImage || null,
          }),
        });

        const data = await response.json();

        if (data.success) {
          successMsg.textContent =
            lang === "tr" ? "Ürün sepete ekleniyor..." : "Adding to cart...";
          successMsg.classList.add("show");

          if (data.variant_id_numeric) {
            window.location.href =
              "/cart/add?id=" + data.variant_id_numeric + "&quantity=1";
          }
        } else {
          throw new Error(data.error || "Unknown error");
        }
      } catch (error) {
        errorMsg.textContent =
          lang === "tr"
            ? "Bir hata oluştu: " + error.message
            : "An error occurred: " + error.message;
        errorMsg.classList.add("show");

        resetButton();
      }
    }

    function resetButton() {
      const submitBtn = document.getElementById("cwSubmitBtn");
      const btnText = document.getElementById("cwBtnText");
      const spinner = document.getElementById("cwSpinner");

      if (spinner) spinner.remove();
      btnText.style.display = "inline";
      submitBtn.disabled = false;
      submitBtn.classList.remove("carpet-widget__button--loading");
    }

    if (document.readyState === "loading") {
      document.addEventListener("DOMContentLoaded", init);
    } else {
      init();
    }
  })();
</script>

{% endif %}