@extends('cultural.examen1stGrade.plantilla1stGrade')
@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Á AL MONSTRUO FOXY. ELEGÍ SI (YES) O NO (NO) SEGÚN CORRESPONDA (5 PUNTOS)</h2>
    <audio src="/cultural/audio/1stGrade-Pregunta5.mp3" autoplay controls></audio>
    <div class="text-center pt-5">
    <img src="/cultural/images/monstruo.png" width="400px" height="350px">
    </div>
</div>
<div class="col-sm-6 pt-5 mt-5">
        <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>
        <div class="row">
            <div class="col-6 pt-5 mt-2">
                <p><strong>21. </strong>FOXY IS TALL. 
                </p>

            </div>
            <div class="col-6 pt-5 mt-2 text-left">
            @if(isset($aRespuestaBBDD['7_21']) && $aRespuestaBBDD['7_21'] == "YES")
                <label><input type="radio" id="7_21" name="7_21" value="YES" checked onchange="guardarRespuesta();"><strong> YES</strong></label>

                <label><input type="radio" id="7_21" name="7_11" value="NO" onchange="guardarRespuesta();"><strong> NO</strong></label>
                @elseif(isset($aRespuestaBBDD['7_21']) && $aRespuestaBBDD['7_21'] == "NO")
                <label><input type="radio" id="7_21" name="7_21" value="YES" onchange="guardarRespuesta();"><strong> YES</strong></label>

                <label><input type="radio" id="7_21" name="7_21" value="NO" checked onchange="guardarRespuesta();"><strong> NO</strong></label>
                @else
                <label><input type="radio" id="7_21" name="7_21" value="YES" onchange="guardarRespuesta();"><strong> YES</strong></label>

                <label><input type="radio" id="7_21" name="7_21" value="NO" onchange="guardarRespuesta();"><strong> NO</strong></label>
                @endif
                

            </div>
        </div>
        <div class="row">
            <div class="col-6 pt-4">
                <p><strong>22. </strong>HE HAS GOT ONE EYE.
                </p>

            </div>
            <div class="col-6 pt-4 text-left">
            @if(isset($aRespuestaBBDD['7_22']) && $aRespuestaBBDD['7_22'] == "YES")
                <label><input type="radio" id="7_22" name="7_22" value="YES" checked onchange="guardarRespuesta();"><strong> YES</strong></label>

                <label><input type="radio" id="7_22" name="7_22" value="NO" onchange="guardarRespuesta();"><strong> NO</strong></label>
                @elseif(isset($aRespuestaBBDD['7_22']) && $aRespuestaBBDD['7_22'] == "NO")
                <label><input type="radio" id="7_22" name="7_22" value="YES" onchange="guardarRespuesta();"><strong> YES</strong></label>

                <label><input type="radio" id="7_22" name="7_22" value="NO" checked onchange="guardarRespuesta();"><strong> NO</strong></label>
                @else
                <label><input type="radio" id="7_22" name="7_22" value="YES" onchange="guardarRespuesta();"><strong> YES</strong></label>

                <label><input type="radio" id="7_22" name="7_22" value="NO" onchange="guardarRespuesta();"><strong> NO</strong></label>
                @endif

            </div>
        </div>
        <div class="row">
            <div class="col-6 pt-4">
                <p><strong>23. </strong>HE’S GOT YELLOW EARS.
                </p>

            </div>
            <div class="col-6 pt-4 text-left">
            @if(isset($aRespuestaBBDD['7_23']) && $aRespuestaBBDD['7_23'] == "YES")
                <label><input type="radio" id="7_23" name="7_23" value="YES" checked onchange="guardarRespuesta();"><strong> YES</strong></label>

                <label><input type="radio" id="7_23" name="7_23" value="NO" onchange="guardarRespuesta();"><strong> NO</strong></label>
                @elseif(isset($aRespuestaBBDD['7_23']) && $aRespuestaBBDD['7_23'] == "NO")
                <label><input type="radio" id="7_23" name="7_23" value="YES" onchange="guardarRespuesta();"><strong> YES</strong></label>

                <label><input type="radio" id="7_23" name="7_23" value="NO" checked onchange="guardarRespuesta();"><strong> NO</strong></label>
                @else
                <label><input type="radio" id="7_23" name="7_23" value="YES" onchange="guardarRespuesta();"><strong> YES</strong></label>

                <label><input type="radio" id="7_23" name="7_23" value="NO" onchange="guardarRespuesta();"><strong> NO</strong></label>
                @endif

            </div>
        </div>
       
        <div class="row">
            <div class="col-6 pt-4">
                <p><strong>24. </strong>HE HAS GOT A BIG MOUTH.
                </p>

            </div>
            <div class="col-6 pt-4 text-left">
            @if(isset($aRespuestaBBDD['7_24']) && $aRespuestaBBDD['7_24'] == "YES")
                <label><input type="radio" id="7_24" name="7_24" value="YES" checked onchange="guardarRespuesta();"><strong> YES</strong></label>

                <label><input type="radio" id="7_24" name="7_24" value="NO" onchange="guardarRespuesta();"><strong> NO</strong></label>
                @elseif(isset($aRespuestaBBDD['7_24']) && $aRespuestaBBDD['7_24'] == "NO")
                <label><input type="radio" id="7_24" name="7_24" value="YES" onchange="guardarRespuesta();"><strong> YES</strong></label>

                <label><input type="radio" id="7_24" name="7_24" value="NO" checked onchange="guardarRespuesta();"><strong> NO</strong></label>
                @else
                <label><input type="radio" id="7_24" name="7_24" value="YES" onchange="guardarRespuesta();"><strong> YES</strong></label>

                <label><input type="radio" id="7_24" name="7_24" value="NO" onchange="guardarRespuesta();"><strong> NO</strong></label>
                @endif

            </div>
        </div>
        <div class="row">
            <div class="col-6 pt-4">
                <p><strong>25. </strong>HE HAS GOT SHORT LEGS. 
                </p>

            </div>
            <div class="col-6 pt-4 text-left">
            @if(isset($aRespuestaBBDD['7_25']) && $aRespuestaBBDD['7_25'] == "YES")
                <label><input type="radio" id="7_25" name="7_25" value="YES" checked onchange="guardarRespuesta();"><strong> YES</strong></label>

                <label><input type="radio" id="7_25" name="7_25" value="NO" onchange="guardarRespuesta();"><strong> NO</strong></label>
                @elseif(isset($aRespuestaBBDD['7_25']) && $aRespuestaBBDD['7_25'] == "NO")
                <label><input type="radio" id="7_25" name="7_25" value="YES" onchange="guardarRespuesta();"><strong> YES</strong></label>

                <label><input type="radio" id="7_25" name="7_25" value="NO" checked onchange="guardarRespuesta();"><strong> NO</strong></label>
                @else
                <label><input type="radio" id="7_25" name="7_25" value="YES" onchange="guardarRespuesta();"><strong> YES</strong></label>

                <label><input type="radio" id="7_25" name="7_25" value="NO" onchange="guardarRespuesta();"><strong> NO</strong></label>
                @endif
            </div>
        </div>
       

    </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="/examen1stgrade/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="/examen1stgrade/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="/examen1stgrade/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>

                        </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');

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

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

        }
       
        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 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);

                    }

            });
        }