@extends('template.layout')

@section('content')
    <h1 class="page-title">
        <a href="{{ url('encuestas') }}" title="Volver"><i class="icon-action-undo"></i></a>
        Encuestas Acad&eacute;micas
    </h1>

    <div class="portlet light bordered">
        <div class="portlet-title">
            <div class="caption">Encuesta: {{ $encuesta->nombre }}</div>
            <div class="actions">
            </div>
        </div>
        <div class="portlet-body">
            {!! Form::hidden('EncuestaUsuarioId', $encuesta_usuario->id) !!}
            @for ($i = 0;  $i < count($encuesta->preguntas); $i++)
                @if ($encuesta->preguntas[$i]->id_tipo_pregunta == 1)
                    <div class="form-group">
                        <div id="{{ 'Pregunta_'.$encuesta->preguntas[$i]->id }}" class="form-group PreguntaValue pregunta-encuesta">{{$i+1}}.- {{$encuesta->preguntas[$i]->descripcion}}</div>
                        <div class="form-group">
                            <input id="{{ 'Pregunta_'.$encuesta->preguntas[$i]->id }}" type="text" class="form-control">
                        </div>
                    </div>
                @elseif ($encuesta->preguntas[$i]->id_tipo_pregunta == 2)
                    <div class="form-group">
                        <div id="{{ 'Pregunta_'.$encuesta->preguntas[$i]->id }}" class="form-group PreguntaValue pregunta-encuesta">{{$i + 1}}.-{{$encuesta->preguntas[$i]->descripcion}}</div>
                        <div class="form-group">
                            <div class="icheck-inline">
                                <div class="input-group">
                                    <div class="mt-radio-inline">
                                        @foreach ($encuesta->preguntas[$i]->respuestas as $respuesta)
                                            <label class="mt-radio">
                                                <input type="radio" name="{{'Pregunta_'.$encuesta->preguntas[$i]->id}}" value="{{ $respuesta->id }}" class="icheck" style="word-break:break-all" data-radio="iradio_square-blue"> {{$respuesta->descripcion}}
                                                <span></span>
                                            </label>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @elseif ($encuesta->preguntas[$i]->id_tipo_pregunta == 3)
                    <div class="form-group">
                        <div id="{{ 'Pregunta_'.$encuesta->preguntas[$i]->id }}" class="form-group PreguntaValue pregunta-encuesta">{{$i + 1}}.-{{$encuesta->preguntas[$i]->descripcion}}</div>
                        <div class="form-group">
                            <div class="icheck-inline">
                                <div class="input-group">
                                    <div class="mt-checkbox-inline">
                                        @foreach ($encuesta->preguntas[$i]->respuestas as $respuesta)
                                            <label class="mt-checkbox">
                                                <input type="checkbox" name="{{'Pregunta_'.$encuesta->preguntas[$i]->id}}" value="{{ $respuesta->id }}" class="icheck" style="word-break:break-all" data-checkbox="icheckbox_square-blue"> {{$respuesta->descripcion}}
                                                <span></span>
                                            </label>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
            @endfor

            <div class="form-actions">
                <div class="row">
                    <div class="col-md-12" style="text-align: right">
                        <a href="{{ url('encuestas') }}" class="btn btn-default"> Cancelar </a>
                        <button id="submitBtn" onclick="SaveSurvey()" type="submit" class="btn btn-primary ladda-button" data-style="slide-down">
                            <span class="ladda-label">Enviar respuestas</span>
                            <span class="ladda-spinner"></span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        function SaveSurvey() {
            swal({
                    title: "¿Enviar respuestas?",
                    text: "No podrá cambiar sus respuestas una vez enviado.",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "Guardar",
                    CancelButtonTexT: "Cancelar",
                    closeOnConfirm: false
                },
                function () {

                    SendJson();
//                    swal("Guardado!", "El reporte se ha guardado.", "success");
                });
        }
        function PreguntasPorLlenar() {
            swal({
                title: "Revise la encuesta",
                text: "Aún tiene preguntas por llenar.",
                type: "warning",
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "Aceptar",
                closeOnConfirm: true
            })
        }


        function SendJson() {

            var Preguntas = $('.PreguntaValue');
            var nPreguntas = $('.PreguntaValue').length;
            var JSONList = [];
            var encuestausuarioid = '{{ $encuesta_usuario->id }}';

//            console.log(Preguntas);

            for(var i = 0 ; i < nPreguntas; i++)
            {
                var index = Preguntas.eq(i).attr('id').replace('Pregunta_', '');
                var elem = $('input[name="Pregunta_'+ index  +'"]:checked');
                var arr = [].slice.call(elem);
                var genres = arr.map(function(el){
                    return el.value;
                }).join(',');
                var texto = $('input[id="Pregunta_' + index + '"]').val();
                console.log(texto);
                console.log(genres);

                JSONList[i] = {
                    EncuestaId: encuestausuarioid,
                    PreguntaId: Preguntas.eq(i).attr('id').replace('Pregunta_', ''),
                    RespuestaIds: genres,
                    RespuestaString: (typeof texto === "undefined") ? '' : texto
                };
                if (JSONList[i].RespuestaIds.length === 0 && (JSONList[i].RespuestaString === "" || typeof JSONList[i].RespuestaString === "undefined")) {
                    PreguntasPorLlenar();
                    return false;
                }
            }

            $.ajax({
                url: '{{ url('encuestas/responder') }}',
                data: JSON.stringify(JSONList),
                type: "POST",
                contentType: "application/json",
                cache: false,
                datatype: JSON,
                success: function (result) {
                    if ( result == "true" ) {
                        swal("Gracias!", "Su respuesta fue registrada!", "success");

                        location.href = "{{ url('encuestas') }}";
                    } else {
                        swal("Ocurrió un problema", "La información ingresada no pudo ser enviada.", "error")
                    }
                },
                error: function (result) {
                    alert("");
                }
            });
        }
    </script>
@endsection