<div class="container">
   <div class="quiz">
        <!-- Форма, которая содержит весь квиз -->
        <form action="#!" class="quiz__form" id="kviz-form">
          <!-- Поля для каждого шага квиза -->
		  #LIST_STEP_FORM#
          <textarea class="main-message" name="main_message" value=""></textarea>
        </form>
       <div class="data-email-from not-used-now-10-09-2025"
            data-dataemailfrom="-DATA_EMAIL_FROM-"
            data-useremailkeyfield="#USER_EMAIL_KEY_FIELD#"
       ></div>
  </div>
</div>
<script>
//Здесь нужны как минимум 2 функции
//1-функции преключения между шагами формы
//2-функция сборка итоговых данных и отправка на сервер
// Валидаци,украшательства и проверка на правильность ответов, если это вопросы к экзамену - по желанию
var globalPrevEvent = 0;
function  addFile(eto){
	var stop = 0;
	for (var sg of document.querySelectorAll('.wrap-one-file')) {
		if(stop === 0){
			if(sg.classList.contains("hidden-file")){
				sg.classList.remove('hidden-file');
				stop = 1;
			}
		}
	}
	return true;
}
function dellFile(eto, numberFile, index){
	document.querySelector("input#file_" + index + "_file_" + numberFile).value = "";
	if(numberFile == 1){
	}else{
		document.querySelector(".wrap-one-file-" + numberFile).classList.add('hidden-file');
	}
	return true;
}
function nextStep(eto, toNumber, fromNumber, currentIndex){
	var rezOut = getAllFilledInput();
	if(globalPrevEvent === 1){
		globalPrevEvent = 0;
		return true;
	}
	if(toNumber > 0){
		document.querySelector('.dop-index-cls-' + currentIndex).classList.add('hidden-step');
		document.querySelector('.dop-index-cls-' + toNumber).classList.remove('hidden-step');
		setTimeout(function () {
			document.querySelector('.dop-index-cls-' + currentIndex).classList.add('hidden-step2');
			document.querySelector('.dop-index-cls-' + toNumber).classList.remove('hidden-step2');
		}, 300);
	}
	return true;
}

function prevStep(eto, toNumber, fromNumber, currentIndex){
	if(fromNumber > 0){
		document.querySelector('.dop-index-cls-' + currentIndex).classList.add('hidden-step');
		document.querySelector('.dop-index-cls-' + fromNumber).classList.remove('hidden-step');
		//Сбрасываю все поля на текущей форме
		globalPrevEvent = 1;
		for (var sg of document.querySelectorAll('.dop-index-cls-' + currentIndex)) {
			globalPrevEvent = 1;
			var attribute = sg.getAttribute("type");
			if(attribute == 'checkbox'){
				if(sg.checked === true){
					sg.checked = false;
				}
			}
			if(attribute == 'text'){
				sg.value = "";
				var attributeValText = sg.getAttribute("value");
				attributeValText = "";
			}
			if(attribute == 'file'){
				sg.value = "";
			}
		}
		
		
		setTimeout(function () {
			document.querySelector('.dop-index-cls-' + currentIndex).classList.add('hidden-step2');
			document.querySelector('.dop-index-cls-' + fromNumber).classList.remove('hidden-step2');
		}, 300);
	}else{
		globalPrevEvent = 0;
		alert("Ошибка возврата. Извините.");
	}
	globalPrevEvent = 0;
	return true;
}
function validateFile(eto, number){
	var totalSize = 0;
	//Ограничение на допустимые форматы. Пока не задействовано?
	var filesValidType = [
	'image/png',
	'application/x-zip-compressed',
	'text/plain',
	'image/jpeg',
	'application/pdf',
	'application/msword',
	'index.html',
	'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
	];
	var maxFileSize = 10000000;
	//var maxFileSize = 100000;
	var dellNextValue = 0;
	if(typeof eto.files[0] != 'undefined' && eto.files[0] != null){
		for (var sg of document.querySelectorAll('.dop-index-cls-' + number + " .cls-file")) {
			var attribute = sg.getAttribute("type");
			if(attribute == 'file'){
				if(typeof sg.files[0] != 'undefined' && sg.files[0] != null){
					totalSize = totalSize + sg.files[0].size;
				}
				if(totalSize>maxFileSize){
					dellNextValue = 1;
					sg.value = "";
				}
			}
		}
	}
	if(dellNextValue === 1){
		alert("Слишком большой размер файлов (" + ( Math.round(totalSize/1000000) ) + " Mбайт). Более " + ( Math.round(maxFileSize/1000000) ) + " Mбайт");
	}
	return true;
}
function getAllFilledInput(){
	var fileldRezult = document.querySelector('#kviz-form .quiz-wrap-fill-rezult-form-by-text');
	if(typeof fileldRezult !== 'undefined' && fileldRezult !== null){//Есть куда вставить результаты
		var myInputElement = document.querySelectorAll('#kviz-form input');
		var izChange=0;
		var textOut = "";
		var questionOld = 0;
		var questionNew = 0;
		var isExistField = 0;
		for(izChange=0;izChange<myInputElement.length;izChange++){
			if(myInputElement[izChange].type == 'hidden'){
				continue;
			}
			var indexBlock = myInputElement[izChange].dataset.indexblock;
			questionNew = parseInt(indexBlock);
			var nameQuestion = "Шаг № " + indexBlock + " " + document.getElementById('question-text-' + indexBlock).textContent + "<br />";
			if(questionOld == questionNew){
				nameQuestion = "";
			}else{
				
				if(parseInt(indexBlock)>1 && isExistField === 1){
					textOut = textOut + "<br />----------------------<br />";
				}
				isExistField = 0;
			}
			if(myInputElement[izChange].type == 'radio'){
				if(myInputElement[izChange].checked == true){
					if(textOut.length === 0){
						textOut = nameQuestion + myInputElement[izChange].value;
					}else{
						textOut = textOut + "<br /><br />" + nameQuestion + myInputElement[izChange].value;
					}
					isExistField = 1;
				}
			}
			if(myInputElement[izChange].type == 'text'){
				var inputTitle = myInputElement[izChange].dataset.labelinput;
				if(typeof inputTitle == 'undefined' || inputTitle == null){
					inputTitle = "";
				}else{
					if(inputTitle.length>0){
						inputTitle = myInputElement[izChange].dataset.labelinput + ": " ;
					}else{
						inputTitle = "";
					}
				}
				if(typeof myInputElement[izChange].value !== 'undefined' && myInputElement[izChange].value !== null){
					if(myInputElement[izChange].value.length>0){
						if(textOut.length === 0){
							textOut = nameQuestion  + inputTitle + myInputElement[izChange].value;
						}else{
							textOut = textOut + "<br /><br />" + nameQuestion + inputTitle + myInputElement[izChange].value;
						}
						isExistField = 1;
					}
					
				}
			}
			if(myInputElement[izChange].type == 'file'){
				if(typeof myInputElement[izChange].value !== 'undefined' && myInputElement[izChange].value !== null){
					if(myInputElement[izChange].value.length>0){
						var fileName = myInputElement[izChange].files[0].name;
						if(textOut.length === 0){
							textOut = nameQuestion +  fileName;
						}else{
							textOut = textOut + "<br /><br />" + nameQuestion + fileName;
						}
						isExistField = 1;
					}
					
				}
			}
			
			questionOld = questionNew;
		}
		fileldRezult.innerHTML = textOut;
	}
	
	return true;
}

function getAllDataForm(){
	const myForm = document.getElementById('kviz-form');
	const formData = new FormData(myForm);
    var fromEmail = document.querySelector('.data-email-from');
    if(typeof fromEmail != 'undefined' && fromEmail != null) {
         var fromEmailText = fromEmail.dataset.dataemailfrom;
    }else{
		var fromEmailText = "";
	}
    formData.append('fromEmail', fromEmailText);
	return formData;
}

function sendKviz(eto, toNumber, fromNumber, currentIndex){
	if(toNumber > 0){
		
		var rezOut = getAllFilledInput();
		
		formData = getAllDataForm();
		// Отправляем данные на сервер
		fetch(
			'/baform/showrezulthtml/send_kviz.php', {
			method: 'POST',
			body: formData,
		})
		.then((response) => {
		  // Обрабатываем ответ от сервера
		  //console.log(response);
		  document.querySelector('.dop-index-cls-' + currentIndex).classList.add('hidden-step');
		  document.querySelector('.dop-index-cls-' + toNumber).classList.remove('hidden-step');
		  setTimeout(function () {
			document.querySelector('.dop-index-cls-' + currentIndex).classList.add('hidden-step2');
			document.querySelector('.dop-index-cls-' + toNumber).classList.remove('hidden-step2');
		  }, 300);
		})
		.catch((error) => {
		  // Обрабатываем ошибку
		  console.error(error);
		});
	}
	return true;
}
/* Маска телефона */
//window.addEventListener("DOMContentLoaded", function () {
    [].forEach.call(document.querySelectorAll(".isphone"), function (input) {
        var keyCode;
        function mask(event) {
            event.keyCode && (keyCode = event.keyCode);
            var pos = this.selectionStart;
            if (pos < 3) event.preventDefault();
            var matrix = "+7 (___)-___-__-__",
                i = 0,
                def = matrix.replace(/\D/g, ""),
                val = this.value.replace(/\D/g, ""),
                new_value = matrix.replace(/[_\d]/g, function (a) {
                    return i < val.length ? val.charAt(i++) || def.charAt(i) : a;
                });
            i = new_value.indexOf("_");
            if (i != -1) {
                i < 5 && (i = 3);
                new_value = new_value.slice(0, i);
            }
            var reg = matrix
                .substr(0, this.value.length)
                .replace(/_+/g, function (a) {
                    return "\\d{1," + a.length + "}";
                })
                .replace(/[+()]/g, "\\$&");
            reg = new RegExp("^" + reg + "$");
            if (!reg.test(this.value) || this.value.length < 5 || (keyCode > 47 && keyCode < 58)) this.value = new_value;
            if (event.type == "blur" && this.value.length < 5) this.value = "";
        }
        input.addEventListener("input", mask, false);
        input.addEventListener("focus", mask, false);
        input.addEventListener("blur", mask, false);
        input.addEventListener("keydown", mask, false);
    });
//});
//Маска для емаил
var EMAIL_REGEXP = /^(([^<>()[\].,;:\s@"]+(\.[^<>()[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\].,;:\s@"]{2,})$/iu;
var inputKvizEml = document.querySelectorAll('.quiz__form .isemail');
function onInput(event) {
   if (isEmailValid(event.target.value)) {
       event.target.style.borderColor = 'green';
       event.target.style.backgroundColor = '#f5fff0';

   } else {
       event.target.style.borderColor = 'red';
       event.target.style.backgroundColor = "#fff0f0";
   }
}
if(inputKvizEml.length>0) {
	for(var isE=0;isE<inputKvizEml.length;isE++){
		inputKvizEml[isE].addEventListener('input', onInput);
	}
}
function isEmailValid(value) {
    return EMAIL_REGEXP.test(value);
}
</script>