mivita/public/js/product-quantity.js

class ProductQuantity {
  constructor() {
    this.init();
  }

  init() {
    this.bindEvents();
    this.updateAllProductStates();
    //this.initSmartWizard();
  }

  initSmartWizard() {
    // SmartWizard Event-Listener für Schrittwechsel
    $(".smartwizard-abo").on(
      "leaveStep",
      (e, anchorObject, stepNumber, stepDirection) => {
        // Formular im aktuellen Schritt finden
        const $currentForm = $(e.target).find(".tab-pane.active form");
        if ($currentForm.length) {
          // Temporäres Formular erstellen und absenden
          const $tempForm = $("<form>", {
            method: "POST",
            action: $currentForm.attr("action"),
            style: "display: none;",
          });

          // Alle Input-Felder kopieren
          $currentForm.find("input").each((_, input) => {
            const $input = $(input);
            if ($input.attr("type") === "text") {
              const value = parseInt($input.val()) || 0;
              if (value > 0) {
                $tempForm.append(
                  $("<input>", {
                    type: "hidden",
                    name: $input.attr("name"),
                    value: value,
                  })
                );
              }
            }
          });

          // CSRF-Token hinzufügen
          $tempForm.append(
            $("<input>", {
              type: "hidden",
              name: "_token",
              value: $('meta[name="csrf-token"]').attr("content"),
            })
          );

          // Action-Button-Wert hinzufügen
          $tempForm.append(
            $("<input>", {
              type: "hidden",
              name: "action",
              value: "next",
            })
          );

          // Formular zum Body hinzufügen und absenden
          $("body").append($tempForm);
          $tempForm.submit();
        }
      }
    );
  }

  updateProductState(productId, productType) {
    const $input = $(`input[name="${productType}_product_qty[${productId}]"]`);
    const $product = $(`#product-${productId}`);
    const value = parseInt($input.val()) || 0;
    const $addButton = $input.closest(".input-group").find(".add-product-qty");
    const $removeButton = $input
      .closest(".input-group")
      .find(".remove-product-qty");

    if (value > 0) {
      $product.removeClass("product-inactive").addClass("product-active");
      $addButton.removeClass("btn-secondary").addClass("btn-primary");
      $removeButton.removeClass("btn-secondary").addClass("btn-primary");
    } else {
      $product.removeClass("product-active").addClass("product-inactive");
      $addButton.removeClass("btn-primary").addClass("btn-secondary");
      $removeButton.removeClass("btn-primary").addClass("btn-secondary");
    }
  }

  updateAllProductStates() {
    // Basis-Produkte
    $('input[name^="base_product_qty"]').each((_, input) => {
      const productId = $(input).data("product-id");
      this.updateProductState(productId, "base");
    });

    // Upgrade-Produkte
    $('input[name^="upgrade_product_qty"]').each((_, input) => {
      const productId = $(input).data("product-id");
      this.updateProductState(productId, "upgrade");
    });
  }

  bindEvents() {
    // Event-Listener für den "Hinzufügen" Button
    $(document).on("click", ".add-product-qty", (e) => {
      const $button = $(e.currentTarget);
      const productId = $button.data("product-id");
      const productType = $button
        .closest("tr")
        .find('input[type="text"]')
        .attr("name")
        .split("_")[0];
      const $input = $(
        `input[name="${productType}_product_qty[${productId}]"]`
      );
      const currentValue = parseInt($input.val()) || 0;

      $input.val(currentValue + 1).trigger("change");
      this.updateProductState(productId, productType);
    });

    // Event-Listener für den "Entfernen" Button
    $(document).on("click", ".remove-product-qty", (e) => {
      const $button = $(e.currentTarget);
      const productId = $button.data("product-id");
      const productType = $button
        .closest("tr")
        .find('input[type="text"]')
        .attr("name")
        .split("_")[0];
      const $input = $(
        `input[name="${productType}_product_qty[${productId}]"]`
      );
      const currentValue = parseInt($input.val()) || 0;

      if (currentValue > 0) {
        $input.val(currentValue - 1).trigger("change");
        this.updateProductState(productId, productType);
      }
    });

    // Event-Listener für manuelle Eingabe
    $(document).on("change", 'input[name$="product_qty"]', (e) => {
      const $input = $(e.currentTarget);
      const productId = $input.data("product-id");
      const productType = $input.attr("name").split("_")[0];
      const value = parseInt($input.val()) || 0;

      if (value < 0) {
        $input.val(0);
      }
      this.updateProductState(productId, productType);
    });
  }
}

// Initialisierung der Klasse wenn das Dokument bereit ist
$(document).ready(() => {
  new ProductQuantity();
});