@extends('plantilla1')
@section('header')

@endsection

@section('menu')
    <ul class="nav navbar-nav">
        <li><a href="/manual">Manual Producto</a></li>
        <li><a href="/manualsistema">Manual Sistema</a></li>
        <li class="active"><a href="/examen">Examen</a></li>
    </ul>
@endsection

@section('container')
    <div class="row" ng-show="muestracuestionario">
        <div class="col-md-2 address">
            <img src="/img/examen.jpg">
        </div>
        <div class="col-md-10 address">
            <h4>Para iniciar tu evaluci&oacute;n es necesario llenar los siguientes datos</h4>
            <div class="contact-form">
            <form class="cmxform tasi-form" id="signupForm" name="form">
                <div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="name">Nombres *</label>
                                <input type="text" placeholder="Nombres" id="nombres" ng-model="model.cuestionario.nombres" class="form-control" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="phone">Apellidos</label>
                                <input type="text" placeholder="Apellidos" id="apellidos" ng-model="model.cuestionario.apellidos" class="form-control" required>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="phone">Email</label>
                                <input type="text" ng-pattern="/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/" placeholder="Email" id="email" ng-model="model.cuestionario.email" class="form-control" required>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="phone">Sucursal</label>
                                <select name="sucursal_id" ng-model="model.cuestionario.sucursal_id" required class="form-control">
                                    <option value="">Seleccionar</option>
                                    @foreach ($sucursales as $sucursal)
                                        <option value="{{$sucursal->no_suc}}">{{$sucursal->dato_cotizador}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="phone">N&uacute;mero de Empleado</label>
                                <input type="text" placeholder="Numero de Empleado" id="codigo" ng-model="model.cuestionario.codigo" class="form-control" required>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-4"></div>

                        <div class="col-md-2">
                            <div class="form-group">
                                <button class="btn btn-default btn-lg" type="submit"
                                        ng-click="guardaCuestionario()" ng-disabled="form.$invalid">Iniciar Examen
                                </button>
                            </div>
                        </div>
                        <div class="col-md-4"></div>
                    </div>
                </div>
            </form>

        </div>
        </div>
    </div>
    <div class="row" ng-show="muestrapreguntas">
        <div class="col-md-2 address">
            <img src="/img/examen.jpg">
        </div>
        <div class="col-md-10 address">
            <h4>Preguntas</h4>
            <div class="contact-form">
                <form class="cmxform tasi-form" id="signupForm" name="formExamen">
                    <div>
                                                @foreach($preguntas as $pregunta)
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="name">{{$ind}} {{$pregunta->pregunta}}</label>
                                                                        @foreach($pregunta->respuestas as $respuesta)
                                        <div class="radios" style="padding-left: 15px">
                                            <label class="label_radio" for="respuesta_{{$respuesta->id}}">
                                                <input ng-model="model.preguntas.pregunta_{{$pregunta->id}}" name="pregunta_{{$pregunta->id}}" id="respuesta_{{$respuesta->id}}" value="{{$respuesta->id}}" type="radio" {{($indR==0)?' required':''}}/> {{$respuesta->respuesta}}
                                            </label>
                                        </div>
                                                                            @endforeach
                                </div>
                            </div>
                        </div>
                                                @endforeach
                        <div class="row">
                            <div class="col-md-4"></div>

                            <div class="col-md-2">
                                <div class="form-group">
                                    <button class="btn btn-default btn-lg" type="submit"
                                            ng-click="calificaExamen()" ng-disabled="formExamen.$invalid">Enviar
                                    </button>
                                </div>
                            </div>
                            <div class="col-md-4"></div>
                        </div>
                    </div>
                </form>

            </div>
        </div>
    </div>
    <div class="row" ng-show="muestraaprobado">
        <div class="col-md-2 address">
            <img src="/img/examen.jpg">
        </div>
        <div class="col-md-10 address">
            <h4>Felicidades!!</h4>
            <div class="contact-form">
                <p> Tu prueba ha sido satisfactoria, en menos de 24 horas estar&aacute;s recibiendo un correo electr&oacute;nico con tus datos de acceso al sistema.</p>
                <p> Aciertos: <strong>@{{ model.aciertos }}</strong></p>
                <p> Calificaci&oacute;n: <strong>@{{ model.calificacion }}</strong></p>
            </div>
        </div>
    </div>
    <div class="row" ng-show="muestrareprobado">
        <div class="col-md-2 address">
            <img src="/img/examen.jpg">
        </div>
        <div class="col-md-10 address">
            <h4>Upss!!</h4>
            <div class="contact-form">
                <p> Tu prueba no ha sido satisfactoria, por favor revisa nuevamente el manual.</p>
                <p> Aciertos: <strong>@{{ model.aciertos }}</strong></p>
                <p> Calificaci&oacute;n: <strong>@{{ model.calificacion }}</strong></p>
            </div>
        </div>
    </div>
@endsection

@section('footer')

    <script>
        var bbapp = angular.module('bbapp', ['ui.mask']);
        bbapp.controller('FundacionCtrl', function ($scope, $http, $httpParamSerializerJQLike) {
            var vm = this;
            vm.model = {};
            vm.model.id = 0;
            vm.model.cuestionario = {};
            vm.model.preguntas = {};
            $scope.muestracuestionario = true;
            $scope.muestrapreguntas = false;
            $scope.muestraaprobado = false;
            $scope.muestrareprobado = false;
            $scope.model = {};
            $scope.model.cuestionario = {};
            $scope.model.preguntas = {};

            $scope.guardaCuestionario = function () {
                $http({
                    method: 'POST',
                    data: $scope.model.cuestionario,
                    url: '/api/cuestionario/Crear'
                }).then(function (response) {
                    console.log(response);
                    vm.model.id = response.data.id;
                    $scope.model.id = response.data.id;
                    $scope.muestracuestionario = false;
                    $scope.muestrapreguntas = true;
                    $scope.muestraaprobado = false;
                    $scope.muestrareprobado = false;

                }, function (error) {
                    swal('Error de conexión', null, 'error');
                });

            };

            $scope.calificaExamen = function () {
                var modelEnviar = {};
                modelEnviar.preguntas = $scope.model.preguntas;
                modelEnviar.cuestionario_id  =  $scope.model.id;
                console.log(modelEnviar);
                $http({
                    method: 'POST',
                    data: modelEnviar,
                    url: '/api/cuestionario/Calificar'
                }).then(function (response) {
                    console.log(response);
                    if (response.data.error == "")
                    {
                        if (response.data.cuestionario.aprobo)
                        {
                            $scope.muestracuestionario = false;
                            $scope.muestrapreguntas = false;
                            $scope.muestraaprobado = true;
                            $scope.muestrareprobado = false;
                        }
                        else
                        {
                            $scope.muestracuestionario = false;
                            $scope.muestrapreguntas = false;
                            $scope.muestraaprobado = false;
                            $scope.muestrareprobado = true;
                        }
                        $scope.model.calificacion =  response.data.cuestionario.calificacion;
                        $scope.model.aciertos =  response.data.cuestionario.aciertos;
                    }
                    else
                    {
                        swal({
                            title: "Error",
                            text: response.data.error,
                            type: "error",
                            showCancelButton: true
                        });
                    }


                }, function (error) {
                    swal('Error de conexión', null, 'error');
                });

            };


        });
    </script>
@endsection