<!doctype html>
<html lang="en">

<head>
    <%- include("template/head.ejs")%>
    <link rel="stylesheet" type="text/css" href="/css/crearproyectos.css" />
    
</head>

<body>
    <header class="container-fluid border-bottom border-dark border-1">
        <div class="row d-flex flex-wrap align-items-center">
          <div class="col-lg-2 d-none d-lg-block float-start align-items-center text-center px-0 py-0 "><img class="bd-placeholder-img bd-placeholder-img-lg featurette image
            img-fluid mx-auto;" src="/img/ProyectoAlbaRemove.png"></div>
          <div class="col-md-3 col-sm-3 col-4 d-lg-none float-start align-items-center text-center px-0 py-0 "><img class="bd-placeholder-img bd-placeholder-img-lg featurette image
            img-fluid mx-auto;" src="/img/guest.png"><a id="botonusuario" href="/perfil" class="nombreperfil fw-bold text-dark text-decoration-none m-lg-4 m-xl-4 fs-4" ><%=usuario.nombre%></a></div>
          <div class="col-8 text-center align-self-center float-none ">
            <h1>Proyecto Alba</h1>
            <h4>Learning Environment</h4>
          </div>
          <div class="col-2 d-none d-md-none d-lg-block float-start text-center p-0"><img class="bd-placeholder-img bd-placeholder-img-lg featurette image
            img-fluid mx-auto pt-lg-1;" src="/img/guest.png"><a id="botonusuario2" href="/perfil" class="nombreperfil fw-bold text-dark text-decoration-none m-lg-4 m-xl-4 fs-4" ><%=usuario.nombre%></a></div>
        </div>
      </header>
    <main class="container-fluid p-0 mb-0">

        <%- include("template/navleft.ejs")%>


        <div class="float-start ms-0 row justify-content-center col-8 col-lg-8 col-md-9 col-sm-9 text-center">

            <div class="h-100 m-3 col-11 float-none col-center border border-dark border-2 overflow-hidden"
                style=" background-color:#eee8cd;max-height: 1700px; min-height: 1700px;">
                <div class=" row border border-dark border-end-0 border-top-0 border-start-0">
                    <div class="col-center pt-4 pb-md-3 pb-sm-3 pb-3 pb-lg-3">
                        <span class="fs-5 fw-bold">Realizar Examen Test</span>
                    </div>

                </div>
                <form action="/testunico/:id/ejertestunico" class= "needs-validation formulario " method="POST">
                <div class="row col-12 m-0 py-3" id="bloqueunicaopcionfinal"></div> 
                <div class="col-12 mt-3 overflow-auto" style="max-height: 1400px;" >
                  <!--Nombre del Estudiante que realiza la actividad-->
                  <%if (usuario.rol=="Alumno" ){%>
                    <div><label>Alumno: </label>
                      <input id="textoPerfil" class="col-12 col-sm-12 col-md-8 col-lg-9 btn btn-info my-2" name="correoAlumno"
                          placeholder="Nombre de Alumno" value="<%= usuario.correo %>"readonly></input>
                        </div>
                    <%}%>
                    <!--Tema del que se realizará el examen-->
                    <label>Tema: </label>
                    <input id="textoPerfil" class="col-12 col-sm-12 col-md-8 col-lg-9 btn btn-info my-2" name="tema"
                        placeholder="Nombre del Tema" value="<%= testunico.tema %>"></input>
                        <!--Pregunta que saldrá de forma autonónomica segun el numero de preguntas introducidas por el profesor-->
                       <% for(var j=0;j<testunico.pregunta.length; j++) {%>
                        <div>
                          <input id="textoPreguntas" value="<%= testunico.pregunta[j] %>" name="pregunta" type="text" class="col-12 col-sm-12 col-md-12 col-lg-12 btn btn-success my-2"
                               placeholder="Escribir Pregunta" readonly ></input>
                              </div>
                              <ul class="mb-3 list-unstyled d-block tipopregunta tipounica">
                                <li class="row col-12 m-0 py-3"><input id="textoRespuesta"
                                    class="col-12 col-sm-12 col-md-11 col-lg-11 btn btn-secondary my-2" name="respuesta1"
                                    value="<%= testunico.respuesta1[j] %>" readonly></input><input id="unicaopcion" class="col-12 col-sm-12 col-md-1 col-lg-1"
                                    name="unicaopcion<%= j %>" value="a" type="radio"/></li>
                                <li class="row col-12 m-0 py-3"><input id="textoRespuesta"
                                  class="col-12 col-sm-12 col-md-11 col-lg-11 btn btn-secondary my-2" name="respuesta2"
                                  value="<%= testunico.respuesta2[j] %>" readonly></input><input id="unicaopcion" class="col-12 col-sm-12 col-md-1 col-lg-1"
                                    name="unicaopcion<%= j %>" value="b" type="radio"/></li>
                                <li class="row col-12 m-0 py-3"><input id="textoRespuesta"
                                  class="col-12 col-sm-12 col-md-11 col-lg-11 btn btn-secondary my-2" name="respuesta3"
                                  value="<%= testunico.respuesta3[j] %>" readonly></input><input id="unicaopcion" class="col-12 col-sm-12 col-md-1 col-lg-1"
                                    name="unicaopcion<%= j %>" value="c" type="radio"/></li>
                                <li class="row col-12 m-0 py-3"><input id="textoRespuesta"
                                  class="col-12 col-sm-12 col-md-11 col-lg-11 btn btn-secondary my-2" name="respuesta4"
                                  value="<%= testunico.respuesta4[j] %>" readonly></input></input><input id="unicaopcion" class="col-12 col-sm-12 col-md-1 col-lg-1"
                                    name="unicaopcion<%= j %>" value="d" type="radio"/></li>
                              </ul>
                        
                     <% } %>
                          
                                               
                                                

                    
                </div>
                <div class="row col-12 m-0 py-3" id="bloqueunicaopcionfinal"></div> 
                <div>
                <a class="col-12 col-sm-12 col-md-12 col-lg-4 btn btn-success my-2 px-1 m-5" href="/testunico" id="volveriniciarsesion">Ir a Lista Test</a>
                <%if (usuario.rol=="Alumno" ){%>
                  <button class="col-12 col-sm-12 col-md-12 col-lg-3 btn btn-success my-2 px-1 my-2" id="crearenvio" type="submit">Enviar</button>
                  <%}%>
            
          </div>
              </form>
              <div>
                <%if (usuario.rol=="Profesor" ){%>
                  <button class="btn btn-danger btn-sm" data-id="<%= testunico.id %>">
                    Eliminar
                </button>
                  <%}%>
                </div>
            </div>
            
        
        </div>




        <%- include("template/navright.ejs")%>




    </main>
  
</body>
<script>
//Generara una cadena dinamica de respuestas para enviarlo por POST
 $("#crearenvio").mouseover(function(){
        
        prueba=$("form :radio[id=unicaopcion]:checked")
        cadena=[]
    
    for (var i = 0; i < "<%=testunico.pregunta.length%>"; i++) {
    cadena.push(prueba[i].value);
    }
    
    var j= 0;
    $("#bloqueunicaopcionfinal").html("")
    for (var j=0;j< "<%=testunico.pregunta.length%>"; j++){
        $("#bloqueunicaopcionfinal").append("<input id=\"unicaopcionfinal\" class=\"col-12 col-sm-12 col-md-1 col-lg-1\"name=\"unicaopcionfinal\" value=\""+cadena[j]+"\"/>");
        
        
    }
    $("#bloqueunicaopcionfinal").append("<input id=\"idoriginal\" class=\"col-12 col-sm-12 col-md-1 col-lg-1\"name=\"idoriginal\" value=\"<%= testunico._id %>\"/>");
      
  });
  
  
      //Permite eliminar el ejercicio
      const btnEliminar = document.querySelector('.btn-danger')
      btnEliminar.addEventListener('click', async () => {
        
          console.log(btnEliminar.dataset.id)
          try {
              
              const data = await fetch(`/testunico/${btnEliminar.dataset.id}`, {
                  method: 'delete'
              })
              const res = await data.json()
              console.log(res)
              if (res.estado) {
                  window.location.href = '/testunico'
              } else {
                  console.log(res)
              }
          } catch (error) {
              console.log(error)
          }
      })
          
</script>
</html>