@extends('layouts.app')
@section('head')

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

 
@endsection
@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default">
                <div class="panel-heading">{{$title}}</div>
                <div class="panel-body">
                	<h3>{{$poll->name}}</h3>
                	<p class="col-md-8">{{$poll->text}}</p>
                    <form id="form" class="form-horizontal" role="form" method="POST" id="mainForm">

                                                @if (count($errors) > 0)
                            <div class="alert alert-danger">
                                <ul>
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif
                        @foreach ($poll->questions as $question)
                            <div class="form-group{{ $errors->has($question->id) ? ' has-error' : '' }}">
                                <div for="{{$question->id}}" class="col-md-9">
                                	<label>{{$i + 1}}. {{$question->question}}</label>
                                	<p>{{$question->text}}</p>
                                </div>

                                <div  class="col-md-9">
                                	@if($question->type == 0)
                                    	<input id="{{$question->id}}" type="text" class="form-control" name="{{$question->id}}" value="" autofocus>

	                                @elseif($question->type == 1)
	                                	<input type="radio" name="{{$question->id}}" value="1"> Si<br>
										<input type="radio" name="{{$question->id}}" value="0"> No<br>
	                                @else
	                                	<input type="radio" name="{{$question->id}}" value="1"> 1<br>
	                                	<input type="radio" name="{{$question->id}}" value="2"> 2<br>
	                                	<input type="radio" name="{{$question->id}}" value="3"> 3<br>
	                                	<input type="radio" name="{{$question->id}}" value="4"> 4<br>
	                                	<input type="radio" name="{{$question->id}}" value="5"> 5<br>
	                                @endif
                                    @if ($errors->has($question->id))
                                        <span class="help-block">
                                            <strong>{{ $errors->first($question->id) }}</strong>
                                        </span>
                                    @endif
                                </div>
                            </div>
                                                    @endforeach
                        <div class="form-group">
                            <div class="col-md-6 col-md-offset-4">
                                <button id="solve" type="submit" class="btn btn-primary">
                                    Guardar
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
	$(document).ready(function() {

		 // process the form
	    $('form').submit(function(event) {
	    		        event.preventDefault();

	    	/*
{
	"client_id": 25,
	"trigger_type": "venta",
	"trigger_id": 0,
	"answers":
	[
		{
			"question_id": 88,
			"answer": "Me pareció bueno"
		},
		{
			"question_id": 89,
			"answer": 5
		},
		{
			"question_id": 90,
			"answer": true
		}
	]
}
	    	*/
	        // get the form data
	        // there are many ways to get this data using jQuery (you can use the class or id also)
	        var formData = {
	            'client_id' : "{{$clientId}}",
	            'trigger_id' :'{{$triggerId}}',
	            'trigger_type' : '{{$triggerType}}',
	            'user_id' : '{{$userId}}'
	        };
	        var questions = @json($poll->questions);
	        var answers = []
	        for (var i = questions.length - 1; i >= 0; i--) 
	        {
	        	var ans = $('input[name=' + questions[i]['id'] + ']').val()
	        	if (questions[i]["type"] != 0) 
	        	{
	        		ans = $('input[name=' + questions[i]['id'] + ']:checked').val();
	        	}
	        	answers.push({'question_id': questions[i]['id'], 'answer': ans})
	        }
	        formData['answers'] = answers
	        console.log(formData);
	        
	        // process the form
	        $.ajax({
	            type        : 'POST', // define the type of HTTP verb we want to use (POST for our form)
	            url         : "{{url('api/cliente/encuesta')}}/{{$poll->id}}", // the url where we want to POST
	            data        : formData, // our data object
	            dataType    : 'json', // what type of data do we expect back from the server
                encode          : true
	        })
	            // using the done promise callback
	            .done(function(data) {

	                // log data to the console so we can see
	                console.log(data); 
	                document.location.reload()
	                // here we will handle errors and validation messages
	            });

	        // stop the form from submitting the normal way and refreshing the page
	        

	    });
    });

</script>
@endsection