(function () {
      const matrixForm = document.getElementById("matrixForm");
      const matrixScroll = document.getElementById("matrixScroll");
      const matrixTable = document.getElementById("matrixTable");
      const topScroll = document.getElementById("matrixHScroll");
      const topScrollInner = document.getElementById("matrixHScrollInner");
      document.addEventListener("click", async (event) => {
        const button = event.target.closest("[data-copy-target]");
        if (!button) return;
        const field = document.getElementById(button.dataset.copyTarget);
        if (!field) return;
        field.select();
        field.setSelectionRange(0, field.value.length);
        try {
          await navigator.clipboard.writeText(field.value);
        } catch (error) {
          document.execCommand("copy");
        }
        const originalText = button.textContent;
        button.textContent = "Скопировано";
        setTimeout(() => {
          button.textContent = originalText;
        }, 1600);
      });

      if (!matrixForm || !matrixScroll || !matrixTable || !topScroll || !topScrollInner) return;

      let isDirty = false;
      let syncing = false;

      function markDirty() {
        isDirty = true;
      }

      function updateTopScrollWidth() {
        topScrollInner.style.width = matrixTable.scrollWidth + "px";
      }

      function syncScrollFromTop() {
        if (syncing) return;
        syncing = true;
        matrixScroll.scrollLeft = topScroll.scrollLeft;
        syncing = false;
      }

      function syncScrollFromMatrix() {
        if (syncing) return;
        syncing = true;
        topScroll.scrollLeft = matrixScroll.scrollLeft;
        syncing = false;
      }

      matrixForm.addEventListener("change", (event) => {
        if (!(event.target && event.target.matches('input[type="checkbox"]'))) return;
        markDirty();
      });

      matrixForm.addEventListener("submit", () => {
        isDirty = false;
      });

      window.addEventListener("beforeunload", (event) => {
        if (!isDirty) return;
        event.preventDefault();
        event.returnValue = "";
      });

      document.addEventListener("click", (event) => {
        const anchor = event.target.closest("a");
        if (!anchor || !isDirty) return;
        const ok = window.confirm("Есть несохраненные изменения матрицы. Нажмите OK, чтобы остаться и сначала сохранить.");
        if (!ok) return;
        event.preventDefault();
      });

      document.addEventListener("submit", (event) => {
        const form = event.target;
        if (!form || form === matrixForm || !isDirty) return;
        const ok = window.confirm("Есть несохраненные изменения матрицы. Нажмите OK, чтобы остаться и сначала сохранить.");
        if (!ok) return;
        event.preventDefault();
      });

      topScroll.addEventListener("scroll", syncScrollFromTop);
      matrixScroll.addEventListener("scroll", syncScrollFromMatrix);
      window.addEventListener("resize", updateTopScrollWidth);
      updateTopScrollWidth();
      syncScrollFromMatrix();

      document.addEventListener("click", (event) => {
        const button = event.target.closest("[data-edit-product]");
        if (!button) return;
        const form = document.querySelector(`[data-product-edit="${button.dataset.editProduct}"]`);
        if (!form) return;
        form.hidden = !form.hidden;
      });

      document.addEventListener("click", (event) => {
        const button = event.target.closest("[data-edit-vendor]");
        if (!button) return;
        const form = document.querySelector(`[data-vendor-edit="${button.dataset.editVendor}"]`);
        if (!form) return;
        form.hidden = !form.hidden;
      });
    })();