<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}}' }) %>",
      }
    };

    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;

    if (trimmedValue.length < minLength) {
        feedback.textContent = minLengthMessage;
        input.classList.add('is-invalid');
        input.style.border = '1px solid red';
        input.setCustomValidity(minLengthMessage);
      } else {
        feedback.textContent = ''; // Clear feedback
        input.classList.remove('is-invalid');
        input.style.border = '';
        input.setCustomValidity('');
      }

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

  }



function shared(e, action, formElement){

    e.preventDefault();

    const confirm = translations[action];

    const titleAr = String($('input[name="title.ar"]').val());

    const titleEn = String($('input[name="title.en"]').val());

    const descriptionAr  = String($('textarea[name="description.ar"]').val());

    const descriptionEn  = String($('textarea[name="description.en"]').val());

    if (
      !titleAr.trim().length ||
      !titleEn.trim().length ||
      !descriptionAr.trim().length ||
      !descriptionEn.trim().length
    ) {
      $(formElement).removeClass("was-validated");
    } else {
      $(formElement).addClass("was-validated");
    }

    if (
      titleAr.trim().length &&
      titleEn.trim().length &&
      descriptionAr.trim().length &&
      descriptionEn.trim().length
    ) {
      ajaxUpload($(formElement), {}, "uploadWithOutImage", confirm);
    }
  }

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

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