//funcion para sacar data de formBuilder y generar HTML del JSON
function dataFormBuilder(selectorId, formBuilder) {
	$ = jQuery;
	var dataEnviar = formBuilder.actions.getData('json', true);
	dataEnviar = editFieldNames(dataEnviar);
	console.log("JSON dataFormBuilder: ", dataEnviar);

	var escapeEl = document.createElement('textarea'),
			code = document.getElementById(selectorId), //usando textarea
			escapeHTML = function (html) {
				escapeEl.textContent = html;
				return escapeEl.innerHTML;
			},
			formData = dataEnviar, // Enviando data recibida
			addLineBreaks = function (html) {
				return html.replace(new RegExp('&gt; &lt;', 'g'), '&gt;\n&lt;').replace(new RegExp('&gt;&lt;', 'g'), '&gt;\n&lt;');
			};

	// Grab markup and escape it
	var $markup = $('<div/>');
	$markup.formRender({formData});

	// set < code > innerHTML with escaped markup
	code.innerHTML = addLineBreaks(escapeHTML($markup[0].innerHTML));
}

/**
 * Funcion para editar los names de los campos y añadir una key mas amigable xxxx-xxxx-xxx
 * @constructor
 * @param {array} fields - Campos a los que cambiaremos name
 **/
function editFieldNames(fields = []) {

	if (fields) {
		fields = JSON.parse(fields);
	}

	for (var index in fields) {
		if (fields[index].name && fields[index].label && fields[index].subtype != 'trumbowyg') {
			fields[index].name = convertStringTokey(fields[index].label);
		}
	}

	//fields = JSON.stringify(fields);

	return fields;
}

/**
 * Funcion para convertir string a key: xxxx-xxxxx-xxxx
 * @constructor
 * @param {string} label - Valor que queremos convertir a key
 **/
function convertStringTokey(label) {
	//Remover asentos y caracteres especiales
	label = label.normalize('NFD').replace(/[\u0300-\u036f]/g, "");
	label = replaceAccents(label).toLowerCase();
	label = label.replace(/[^A-Z0-9]+/ig, "-");

	return 'wpcf7-' + label;
}

/**
 * Funcion para remover acentos de texto
 * @constructor
 * @param {string} str - Texto a remover acentos
 **/
function replaceAccents(str) {
	//Reemplazar caracteres especiales
	if (str.search(/[\xC0-\xFF]/g) > -1) {
		str = str
				.replace(/[\xC0-\xC5]/g, "A")
				.replace(/[\xC6]/g, "AE")
				.replace(/[\xC7]/g, "C")
				.replace(/[\xC8-\xCB]/g, "E")
				.replace(/[\xCC-\xCF]/g, "I")
				.replace(/[\xD0]/g, "D")
				.replace(/[\xD1]/g, "N")
				.replace(/[\xD2-\xD6\xD8]/g, "O")
				.replace(/[\xD9-\xDC]/g, "U")
				.replace(/[\xDD]/g, "Y")
				.replace(/[\xDE]/g, "P")
				.replace(/[\xE0-\xE5]/g, "a")
				.replace(/[\xE6]/g, "ae")
				.replace(/[\xE7]/g, "c")
				.replace(/[\xE8-\xEB]/g, "e")
				.replace(/[\xEC-\xEF]/g, "i")
				.replace(/[\xF1]/g, "n")
				.replace(/[\xF2-\xF6\xF8]/g, "o")
				.replace(/[\xF9-\xFC]/g, "u")
				.replace(/[\xFE]/g, "p")
				.replace(/[\xFD\xFF]/g, "y");
	}

	return str;
}

//Function que nos sirve para generar shortcode para input y textarea
function inputData(reemplazo, shortcode) {

	if (!reemplazo.length) {
		return true;
	}

	//Extrayendo data de label y eliminandolo tambien
	var contentLabel = reemplazo.prev();
	var textLabel = jQuery(contentLabel[0]).text();
	contentLabel.remove();
	var name = reemplazo[0].name;
	var placeholder = reemplazo[0].placeholder;
	var colsAndRows = "";
	var cols = "";
	var rows = "";
	var defaultValue = "";
	var shorcodeField = "";
	//Añadiendo variables para campos de tipo fecha
	var minDate = "";
	var maxDate = "";
	var stepDate = "";
	//Añadiendo variables para campos de tipo file
	var filetypes = "";
	var limitFile = "";

	if (placeholder != "") {
		placeholder = 'placeholder ' + '"' + placeholder + '"';
	}

	//Añadiendo cols y rows a campos textarea. Ejemplo: " 2x5 "
	if (shortcode == "textarea" && textLabel != "Shortcode") {
		cols = reemplazo[0].cols || 1;
		rows = reemplazo[0].rows || 1;

		if (cols && rows) {
			colsAndRows = " " + cols + "x" + rows + " ";
		}
	} else if (textLabel == "Shortcode") {
		shorcodeField = (reemplazo.val()) ? reemplazo.val() : "";
		//console.log("Este es el valor del shorcode "+ shorcodeField); 
	}

	//Añadiendo default value en campos de tipo text. Ejemplo: " default:user_login"
	if (shortcode == "text") {
		//console.log("Este es el valor de defaul: " +  reemplazo.attr("logginvalue") );
		defaultValue = "";
		if (reemplazo.attr("logginvalue")) {
			defaultValue = (reemplazo.attr("logginvalue")) ? " default:" + reemplazo.attr("logginvalue") : "";
		}
	}

	//Extrayendo valores para campo de tipo fecha
	if (shortcode == "date") {

		if (reemplazo.attr("min")) {
			minDate = "min:" + reemplazo.attr("min") + " ";
		}
		if (reemplazo.attr("max")) {
			maxDate = "max:" + reemplazo.attr("max") + " ";
		}
		if (reemplazo.attr("step")) {
			stepDate = "step:" + reemplazo.attr("step") + " ";
		}

	}

	//Extrayendo valores de campo de tipo file
	if (shortcode == "file") {

		if (reemplazo.attr("filetypes")) {
			filetypes = "filetypes:" + reemplazo.attr("filetypes") + " ";
		}
		if (reemplazo.attr("limit")) {
			limitFile = "limit:" + reemplazo.attr("limit") + " ";
		}

	}

	//Required
	var required = reemplazo[0].required;
	var astedisco = "";
	if (required == true) {
		astedisco = "*";
	}

	//Class name
	var clases = "";
	var $hijosClass = $(reemplazo[0].classList);
	$hijosClass.each(function (index, value) {
		clases = clases + "class:" + value + " ";
	});

	//Obtendiendo el ancho en el que debemos de mostrar el campo
	var claseAncho = "";
	var anchoDeItem = reemplazo.attr("width") || null;
	if (anchoDeItem) {
		if (anchoDeItem === 'width-100') {
			claseAncho = 'cft7b-width-100';
		} else if (anchoDeItem === 'width-50') {
			claseAncho = 'cft7b-width-50';
		} else if (anchoDeItem === 'width-33') {
			claseAncho = 'cft7b-width-33';
		}
	}

	//Name value
	if (name === "name") {
		name = "text-" + name;
	}

	//value
	var value = reemplazo[0].value;

	if (defaultValue != "" && defaultValue) {
		value = defaultValue;
	} else if (value != "" && value) {
		value = ' ' + 'default="' + value + '"';
	}

	var $label = "";

	if (shortcode === 'email') {
		$label = "<p class='cf7-field-wrapper " + claseAncho + "'><label><span class='label'>" + textLabel + "</span> [" + shortcode + astedisco + " " + name + " " + clases + placeholder + value + "]</label></p>";
	} else if (shortcode === 'url') {
		$label = "<p class='cf7-field-wrapper " + claseAncho + "'><label><span class='label'>" + textLabel + "</span> [" + shortcode + astedisco + " " + name + " " + clases + value + "]</label></p>";
	} else if (shortcode === 'file') {
		$label = "<p class='cf7-field-wrapper " + claseAncho + "'><label><span class='label'>" + textLabel + "</span> [" + shortcode + astedisco + " " + name + " " + clases + filetypes + limitFile + value + "]</label></p>";
	} else if (shortcode === 'date') {
		$label = "<p class='cf7-field-wrapper " + claseAncho + "'><label><span class='label'>" + textLabel + "</span> [" + shortcode + astedisco + " " + name + " " + clases + minDate + maxDate + stepDate + value + "]</label></p>";
	} else if (shortcode !== "textarea") {
		$label = "<p class='cf7-field-wrapper " + claseAncho + "'><label><span class='label'>" + textLabel + "</span> [" + shortcode + astedisco + " " + name + " " + clases + placeholder + value + "]</label></p>";
	} else if (shortcode === "textarea" && textLabel !== "Shortcode") {
		$label = "<p class='cf7-field-wrapper'><label><span class='label'>" + textLabel + "</span> [" + shortcode + astedisco + " " + name + colsAndRows + clases + placeholder + "]</label></p>";
	} else if (shortcode === "textarea" && textLabel === "Shortcode") {
		$label = "<p class='cf7-field-wrapper " + claseAncho + "'>" + shorcodeField + "</p>";
	}

	reemplazo.after($label);
	reemplazo.remove();
}

//Funcion que nos sirve para imprimir el HTML de la variable donde lo tenemos guardado
function imprimiendoHTML(contentHTML) {
	//Imprimiendo el $form en el textarea
	var formHTML = "";
	var $hijosHTML = $(contentHTML.children());
	$hijosHTML.each(function (index, value) {
		var nuevo = value.outerHTML;
		formHTML = formHTML + nuevo + "\n";
	});
	return formHTML;
}

/**
 * Funcion para mostrar botones de acciones(preview, activate). Cuando haga hover sobre imagenes previews de formulario
 * @constructor
 **/
function activateFormActions($) {
	$(".wpvsfb-option-style-formBuilder").hover(function () {
		var $continerButtons = $(this).find(".wpvsfb-container-preview");
		//$continerButtons.fadeIn( "fast" );
		$continerButtons.removeClass("do-not-activate-buttons", 1000, 'easeOutBounce');
	}, function () {
		var $continerButtons = $(this).find(".wpvsfb-container-preview");
		$continerButtons.addClass("do-not-activate-buttons", 1000, 'easeOutBounce');
		//$continerButtons.fadeOut( "fast" );
	});
}

/**
 * FUNCION DE POPUP PREVIEW FORM
 * Funcion para mostrar popup con preview de esquema de color seleccionado
 * @constructor
 * @param {object} $ - Objeto Jquery
 **/
function popupPreviewForm($) {

	//Evento para mostrar popup
	$('.wpvsfb-container-preview .button-preview').click(function () {
		event.preventDefault();

		//Añadiendo clase para saber que elemento estamos viendo en la preview
		$(this).parent().parent(".wpvsfb-option-style-formBuilder").addClass("wpvsfb-active-preview");

		//Obtendremos url de preview de esquema de color.
		var currentColorSchemePreview = $(this).parent().attr("scheme-color");
		getFormPreviewUrl($, currentColorSchemePreview);

		$('#wpvsfb-overlay').fadeIn(300);
	});

	//Evento para cerrar popup 
	$('#wpvsfb-close-popup').click(function () {
		event.preventDefault();

		//Removiendo clase que se añade cuando vemos preview
		var itemsThatWereActivatedInPreview = $(".wpvsfb-active-preview");
		$.each(itemsThatWereActivatedInPreview, function (key, value) {
			$(value).removeClass("wpvsfb-active-preview");
		});

		$('#wpvsfb-overlay').fadeOut(300);
	});
}

/**
 * FUNCION DE POPUP PREVIEW FORM
 * Funcion para mostrar imagen correcta en popup preview 
 * @constructor
 * @param {object} $ - Objeto Jquery
 * @param {string} schemeColor - Esquema de color seleccionado
 **/
function getFormPreviewUrl($, schemeColor) {

	console.log("Este es el esquema de color de la preview: ", schemeColor);

	var availableImages = {
		'form-plain': 'form-plain-cf7.png',
		'form-buttonized-blue': 'form-blue-cf7.png',
		'form-buttonized-green': 'form-green-cf7.png',
		'form-buttonized-red': 'form-red-cf7.png',
		'form-buttonized-orange': 'form-orange-cf7.png',
		'form-buttonized-black': 'form-black-cf7.png'
	};

	if (availableImages[schemeColor]) {
		//wpCf7ScriptUrl script creado en index.php contiene el path de plugins
		let urlPrewviewImage = wpCf7ScriptUrl.pluginUrl + "/assets/imgs/previews-forms/" + availableImages[schemeColor];
		$("#wpvsfb-image-preview").attr("src", urlPrewviewImage);
	}

}

/**
 * FUNCION DE POPUP PREVIEW FORM
 * Funcion para mostrar el siguiente formulario en la preview
 * @constructor
 * @param {object} $ - Objeto Jquery
 **/
function nextPreviewForm($) {
	$("#wpvsfb-next-preview").click(function () {
		event.preventDefault();
		//Siguiente preview
		var $nextForm = $(".wpvsfb-active-preview").next();
		$(".wpvsfb-active-preview").removeClass("wpvsfb-active-preview");

		//Extrayendo attr de siguiente elemento para saber que tipo de formulario es
		var attrSchemeColor;

		if ($nextForm.length != 0) {
			//Añadiendo clase a nuevo elemento
			$nextForm.addClass("wpvsfb-active-preview");
			attrSchemeColor = $nextForm.find(".wpvsfb-container-preview").attr("scheme-color");
		} else {
			//Estamos en el ultimo item debemos de agregarlo.wpvsfb-active-preview al primer item de la lista de form
			$(".wpvsfb-option-style-formBuilder").first().addClass("wpvsfb-active-preview");
			var formCurrent = $(".wpvsfb-option-style-formBuilder").first().find(".wpvsfb-container-preview");
			attrSchemeColor = formCurrent.attr("scheme-color");
			console.log("Scheme color: ", attrSchemeColor);
		}

		//Extrayendo url de formulario para cambiar en la preview
		getFormPreviewUrl($, attrSchemeColor);

	});
}

/**
 * FUNCION DE POPUP PREVIEW FORM
 * Funcion para mostrar el anterior formulario en la preview
 * @constructor
 * @param {object} $ - Objeto Jquery
 **/
function prevPreviewForm($) {
	$("#wpvsfb-prev-preview").click(function () {
		event.preventDefault();
		//Siguiente preview
		var $prevForm = $(".wpvsfb-active-preview").prev();
		$(".wpvsfb-active-preview").removeClass("wpvsfb-active-preview");

		//Extrayendo attr del elemento previo elemento para saber que tipo de formulario es
		var attrSchemeColor;

		if ($prevForm.length != 0) {
			//Añadiendo clase a nuevo elemento
			$prevForm.addClass("wpvsfb-active-preview");
			attrSchemeColor = $prevForm.find(".wpvsfb-container-preview").attr("scheme-color");
		} else {
			//Estamos en el ultimo item debemos de agregarlo.wpvsfb-active-preview al primer item de la lista de form
			$(".wpvsfb-option-style-formBuilder").last().addClass("wpvsfb-active-preview");
			var formCurrent = $(".wpvsfb-option-style-formBuilder").last().find(".wpvsfb-container-preview");
			attrSchemeColor = formCurrent.attr("scheme-color");
			console.log("Scheme color: ", attrSchemeColor);
		}

		//Extrayendo url de formulario para cambiar en la preview
		getFormPreviewUrl($, attrSchemeColor);

	});
}

/**
 * Funcion para limpiar campos div.label de html
 * @constructor
 **/
function wpvsfb_changeLabelContentEditable($) {
	$('body').on('blur', '.form-builder .input-wrap div[contenteditable]', function () {

		const $this = $(this);
		console.log("blur keyup paste input label contenteditable", );
		var valueLabel = $this.text();
		var $nodeLabel = $(this).closest(".form-field").find(".field-label")
		if ($nodeLabel) {
			$nodeLabel.html(valueLabel);
		}
		//var newValueLabel = wpvsfb_clearHtmlLabel(valueLabel);
		$this.html(valueLabel);

	});
}

/**
 * Funcion para remover label repetidas
 * @constructor
 * @param {array} originalArray - Array de objetos que filtraremos
 * @param {string} prop - Propiedad por la cual queremos filtrar array
 **/
function wpvsfb_removeDuplicatesLabel(originalArray, prop) {
	//Funcion para remover los campos duplicados
	var newArray = [];
	var lookupObject = {};

	for (var i in originalArray) {
		if (originalArray[i]['type'] === "textarea" && originalArray[i]['name'] === "wpcf7-shortcode") {
			var keyRandom = Math.random().toString(36).substring(7);
			var fieldStrengthKey = keyRandom + '-' + originalArray[i]['name'];
			lookupObject[fieldStrengthKey] = originalArray[i];
		} else if (originalArray[i]['type'] === "textarea" && originalArray[i]['subtype'] === "trumbowyg") {
			var keyRandom = Math.random().toString(36).substring(7);
			var fieldStrengthKey = keyRandom + '-' + originalArray[i]['name'];
			lookupObject[fieldStrengthKey] = originalArray[i];
		} else if (originalArray[i]['type'] === "hidden") {
			var keyRandom = Math.random().toString(36).substring(7);
			var fieldStrengthKey = keyRandom + '-' + originalArray[i]['name'];
			lookupObject[fieldStrengthKey] = originalArray[i];
		} else {
			lookupObject[originalArray[i][prop]] = originalArray[i];
		}
	}

	for (i in lookupObject) {
		newArray.push(lookupObject[i]);
	}
	return newArray;
}


jQuery(document).ready(function ($) {

	//Añadiendo setInterval para poder sanitizar campos label y remover html
	wpvsfb_changeLabelContentEditable($);

	//Funcion para activar botones de acciones en previews
	activateFormActions($);

	//Funcion para mostrar la siguiente preview del formulario
	nextPreviewForm($);

	//Funcion para mostrar el anterior en la preview del formulario
	prevPreviewForm($)

	//Funcion para test
	popupPreviewForm($)

	var $divActivo = $("#vg-form-builder-panel").find("input.vg-form-builder-settings"); //Selector donde ira el plugin

//Agregando Boton y caja donde ira el plugin
	var $divNuevo = $("<div></div>").addClass('parent-formBuilder');
	var $boxForm = $("<div><div>").addClass("box-form");

	$divNuevo.prepend($boxForm);

	//Variable global para saber que tipo de formulario guardaremos
	var appliedColorScheme = 'form-plain';

	var allTypesOfStyles = ['form-buttonized', 'form-plain', 'form-buttonized-green', 'form-buttonized-blue',
		'form-buttonized-red', 'form-buttonized-orange', 'form-buttonized-black'];

	/*
	 * Codigo activar un nuevo esquema de color en todo el formulario
	 */
	$(".wpvsfb-option-style-formBuilder button.button-activate").click(function () {

		event.preventDefault();

		//Removiendo todas las clases del elemento padre
		for (let index = 0; index < allTypesOfStyles.length; index++) {
			$(".form-builder").removeClass(allTypesOfStyles[index]);
		}

		//Agregando el esquema de color seleccionado

		//Obteniendo esquema de color seleccionado
		var schemeColorCurrent = $(this).parent().attr("scheme-color");

		if (schemeColorCurrent === "form-plain") {
			appliedColorScheme = 'form-plain';
		} else if (schemeColorCurrent === "form-buttonized-blue") {
			appliedColorScheme = 'form-buttonized' + ' ' + schemeColorCurrent;
		} else if (schemeColorCurrent === "form-buttonized-green") {
			appliedColorScheme = 'form-buttonized' + ' ' + schemeColorCurrent;
		} else if (schemeColorCurrent === "form-buttonized-red") {
			appliedColorScheme = 'form-buttonized' + ' ' + schemeColorCurrent;
		} else if (schemeColorCurrent === "form-buttonized-orange") {
			appliedColorScheme = 'form-buttonized' + ' ' + schemeColorCurrent;
		} else if (schemeColorCurrent === "form-buttonized-black") {
			appliedColorScheme = 'form-buttonized' + ' ' + schemeColorCurrent;
		}

		//Añadiendo esquema de color seleccionado a formulario en la preview
		$(".form-builder").addClass(appliedColorScheme);

		//Agregando clase para saber que esquema de color esta activo en el formulario
		var allContianerPreviews = $(".wpvsfb-container-preview");

		//Removiendo clase.activated
		jQuery.each(allContianerPreviews, function (index, value) {
			$(value).removeClass("wpvsfb-color-scheme-activated");
		});

		//Añadiendo clase.wpvsfb-color-scheme-activated para de esa manera saber que elemento esta activo
		$(this).parent().addClass("wpvsfb-color-scheme-activated");
	});


//Compronbando que inputHidden tenga JSON
	var formBuilder;
	$("#vg-form-builder-panel-tab #ui-id-1").trigger("click");

	//Inicializando plugin
	//Opcions con las que inicia el plugin
	/*var vgcf7b_form_builder_settings = {
	 "dontUseOldEditorWarning":"<div class=\"error\">Note. You shouldn´t use this tab when using the form builder because it will get overwritten. This tab is available for old forms that were created without the form builder.</div>",
	 "upgradeLink":"",
	 "isNewForm":"",
	 "defaultFields":[
	 {"type":"text","label":"Name","placeholder":"Your name","name":"first-name"},
	 {"type":"text","label":vgcf7b_form_builder_settings.texts.email,"placeholder":"Your email","name":"email"},
	 {"type":"textarea","label":"Message","placeholder":"Your message","name":"message","rows":"10"},
	 {"type":"button","label":"Button","className":"btn","name":"button"}],
	 "disabledActionButtons":["data","save"],
	 "disabledAttrs":["access","description","maxlength","subtype","style","inline","toggle","other"],
	 "disableFields":["autocomplete"]};
	 */

	//Añadiendo atributos cols y rows a campo textarea
	vgcf7b_form_builder_settings["typeUserAttrs"] = {
		'button': {
			width: {
				label: vgcf7b_form_builder_settings.texts.width,
				options: {
					"width-0": "-- Select --",
					"width-100": "100%",
					"width-50": "50%",
					"width-33": "33%"
				}
			}
		},
		'radio-group': {
			width: {
				label: vgcf7b_form_builder_settings.texts.width,
				options: {
					"width-0": "-- Select --",
					"width-100": "100%",
					"width-50": "50%",
					"width-33": "33%"
				}
			}
		},
		'select': {
			width: {
				label: vgcf7b_form_builder_settings.texts.width,
				options: {
					"width-0": "-- Select --",
					"width-100": "100%",
					"width-50": "50%",
					"width-33": "33%"
				}
			}
		},
		'text': {
			logginvalue: {
				label: vgcf7b_form_builder_settings.texts.default_value,
				options: {
					"": "-- Select --",
					"user_login": vgcf7b_form_builder_settings.texts.user_login_name,
					"user_email": vgcf7b_form_builder_settings.texts.user_email,
					"user_url": vgcf7b_form_builder_settings.texts.user_url,
					"user_first_name": vgcf7b_form_builder_settings.texts.user_first_name,
					"user_last_name": vgcf7b_form_builder_settings.texts.user_last_name,
					"user_nickname": vgcf7b_form_builder_settings.texts.user_nickname,
					"user_display_name": vgcf7b_form_builder_settings.texts.user_display_name,
				}
			},
			extension: {
				label: vgcf7b_form_builder_settings.texts.type,
				type: "text",
				value: "text"
			},
			width: {
				label: vgcf7b_form_builder_settings.texts.width,
				options: {
					"width-0": "-- Select --",
					"width-100": "100%",
					"width-50": "50%",
					"width-33": "33%"
				}
			}
		},
		'textarea': {
			cols: {
				label: vgcf7b_form_builder_settings.texts.cols,
				type: "number",
				value: "1"
			},
			width: {
				label: vgcf7b_form_builder_settings.texts.width,
				options: {
					"width-0": "-- Select --",
					"width-100": "100%",
					"width-50": "50%",
					"width-33": "33%"
				}
			}
		},
		'hidden': {
			logginvalue: {
				label: vgcf7b_form_builder_settings.texts.default_value,
				options: {
					"": "-- Select --",
					"user_login": vgcf7b_form_builder_settings.texts.user_login_name,
					"user_email": vgcf7b_form_builder_settings.texts.user_email,
					"user_url": vgcf7b_form_builder_settings.texts.user_url,
					"user_first_name": vgcf7b_form_builder_settings.texts.user_first_name,
					"user_last_name": vgcf7b_form_builder_settings.texts.user_last_name,
					"user_nickname": vgcf7b_form_builder_settings.texts.user_nickname,
					"user_display_name": vgcf7b_form_builder_settings.texts.user_display_name,
				}
			}
		},
		'paragraph': {
			width: {
				label: vgcf7b_form_builder_settings.texts.width,
				options: {
					"width-0": "-- Select --",
					"width-100": "100%",
					"width-50": "50%",
					"width-33": "33%"
				}
			}
		},
		'header': {
			width: {
				label: vgcf7b_form_builder_settings.texts.width,
				options: {
					"width-0": "-- Select --",
					"width-100": "100%",
					"width-50": "50%",
					"width-33": "33%"
				}
			}
		},
		'checkbox-group': {
			width: {
				label: vgcf7b_form_builder_settings.texts.width,
				options: {
					"width-0": "-- Select --",
					"width-100": "100%",
					"width-50": "50%",
					"width-33": "33%"
				}
			}
		},
		'file': {
			filetypes: {
				label: vgcf7b_form_builder_settings.texts.filetypes,
				options: {
					'': '--Select--',
					'gif': 'GIF',
					'png': 'PNG',
					'jpg': 'JPG',
					'jpeg': 'JPEG',
					'pdf': 'PDF'
				},
			},
			limit: {
				label: vgcf7b_form_builder_settings.texts.limit,
				placeholder: "Example: 1mb"
			},
			width: {
				label: vgcf7b_form_builder_settings.texts.width,
				options: {
					"width-0": "-- Select --",
					"width-100": "100%",
					"width-50": "50%",
					"width-33": "33%"
				}
			}
		},
		'date': {
			value: {
				label: vgcf7b_form_builder_settings.texts.value,
				type: "date",
			},
			min: {
				label: vgcf7b_form_builder_settings.texts.min,
				type: "date",
			},
			max: {
				label: vgcf7b_form_builder_settings.texts.max,
				type: "date",
			},
			step: {
				label: vgcf7b_form_builder_settings.texts.step,
				type: "number"
			},
			width: {
				label: vgcf7b_form_builder_settings.texts.width,
				options: {
					"width-0": "-- Select --",
					"width-100": "100%",
					"width-50": "50%",
					"width-33": "33%"
				}
			}
		},
		'number': {
			width: {
				label: vgcf7b_form_builder_settings.texts.width,
				options: {
					"width-0": "-- Select --",
					"width-100": "100%",
					"width-50": "50%",
					"width-33": "33%"
				}
			}
		},
		'autocomplete': {
			shortcode: {
				label: vgcf7b_form_builder_settings.texts.value,
				type: "text",
			}
		},
	};

	//vgcf7b_form_builder_settings["disableFields"] = [];

	//Añadiendo campo shorcode = Utilizaremos el campo autocomplete para generar esto
	vgcf7b_form_builder_settings["controlOrder"] = [
		'text',
		'email-cf7',
		'textarea',
		'url-cf7',
		'button',
		'radio-group',
		'checkbox-group',
		'select',
		'paragraph',
		'header',
		'date',
		'number',
		'hidden',
		'file',
		'autocomplete'
	];

	//Agregando campor shortcode 
	vgcf7b_form_builder_settings["inputSets"] = [
		{
			label: vgcf7b_form_builder_settings.texts.paragraph,
			name: "paragraph-cf7",
			fields: [
				{
					type: "textarea",
					subtype: "trumbowyg",
					label: vgcf7b_form_builder_settings.texts.paragraph,
					className: 'trumbowyg-control',
				},
			]
		},
		{
			label: "Shortcode",
			name: "shortcode-cf7",
			fields: [
				{
					type: "textarea",
					label: "Shortcode",
					className: 'shortcode-control',
					name: "wpCf7Shortcode"
				},
			]
		},
		{
			label: vgcf7b_form_builder_settings.texts.url,
			name: "url-cf7",
			fields: [
				{
					type: "text",
					label: vgcf7b_form_builder_settings.texts.url,
					className: 'url-control',
					name: "wpCf7Url",
					extension: "url"
				},
			]
		},
		{
			label: vgcf7b_form_builder_settings.texts.email,
			name: "email-cf7",
			fields: [
				{
					type: "text",
					label: vgcf7b_form_builder_settings.texts.email,
					className: 'email-control',
					name: "wpCf7Email",
					extension: "email"
				},
			]
		}
	];

	//Guardando valor previo de formulario para no borralo cuando guardemos con contact form 7
	var valuePrevious = jQuery("#wpcf7-form").val();

	//Comprando que la pagina tenga campos del cf-7 y que estemos editando
	var fieldsCF7 = $("#vg-form-builder-panel .vg-form-builder-settings").val();
	var urlCurrent = window.location.href;

	if (fieldsCF7.length > 0) {
		fieldsCF7 = JSON.parse(fieldsCF7);
		if (fieldsCF7.length > 0) {
			$("#contact-form-editor-tabs li:nth-child(2)").hide();
		}
	} else if (urlCurrent.includes("page=wpcf7-new")) {
		$("#contact-form-editor-tabs li:nth-child(2)").hide();
	}
	//Else: Sino cumple la condicion mostraremos pestaña = "Form"

	//Antes de inicializar plugin extraer scheme de color es el ultimo field guardado en defaultFields
	let indexLastFormField = vgcf7b_form_builder_settings.defaultFields.length - 1;

	if (vgcf7b_form_builder_settings.defaultFields[indexLastFormField].name == 'wpcf7-color-current') {
		//Obteniendo color para añadir schema de color
		let fieldSchemeOfColor = vgcf7b_form_builder_settings.defaultFields[indexLastFormField];
		vgcf7b_form_builder_settings.defaultFields.splice(indexLastFormField, 1);
		console.log("Este es el color del formulario: ", fieldSchemeOfColor);

		//Guaradando valor obtenido de esquema de color
		appliedColorScheme = fieldSchemeOfColor.value;

		setTimeout(function () {
			//Aqui extraeremos el valor guardado para el formulario
			$(".form-builder").addClass(fieldSchemeOfColor.value);

			//Añadiendo clase al iniciar pagina para saber que esquema de color tenemos selecciona
			var schemeColor = fieldSchemeOfColor.value || "";
			console.log("Valor de scheme actual: ", schemeColor);

			if (schemeColor === "form-plain") {
				$("#active-form-plain .wpvsfb-container-preview").addClass("wpvsfb-color-scheme-activated");
			} else if (schemeColor.includes("form-buttonized-blue")) {
				$("#active-form-blue .wpvsfb-container-preview").addClass("wpvsfb-color-scheme-activated");
			} else if (schemeColor.includes("form-buttonized-green")) {
				$("#active-form-green .wpvsfb-container-preview").addClass("wpvsfb-color-scheme-activated");
			} else if (schemeColor.includes("form-buttonized-red")) {
				$("#active-form-red .wpvsfb-container-preview").addClass("wpvsfb-color-scheme-activated");
			} else if (schemeColor.includes("form-buttonized-orange")) {
				$("#active-form-orange .wpvsfb-container-preview").addClass("wpvsfb-color-scheme-activated");
			} else if (schemeColor.includes("form-buttonized-black")) {
				$("#active-form-black .wpvsfb-container-preview").addClass("wpvsfb-color-scheme-activated");
			}

		}, 1000);
	} else {
		setTimeout(function () {
			//Valores iniciales en el formulario
			$(".form-builder").addClass('form-plain');

			//Agregando por defecto el valor form-plain como esquema de color activo
			$("#active-form-plain .wpvsfb-container-preview").addClass("wpvsfb-color-scheme-activated");
		}, 1000);
	}

	console.log("Esto contiene formBuilder:" + JSON.stringify(fieldsCF7), vgcf7b_form_builder_settings);

	//Inicializando formBuilder
	formBuilderData = $boxForm.formBuilder(vgcf7b_form_builder_settings);

//	formBuilderData.actions.setLang(vgcf7b_form_builder_settings.lang)

	setTimeout(function () {
		//Añadiendo contenido a tipos de campo trumbowyg
		var fieldsAllFormBuilder = vgcf7b_form_builder_settings.defaultFields || [];
		var dataFieldsTrumbowyg = [];

		for (var index = 0; index < fieldsAllFormBuilder.length; index++) {
			if (fieldsAllFormBuilder[index].type === "textarea" &&
					fieldsAllFormBuilder[index].subtype === "trumbowyg") {

				dataFieldsTrumbowyg.push(fieldsAllFormBuilder[index]);

			}
		}

		console.log("dataFieldsTrumbowyg: ", dataFieldsTrumbowyg);

		//Añadiendo el valor correcto a cada campo de trumbowyg
		var $dataFieldsTrumbowyg = $("div[type='trumbowyg']");
		$dataFieldsTrumbowyg.each(function (index) {
			if (dataFieldsTrumbowyg[index]['value']) {
				$(this).append(dataFieldsTrumbowyg[index]['value']);
			}
		});

	}, 2500);

	setInterval(function () {
		//setInterval para buscar el elemento padre de los campos shortcodes y añadir la clase container-shortcode para desabilitar opciones solo tendremos disponible value
		var $fieldsShortcode = $(".ui-sortable .shortcode-control");
		$fieldsShortcode.each(function (index) {
			$(this).parents("li").addClass("container-shortcode");
			//Añadiendo name="wpCf7Shortcode", cuando duplicamos se añade name al azar no queremos que ocurra eso
			$(this).attr('name', 'wpCf7Shortcode');
		});

		//Buscando elementos para campos de tipo URL
		var $fieldsShortcode = $(".ui-sortable .url-control");
		$fieldsShortcode.each(function (index) {
			$(this).parents("li").addClass("container-input-url");
			//Añadiendo name="wpCf7Shortcode", cuando duplicamos se añade name al azar no queremos que ocurra eso
			$(this).attr('name', 'wpCf7Url');
		});

		//Buscando elementos para campos de tipo EMAIL
		var $fieldsShortcode = $(".ui-sortable .email-control");
		$fieldsShortcode.each(function (index) {
			$(this).parents("li").addClass("container-email-control");
			//Añadiendo name="wpCf7Shortcode", cuando duplicamos se añade name al azar no queremos que ocurra eso
			$(this).attr('name', 'wpCf7Email');
		});

		//Añadiendo clase a padre de editor:trumbowyg
		var $fieldsEditorHtml = $(".ui-sortable .trumbowyg-control");
		$fieldsEditorHtml.each(function (index) {
			$(this).parents("li").addClass("container-trumbowyg");
		});

		//Evitando que se abra editor de campo trumbowyg
		$(".container-trumbowyg .field-label, .container-trumbowyg .trumbowyg-button-group button, .container-trumbowyg .trumbowyg-control").dblclick(function (e) {
			e.stopPropagation();
			e.preventDefault();
		});

		//Añadiendo estilos a contedor de elementos que tienen ancho 33% y 50%

		//Campos input
		$(".form-builder input[width='width-50']")
				.parents('li.form-field')
				.removeClass("container-preview-50 container-preview-33 container-preview-100")
				.addClass("container-preview-50");
		$(".form-builder input[width='width-33']")
				.parents('li.form-field')
				.removeClass("container-preview-50 container-preview-33 container-preview-100")
				.addClass("container-preview-33");
		$(".form-builder input[width='width-100'], .form-builder input[width='width-0']")
				.parents('li.form-field')
				.removeClass("container-preview-50 container-preview-33 container-preview-100")
				.addClass("container-preview-100");

		//Campos textarea
		$(".form-builder textarea[width='width-50']")
				.parents('li.form-field')
				.removeClass("container-preview-50 container-preview-33 container-preview-100")
				.addClass("container-preview-50");
		$(".form-builder textarea[width='width-33']")
				.parents('li.form-field')
				.removeClass("container-preview-50 container-preview-33 container-preview-100")
				.addClass("container-preview-33");
		$(".form-builder textarea[width='width-100'], .form-builder textarea[width='width-0']")
				.parents('li.form-field')
				.removeClass("container-preview-50 container-preview-33 container-preview-100")
				.addClass("container-preview-100");

		//Campos select
		$(".form-builder select[width='width-50']")
				.parents('li.form-field')
				.removeClass("container-preview-50 container-preview-33 container-preview-100")
				.addClass("container-preview-50");
		$(".form-builder select[width='width-33']")
				.parents('li.form-field')
				.removeClass("container-preview-50 container-preview-33 container-preview-100")
				.addClass("container-preview-33");
		$(".form-builder select[width='width-100'], .form-builder select[width='width-0']")
				.parents('li.form-field')
				.removeClass("container-preview-50 container-preview-33 container-preview-100")
				.addClass("container-preview-100");

		//Campos submit
		$(".form-builder button[width='width-50']")
				.parents('li.form-field')
				.removeClass("container-preview-50 container-preview-33 container-preview-100")
				.addClass("container-preview-50");
		$(".form-builder button[width='width-33']")
				.parents('li.form-field')
				.removeClass("container-preview-50 container-preview-33 container-preview-100")
				.addClass("container-preview-33");
		$(".form-builder button[width='width-100'], .form-builder select[width='width-0']")
				.parents('li.form-field')
				.removeClass("container-preview-50 container-preview-33 container-preview-100")
				.addClass("container-preview-100");

		//Añadiendo estilos para vista preview de checkbox y radio-group
		$(".form-builder.form-plain input[type='radio'][width='width-33']").parents('label').css("width", "33%");
		$(".form-builder.form-plain input[type='checkbox'][width='width-33']").parents('label').css("width", "33%");

		$(".form-builder.form-plain input[type='radio'][width='width-50']").parents('label').css("width", "50%");
		$(".form-builder.form-plain input[type='checkbox'][width='width-50']").parents('label').css("width", "50%");

		$(".form-builder.form-plain input[type='radio'][width='width-100']").parents('label').css("width", "100%");
		$(".form-builder.form-plain input[type='checkbox'][width='width-100']").parents('label').css("width", "100%");

		//Evitando que se propague el evento toggle de campo edit
		$(".form-elements").dblclick(function (e) {
			e.stopPropagation();
			e.preventDefault();
		});

		//Extrayendo valor de campo trumbowyg para agregarlo al campo value del elemento padre
		var $allTrumbowyg = $("div[type='trumbowyg']");
		$allTrumbowyg.each(function (index) {

			//Extrayendo valor html de campo
			//console.log("this Trumbowyg", $(this) );
			var valueTrumbowyg = $(this)[0].innerHTML;

			//Añadiendo valor HTML a campo value para poder generar luego html en contact form 7
			var $valueTextCurrent = $(this).parents("li.form-field").find(".value-wrap input");
			$valueTextCurrent.val(valueTrumbowyg);
			//console.log("Este es el valor de cada campo Trumbowyg" , valueTrumbowyg);
		});


	}, 1000);

	setInterval(function () {

		/*****************************************************
		 form-buttonized-green
		 Añadiendo clase a checkbox-group y radio-group para aplicar estilos y colores diferentes
		 ******************************************************/
		var $checkboxGroupFormbuilderGreen = $('.form-buttonized.form-buttonized .ui-sortable .checkbox-group-field .checkbox input');
		$checkboxGroupFormbuilderGreen.each(function (index) {
			$(this).parents("label").removeClass("wpvsfb-checkbox-group");
		});

		//Añadiendo clase a checkbox-group que estan marcadas como check
		var $checkboxGroupFormbuilderGreenActive = $('.form-buttonized.form-buttonized .ui-sortable .checkbox-group-field .checkbox input:checked');
		$checkboxGroupFormbuilderGreenActive.each(function (index) {
			$(this).parents("label").addClass("wpvsfb-checkbox-group");
		});

		var $radioGroupFormbuilderGreen = $('.form-buttonized.form-buttonized .ui-sortable .radio-group .radio input');
		$radioGroupFormbuilderGreen.each(function (index) {
			$(this).parents("label").removeClass("wpvsfb-radio-group");
		});

		var $radioGroupFormbuilderGreenActive = $('.form-buttonized.form-buttonized .ui-sortable .radio-group .radio input:checked');
		$radioGroupFormbuilderGreenActive.each(function (index) {
			$(this).parents("label").addClass("wpvsfb-radio-group");
		});

	}, 500);

	setTimeout(function () {
		//Trigger para mostrar siempre la primera pestaña formBuilder
		$("#vg-form-builder-panel-tab a").trigger('click');
	}, 500);


	setTimeout(function () {
		//Nuevos estilos
		$(".frmb-control li:last-child").css({"border-radius": "0px"});

		//Agregando clases a elementos que vamos a desactivar
		var optionsDisable = [];
		for (var i = 1; i < vgcf7b_form_builder_settings.disableFields.length; i++) {
			optionsDisable[i] = vgcf7b_form_builder_settings.disableFields[i].charAt(0).toUpperCase() + vgcf7b_form_builder_settings.disableFields[i].substr(1);
		}
		var $containerDivs = $("<div class='container-disable'></div>");

		for (var itemField in optionsDisable) {

			var $divNewField = $("<div class='disable icon-" + vgcf7b_form_builder_settings.disableFields[itemField] + "'><div>");

			var nuevoCSS = {"background": '#f9f8f8', "padding": '10px', "border-radius": "0px", "border": "0.5px solid #c5c5c5", "margin": "0px 0 -1px", "text-align": "left"};
			$divNewField.css(nuevoCSS);
			var $action = $("<span class='item-disable'>" + optionsDisable [itemField] + "<span> " + vgcf7b_form_builder_settings.upgradeLink);
			$action.prependTo($divNewField);
			$containerDivs.append($divNewField);
		}
		$(".frmb-control").after($containerDivs);
		$(".container-disable div:last-child").css({"border-radius": "0 0 5px 5px"});
		$(".item-disable").css({"margin-left": "10px"});
	}, 2000);



	//Sacando string de input de plugin contactForm7 para ver comprobar si se a creado con formBuilder o no
	var inputPlugin = $('#wpcf7-form').val().toUpperCase();
	var buscandoInput = inputPlugin.search("<INPUT");
	var buscandoSelect = inputPlugin.search("<SELECT");
	var buscandoTextarea = inputPlugin.search("<TEXTAREA");
	var buscandoButton = inputPlugin.search("<BUTTON");
	console.log(inputPlugin);
	console.log(buscandoInput);

	function isUsingNewFormEditor() {
		return window.location.href.indexOf('wpcf7-new') > -1 || $('#wpcf7-form').val().indexOf('cf7-field-wrapper') > -1;
	}

	//Comprobando si se ha creado con html el form
	setTimeout(function () {

		if (!isUsingNewFormEditor()) {
			$("#form-panel-tab a").trigger("click");
		} else {
			$("#vg-form-builder-panel-tab a").trigger("click");
			$("#form-panel-tab a").text(vgcf7b_form_builder_settings.texts.old_form);
			jQuery('#form-panel').prepend(vgcf7b_form_builder_settings.dontUseOldEditorWarning);
		}
	}, 1000);


	$divActivo.before($divNuevo);

	jQuery('input[name="vg_two_columns"]').change(function (e) {
		if (jQuery(this).is(':checked')) {
			jQuery('.form-wrap.form-builder').addClass('vg-two-columns');
		} else {
			jQuery('.form-wrap.form-builder').removeClass('vg-two-columns');
		}
	});
	setTimeout(function () {
		jQuery('input[name="vg_two_columns"]').trigger('change');
	}, 400);


//Agrengando funcionalidad al boton de formBuilder 
	jQuery("#wpcf7-admin-form-element .button-primary").click(function (event) {
		event.preventDefault();

		var schemeColorActiveInPreview = $(".wpvsfb-active-preview").first().find(".wpvsfb-container-preview").attr("scheme-color");

		//Revisando si estamos en la vista preview si estamos en la vista previa activaremos ese formulario
		//console.log("Este es el color seleccionado: ", schemeColorActiveInPreview);

		if (schemeColorActiveInPreview) {
			if (schemeColorActiveInPreview === "form-plain") {
				appliedColorScheme = schemeColorActiveInPreview;
			} else {
				appliedColorScheme = "form-buttonized " + schemeColorActiveInPreview;
			}
		}


		//Llamando a funcion que nos genera HTML
		dataFormBuilder('wpcf7-form', formBuilderData);

		//LLamando a funcion que nos genera JSON
		var dataJson = formBuilderData.actions.getData('json');
		dataJson = editFieldNames(dataJson);

		//Removiendo datos repetidos para mostrar mensaje a usuario que revise porque hay campos repetidos
		var removeRepeatLabels = wpvsfb_removeDuplicatesLabel(dataJson, "label");

		if (dataJson.length > removeRepeatLabels.length) {
			var ignoreRepeatedFields = confirm(vgcf7b_form_builder_settings.texts.repeated_fields_notice);

			if (!ignoreRepeatedFields) {
				return;
			}
		}

		//Guardando esquema de color aplicado en el formBuilder
		dataJson.push({
			"type": "color",
			"label": "",
			"name": "wpcf7-color-current",
			"value": appliedColorScheme
		});

		dataJson = JSON.stringify(dataJson);

		//dataJson = '[{"type":"textarea","subtype":"trumbowyg","label":"Editor","className":"trumbowyg-control","name":"wpcf7-editor","value":"<strong>Hola mundo este es un parrafo</strong>","cols":"1"}]';
		console.log("Este es el json que guardamos", dataJson);


		$("#vg-form-builder-panel .vg-form-builder-settings").val(dataJson);

//Agregando shorcodes de plugin

		var resultadoForm = jQuery("#wpcf7-form").val();
		console.log("Resultados : " + resultadoForm);
		var $form = jQuery(resultadoForm);
		console.log("$form ", $form);

//Controladores:         
		var $campoInputText = $form.find('input[extension="text"]');
		var $campoTextarea = $form.find('textarea[type="textarea"]');
		var $campoButton = $form.find('button');
		var $campoDate = $form.find('input[type="date"]');
		var $campoFile = $form.find('input[type="file"]');
		var $campoInputNumber = $form.find('input[type="number"]');
		var $campoSelect = $form.find("select");
		var $campoRadio = $form.find("div.radio-group");
		var $campoCheckbox = $form.find('div.checkbox-group');
		var $campoHidden = $form.closest('input[type=hidden]');
		var $campoInputTextUrl = $form.find('input[extension="url"]');
		var $campoInputEmail = $form.find('input[extension="email"]');
		var $encabezados = $form.find('header');
		var $parrafos = $form.find('p');
		var $camposTrumbowyg = $form.find('textarea[type="trumbowyg"]');

//Codigo para poder extraer los datos del editor Trumbowyg 
		$camposTrumbowyg.each(function (index) {

			if ($camposTrumbowyg[index].tagName == 'TEXTAREA') {
				var reemplazo = $form.find('textarea[type="trumbowyg"]').first();
				var siblingsTrumbowyg = reemplazo.siblings('label');

				var value = reemplazo[0].value;
				var $label = "<div class='paragraph-trumbowyg'>" + value + "</div>";

				reemplazo.after($label);
				reemplazo.remove();
				siblingsTrumbowyg.remove();
			}
		});


//Codigo para poder extraer los parrafos y añadir clases 
		$parrafos.each(function (index) {
			console.log("Estos son los parrafos: ", $parrafos[index].tagName, $parrafos[index]);
			if ($parrafos[index].tagName == 'P') {
				var reemplazo = $form.find('P').first();
				var textTag = reemplazo[0].innerText;

				//Class name
				var clases = "";
				var $hijosClass = $(reemplazo[0].classList);

				$hijosClass.each(function (index, value) {
					console.log("Class: ", index, value);
					if (index == 0) {
						clases = value;
					} else {
						clases = clases + " " + value;
					}
				});

				//Obtendiendo el ancho en el que debemos de mostrar el campo
				var anchoDeItem = reemplazo.attr("width") || null;
				if (anchoDeItem) {
					if (anchoDeItem === 'width-100') {
						clases = clases + ' cft7b-width-100';
					} else if (anchoDeItem === 'width-50') {
						clases = clases + ' cft7b-width-50';
					} else if (anchoDeItem === 'width-33') {
						clases = clases + ' cft7b-width-33';
					}
				}

				if (clases.length > 0) {
					clases = "class='" + clases + "'";
				}

				var $label = "<p " + clases + ">" + textTag + "</p>";
				//campos[index] = div;
				reemplazo.after($label);
				reemplazo.remove();
			}
		});

//Codigo para extraer encabezados
		$encabezados.each(function (index) {
			if ($encabezados[index].tagName == 'HEADER') {
				var reemplazo = $form.find('header').first();
				var textTag = reemplazo[0].innerText;

				//Class name
				var clases = "";
				var $hijosClass = $(reemplazo[0].classList);

				$hijosClass.each(function (index, value) {
					console.log("Class: ", index, value);
					if (index == 0) {
						clases = value;
					} else {
						clases = clases + " " + value;
					}
				});

				//Obtendiendo el ancho en el que debemos de mostrar el campo
				var anchoDeItem = reemplazo.attr("width") || null;
				if (anchoDeItem) {
					if (anchoDeItem === 'width-100') {
						clases = clases + ' cft7b-width-100';
					} else if (anchoDeItem === 'width-50') {
						clases = clases + ' cft7b-width-50';
					} else if (anchoDeItem === 'width-33') {
						clases = clases + ' cft7b-width-33';
					}
				}

				if (clases.length > 0) {
					clases = "class='" + clases + "'";
				}

				var $label = "<h3 " + clases + ">" + textTag + "</h3>";
				//campos[index] = div;
				reemplazo.after($label);
				reemplazo.remove();
			}
		});

//Codigo para input text de tipo email
		$campoInputEmail.each(function (index) {
			if ($campoInputEmail[index].tagName == 'INPUT') {
				var reemplazo = $form.find('input[extension="email"]').first();
				inputData(reemplazo, "email");
			}
		});
//Codigo para input text de tipo url
		$campoInputTextUrl.each(function (index) {
			if ($campoInputTextUrl[index].tagName == 'INPUT') {
				var reemplazo = $form.find('input[extension="url"]').first();
				inputData(reemplazo, "url");
			}
		});

//Input HIDDEN
		console.log("Campos de tipo hidden: ", $campoHidden);
		$campoHidden.each(function (index, value) {
			if ($campoHidden[index].tagName == 'INPUT') {
				var reemplazo = $form.closest('input[type="hidden"]').first();

				//Extrayendo data de label y eliminandolo tambien
				var name = $(value).attr("name");
				console.log("Este es el name de los campos hidden: ", );

				var defaultValue = "";
				if ($(value).attr("logginvalue")) {
					defaultValue = " default:" + $(value).attr("logginvalue");
				}

				//value
				var value = reemplazo[0].value;

				if (defaultValue != "" && defaultValue) {
					value = defaultValue;
				} else if (value != "" && value) {
					value = ' ' + 'default="' + value + '"';
				}

				var $label = "<div>[hidden " + name + value + "]</div>";
				//campos[index] = div;
				reemplazo.prepend($label);
				reemplazo.remove();
			}
		});

//Codigo de campoCheccbox
		$campoCheckbox.each(function (index) {
			if ($campoCheckbox[index].tagName == 'DIV') {
				var reemplazo = $form.find('div.checkbox-group').first();
				var informacion = reemplazo.find('input[type="checkbox"]').first();
				var checkboxs = reemplazo.find('div.checkbox');
				var labelValor = reemplazo.prev();
				var textLabel = labelValor[0].innerText;

				//Extrayendo data de label y eliminandolo tambien
				var contentLabel;

				var name = informacion[0].name;
				var buscandoBrackets = name.indexOf("[]");
				var cortar = name.slice(-2);
				var nuevoName = name;

				//Required
				var required = informacion[0].required;
				var astedisco = "";
				if (required == true) {
					astedisco = "*";
				}

				if (cortar == "[]") {
					nuevoName = name.slice(0, buscandoBrackets);
				}

				//Bucle para sacar hijos de check  
				var resultado = '';
				checkboxs.each(function (index, value) {
					console.log("Valor de checkbox: ", $(checkboxs[index]));
					var valorCheckbox = checkboxs[index].outerText.trim();
					resultado = resultado + '"' + valorCheckbox + '" ';
				});

				//Class name
				var clases = "";
				var $hijosClass = $(informacion[0].classList);
				$hijosClass.each(function (index, value) {
					clases = clases + "class:" + value + " ";
				});

				//Obtendiendo el ancho en el que debemos de mostrar el campo
				var claseAncho = "";
				var anchoDeItem = informacion.attr("width") || null;
				if (anchoDeItem) {
					if (anchoDeItem === 'width-100') {
						claseAncho = 'cft7b-width-100 ';
					} else if (anchoDeItem === 'width-50') {
						claseAncho = 'cft7b-width-50 ';
					} else if (anchoDeItem === 'width-33') {
						claseAncho = 'cft7b-width-33 ';
					}
				}

				var itemsDeTipoCheckbox = reemplazo.find('input[type="checkbox"]');
				var camposSeleccionados = "";

				itemsDeTipoCheckbox.each(function (index) {
					var $valorRadio = $(itemsDeTipoCheckbox[index]);

					if ($valorRadio.is(':checked')) {
						if (camposSeleccionados === "") {
							camposSeleccionados = index + 1;
						} else {
							camposSeleccionados += "_" + (index + 1);
						}
					}
				});

				//Default value: Valor por defecto seleccionado
				var defaultValueChecked = "";
				if (camposSeleccionados !== "") {
					defaultValueChecked = "default:" + camposSeleccionados + " ";
				}

				var $label = "<p class='cf7-field-wrapper " + claseAncho + "'><span class='label'>" + textLabel + "</span> [checkbox " + astedisco + nuevoName + " use_label_element " + clases + defaultValueChecked + resultado + "]</p>";

				//[checkbox checkbox-276 "opcion-1" "opcion-2" "opcion-3"] 

				reemplazo.after($label);
				reemplazo.remove();
				labelValor.remove();
			}
		});

//Codigo de campo radio        
		$campoRadio.each(function (index) {
			if ($campoRadio[index].tagName == 'DIV') {
				var reemplazo = $form.find('div.radio-group').first();

				//Extrayendo data de label y eliminandolo tambien
				var contentLabel = reemplazo.prev();
				var textLabel = contentLabel[0].textContent;
				contentLabel.remove();

				var objetosRadio = reemplazo.find('label');

				// var name = objetosRadio[0].name; sacar nombre de input type
				var name = reemplazo.find('input[type="radio"]')[0].name;

				var resultado = "";

				//Obteniendo los valores para el input.radio
				objetosRadio.each(function (index) {
					var valorRadio = objetosRadio[index].outerText.trim();
					resultado = resultado + '"' + valorRadio + '" ';
				});

				//Obteniendo datos de tipo radio para poder determinar cuales campos estan seleccionados
				var itemsDeTipoRadio = reemplazo.find('input[type="radio"]');
				var camposSeleccionados = "";

				itemsDeTipoRadio.each(function (index) {
					var $valorRadio = $(itemsDeTipoRadio[index]);

					if ($valorRadio.is(':checked')) {
						if (camposSeleccionados === "") {
							camposSeleccionados = index + 1;
						} else {
							camposSeleccionados += "_" + (index + 1);
						}
					}
				});


				//Class name
				var clases = "";
				var $hijosClass = $(reemplazo.find('input[type="radio"]')[0].classList);
				$hijosClass.each(function (index, value) {
					clases = clases + "class:" + value + " ";
				});

				//Obtendiendo el ancho en el que debemos de mostrar el campo
				var claseAncho = "";
				var anchoDeItem = itemsDeTipoRadio.attr("width") || null;
				if (anchoDeItem) {
					if (anchoDeItem === 'width-100') {
						claseAncho = 'cft7b-width-100 ';
					} else if (anchoDeItem === 'width-50') {
						claseAncho = 'cft7b-width-50 ';
					} else if (anchoDeItem === 'width-33') {
						claseAncho = 'cft7b-width-33 ';
					}
				}

				//Required
				var required = reemplazo[0].required;
				var astedisco = "";
				if (required == true) {
					astedisco = "*";
				}

				//Default value: Valor por defecto seleccionado
				var defaultValueChecked = "";
				if (camposSeleccionados !== "") {
					defaultValueChecked = "default:" + camposSeleccionados + " ";
				}

				var $label = "<p class='cf7-field-wrapper " + claseAncho + "'><span class='label'>" + textLabel + "</span> [radio " + astedisco + name + " use_label_element default:1 " + clases + defaultValueChecked + resultado + "]</p>";

				reemplazo.after($label);
				reemplazo.remove();
			}
		});



//Codigo para input text
		$campoInputText.each(function (index) {
			if ($campoInputText[index].tagName == 'INPUT') {
				var reemplazo = $form.find('input[extension="text"]').first();
				inputData(reemplazo, "text");
			}
		});

//Codigo para textarea        
		$campoTextarea.each(function (index) {
			if ($campoTextarea[index].tagName == 'TEXTAREA') {
				// var label = $("<label>[textarea]</label>");
				var reemplazo = $form.find("textarea").first();
				inputData(reemplazo, "textarea");
			}
		});

//Codigo para botones    
		$campoButton.each(function (index) {
			if ($campoButton[index].tagName == 'BUTTON') {
				var reemplazo = $form.find("button").first();

				var name = reemplazo[0].innerText;

				//Class name utilizar ClassList y generar loop para sacar clases
				var clases = "";
				var $hijosClass = $(reemplazo[0].classList);
				$hijosClass.each(function (index, value) {
					clases = clases + "class:" + value + " ";
				});

				//Extrayendo el ancho que debemos de mostrar al campo
				var claseAncho = "";
				var anchoDeItem = reemplazo.attr("width") || null;
				if (anchoDeItem) {
					if (anchoDeItem === 'width-100') {
						claseAncho = 'cft7b-width-100 ';
					} else if (anchoDeItem === 'width-50') {
						claseAncho = 'cft7b-width-50 ';
					} else if (anchoDeItem === 'width-33') {
						claseAncho = 'cft7b-width-33 ';
					}
				}

				var $label = "<p class='cf7-field-wrapper cf7-button-field " + claseAncho + "'>[submit " + clases + '"' + name + '"]</p>';

				reemplazo.after($label);
				reemplazo.remove();
			}
		});

//Codigo para DATE
		$campoDate.each(function (index) {
			//[date* fecha class:fechas placeholder "04/08/95"]
			if ($campoDate[index].tagName == 'INPUT') {
				var reemplazo = $form.find('input[type="date"]').first();
				inputData(reemplazo, "date");
			}
		});


//Codigo para FILE
		$campoFile.each(function (index) {
			//[date* fecha class:fechas placeholder "04/08/95"]
			if ($campoFile[index].tagName == 'INPUT') {
				var reemplazo = $form.find('input[type="file"]').first();
				inputData(reemplazo, "file")
			}
		});

//Input number
		$campoInputNumber.each(function (index) {
			if ($campoInputNumber[index].tagName == 'INPUT') {
				var reemplazo = $form.find('input[type="number"]').first();

				//Extrayendo data de label y eliminandolo tambien
				var contentLabel = reemplazo.prev();
				var textLabel = contentLabel[0].textContent;
				contentLabel.remove();
				var name = reemplazo[0].name;
				var min = "";
				var max = "";
				var placeholder = reemplazo[0].placeholder;
				//Variables para guardar atributos de campo number
				var stepNumber = "";

				if (placeholder != "") {
					placeholder = 'placeholder ' + '"' + placeholder + '"';
				}
				//Required
				var required = reemplazo[0].required;
				var astedisco = "";
				if (required == true) {
					astedisco = "*";
				}
				//Class name
				var clases = "";
				var $hijosClass = $(reemplazo[0].classList);
				$hijosClass.each(function (index, value) {
					clases = clases + " class:" + value + " ";
				});

				//Extrayendo el ancho que debemos de mostrar al campo
				var claseAncho = "";
				var anchoDeItem = reemplazo.attr("width") || null;
				if (anchoDeItem) {
					if (anchoDeItem === 'width-100') {
						claseAncho = 'cft7b-width-100 ';
					} else if (anchoDeItem === 'width-50') {
						claseAncho = 'cft7b-width-50 ';
					} else if (anchoDeItem === 'width-33') {
						claseAncho = 'cft7b-width-33 ';
					}
				}

				//Extrayendo campos para generar label y shortcode de contact form 7
				if (reemplazo[0].min) {
					min = " min:" + reemplazo[0].min + " ";
				}
				if (reemplazo[0].max) {
					max = " max:" + reemplazo[0].max + " ";
				}
				if (reemplazo[0].step) {
					stepNumber = " step:" + reemplazo[0].step + " ";
				}


				//value
				var value = reemplazo[0].value;

				if (value != "" && value) {
					value = 'default:' + '"' + value + '"';
				}

				var $label = "<p class='cf7-field-wrapper " + claseAncho + "'><label><span class='label'>" + textLabel + "</span> " + "[number " + astedisco + " " + name + clases + min + max + stepNumber + placeholder + " " + value + "]</label></p>";

				//campos[index] = div;
				reemplazo.after($label);
				reemplazo.remove();
			}
		});

//Loop para select 
		$campoSelect.each(function (index) {
			if ($campoSelect[index].tagName == 'SELECT') {
				var reemplazo = $form.find('select').first();


				var contentLabel = reemplazo.prev();
				var textLabel = contentLabel[0].textContent;
				contentLabel.remove();
				var name = reemplazo[0].name;
				var buscandoBrackets = name.indexOf("[]");
				var cortar = name.slice(-2);
				var nuevoName = name;

				if (cortar == "[]") {
					nuevoName = name.slice(0, buscandoBrackets);
				}

				//Sacando Option e imprimiendolos
				var option = '';
				var $selectHijos = $(reemplazo[0].children);
				$selectHijos.each(function (index, value) {
					var hijoSelect = $(value);
					option = option + '"' + hijoSelect[0].innerText + '" ';
				});

				//Obteniendo datos de tipo radio para poder determinar cuales campos estan seleccionados
				var itemsDeTipoSelect = reemplazo.find('option');
				var camposSeleccionados = "";
				console.log("Campos de tipo select: ", itemsDeTipoSelect);

				itemsDeTipoSelect.each(function (index) {
					var $valorSelect = $(itemsDeTipoSelect[index]);

					if ($valorSelect.is(':selected')) {
						if (camposSeleccionados === "") {
							camposSeleccionados = index + 1;
						} else {
							camposSeleccionados += "_" + (index + 1);
						}
					}
				});


				//Class name: Sacando las clases de los elementos
				var clases = "";
				var $hijosClass = $(reemplazo[0].classList);
				$hijosClass.each(function (index, value) {
					clases = clases + "class:" + value + " ";
				});

				//Obtendiendo el ancho en el que debemos de mostrar el campo
				var claseAncho = "";
				var anchoDeItem = reemplazo.attr("width") || null;
				if (anchoDeItem) {
					if (anchoDeItem === 'width-100') {
						claseAncho = 'cft7b-width-100 ';
					} else if (anchoDeItem === 'width-50') {
						claseAncho = 'cft7b-width-50 ';
					} else if (anchoDeItem === 'width-33') {
						claseAncho = 'cft7b-width-33 ';
					}
				}


				//Required
				var required = reemplazo[0].required;
				var astedisco = "";
				if (required == true) {
					astedisco = "*";
				}

				//Multiple
				var multiple = reemplazo[0].multiple;
				var valorMultiple = "";

				if (multiple == true) {
					valorMultiple = " multiple ";
				}

				var defaultValueChecked = "";
				if (camposSeleccionados !== "") {
					defaultValueChecked = "default:" + camposSeleccionados + " ";
				}

				var $label = "<p class='cf7-field-wrapper " + claseAncho + "'><label><span class='label'>" + textLabel + "</span> [select" + astedisco + " " + nuevoName + valorMultiple + " " + clases + defaultValueChecked + option + "]</label></p>";

				reemplazo.after($label);
				reemplazo.remove();
			}
		});

		var formHTML = imprimiendoHTML($form).replace('<header', '<h3').replace('</header', '</h3');
		console.log("Estos contiene el form", formHTML);

		if (formHTML) {
			//Cuando tengamos contenido sobreescriberemos los valores iniciales de contact form 7
			console.log("Esto contiene la clase para aplicar colores: ", appliedColorScheme);


			if (appliedColorScheme !== 'form-plain') {
				formHTML = '<div class="form-wpvsfb ' + appliedColorScheme + '">' + formHTML + '</div>';

				//Añadir hoja de estilos externo para buttonized.
				//wpCf7ScriptUrl script creado en index.php contiene el path de plugins
				let linkStyleButtonized = wpCf7ScriptUrl.pluginUrl + "/form-styles/style-front-page/style-buttonized.css";
				formHTML += "<link rel='stylesheet' type='text/css' href='" + linkStyleButtonized + "'>"
			}

			//Añadiendo hoja de estilos externo style-grid
			//wpCf7ScriptUrl script creado en index.php contiene el path de plugins
			let linkStyleGrid = wpCf7ScriptUrl.pluginUrl + "/form-styles/style-front-page/style-grid-form.css";
			formHTML += "<link rel='stylesheet' type='text/css' href='" + linkStyleGrid + "'>"

			if (jQuery('input[name="vg_two_columns"]:checked').length) {
				//Añadiendo hoja de estilos externo styleTwoColumnsForm
				//wpCf7ScriptUrl script creado en index.php contiene el path de plugins
				let linkStyleTwoColumns = wpCf7ScriptUrl.pluginUrl + "/form-styles/style-front-page/style-two-columns-form.css";
				formHTML += "<link rel='stylesheet' type='text/css' href='" + linkStyleTwoColumns + "'>"
			}

			jQuery("#wpcf7-form").val(formHTML);
		} else {
			//No tenemos contenido en el formBuilder seguiremos guardando con contact form 7
			jQuery("#wpcf7-form").val(valuePrevious);
		}

		//Enviando formulario nos sirve para guardar los datos   
		$("#wpcf7-admin-form-element").submit();


	});//fin de click boton

});//Fin de Jquery

