window.addEventListener("message", function(event) {
   if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormReady') {
    
    // Abbruch, falls im Editor
    //if (window.hsInEditor) {
    //  return;
    // }

    /* TELEFON VALIDIERUNG*/

	var phoneField = document.querySelector('.hs-input[name="phone"]');
	var error_rollup = document.querySelector('.hs_error_rollup');
  	var error_html = '<ul class="no-list hs-error-msgs inputs-list" role="alert"><li><label class="hs-error-msg hs-main-font-element">MESSAGE</label></li></ul>';
	var error_rollup_html = '<div class="hs_error_rollup"><ul class="no-list hs-error-msgs inputs-list" style="display: block;"><li><label class="hs-main-font-element">Bitte füllen Sie alle Pflichtfelder korrekt aus.</label></li></ul></div>';
    
    phoneField.addEventListener('blur', function() {
        var phoneNumber = phoneField.value;
        var phoneNumberWithoutSpaces = phoneNumber.replace(/\s+/g, '');
        var phoneNumberRegex = /^(00|\+49|0)[1-9][0-9\s]{2,14}$/;
        var errorMsg = phoneField.parentNode.querySelector('.hs-error-msgs');

        // If the field is empty, skip the validation and remove error messages
        if (!phoneNumber) {
            if (errorMsg) errorMsg.innerHTML = "";
            phoneField.classList.remove('invalid', 'error');
            return; // Exit the function early
        }

        if (!phoneNumberRegex.test(phoneNumber) || phoneNumberWithoutSpaces.length > 15) {
            // Create error message element if it doesn't already exist
            if (!errorMsg) {
                errorMsg = document.createElement('div');
                errorMsg.className = 'hs-error-msgs inputs-list';
                phoneField.parentNode.appendChild(errorMsg);
            }
            
            errorMsg.innerHTML = '<label class="hs-error-msg hs-main-font-element">Bitte geben Sie eine gültige Telefonnummer inklusive Vorwahl ein. Akzeptierte Formate: 0049123456789, +49123456789 oder 0123456789.</label>';
            phoneField.classList.add('invalid', 'error'); // Add class to show red border
        } else {
            if (errorMsg) errorMsg.innerHTML = "";  // Clear error message if it exists
            phoneField.classList.remove('invalid', 'error'); // Remove class to remove red border
        }
    });
	
	// Prevent form submit if there are still errors
	let submit_button = document.querySelector(".hs-submit [type='submit']");
	submit_button.addEventListener("click", function(event) {
		phoneField.blur(); // make sure that outdated error messages are gone
		if (phoneField.classList.contains("invalid")) {
            event.preventDefault();
			if (!error_rollup) {
				error_rollup = document.createElement('div');
				error_rollup.className = "hs_error_rollup";
				error_rollup.innerHTML = error_rollup_html;
				submit_button.before(error_rollup);
			}
		}
	});

	/* WERBECODE HANDLING */

	let werbecode = document.querySelector('.hs-input[name="aktuellsterwerbecode"]');
	let werbecode_phone = document.querySelector('.hs-input[name="aktuellsterwerbecode_telefon_temp"]');
	let telField = document.querySelector('.hs-input[type="tel"]');

	if (werbecode !== null && werbecode_phone !== null && telField !== null) {
      werbecode_value = werbecode.value;
      werbecode_phone_value = werbecode_phone.value;
		telField.onchange = function() {
		   console.log("Telefonnummer geaendert");
		}
		telField.onblur = function() {
		   if (telField.value.length != 0 && !(telField.classList.contains('invalid'))) {
			 werbecode.value = werbecode_phone_value;
		   	 console.log("Gueltige Telefonnummer eingegeben");
		   } else {
	  		 werbecode.value = werbecode_value;
		   }
		}
	}

   }
 }); //addEventListener