/*переменные*/

var formid = (typeof x === 'formid') ? 1 : formid + 1;
formid = ""; //test

if (typeof(formTitle) == 'undefined') {formTitle = 'Форма обратной связи';}

if (typeof(FormFieldName) == 'undefined') {FormFieldName = 'Имя';}
if (typeof(FormFieldPhone) == 'undefined') {FormFieldPhone = 'Телефон';}
if (typeof(FormFieldEmail) == 'undefined') {FormFieldEmail = 'Email';}
if (typeof(FormFieldComment) == 'undefined') {FormFieldPhoneNumber = '+12';}
if (typeof(FormFieldComment) == 'undefined') {FormFieldComment = 'Комментарий';}


if (typeof(FormButtonText) == 'undefined' ) {FormButtonText = 'Отправить';} 
if (typeof(FormInputText) == 'undefined') {FormInputText = '';}

if (typeof(FormColor1) == 'undefined' ) {FormColor1 = 'lightgray';} 
if (typeof(FormColor2) == 'undefined') {FormColor2 = 'white';}
if (typeof(FormColor3) == 'undefined' ) {FormColor3 = 'gray';} 
if (typeof(FormColor4) == 'undefined') {FormColor4 = 'black';}

if (typeof(FormResponceOk) == 'undefined') {FormResponceOk = 'Спасибо!';}
if (typeof(FormResponceError) == 'undefined') {FormResponceError = 'Ошибка: ';}

var blockName = 'formContainer' + formid;
var formName  = 'formNameOrder' + formid;
/**/

document.write(`<style>
			.wrap {max-width: 480px; margin: 0 auto;}
			.wrap-item {padding: 4px 0; display: -webkit-box; display: -ms-flexbox; display: flex;-ms-flex-flow: row wrap; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-flow: row wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;}
			.wrap-item label {margin-right: 10px; padding: 4px 0; width: 200px; -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto;}
			.wrap-input {width: 270px; -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto;}
			.wrap-input input, .wrap-input textarea {box-sizing: border-box; width: 100%; border: 1px solid #d3d3d3; padding: 8px 16px;}
			.wrap-input input[type='submit'] {width: auto;}
		</style>
		`)

document.write('<div id="' + blockName + '" class="wrap"></div>');

title = document.createElement('span');
title.setAttribute('id', 'titleForm'+formid);
title.setAttribute('style', 'max-width:100%;display:inline-block;');
document.getElementById(blockName).appendChild(title);
document.getElementById('titleForm' + formid).innerHTML = formTitle;
/*создаем форму*/
formCreate();
/*создаем таблицу*/
tableCreate();
/*вносим туда поля*/
insertFormFields();
/*подписи полей*/

insertLabel(document.getElementById('td-left0' + formid), FormFieldName);
insertLabel(document.getElementById('td-left1' + formid), FormFieldPhone);
insertLabel(document.getElementById('td-left2' + formid), FormFieldEmail);
insertLabel(document.getElementById('td-left3' + formid), FormFieldComment);

function tableCreate() {
	var form = document.getElementById(formName);
	var tbl = document.createElement('table');
	tbl.setAttribute('style', 'width:100%;display:inline-block;');
	
	var tbdy = document.createElement('tbody');
	for (var i = 0; i < 6; i++) {
		var tr = document.createElement('tr');
		if(i%2 == 0)
		{
			tr.style.background = FormColor1;
		}else{
			tr.style.background = FormColor2;
		}
		var td = document.createElement('td');
		td.setAttribute('id', 'td-left' + i);
		td.setAttribute('style', 'width:200px;padding:4px;');
		tr.appendChild(td);

		var td = document.createElement('td');
		td.setAttribute('id', 'td-right' + i);
		td.setAttribute('style', 'width:300px;padding:4px;');
		
		tr.appendChild(td);
		tbdy.appendChild(tr);
	}
	tbl.appendChild(tbdy);
	form.appendChild(tbl)
}

function formCreate() {
	var f = document.createElement("form");
	f.setAttribute('method', "post");
	f.setAttribute('action', "javascript:0");
	f.setAttribute('id', formName);
	document.getElementById(blockName).appendChild(f);
}

function insertFormFields() {
	insertName(document.getElementById('td-right0'));
	insertTel(document.getElementById('td-right1'));
	insertEmail(document.getElementById('td-right2'));
	insertComment(document.getElementById('td-right3'));
	insertSubmit(document.getElementById('td-right4'));
	insertHidden(document.getElementById(formName), 'hashval', 'ICBGCJAMBEMCJC');
	insertHidden(document.getElementById(formName), 'secret2', 'secretValue2');
}

function insertName(td) {
	field = document.createElement('INPUT')
	field.setAttribute('type', 'text');
	field.setAttribute('id', 'formName');
	field.setAttribute('name', 'name');
	field.setAttribute('minlength', '2');
	field.setAttribute('maxlength', '30');
	field.required = true;
	field.style = "width:100%;border: 1px solid black;"; 
	td.appendChild(field);
}

function insertTel(td) {
	field = document.createElement('INPUT')
	field.setAttribute('type', 'tel');
	field.setAttribute('id', 'formTel');
	field.setAttribute('name', 'tel');
	field.setAttribute('value', '+12');
	field.pattern = "^\\+\[0123456789\\s\\-]{11,20}$";
	field.setAttribute('maxlength', '20');
	field.setAttribute('minlength', '12');
	field.required = true;
	field.style = "width:100%;border: 1px solid black;"; 
	td.appendChild(field);
}

function insertEmail(td) {
	field = document.createElement('INPUT')
	field.setAttribute('type', 'email');
	field.setAttribute('id', 'formEmail');
	field.setAttribute('name', 'email');
	field.setAttribute('minlength', '7');
	field.setAttribute('maxlength', '40');
	// field.required = true;
	field.style = "width:100%;border: 1px solid black;"; 
	td.appendChild(field);
}

function insertComment(td) {
	field = document.createElement('TEXTAREA')
	field.setAttribute('id', 'formComment');
	field.setAttribute('name', 'comment');
	field.setAttribute('maxlength', '4000');
	field.style = "width:100%;border: 1px solid black;"; 
	field.value = FormInputText;

	td.appendChild(field);
}

function insertSubmit(td) {
	field = document.createElement('INPUT')
	field.setAttribute('type', 'submit');
	field.setAttribute('id', 'sendform');
//	field.setAttribute('onclick', 'setTimeout(() => {this.setAttribute("disabled","");}, 500);');	
	field.value = FormButtonText;
	td.appendChild(field);
}

function insertHidden(form, name, value) {
	field = document.createElement('INPUT')
	field.setAttribute('type', 'hidden');
	field.setAttribute('id', 'form' + name);
	field.setAttribute('name', name);
	field.value = value;
	form.appendChild(field);
}

function insertLabel(el, labelContent) {
	label = document.createElement("LABEL");
	label.innerHTML = labelContent;
	el.appendChild(label);
}



const tx = document.getElementsByTagName("textarea");
for (let i = 0; i < tx.length; i++) {
  tx[i].setAttribute("style", "height:" + (tx[i].scrollHeight) + "px;overflow-y:hidden; width:100%;");
  tx[i].addEventListener("input", OnInput, false);
}

function OnInput() {
  this.style.height = 'auto';
//  this.style.width = '100%';  
  this.style.height = (this.scrollHeight) + "px";
}

/*получаем нашу форму*/
submitForm = document.getElementById(formName);
/*"вешаем" функцию при нажатии на кнопку отправки*/
submitForm.addEventListener('submit', function () {

/*получаем данные всех полей формы*/					
	valName  = document.getElementById("formName" + formid).value;  // 08.06.19 ...
	valTel	= document.getElementById("formTel" + formid).value;
	valEmail = document.getElementById("formEmail" + formid).value;
	valComm  = document.getElementById("formComment" + formid).value;
	valHash  = document.getElementById("formhashval" + formid).value;
	valSecr2 = document.getElementById("formsecret2" + formid).value;
	
	document.getElementById("sendform").setAttribute("disabled","");
	
	var response;
	/*отправляем Post запрос с помощью ajax*/
	var http = new XMLHttpRequest();
	var url = 'https://www.agents-leads.com/form/form.php';
	/*формируем строку с параметрами взятыми с полей формы*/
	var params = "name=" + valName + "&tel=" + valTel + "&email=" + valEmail + "&comment=" + valComm + "&hash=" + valHash + "&secret2=" + valSecr2;

	http.open('POST', url, true);
	http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
	http.onreadystatechange = function () {
	if (http.readyState == 4 && http.status == 200) {
		var respText = http.responseText;
		if (http.responseText == 'OK') {
			document.getElementById(blockName).innerHTML = FormResponceOk; }
			else { document.getElementById("td-right5").innerHTML = FormResponceError + respText;}
		}
	}
	/*отправляем*/
	http.send(params);
});