<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>

  $(document).ready(function () {
    $('.select2').select2({
      closeOnSelect: true
    });
  });


  function validateInput(input) {
    const i18n = {
      common: {
        emptyField: "<%= i18n.__('common.emptyField') %>",
        minLength: "<%= i18n.__('common.minLength', { minLength: '{{minLength}}' }) %>",
        invalidEmail: "<%= i18n.__('common.emailMustBeValid') %>",
        invalidPassword: "<%= i18n.__('common.passwordTooShort') %>",
        phoneRequired: "<%= i18n.__('common.{{field}}Required',{field:i18n.__('common.phone')}) %>",
        emailRequired: "<%= i18n.__('common.{{field}}Required',{field:i18n.__('common.email')}) %>",
        nameRequired: "<%= i18n.__('common.{{field}}Required',{field:i18n.__('common.name')}) %>",
        invalidPhone: "<%= i18n.__('common.phoneNoLess') %>",
        passwordRequired: "<%= i18n.__('common.passwordRequired') %>",
        invalidStartPhone: "<%= i18n.__('common.invalidStartPhone') %>",
        invalidName: "<%= i18n.__('auth.fullNameInvalid') %>",
        invalidPlateNumber: "<%= i18n.__('cars.plateNumberInvalid') %>",
        nameWordLengthAtLeastTwoWords: "<%= i18n.__('auth.nameWordLengthAtLeastTwoWords') %>",
        nameTooShort: "<%= i18n.__('auth.nameTooShort') %>",
        nameCannotContainNumbers: "<%= i18n.__('common.nameCannotContainNumbers') %>",
        usernameMinLength: "<%= i18n.__('auth.usernameMinLength') %>",
        usernameInvalidChars: "<%= i18n.__('auth.usernameInvalidChars') %>",
        usernameEdgePunct: "<%= i18n.__('auth.usernameEdgePunct') %>",
        usernameRepeatedPunct: "<%= i18n.__('auth.usernameRepeatedPunct') %>",
        passwordInvalid: "<%= i18n.__('auth.passwordInvalid') %>",
        usernameReserved: "<%= i18n.__('auth.usernameReserved') %>",
      }
    };

    const USERNAME_ALLOWED_RE = /^[A-Za-z0-9._-]+$/;
    const EDGE_PUNCT_RE = /^[._-]|[._-]$/;
    const REPEATED_PUNCT_RE = /[._-]{2,}/;

    try {
      const trimmedValue = input.value.trim();
      const minLength = input.type === "password" ? 6 : 2;

      const formGroup = input.closest('.form-group') || input.parentElement;
      const feedback =
        (formGroup && formGroup.querySelector('.invalid-feedback')) ||
        input.nextElementSibling;

      const fieldMessages = {
        phone: i18n.common.phoneRequired,
        name: i18n.common.nameRequired,
        nameWordLengthAtLeastTwoWords: i18n.common.nameWordLengthAtLeastTwoWords,
        nameTooShort: i18n.common.nameTooShort,
        nameCannotContainNumbers: i18n.common.nameCannotContainNumbers,
        usernameMinLength: i18n.common.usernameMinLength,
        usernameInvalidChars: i18n.common.usernameInvalidChars,
        usernameEdgePunct: i18n.common.usernameEdgePunct,
        usernameRepeatedPunct: i18n.common.usernameRepeatedPunct,
        passwordInvalid: i18n.common.passwordInvalid,
        usernameMinLength: i18n.common.usernameMinLength,
        usernameReserved: i18n.common.usernameReserved,
      };

      const messages = {
        empty: (!input.hasAttribute('data-edit') && fieldMessages[input.name])
          ? fieldMessages[input.name]
          : (!input.hasAttribute('data-edit') ? i18n.common.emptyField : ''),
        minLength: i18n.common.minLength.replace('{{minLength}}', minLength),
        invalidPhone: i18n.common.invalidPhone,
        invalidName: i18n.common.invalidName,
        invalidPlateNumber: i18n.common.invalidPlateNumber,
        invalidEmail: i18n.common.invalidEmail,
        usernameMinLength: i18n.common.usernameMinLength,
        usernameInvalidChars: i18n.common.usernameInvalidChars,
        usernameEdgePunct: i18n.common.usernameEdgePunct,
        usernameRepeatedPunct: i18n.common.usernameRepeatedPunct,
        passwordInvalid: i18n.common.passwordInvalid,
        usernameMinLength: i18n.common.usernameMinLength,
        usernameReserved: i18n.common.usernameReserved,
      };

      const RESERVED_USERNAMES = [
        "admin", "root", "support", "system", "owner", "superuser", "moderator", "help", "contact", "about", "api",
        "مشرف", "ادمن", "مشرفة", "مدير", "نظام", "دعم", "مساعدة", "تواصل", "عن", "واجهة", "api"
      ];

      let errorMessage = "";

      if (!trimmedValue) {
        errorMessage = messages.empty;
      }
      else if (input.name === 'username') {
        const raw = trimmedValue;
        const v = raw.toLowerCase();

        const ALLOWED = /^[a-z0-9._-]+$/;
        const EDGE = /^[._-]|[._-]$/;
        const REPEAT = /[._-]{2,}/;

        if (v.length < 3) {
          errorMessage = messages.usernameMinLength;
        } else if (!ALLOWED.test(v)) {
          errorMessage = messages.usernameInvalidChars;
        } else if (EDGE.test(v)) {
          errorMessage = messages.usernameEdgePunct;
        } else if (REPEAT.test(v)) {
          errorMessage = messages.usernameRepeatedPunct;
        } else if (RESERVED_USERNAMES.includes(v) || RESERVED_USERNAMES.includes(raw)) {
          errorMessage = messages.usernameReserved;
        } else {
          input.value = v;
        }
      }

      else if (input.name === 'password') {
        const v = input.value || '';
        const passRe = /^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)(?=.*[^A-Za-z0-9]).{8,}$/;
        if (!passRe.test(v)) errorMessage = messages.passwordInvalid;
      }
      else if (input.name === 'email' && !/^\S+@\S+\.\S+$/.test(trimmedValue)) {
        errorMessage = messages.invalidEmail;
      }

      else if (input.name === 'phone') {
        const phoneError = validatePhone(trimmedValue);
        if (phoneError) errorMessage = phoneError;
      }
      else if (trimmedValue.length < minLength && !['username', 'email', 'password'].includes(input.name)) {
        errorMessage = messages.minLength;
      }

      updateInputState(input, feedback, errorMessage, formGroup); // ← مرّر formGroup
    } catch (error) {
      console.error("Validation error:", error);
    }

    function isValidPlateNumber(value) {
      return /^([0-9\u0660-\u0669]{4})[|]([\u0600-\u06FF\u0750-\u077FA-Za-z]{3})$/.test(value);
    }

    function isValidPhone(value) {
      return /^(05|01)\d{8}$/.test(value);
    }

    function validatePhone(value) {
      // if (!/^(05|01)/.test(value)) {
      //   return i18n.common.invalidStartPhone;
      // }
      if (!/^\d{9}$/.test(value)) {
        return i18n.common.invalidPhone;
      }
      return "";
    }

    function updateInputState(input, feedback, errorMessage, formGroup) {
      input.setCustomValidity(errorMessage || '');

      const isInvalid = !!errorMessage;

      if (feedback) {
        feedback.textContent = errorMessage || '';
      }

      input.classList.toggle('is-invalid', isInvalid);
      input.classList.toggle('is-valid', !isInvalid);

      if (formGroup) {
        formGroup.classList.toggle('has-error', isInvalid);
      }

      if (window.jQuery && $(input).hasClass('select2')) {
        const $container = $(input).next('.select2');
        $container.toggleClass('is-invalid', isInvalid);
      }

      if (isInvalid) {
        input.style.border = '1px solid red';
      } else {
        input.style.border = '';
      }
    }
  }




  $(document).ready(function () {
    $(document).on('submit', '#createClient', function (e) {
      e.preventDefault();
      // search btn
      let confirm = "<%=i18n.__('common.add')%>"
      let objData = new FormData(this);

      ajaxUpload($(this), {}, "uploadWithOutImage", confirm);


    });

    $(document).on('submit', '#editClient', function (e) {
      e.preventDefault();

      // search btn
      $("#overlay").fadeIn(300);
      let confirm = "<%=i18n.__('common.edit')%>"
      var objData = new FormData(this);

      ajaxUpload($(this), objData, "uploadWithImage", confirm);


    });
  })

</script>