<%- include('../catalogCommerce/crudAssets.ejs') %>
<script src="/admin/app-assets/js/core/libraries/jquery.min.js"></script>
<script src="/admin/app-assets/vendors/js/forms/select/select2.full.min.js"></script>
<script src="/admin/app-assets/js/scripts/forms/select/form-select2.js"></script>
<script>


  const translations = {
    add: "<%= i18n.__('common.add') %>",
    edit: "<%= i18n.__('common.edit') %>",
    imageRequired: "<%= i18n.__('common.invalidImageExtension') %>",
  };

  function validateInput(input) {
    const i18n = {
      common: {
        emptyField: "<%= i18n.__('common.emptyField') %>",
        minLength:
          "<%= i18n.__('common.minLength', { minLength: '{{minLength}}' }) %>",
        invalidUrlMessage: "<%= i18n.__('settings.linkMustBeValid') %>",
      },
    };

    try {
      const trimmedValue = input.value.trim();
      const minLength = 2;
      const emptyMessage = i18n.common.emptyField;
      const minLengthMessage = i18n.common.minLength.replace(
        "{{minLength}}",
        minLength
      );
      const feedback = input.nextElementSibling;
      const invalidUrlMessage = i18n.common.invalidUrlMessage;

      if (input.type === "url") {
        if (trimmedValue === "") {
          feedback.textContent = "";
          input.classList.remove("is-invalid");
          input.style.border = "";
          input.setCustomValidity("");
        } else if (!isValidUrl(trimmedValue)) {
          feedback.textContent = invalidUrlMessage;
          input.classList.add("is-invalid");
          input.style.border = "1px solid red";
          input.setCustomValidity(invalidUrlMessage);
        } else {
          feedback.textContent = "";
          input.classList.remove("is-invalid");
          input.style.border = "";
          input.setCustomValidity("");
        }
      } else {
        if (trimmedValue.length < minLength) {
          feedback.textContent = minLengthMessage;
          input.classList.add("is-invalid");
          input.style.border = "1px solid red";
          input.setCustomValidity(minLengthMessage);
        } else {
          feedback.textContent = "";
          input.classList.remove("is-invalid");
          input.style.border = "";
          input.setCustomValidity("");
        }
      }

      // input.reportValidity();
    } catch (error) {
      console.error("Validation error:", error);
    }
  }

  function isValidUrl(value) {
    const urlPattern = /^(https?:\/\/)([\w.-]+)+(:\d+)?(\/[\w./?=#-]*)?$/;
    return urlPattern.test(value);
  }
  function shared(e, action, formElement) {
    e.preventDefault();

    const confirm = translations[action];

    const objData = new FormData(formElement);

    if ($("#image")[0]?.files.length) {
      if (!/(jpg|jpeg|png)$/.test($("#image")[0].files[0].type)) {
        Swal.fire({
          icon: "error",
          title: translations.imageRequired,
          showConfirmButton: false,
          timer: 1500,
        });

        return delete $("#image")[0].files;
      }

      $.each($("#image")[0].files, function (i, file) {
        objData.append("image", file[0]);
      });
    }

    const nameAr = String($('input[name="nameAr"]').val());

    const nameEn = String($('input[name="nameEn"]').val());

    if (
      !nameAr.trim().length ||
      !nameEn.trim().length
    ) {
      $(formElement).removeClass("was-validated");
    } else {
      $(formElement).addClass("was-validated");
    }

    if (nameAr.trim().length && nameEn.trim().length) {
      ajaxUpload($(formElement), objData, "uploadWithImage", confirm);
    }
  }

  $(document).ready(function () {
    $(document).on("submit", "#addDepartment", function (e) {
        shared(e, "add", this);
    });

    $(document).on("submit", "#editDepartment", function (e) {
        shared(e, "edit", this);
    });
  });
</script>
