jQuery( document ).ready( function() {

	jQuery( '#elex_vendor_settings_state' ).select2( {
		placeholder: 'Search State',
		minimumInputLength: 2,
	} );

	// Function to load states based on the selected country
	function loadStates( countryCode ) {
		var stateSelect = jQuery( '#elex_vendor_settings_state' );

		// Clear the current options
		stateSelect.empty();

		// Load new options based on the selected country
		jQuery.ajax( {
			url: elexMvStoreProfileParams.ajax_url,
			type: 'post',
			data: {
				action: 'elex_mv_load_states',
				country: countryCode,
				nonce: elexMvStoreProfileParams.load_states_nonce,
			},
			success: function( result ) {
				if ( result.data ) {
					stateSelect.parent().show();
					stateSelect.next( '.select2-container' ).show();
					stateSelect.append( result.data );
					stateSelect.trigger( 'change' );
					jQuery( '#elex_vendor_settings_state' ).val( elexMvStoreProfileParams.selected_state ).trigger( 'change' );
				} else {
					stateSelect.parent().hide();
					stateSelect.next( '.select2-container' ).hide();
				}
			},
		} );
	}

	// Event listener to load states when the country changes
	jQuery( '#elex_vendor_settings_country' ).on( 'change', function() {
		var countryCode = jQuery( this ).val();
		loadStates( countryCode );
	} );

	// Load states on page load (if a country is already selected)
	var countryCode = jQuery( '#elex_vendor_settings_country' ).val();
	if ( countryCode ) {
		loadStates( countryCode );
	}

	var input_phone_number = window.intlTelInput( document.querySelector( '#elex-vendor-settings-number' ), {
		autoPlaceholder: 'polite',
	} );
	input_phone_number.setCountry( elexMvStoreProfileParams.country_iso );

	jQuery( '#elex-vendor-settings-dial_code' ).val( input_phone_number.getSelectedCountryData().dialCode );
	jQuery( '#elex-vendor-settings-country_iso' ).val( input_phone_number.getSelectedCountryData().iso2 );

	document.querySelector( '#elex-vendor-settings-number' ).addEventListener( 'countrychange', function() {
		jQuery( '#elex-vendor-settings-dial_code' ).val( input_phone_number.getSelectedCountryData().dialCode );
		jQuery( '#elex-vendor-settings-country_iso' ).val( input_phone_number.getSelectedCountryData().iso2 );
	} );

	jQuery( '.elex-multi-vendor-for-woocommerce-vendor-setting-edit-filetag-btn' ).click( function( e ) {
		e.preventDefault();
		jQuery( '#elex-multi-vendor-for-woocommerce-vendor-setting-filetag' ).trigger( 'click' );
	} );

	jQuery( '#elex-multi-vendor-for-woocommerce-vendor-setting-filetag' ).on( 'change', function() {
		if ( this.files.length ) {
			const reader = new FileReader();
			reader.onload = function( e ) {
				elexImageVendorUpload.setAttribute( 'src', e.target.result );
			};
			reader.readAsDataURL( this.files[0] );
		}
		jQuery( '#elex_mv_vendor_edit_deleted_image' ).val( '' );
	} );

	jQuery( '.elex-multi-vendor-for-woocommerce-vendor-setting-filetag-delete-btn' ).click( function( e ) {
		e.preventDefault();
		elexImageVendorUpload.setAttribute( 'src', elex_mv_coupon_ajaxurl_object.plugin_path + 'assets/images/default-store-icon.svg' );
		jQuery( '#elex-multi-vendor-for-woocommerce-vendor-setting-filetag' ).val( '' );
		jQuery( '#elex_mv_vendor_edit_deleted_image' ).val( 'true' );
	} );

	jQuery( '.vendor-setting-save-changes' ).click( function() {
		var link = elex_mv_admin_ajaxurl_object.ajax_url;
		link += '?action=elex_mv_vendor_settings_details';
		var formData = new FormData( document.getElementById( 'vendor-settings-details-form' ) );
		jQuery.ajax( {
			url: link,
			type: 'POST',
			data: formData,
			enctype: 'multipart/form-data',
			processData: false,
			contentType: false,
			dataType: 'json',
			success: function( result ) {
				if ( result.success && result.success !== false ) {
					var saved = document.getElementById( 'vendor_setting_saved_success_toast' );
					jQuery( '#vendor_setting_saved_success_toast #toast_message_mv' ).html( 'Changes Saved Successfully' );
					jQuery( saved ).find( '.elex-toast-icon-success' ).removeClass( 'd-none' );
					jQuery( saved ).find( '.elex-toast-icon-error' ).addClass( 'd-none' );
					var toast = new bootstrap.Toast( saved );
					toast.show();
					setTimeout( function() {
						window.location.reload();
					}, 1000 );
				} else {
					var saved = document.getElementById( 'vendor_setting_saved_success_toast' );
					var errorMsg = window.elexMvFormatResponseError( result );
					jQuery( '#vendor_setting_saved_success_toast #toast_message_mv' ).html( errorMsg );
					jQuery( saved ).find( '.elex-toast-icon-success' ).addClass( 'd-none' );
					jQuery( saved ).find( '.elex-toast-icon-error' ).removeClass( 'd-none' );
					var toast = new bootstrap.Toast( saved );
					toast.show();
				}
			},
			error: function( xhr ) {
				var saved = document.getElementById( 'vendor_setting_saved_success_toast' );
				var errorMsg = window.elexMvFormatResponseError( xhr );
				jQuery( '#vendor_setting_saved_success_toast #toast_message_mv' ).html( errorMsg );
				jQuery( saved ).find( '.elex-toast-icon-success' ).addClass( 'd-none' );
				jQuery( saved ).find( '.elex-toast-icon-error' ).removeClass( 'd-none' );
				var toast = new bootstrap.Toast( saved );
				toast.show();
			}
		} );
	} );

} );

validation_for_forms_func( '#elex_vendor_settings_name', /^([ \u00c0-\u01ffa-zA-Z0-9'\-])+$/, '#elex_vendor_settings_name_error', 'Enter valid Name ' );
// validation_for_forms_func('#elex_vendor_settings_address', /[A-Za-z0-9'\.\-\s\,]/, '#elex_vendor_settings_address_error', 'Enter proper address')
validation_for_forms_func( '#elex_vendor_settings_city', /^([ \u00c0-\u01ffa-zA-Z'\-])+$/, '#elex_vendor_settings_city_error', 'Enter valid city' );
validation_for_forms_func( '#elex_vendor_settings_zipcode', /(^[a-z0-9][a-z0-9\- ]){0,10}[a-z0-9]$/, '#elex_vendor_settings_zipcode_error', 'Enter valid postal num in integers' );
validation_for_forms_func( '#elex_vendor_settings_state', /^([ \u00c0-\u01ffa-zA-Z'\-])+$/, '#elex_vendor_settings_state_error', 'Enter valid state in alphabets' );
validation_for_forms_func( '#elex_vendor_settings_country', /^([ \u00c0-\u01ffa-zA-Z'\-])+$/, '#eelex_vendor_settings_country_error', 'Enter valid country' );
validation_for_forms_func( '#elex_vendor_settings_email', /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/, '#elex_vendor_settings_email_error', 'Enter valid email address' );
validation_for_forms_func( '#elex-vendor-settings-number', /^[0-9]*$/, '#elex-vendor-settings-number_error', 'Enter valid number' );

function validation_for_forms_func( id_for_input_element, regex_for_string, id_for_error_element, error_string ) {
	jQuery( id_for_input_element ).keyup( function() {
		const regex = regex_for_string;
		jQuery( id_for_input_element ).next( '.text-danger' ).remove();
		if ( ! regex.test( this.value ) ) {
			jQuery( id_for_input_element ).after( '<div class="text-danger" id="' + id_for_input_element + '_error" >' + error_string + '</div>' );
		} else {
			jQuery( id_for_input_element ).next( '.text-danger' ).remove();
		}
	} );
}
