window.addEventListener('load', function() {
	var topMessage = document.getElementById('uv_top_message');
	topMessage.className = '';
	topMessage.innerHTML = '';
	    	var formNode = document.createElement('form');
	var formName = "Webkul-it-Contact-Form";
	setAttributes(formNode, {"name": formName, "method": "post","class": "uv_form", "enctype": "multipart/form-data" });
					
			formNode.appendChild(generateElement('name'));
							
			formNode.appendChild(generateElement('from'));
							
			formNode.appendChild(generateElement('type'));
							
			formNode.appendChild(generateElement('subject'));
							
			formNode.appendChild(generateElement('reply'));
			
		var formPart = document.createElement("input");
	setAttributes(formPart,{"type": "hidden","name": "__csrf","value": "505a3bb03f25736" });
	formNode.appendChild(formPart);
	var formPart = document.createElement("button");
	setAttributes(formPart,{"type": "submit","id": "uv_submit1","name": "submit1", "class":"btn btn-md btn-info",});
	formPart.innerHTML = 'Create Ticket';
		formNode.appendChild(formPart);

	function asyncAction(formNode,b) {
		var that = document.getElementById("158761056b947c58761056b9526");
		that.parentNode.insertBefore(formNode, that.nextSibling);
		b();
	};

	asyncAction(formNode,function() {
    	var btn = document.getElementById('uv_submit1');
		btn.addEventListener('click', function(event) {
			document.getElementById('uv_top_message').innerHTML = '';
			form = document.querySelector('form[name='+formName+']');
	        // if(form.checkValidity()) {
	            event.preventDefault();
	            if(isValidForm(form)) {
	            	btn.disabled = true;
					btn.style.cursor = 'not-allowed';
					var path = "https://webkul.uvdesk.com/apps/form-builder/en/form/replaceHash/submit";
					path = path.replace('replaceHash',"158761056b947c58761056b9526");
					form.method = 'post';
					form.enctype = 'multipart/form-data';
					form.action = path;
					form.submit();
				}
			// }
		});
		var visibleNames = {'from': 'Email', 'name': 'Name', 'reply': 'query' };
		var inputs = document.querySelectorAll('.uv_form input,.uv_form textarea');
		for(i = 0; i < inputs.length ; i++ ) {
			var input = inputs[i];
			// input.addEventListener('blur', function(event) {
			// 	target = event.target;
			// 	var error = [];

			// 	if(-1 != ['from', 'reply', 'subject', 'name'].indexOf(target.name) && !target.value) {
			// 		targetName = (target.name && 'undefined' != typeof(visibleNames[target.name.toLowerCase()]) ) ? visibleNames[target.name.toLowerCase()] : target.name;
			// 		error[target.id] = errorMessage('required', targetName);
			// 	} else if(target.name == 'from') {
			// 		if(!validateEmail(target.value)) {
			// 			error[target.id] = errorMessage('email', target.value);
			// 		}
			// 	}
			// 	showError(error, target);
			// });		
		}
	});

	if(document.getElementById('uv_type')) {
		document.getElementById('uv_type').addEventListener('change', function(event) {
			selectedVal = this.options[this.selectedIndex].value;
			if((allDependent = document.getElementsByClassName('dependent')) && (len = allDependent.length)) {
				for(i=0;i<len;i++) {
					allDependent[i].style.display = 'none';
				}
			}
			if((dependent = document.getElementsByClassName('dependency'+selectedVal)) && (leng = dependent.length)) {
				for(j=0;j<leng;j++) {
					dependent[j].style.display = 'block';
				}
			}
		});
	}

	if(document.querySelector('.uv_flash .close')) {
		document.querySelector('.uv_flash .close').addEventListener('click', function() {
			if(flashmsg = document.querySelector('.uv_flash')) {
				flashmsg.remove();
			}
		});
	}

	function isValidForm(form) {
		var error = [];
									fieldName = 'name';
				formElement = document.getElementById('uv_' + fieldName);
				if(fieldName === 'name') {
					name = 'Name';
				} else if(fieldName === 'from') {
					name = 'Email';
				} else if(fieldName === 'reply') {
					name = 'query';
				} else {
					name = fieldName;
				}
				if(!formElement.value) {
					error[formElement.id] = errorMessage('required',name);
				} else if(fieldName == 'from') {
					if(!validateEmail(formElement.value))
						error[formElement.id] = errorMessage('email',formElement.value);
				}
												fieldName = 'from';
				formElement = document.getElementById('uv_' + fieldName);
				if(fieldName === 'name') {
					name = 'Name';
				} else if(fieldName === 'from') {
					name = 'Email';
				} else if(fieldName === 'reply') {
					name = 'query';
				} else {
					name = fieldName;
				}
				if(!formElement.value) {
					error[formElement.id] = errorMessage('required',name);
				} else if(fieldName == 'from') {
					if(!validateEmail(formElement.value))
						error[formElement.id] = errorMessage('email',formElement.value);
				}
												fieldName = 'type';
				formElement = document.getElementById('uv_' + fieldName);
				if(fieldName === 'name') {
					name = 'Name';
				} else if(fieldName === 'from') {
					name = 'Email';
				} else if(fieldName === 'reply') {
					name = 'query';
				} else {
					name = fieldName;
				}
				if(!formElement.value) {
					error[formElement.id] = errorMessage('required',name);
				} else if(fieldName == 'from') {
					if(!validateEmail(formElement.value))
						error[formElement.id] = errorMessage('email',formElement.value);
				}
												fieldName = 'subject';
				formElement = document.getElementById('uv_' + fieldName);
				if(fieldName === 'name') {
					name = 'Name';
				} else if(fieldName === 'from') {
					name = 'Email';
				} else if(fieldName === 'reply') {
					name = 'query';
				} else {
					name = fieldName;
				}
				if(!formElement.value) {
					error[formElement.id] = errorMessage('required',name);
				} else if(fieldName == 'from') {
					if(!validateEmail(formElement.value))
						error[formElement.id] = errorMessage('email',formElement.value);
				}
												fieldName = 'reply';
				formElement = document.getElementById('uv_' + fieldName);
				if(fieldName === 'name') {
					name = 'Name';
				} else if(fieldName === 'from') {
					name = 'Email';
				} else if(fieldName === 'reply') {
					name = 'query';
				} else {
					name = fieldName;
				}
				if(!formElement.value) {
					error[formElement.id] = errorMessage('required',name);
				} else if(fieldName == 'from') {
					if(!validateEmail(formElement.value))
						error[formElement.id] = errorMessage('email',formElement.value);
				}
					
				showError(error);
		return Object.size(error) == 0 ? true : false;

	};

	function validateEmail(email) {
		var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
		return re.test(email);
	}
	function errorMessage(type,value) {
		var validation = {
			'required': 'Please Enter %value%',
			'regex': 'This Field Value is not Valid',
			'number': '%value% is not a number',
			'maxNo': 'Number should not be greater than %value%',
			'minNo': 'Number should not be less than %value%',
			'email': '%value% is not a valid email',
			'allowed-domain': '%value% is not one of allowed Domains',
			'restict-domain': '%value% falls into restricted Category',
			'requiredRadio': ' Please Select a Value',
			'url': 'Provide a valid url(with protocol)',
			'time': 'Please provide Time value in format HH:MM',
			'date': 'Please provide Date value in format yyyy-mm-dd',
			'date-time': 'Please provide date-time value in format yyyy-mm-dd HH:MM',
		};
		return validation[type].replace("%value%", value);;
	}

	function showError(error, singleTarget = false) {
		shownErrors = document.getElementsByClassName('uv_show-error');
		if(!singleTarget) {
			while(shownErrors.length > 0) {
				shownErrors[0].parentNode.className = shownErrors[0].parentNode.className.replace('uv_has_error','');
				shownErrors[0].parentNode.removeChild(shownErrors[0]);
			}
		} else {
			singleTarget.parentNode.className = singleTarget.parentNode.className.replace('uv_has_error','');
			targetIdString = singleTarget.id ? '#' + singleTarget.id + ' + ' : null;
			if(document.querySelector(targetIdString + '.uv_show-error')) {
				singleTarget.parentNode.removeChild(document.querySelector(targetIdString + '.uv_show-error'));		
			}
		}

		for(id in error) {
			var childNode = document.createElement("div");
			childNode.className = 'uv_show-error';
			childNode.innerHTML = error[id];
						var node = document.getElementById(id);
			if(node) {
				node.parentNode.insertBefore(childNode, node.nextSibling);
				var parentNode = node.parentNode;
				parentNode.className = parentNode.className.concat(' uv_has_error');
			}
		}
	};

	function generateElement(fieldName) {
		var field = document.createElement("div");
		field.className = 'uv_form-group';
		if(fieldName == 'type') {
			field.appendChild(createLabel(fieldName));
			var formElement = document.createElement("select");
			setAttributes(formElement,{"name": "type", "class":"uv_selectpicker","id": 'uv_'+fieldName,"required": "required"});
			var option = document.createElement("option");
			option.setAttribute("value", "");			
			option.innerHTML = "Choose query Type";
			formElement.appendChild(option);
            				var option = document.createElement("option");
				option.setAttribute("value", "4");
				option.innerHTML = "PreSale Query";
				formElement.appendChild(option);
            				var option = document.createElement("option");
				option.setAttribute("value", "5");
				option.innerHTML = "Support";
				formElement.appendChild(option);
            				var option = document.createElement("option");
				option.setAttribute("value", "6");
				option.innerHTML = "Shopify";
				formElement.appendChild(option);
            				var option = document.createElement("option");
				option.setAttribute("value", "12");
				option.innerHTML = "Customization";
				formElement.appendChild(option);
            				var option = document.createElement("option");
				option.setAttribute("value", "13");
				option.innerHTML = "Cs-Cart";
				formElement.appendChild(option);
            				var option = document.createElement("option");
				option.setAttribute("value", "14");
				option.innerHTML = "Jatayu";
				formElement.appendChild(option);
            				var option = document.createElement("option");
				option.setAttribute("value", "15");
				option.innerHTML = "Joomla";
				formElement.appendChild(option);
            				var option = document.createElement("option");
				option.setAttribute("value", "16");
				option.innerHTML = "Magento";
				formElement.appendChild(option);
            				var option = document.createElement("option");
				option.setAttribute("value", "17");
				option.innerHTML = "Mobikul";
				formElement.appendChild(option);
            				var option = document.createElement("option");
				option.setAttribute("value", "18");
				option.innerHTML = "Opencart";
				formElement.appendChild(option);
            				var option = document.createElement("option");
				option.setAttribute("value", "19");
				option.innerHTML = "OpenErp/ Odoo";
				formElement.appendChild(option);
            				var option = document.createElement("option");
				option.setAttribute("value", "20");
				option.innerHTML = "PrestaShop";
				formElement.appendChild(option);
            				var option = document.createElement("option");
				option.setAttribute("value", "21");
				option.innerHTML = "SalesForce";
				formElement.appendChild(option);
            				var option = document.createElement("option");
				option.setAttribute("value", "22");
				option.innerHTML = "WordPress";
				formElement.appendChild(option);
            				var option = document.createElement("option");
				option.setAttribute("value", "23");
				option.innerHTML = "X-Cart";
				formElement.appendChild(option);
            				var option = document.createElement("option");
				option.setAttribute("value", "24");
				option.innerHTML = "Qloapps";
				formElement.appendChild(option);
            				var option = document.createElement("option");
				option.setAttribute("value", "444");
				option.innerHTML = "eShopSync";
				formElement.appendChild(option);
            				var option = document.createElement("option");
				option.setAttribute("value", "793");
				option.innerHTML = "WooCommerce";
				formElement.appendChild(option);
            		} else if(fieldName == 'reply') {
			field.appendChild(createLabel('Message'));
			var formElement = document.createElement("textarea");
			setAttributes(formElement,{"name": "reply", "class":"uv_form-control","id": 'uv_'+fieldName,"placeholder": "Brief Description about your query", "required": "required"});
		} else {
			if(fieldName === 'name') {
				labelName = "Name";
			} else if(fieldName === 'from') {
				labelName = "Email";
			} else if(fieldName === 'subject') {
				labelName = "Subject";				
			} else {
				labelName = fieldName;
			}
			field.appendChild(createLabel(labelName));
			var formElement = document.createElement("input");
			setAttributes(formElement,{"type": "text","name": fieldName,"id": 'uv_'+fieldName, "class":"uv_form-control","placeholder": "Enter "+labelName, "required": "required"});
		}
		field.appendChild(formElement);
		var infoArray = {
			'name': 'Customer full name',
			'from': 'Customer email address',
			'type': 'Choose ticket type',
			'subject': 'Ticket subject',
			'reply': 'Ticket query message',
		};
				
		return field;

		function createLabel(name) {
			var label = document.createElement("label");
			setAttributes(label,{"for": name, "class":"uv_required"});
			label.innerHTML = name;
			return label;
		}
	};

	function setAttributes(el, attrs) {
		for(var key in attrs) {
		    el.setAttribute(key, attrs[key]);
		  }
	};

	Object.size = function(obj) {
	    var size = 0, key;
	    for (key in obj) {
	        if (obj.hasOwnProperty(key)) size++;
	    }
	    return size;
	};
});