@extends('forms.add')
@section('moreFields')

	
	<div>
		<label for="text" class="col control-label">Texto descriptivo de la encuesta</label>
        <div class="">
        	<textarea name='text' rows="5"  form='mainForm' style="width:100%;"></textarea>
        </div>
	</div>
	<div class="col">
		<label for="text" class="col-md-1 control-label">Area</label>
        <div class="">
        	<select name="rolId" form="mainForm">
				@foreach ($roles as $rol)
			  		<option value="{{$rol->id}}">{{$rol->name}}</option>
		  		@endforeach
			</select> 
        </div>
	</div>
	<br>
	<ul id="questions">
	</ul>
	<br>
	<br>
	<b>Agregar preguntas</b>
	<br>
	<br>
	<div class="col">
		<input type="text" id="questionName" placeholder="Pregunta">
		<select id="type">
			<option value="0">Abierta</option>
			<option value="1">Si o No</option>
			<option value="2">Calificación</option>
		</select>
		<br>
		<b>Breve explicación de la pregunta</b>
    	<textarea id='questionText' rows="3" style="width:100%;"></textarea>
		<br>
    	<a onclick="addQuestion()">Agregar Pregunta</a>
		<br>
		<br>
		<br>
	</div>
	<script>
		var questions = []
		function addQuestion() 
		{
			if ($('#questionName').val().length > 0) 
			{
				questions.push(
					{
						'question': $('#questionName').val(), 
						'type': $('#type').val(), 
						'typeName':$('#type option:selected').text(),
						'text': $('#questionText').val()
					})
				$('#questionName').val('')
				drawQuestions()
			}
			
		}
		function drawQuestions() 
		{
			var ulhtml = ''

			for (var i = 0; i < questions.length; i++) 
			{
				var question = questions[i]
				console.log(question)
				var nameInputName = "questions[" + i + "][question]"
				var nameInput = "<input name='" + nameInputName + "' type='text' value='" + question['question'] + "'>"

				var typeInputName = "questions[" + i + "][type]"
				var typeInput = "<input type='text' name='" + typeInputName + "' value='" + question['type'] + "' hidden>"

				var textAreaName = "questions[" + i + "][text]"
				var textArea = "<input name='" + textAreaName + "' type='text' value='" + question['text'] + "'>"

				ulhtml = ulhtml + "<li>Pregunta " + (i + 1) + ": " + nameInput + " tipo: " + question['typeName'] + typeInput + "<br>" + textArea + "<a onclick='removeQuestion(" + i + ")'>Quitar</a></li>"
			}
			$('#questions').html(ulhtml);
		}
		function removeQuestion(question) 
		{
			var newQuestions = []
			for (var i = 0; i < questions.length; i++) 
			{
				if (question != i) 
				{
					newQuestions.push(questions[i])
				}
			}
			questions = newQuestions;
			console.log(question)
			drawQuestions();
		}
	</script>
@endsection