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


	function validateInput(input) {

		const i18n = {
			common: {
				emptyField: "<%= i18n.__('common.emptyField') %>",
				minLength: "<%= i18n.__('common.minLength', { minLength: '{{minLength}}' }) %>",
				invalidEmail: "<%= i18n.__('common.emailMustBeValid') %>",
				invalidCountryCode: "<%- i18n.__('countries.invalidCountryCode') %>"
			}
		};


		try {
			const trimmedValue = input.value.trim();
			const minLength = 2;
			const feedback = input.nextElementSibling;

			const messages = {
				empty: i18n.common.emptyField,
				minLength: i18n.common.minLength.replace('{{minLength}}', minLength),
				invalidCountryCode: i18n.common.invalidCountryCode,
				invalidPhone: i18n.common.invalidPhone,
			};

			const emptyMessage = messages.emptyField;
			const minLengthMessage = messages.minLength.replace('{{minLength}}', minLength);
			const invalidEmailMessage = messages.invalidEmail;
			let errorMessage = "";


			if (input.name === 'code' && !validateCode(trimmedValue)) {

				errorMessage = messages.invalidCountryCode
				feedback.textContent = errorMessage;
				input.classList.add('is-invalid');
				input.style.border = '1px solid red';
				input.setCustomValidity(errorMessage);

			} 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 isValidEmail(value) {
			const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
			return emailPattern.test(value);
		}

		function validateCode(value) {
			const codePattern = /^\+\d{1,4}$/;
			return codePattern.test(value)
		}
	}



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

		const confirm = translations[action];

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

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

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

		const iso = String($('input[name="iso"]').val());
	
		
		if (
			!countryAr.trim().length ||
			!countryEn.trim().length ||
			!code.trim().length ||
			!iso.trim().length
		) {
			$(formElement).removeClass('was-validated');
		} else {
			$(formElement).addClass('was-validated');
		}

		const objData = new FormData(formElement);

		let isValidImage = action !== 'add';

		const file = $("#image")[0]?.files[0];
		isValidImage = file ? /(jpg|jpeg|png)$/.test(file.type) : true;


		if (
			countryAr.trim().length &&
			countryEn.trim().length &&
			code.trim().length &&
			iso.trim().length && isValidImage
		) {
			ajaxUpload($(formElement), objData, 'uploadWithImage', confirm);
		}
	}

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

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