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

  function validateInput(input) {
    try {
      const emptyMessage = "<%= i18n.__('common.emptyField') %>";
      const trimmedValue = input.value.trim();
      const feedback = input.nextElementSibling;

      if (!trimmedValue.length) {
        if (feedback) feedback.textContent = emptyMessage;
        input.classList.add('is-invalid');
        input.setCustomValidity(emptyMessage);
      } else {
        if (feedback) feedback.textContent = "";
        input.classList.remove('is-invalid');
        input.setCustomValidity("");
      }
    } catch (error) {
      console.error("Validation error:", error);
    }
  }

  function shared(e, action, formElement) {
    e.preventDefault();
    const confirm = translations[action];

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

    if (!attribute || !nameAr.trim().length) {
      $(formElement).removeClass('was-validated').addClass('was-validated');
      return;
    }

    ajaxUpload($(formElement), {}, 'uploadWithOutImage', confirm);
  }

  $(document).ready(function () {
    $('#attribute').select2();

    $(document).on('submit', '#addValue', function (e) {
      shared(e, 'add', this);
    });

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