@extends('cultural.examen1stElementary.plantilla1tsElementary')
@section('breadcrumb')

@endsection
@section('titulo', "$examen->nombre")
@section('contenido')
@section('scripts')
<script>
        globalId = '0';
    </script>
@endsection
<div class="col-sm-6">
        <h2 style="font-size: 25px;">MIRÁ EL DIBUJO. ELEGÍ LA OPCIÓN CORRECTA (6 PUNTOS)</h2>
        <div class="text-center pt-4">
                <img src="/cultural/images/lamina animales.png" width="400px" height="400px">
        </div>
</div>
<div class="col-sm-6" id="pregunta5elementary">

<audio src="/cultural/audio/1stElementary-Pregunta5.mp3" autoplay controls></audio> <br> <br>
        <form action="" method="POST" id="form">
                <input type="hidden" name="_token" value="{{ csrf_token() }}"></input>
                <input type="hidden" id="id" name="id" class="form-control" value="{{$globalId}}" required>
                <ul class="pt-5">
                        <li><strong>20.</strong> WHAT’S THIS? IT’S A
                                <select name="13_20" id="13_20" onchange="guardarRespuesta();">
                                        <option value selected></option>
                                        <option value="DOG">DOG</option>
                                        <option value="MONKEY">MONKEY</option>
                                </select></li>
                        <li><strong>21.</strong> WHAT COLOUR IS IT? IT’S
                                <select name="13_21" id="13_21" onchange="guardarRespuesta();">
                                        <option value selected></option>
                                        <option value="BROWN">BROWN</option>
                                        <option value="WHITE">WHITE</option>
                                </select></li>
                        <li><strong>22.</strong> HAS IT GOT A LONG TAIL?
                                <select name="13_22" id="13_22" onchange="guardarRespuesta();">
                                        <option value selected></option>
                                        <option value="YES, IT HAS">YES, IT HAS</option>
                                        <option value="NO, IT HASN'T">NO, IT HASN'T</option>
                                </select></li>
                        <li><strong>23.</strong> WHAT’S THIS?
                                <select name="13_23" id="13_23" onchange="guardarRespuesta();">
                                        <option value selected></option>
                                        <option value="IT'S A LION">IT'S A LION</option>
                                        <option value="IT'S AN ELEPHANT">IT'S AN ELEPHANT</option>
                                </select></li>
                        <li><strong>24.</strong> IS IT BIG?
                                <select name="13_24" id="13_24" onchange="guardarRespuesta();">
                                        <option value selected></option>
                                        <option value="YES, IT IS">YES, IT IS</option>
                                        <option value="NO, IT ISN'T">NO, IT ISN'T</option>
                                </select></li>
                        <li><strong>25.</strong> HAS IT GOT SMALL EARS?
                                <select name="13_25" id="13_25" onchange="guardarRespuesta();">
                                        <option value selected></option>
                                        <option value="NO, IT HASN'T">NO, IT HASN'T</option>
                                        <option value="YES, IT HAS">YES, IT HAS</option>
                                </select></li>
                </ul>
        </form>
</div>
<div class="container pt-5">
@if(isset($docente) && $docente->fk_idusuario == Session::get('usuario_id'))
<div class="row">
    
        <div class="col-6 text-left">
            <a href="/examen1stelementary/pregunta4/{{$examen->idexamen}}/{{$cliente->id}}" class="actividad"><i class="fas fa-arrow-left"></i> Actividad anterior</a>
        </div>
        
    </div>
     @elseif($cliente->fk_idusuario == Session::get('usuario_id') && $cliente->id == $examenAlumno->fk_idcliente && $examen->hora_inicio <= date('H:i:s') && $examen->fecha_examen == date('Y-m-d'))

    <div class="row">
    
        <div class="col-6 text-left">
            <a href="/examen1stelementary/pregunta4/{{$examen->idexamen}}" class="actividad"><i class="fas fa-arrow-left"></i> Actividad anterior</a>
        </div>
        <div class="col-6 text-right pl-2">
            <a href="#" class="btn btn-cultural" onclick="fAbrirModalFinal()"> FINALIZADO </a>
        </div>
    </div>
    @else
    <div class="row">
    
    <div class="col-6 text-left">
        <a href="/examen1stelementary/pregunta4/{{$examen->idexamen}}" class="actividad"><i class="fas fa-arrow-left"></i> Actividad anterior</a>
    </div>
    <div class="col-6 text-right">
    <a href="#" class="btn btn-cultural" onclick="fAbrirModalCliente()"> FINALIZADO </a>
    </div>
</div>
    @endif
   
</div>

<div class="modal fade" id="modalFinalizarCliente" tabindex="-1" role="dialog" aria-labelledby="modalFinalizarClienteLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalFinalizarClienteLabel">Finalizar exámen</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>¿Desea finalizar el exámen?</p>
               
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-primary" onclick="finalizarCliente()">Finalizar</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="modalFinalizar" tabindex="-1" role="dialog" aria-labelledby="modalFinalizarLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalFinalizarLabel">Finalizar exámen</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>¿Desea finalizar el exámen?</p>
                <p id="preguntas"></p>
                <span id="pg"></span>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-primary" onclick="finalizado();">Finalizar</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="modalGuardado" tabindex="-1" role="dialog" aria-labelledby="modalGuardadoLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
                <div class="modal-content">
                        <div class="modal-header">
                                <h5 class="modal-title" id="modalGuardadoLabel"></h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                </button>
                        </div>
                        <div class="py-4" id="divMsgGuardado" style="text-align: center;"></div>
                        <div class="modal-footer">

                                <a class="btn btn-primary" href="/">Aceptar</a>
                        </div>
                </div>
        </div>
</div>

<script>
       function guardarRespuesta() {
        formulario = $("form").serializeArray();
        $.ajax({
            type: "GET",
            dataType: 'json',
            url: "/examen/guardarRespuesta",
            data: {
                formulario: formulario,
                idexamen: globalId,
                _token: "{{ csrf_token() }}"
            },
        }).done(function(data) {

        });
    }

    function fAbrirModalFinal() {
        $("#modalFinalizar").modal('toggle');
        respuestaVacia();

    }
    function fAbrirModalCliente() {
        $("#modalFinalizarCliente").modal('toggle');
    
    }

    function fAbrirModalGuardar() {
        $('#modalGuardado').modal('toggle');

    }

    function finalizado() {
        $.ajax({
            type: "GET",
            url: "/examen/finalizado",
            data: {
                idexamen: globalId
            },
            async: true,
            dataType: "json",
            success: function(data) {
                $("#modalFinalizar").modal('toggle');
                fAbrirModalGuardar();
                $("#divMsgGuardado").html(data.MSG);

            }

        });
    }
    function fAbrirModalTiempo(){
      $('#modalTiempo').modal({backdrop: 'static', keyboard: false});
      $.ajax({
            type: "GET",
            url: "/examen/finalizado",
            data: {
                idexamen: globalId
            },
            async: true,
            dataType: "json",
            success: function(data) {
            
            }
        });
      
    }

    function respuestaVacia(){
        $.ajax({
            type: "GET",
            url: "/examen/respuestaVacia",
            data: {
                idexamen: globalId
            },
            async: true,
            dataType: "json",
            success: function(data) { 
                pg = "";
                if(data != ""){ 
               $('#preguntas').html("Te quedan por responder las siguentes preguntas:");
            
                $.each(data, function( index, value ) {
                pg = value+", ";
                $('#pg').append(pg);
                
                });
               
                }
        
            }
        });

        }