in process

questionsInWP.js

$ = jQuery.noConflict();

function menuRespuesta(id){
	var htmlTextArea = `<div class="c-wrap-menu b1">
		<span  class="c-open-menu">
			<span class="fa fa-caret-down"></span>
		</span>
		<div class="c-menu-desplegable">
			<h3 class="c-menu-title">Tipo de respuesta</h3>
			<ul class="c-menu-list">
				<li>
					<a data-id="'+id+'" data-type="textarea" class="c-select-tipo active">Área de texto</a>
				</li>
				<li>
					<a data-id="'+id+'" data-type="checkbox" onclick="openModal(this)" class="c-select-tipo c-open-modal">Checkbox</a>
				</li>
				<li>
					<a data-id="'+id+'" data-type="option" onclick="openModal(this)"  class="c-select-tipo c-open-modal">Seleccionar opción</a>
				</li>
			</ul>
		</div>
	</div>`;
	return htmlTextArea;
}
function modalBox(id,textButton,typeResponse){
	var htmlModalBox = '<div class="modalWrap modal-cuestionario">'+
		'<div class="modalOverlay"></div>'+
		'<div class="wrapBoxInner">'+
			'<div class="boxContent">'+
				'<h3 class="c-title-filling">Tipo de Respuesta:<span>'+textButton+'</span></h3>'+
				'<div class="c-wrap-filling" data-id="'+id+'">'+
					'<div class="c-inputs-fill">'+
						'<div class="c-input-fill-item">'+
							'<input type="text" placeholder="Escriba una opcion">'+
						'</div>'+
					'</div>'+
					'<div class="c-input-buttons right">'+
						'<button onclick="addMoreInput()" class="c-btn">Agregar +</button>'+
					'</div>'+
				'</div>'+
			'</div>'+
			'<div class="boxControls">'+
				'<button data-id="'+id+'" data-type="'+typeResponse+'" onclick="saveModal(this)" class="saved-modal c-btn">'+
					'Guardar'+
				'</button>'+
				'<button data-id="'+id+'" onclick="cancelModal()" class="cancel-modal c-btn">'+
					'Cancelar'+
				'</button>'+
			'</div>'+
		'</div>'+
	'</div>';
	return htmlModalBox;
}
function addMoreInput(){
	var currentInput = document.querySelectorAll(".c-input-fill-item");
	var lastInput = currentInput.length - 1;
	var htmlInput ='<div class="c-input-fill-item">'+
		'<input type="text" placeholder="Escriba una opcion">'+
	'</div>';
	currentInput[lastInput].insertAdjacentHTML('afterend', htmlInput);

	console.log("lastInput",lastInput)
}
function openModal(event){
	var dataId = event;
	var id = dataId.getAttribute("data-id");
	var textButton = dataId.textContent;
	var typeResponse = dataId.getAttribute("data-type")
	var ubicationModal = document.querySelector("#wpwrap");
	console.log("body",textButton)
	ubicationModal.insertAdjacentHTML('afterend', modalBox(id,textButton,typeResponse));
	console.log("idxxdataid",dataId)
	console.log("idxx",id)
}
function cancelModal(){
	var elementModal = document.querySelector(".modalWrap");
	elementModal.remove();
}


function saveModal(event){
	var btnSave = event;
	var btnSaveId = btnSave.getAttribute("data-id");
	var typeValueResponse = btnSave.getAttribute("data-type");
	console.log("btnSave",btnSaveId);
	var inputsElements = document.querySelectorAll(".c-input-fill-item input");
	console.log("inputsElements",inputsElements)

	var inputValuesData ={
			options:[],
			parameters:typeValueResponse
	};

	 if (inputsElements[0].value.trim() === "") {
	 	alert("Debe llenar al menos una opción");
	 }else{
		for(var e = 0; e < inputsElements.length; e++ ){
			var inputValue = inputsElements[e];
			
			if (inputValue.value.trim() === "") {

			}else{
				console.log("ddddd",inputValue.value);
				var infod ={};
				infod['value'] = inputValue.value;
				console.log("infod",infod)
				inputValuesData.options.push(infod);		
			}
		}	
		var dataForSaved = document.querySelector('textarea[id="'+btnSaveId+'"]');
		dataForSaved.value = JSON.stringify(inputValuesData);
		cancelModal();
		console.log("inputValuesData",inputValuesData)	 	
	 }

}
// bloque 1: recorriendo los inputs para agregar menu tipo de respuesta
var itemsQuestions = document.querySelectorAll(".tipo_respuesta textarea");
for(var i = 0; i < itemsQuestions.length; i++ ){
	var element = itemsQuestions[i];
	var hasValue = element.value
	var parentTextarea = element.closest(".acf-input");
	var idElement = element.getAttribute("id");
	
	if (hasValue.length > 0) {
		parentTextarea.insertAdjacentHTML('afterend', menuRespuesta(idElement));

		
	}
}



$(document).ready(function() {



});