function add_fields(number)
{
	let new_input = document.createElement("input");
	new_input.setAttribute('type', 'text');
	new_input.setAttribute('class', 'form-control');
	new_input.setAttribute('name', 'name[]');
	new_input.setAttribute('id', 'in'+number);
	new_input.setAttribute('placeholder', 'Imię i nazwisko');

	let new_input2 = document.createElement("input");
	new_input2.setAttribute('type', 'text');
	new_input2.setAttribute('class', 'form-control');
	new_input2.setAttribute('name', 'function[]');
	new_input2.setAttribute('id', 'in'+number);
	new_input2.setAttribute('placeholder', 'Funkcja');

	// add the newly created element and it's content into the DOM
	let fields=document.getElementById("fields");
	fields.appendChild(new_input);
	fields.appendChild(new_input2);
}
function delete_fields(number)
{
	let fields_elements=document.querySelectorAll('#fields > input#in'+number);
	fields_elements.forEach((el) => {el.remove();});

}

function add_fields2(number2)
{
	let new_input = document.createElement("input");
	new_input.setAttribute('type', 'text');
	new_input.setAttribute('class', 'form-control');
	new_input.setAttribute('name', 'employment[]');
	new_input.setAttribute('id', 'in2'+number2);
	new_input.setAttribute('placeholder', 'Zatrudnienie (rodzaj umów)');

	let new_input2 = document.createElement("input");
	new_input2.setAttribute('type', 'text');
	new_input2.setAttribute('class', 'form-control');
	new_input2.setAttribute('name', 'salary[]');
	new_input2.setAttribute('id', 'in2'+number2);
	new_input2.setAttribute('placeholder', 'Suma pensji');

	// add the newly created element and it's content into the DOM
	let fields=document.getElementById("fields2");
	fields.appendChild(new_input);
	fields.appendChild(new_input2);
}
function delete_fields2(number2)
{
	let fields_elements2=document.querySelectorAll('#fields2 > input#in2'+number2);
	fields_elements2.forEach((el) => {el.remove();});

}

window.onload = function()
{
	let number=0;
	let n=0;


	let btn_add_fields=document.getElementById("btn_add_fields");
	let btn_delete_fields=document.getElementById("btn_delete_fields");

	let number2=0;
	let n2=0;

	let btn_add_fields2=document.getElementById("btn_add_fields2");
	let btn_delete_fields2=document.getElementById("btn_delete_fields2");
	

	let button_send=document.getElementById("button_send");

	button_send.addEventListener("click", function(event)
	{
		let info=document.getElementById("info");			
		let name_surname=[];
		let functions=[];
		let employment=[];
		let salary=[]; 
		let fields_elements=document.querySelectorAll('#fields > input');
		let fields_elements2=document.querySelectorAll('#fields2 > input');

		for (let i = 0; i < fields_elements.length; i++) 
		{	
			if(i % 2 == 0)
				name_surname.push(fields_elements[i].value);
			else if(i % 2 != 0)
				functions.push(fields_elements[i].value);
		}

		for (let i = 0; i < fields_elements2.length; i++) 
		{	
			if(i % 2 == 0)
				employment.push(fields_elements2[i].value);
			else if(i % 2 != 0)
				salary.push(fields_elements2[i].value);
		}

		const xhr=new XMLHttpRequest();
		xhr.onreadystatechange = function()
		{
			if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
				document.querySelector('#info').innerHTML=this.responseText;
			}
		}
		xhr.open('POST', 'script.php', true);
		xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
		xhr.send(encodeURI('name_surname='+JSON.stringify(name_surname)+'&functions='+JSON.stringify(functions)+'&employment='+JSON.stringify(employment)+'&salary='+JSON.stringify(salary)));
		
	});

	let button_show=document.getElementById("button_show");
	button_show.addEventListener("click", function(event)
	{	
		let ajax = new XMLHttpRequest();

		let method = "GET";
		let url ="data.php";

		ajax.open(method, url, true);
		ajax.send();

		ajax.onreadystatechange =function()
		{
			if (this.readyState == 4  && this.status == 200)
			{
				let arr = JSON.parse(this.responseText);
		
				var ele = document.querySelectorAll("#fields > input, #fields2 > input");

				// IT WILL READ ALL THE ELEMENTS. <p>, <div>, <input> ETC.
				for (let i = 0; i < ele.length; i++)
				{
					ele[i].remove();
				}


				const stringEmployee = JSON.stringify(arr[0]);
				const parsedEmployee = JSON.parse(stringEmployee);
				const parsedAgainEmployee = JSON.parse(parsedEmployee.json_data);
				
				number=0;
				n=0;
				for (let i=0; i<parsedAgainEmployee.length; i++) 
				{
					let arr3=(parsedAgainEmployee[Object.keys(parsedAgainEmployee)[i]]);
					let j=0;
					for (let val of Object.values(arr3)) 
					{ 
						if(j % 2 == 0)
							getValueWithFields("text", "name[]", "in", number, "Imię i nazwisko", val, "fields" );	
						else
						{
							getValueWithFields("text", "function[]", "in", number, "Funkcja", val, "fields" );
							if(!i==parsedAgainEmployee.length-1 && j % 2 != 0)
							{
								number++;
								n++;
							}			
						}
						j++;
						if(n>0)
							btn_delete_fields.style.display="block";	
					}
				}
		
				const stringEmployment= JSON.stringify(arr[0]);
				const parsedEmployment = JSON.parse(stringEmployment);
				const parsedAgainEmployment = JSON.parse(parsedEmployment.json_data2);
				number2=0;
				n2=0;
				for (let i=0; i<parsedAgainEmployment.length; i++) 
				{
					//alert(value);
					let arr3=(parsedAgainEmployment[Object.keys(parsedAgainEmployment)[i]]);
					let j=0;
					for (let val of Object.values(arr3)) 
					{ 
						if(j % 2 == 0)
							getValueWithFields("text", "employment[]", "in2", number2, "Zatrudnienie (rodzaj umów)", val, "fields2" );	
						else
						{
							getValueWithFields("text", "salary[]", "in2", number2, "Suma pensji", val, "fields2" );
							if(!i==parsedAgainEmployment.length-1 && j % 2 != 0)
							{
								number2++;
								n2++;
							}			
						}
						j++;
						if(n2>0)
							btn_delete_fields2.style.display="block";	
					}
				}
			}
		}


	});

	btn_add_fields.addEventListener("click", function()
	{
		add_fields(number);
		n=number;
		number++;
		if(btn_delete_fields.style.display!="block")
			btn_delete_fields.style.display="block";
	});

	
	btn_delete_fields.addEventListener("click", function()
	{
		delete_fields(n);
		n--;
		number--;
		if(n<0)
			this.style.display="none";
	});


	
	
	btn_add_fields2.addEventListener("click", function()
	{
		add_fields2(number2);
		n2=number2;
		number2++;
		if(btn_delete_fields2.style.display!="block")
			btn_delete_fields2.style.display="block";
	});

	
	btn_delete_fields2.addEventListener("click", function()
	{
		delete_fields2(n2);
		n2--;
		number2--;
		if(n2<0)
			this.style.display="none";
	});


	function getValueWithFields(type, name, prefnumber, number, placeholder, value, fields )
	{
		let new_input = document.createElement("input");
		new_input.setAttribute('type', type);
		new_input.setAttribute('class', 'form-control');
		new_input.setAttribute('name', name);
		new_input.setAttribute('id', prefnumber+number);
		new_input.setAttribute('value', value);
		new_input.setAttribute('placeholder', placeholder);

		// add the newly created element and it's content into the DO
		let field=document.getElementById(fields);
		field.appendChild(new_input);
		
	}
};