@extends('frontend.layout')
@section('content')
<section class="encuesta">
    <div class="container-fluid">
        <div class="row">
            <div class="col-xl-5 p-0 " style="background: #3354A3;">
              <div class="encuesta__left text-center d-flex align-items-center">
                  <div class="h-100 w-100">
                    <div class="encuesta__left__logo d-flex align-items-start justify-content-center">
                      <div class="encuesta__left__logo__imagen">
                      <img src="{{ url('/') }}/images/aa_logo2.png" alt="" class="img-fluid">
                      </div>
                      <h2>academia<br> <span>del acero</span> </h2>
                    </div>
                    <div class="encuesta__left__nombre">
                      <h4>Bienvenido, <br><span>{{$user_nombre}}</span></h4>
                    </div>
                    <div class="encuesta__left__cuadros">
                      <div class="encuesta__left__cuadro encuesta__left__cuadro--2 d-flex">
                          <div class="">
                              <img src="{{ url('/') }}/storage/alert.png" alt="" >

                          </div>
                          <p>Para responder las preguntas solo debes de darle clic a tu opción.</p>
                      </div>
                      <div class="encuesta__left__cuadro encuesta__left__cuadro--2 d-flex">
                          <div class="">
                              <img src="{{ url('/') }}/storage/alert.png" alt="" >

                          </div>
                          <p>Para obtener tu certificado debes obtener un mínimo de 3 preguntas correctas.</p>
                      </div>
                      
                    </div>
                    <div class="encuesta__left__cuadro encuesta__left__cuadro--1">
                        <p>Si tuvieras algún inconveniente puedes comunicarte con<br> nosotros mediante inbox del</p>
                        <a href="https://www.facebook.com/AcerosArequipa" target="_blank">FAN PAGE</a>
                    </div>
                  </div>
              </div>
              <div class="encuesta__left__cerrar">
                  <a href="{{route('logout.alumno')}}"><i class="fas fa-sign-out-alt"></i> Cerrar sesión</a>
              </div>
          </div>
            <div class="col-xl-7 p-0">
                <div class="encuesta__right">
                    
                    <div class="encuesta__right__introduccion">
                        <h4>{{$modulo->nombre}}</h4>
                        <p>{{$tema->nombre}}</p>
                        <label for="">
                            Pregunta: <span> <span t='0' id="i_pregunta"> 1 </span> | {{$tema->preguntas->count()}}</span>
                        </label>
                    </div>
                    <div id="div_rs_alt"> 
                        @if($aprobado>0)
                        <div class="encuesta__right__contenido">
                            <div class="alert alert-success">Evaluación finalizada</div>
                            <a target="_blank" href="{{url('/certificados/').'/'.$name_file}}" class="btn btn-sm btn-info">
                                <i class="fa fa-download" style="margin-right: 5px;"></i>Descargar Certificado
                            </a>
                        </div>
                        @else
                        
                        @php
                        $a=0;
                        $b=1000;
                        $c=0;
                        $display='';
                        @endphp

                        @foreach($tema->preguntas as $p)
                        @php
                        $a++;
                        @endphp

                        <div id="div_pregunta{{$p->id}}" class="encuesta__right__contenido" style="@if($a>1)display: none;@endif">
                            <div class="encuesta__right__contenido__card" >
                                <h5 style="position: relative;"> <span >{{$a}}</span> {{$p->nombre}}  
                                    <small data-ttiempo="{{$p->tipo_tiempo_id}}" data-close="{{$p->tiempo}}" id="count{{$p->id}}" class="count_down" ></small>
                                </h5>
                            </div>
                            <form class="" action="index.html" method="post">
                                @php
                                $correcta_prefijo='';$correcta_nombre='';
                                @endphp

                                @foreach($p->alternativas as $al)
                                @if($al->correcta=='S') 
                                @php $correcta_prefijo=$al->prefijo; $correcta_nombre=$al->nombre; @endphp 
                                @endif
    <!--                            <div id="div_corr{{$al->id}}" class="encuesta__right__contenido__card " style="position: relative;" 
                                     data-toggle="modal" data-target="@if($al->correcta=='S')#Mensaje1 @else #Mensaje @endif" 
                                     >-->
                                <div id="div_corr{{$al->id}}" class="encuesta__right__contenido__card " style="position: relative;"                                  
                                     >    
                                    <div class="div_capa{{$al->id}}" style="display: none;position: absolute;left: 0px;top: 0px;bottom: 0px;right: 0px;background: #f5f7e9;z-index: 100;"></div>
                                    <label class="container1"><span>{{$al->prefijo}}</span>  {{$al->nombre}}
                                        <input type="radio" id="rd{{$p->id}}" checked="checked"                                                
                                               @if($p->tipo_tiempo_id>1)
                                               onclick="$.fn_select_rpt_time(this,'div_corr{{$al->id}}','rd{{$p->id}}','div_rpt{{$p->id}}','{{$a}}','{{$tema->preguntas->count()}}')" 
                                               @else
                                               onclick="$.fn_select_rpt(this,'div_corr{{$al->id}}','rd{{$p->id}}','div_rpt{{$p->id}}','{{$a}}','{{$tema->preguntas->count()}}')" 
                                               @endif
                                               corr="{{$al->correcta}}" name="radio" value="{{$al->id}}">
                                        <span class="checkmark"></span>
                                    </label>
                                </div>
                                
                                @endforeach
                                <div id="div_rpt{{$p->id}}" style="display: none;" class="encuesta__right__contenido__card respuesta__correcta">
                                    <label class="container1">
                                        <label for="" class="respuesta">La respuesta correcta es:</label>
                                        <br>
                                        <span>{{$correcta_prefijo}}</span> {{$correcta_nombre}}
                                        <input type="radio" checked="checked" name="radio">
                                    </label>
                                </div>
                            </form>
                        </div>                        
                        @endforeach                         
                        
                        <script type="text/javascript">
                            
                            $(document).ready(function(){
                                var time=0;
                                var t_inicial=200;
                                
                                
                                @foreach($tema->preguntas as $p)
                                @php
                                $c++;
                                @endphp
                                var tipo_tiempo{{$p->id}} = $("#count{{$p->id}}").attr("data-ttiempo");
                                if(tipo_tiempo{{$p->id}}>1){

                                    var time{{$p->id}} = $("#count{{$p->id}}");
                                    var closeSeconds{{$p->id}} = $("#count{{$p->id}}").attr("data-close");

                                    var settime{{$p->id}} = setTimeout(function () {
                                        var interval{{$p->id}} = setInterval(function(){
                                            time{{$p->id}}.html(closeSeconds{{$p->id}});
                                            closeSeconds{{$p->id}}--;
                                            var f=0;
                                            $("#rd{{$p->id}} ").each(function(){
                                                if($(this).is(':checked')){
                                                    f=$(this).val();
                                                    console.log($(this).val());                                                        
                                                }
                                            })
                                            if(f>0){
                                                $.fn_select_rpt_time('div_pregunta{{$p->id}}','rd{{$p->id}}','div_rpt{{$p->id}}','{{$c}}','{{$tema->preguntas->count()}}','{{$p->tiempo}}');
                                                if(closeSeconds{{$p->id}} < 0){
                                                    $.fn_time_rpt('div_pregunta{{$p->id}}','rd{{$p->id}}','div_rpt{{$p->id}}','{{$c}}','{{$tema->preguntas->count()}}','{{$p->tiempo}}');
                                                    clearInterval(interval{{$p->id}});
                                                }                                             
                                            }
                                            else{
                                                if(closeSeconds{{$p->id}} < 0){
                                                    $.fn_time_rpt('div_pregunta{{$p->id}}','rd{{$p->id}}','div_rpt{{$p->id}}','{{$c}}','{{$tema->preguntas->count()}}','{{$p->tiempo}}');
                                                    clearInterval(interval{{$p->id}});
                                                }
                                            }                                                
                                        }, 1000)
                                    }, t_inicial );
                                    var tiempo{{$p->id}} = $("#count{{$p->id}}").attr("data-close");
                                    if(tipo_tiempo{{$p->id}}==2){
                                        t_inicial=((t_inicial+(tiempo{{$p->id}}*1000)));                                        
                                    }else{
                                        t_inicial=((t_inicial+((tiempo{{$p->id}}*60)*1000)));
                                    }
                                }
                                @endforeach 
                            })
                        </script>
                        @endif
                    </div>                    
                </div>
            </div>
        </div>
        
    </div>
    <form action="{{route('save.registro')}}" id="frm_registrar_alternativas">
        {{ csrf_field() }}
        <input type="hidden" id="user_capacitador" name="id_capacitador" value="{{$user_capacitador}}"/>
        <input type="hidden" id="id_alternativa" name="id_alternativa" value="" />
        <input type="hidden" id="puntaje" name="puntaje" value="" />
        <input type="hidden" id="aprobado" name="aprobado" value="" />
        <input type="hidden" id="id_alumno" name="id_alumno" value="{{$user_id}}" />
        <input type="hidden" id="id_evaluacion" name="id_evaluacion" value="{{$evaluacion->id}}" />
        <input type="hidden" id="id_tema" name="id_tema" value="{{$id_tema}}" />
    </form>
    
    
</section>
<!-- Modal mensaje -->
<div class="modal fade" id="Mensaje" tabindex="-1" role="dialog" aria-labelledby="Mensaje" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <img src="{{ url('/') }}/storage/close.png" alt="" class="img-fluid cerrar"  data-toggle="modal" data-target="#Mensaje">
                <div class="contenido">
                    <img src="{{ url('/') }}/storage/logo.png" alt="" class="img-fluid logo">
                    <h1>¡Inténtalo<br> de nuevo!</h1>
                    <!-- <h1>¡APROBASTE!</h1> -->
                    <p>Recuerda que para obtener tu certificado debes<br> de contestar correctamente un mínimo de 4 preguntas.</p>
                    <a href="{{route('encuesta',['id_curso'=>$id_curso,'id_modulo'=>$id_modulo,'id_tema'=>$id_tema,'id_evaluacion'=>$id_evaluacion])}}" >volver a intentar</a>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('scripts')
@endsection