<%- include('../catalogCommerce/crudAssets.ejs') %>
<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>
  function validateInput(input) {
    const i18n = {
      common: {
        emptyField: "<%= i18n.__('common.emptyField') %>",
        minLength: "<%= i18n.__('common.minLength', { minLength: '{{minLength}}' }) %>",
        minNumber: "<%= i18n.__('premiumPackages.minNumberInvalid') %>"
      },
      premiumPackages: {
        priceInvalid: "<%= i18n.__('premiumPackages.priceInvalid') %>"
      }
    };

    const feedbackEl =
      input.nextElementSibling?.classList?.contains('invalid-feedback')
        ? input.nextElementSibling
        : (input.parentElement?.querySelector('.invalid-feedback') || null);

    const setInvalid = (msg) => {
      if (feedbackEl) feedbackEl.textContent = msg;
      input.classList.add('is-invalid');
      input.style.border = '1px solid red';
      input.setCustomValidity(msg || 'Invalid');
    };
    const setValid = () => {
      if (feedbackEl) feedbackEl.textContent = '';
      input.classList.remove('is-invalid');
      input.style.border = '';
      input.setCustomValidity('');
    };

    const trimmed = (input.value ?? '').toString().trim();
    const isPrice = input.id === 'price' || (input.name || '') === 'price';

    if (trimmed === '') {
      if (input.hasAttribute('required') || input.required) {
        return setInvalid(i18n.common.emptyField);
      }
      return setValid();
    }

    if (input.type === 'number') {
      const n = Number(trimmed);
      if (Number.isNaN(n)) {
        return setInvalid(isPrice ? i18n.premiumPackages.priceInvalid : i18n.common.minNumber);
      }
      if (isPrice && n <= 0) {
        return setInvalid(i18n.premiumPackages.priceInvalid);
      }
      if (n < 0) {
        return setInvalid(i18n.common.minNumber);
      }
      return setValid();
    }

    const minLen = 2;
    if (trimmed.length < minLen) {
      return setInvalid(i18n.common.minLength.replace('{{minLength}}', minLen));
    }

    return setValid();
  }

  document.addEventListener('input', (e) => {
    const el = e.target;
    if (el.matches('input, textarea, .form-control, .form-select')) {
      validateInput(el);
    }
  });
  document.addEventListener('change', (e) => {
    const el = e.target;
    if (el.matches('select, .form-select')) {
      validateInput(el);
    }
  });

  $(document).ready(function () {
    $(".select2").select2({ closeOnSelect: true })
      .on('change', function () { validateInput(this); });
  });

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

  function shared(e, action, formElement) {
    e.preventDefault();

    formElement.querySelectorAll('input, textarea, select').forEach(el => validateInput(el));

    if (!formElement.checkValidity()) {
      formElement.reportValidity();
      return;
    }
    if ($(formElement).find('.is-invalid').length > 0) return;

    const confirm = translations[action];
    ajaxUpload($(formElement), {}, "uploadWithOutImage", confirm);
  }

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