<!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: 1300px; min-height: 1200px;">
                <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">Crear Test</span>
                    </div>

                </div>
                <form id="editar" class="mb-3 list-unstyled" data-id="<%=desarrollo2._id%>">
                <div class="col-12 mt-3" style="max-height: 1100px;">
                  <!--Nombre del Alumno que ha hecho el examen y Tema del Examen-->
                  <%if (usuario.rol=="Profesor" ){%>
                    <div>
                      <label>Alumno: </label>
                      <input id="textoPerfil" class="col-12 col-sm-12 col-md-8 col-lg-9 btn btn-secondary my-2" name="correoAlumno"
                          placeholder="Nombre de Alumno" value="<%= desarrollo2.correoAlumno %>"readonly></input>
                        </div>
                    <%}%>
                  <div>
                    <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="<%= desarrollo2.tema %>"readonly></input>
                      </div>
                    
                       
                          <div>
                            <!--Pregunta y Respuesta del Alumno del Examen-->
                            <input id="textoPreguntas" name="pregunta" type="text" class="col-12 col-sm-12 col-md-12 col-lg-12 btn btn-success my-2"
                            value="Pregunta Desarrollo: <%= desarrollo2.pregunta %>"readonly></input>
                               </div>
                               <div>
                               <textarea name="respuesta" class="col-12 col-sm-12 col-md-12 col-lg-12 my-2" style=resize:none type="text" placeholder="Respuesta: <%= desarrollo2.respuesta %>"rows="30" cols="150" readonly></textarea>
                              </div>
                              <!--Observación y Nota final del Examen-->
                               <div><span>Observaciones</span>
                               <input type="text" class="col-12 col-sm-12 col-md-8 col-lg-9 my-2 "  rows="3" style=resize:none name="observaciones"
                                    value="<%=desarrollo2.observaciones %>"></input>
                               </div>
                               <div>
                                <input class="text-center" name="nota" type="number" step="0.01" placeholder="Calificacion" value="<%=desarrollo2.nota %>"></input>
                               </div>
                </div>
                <div class="row form-inline my-2 my-lg-0 justify-content-around">
                  <a class="col-12 col-sm-12 col-md-12 col-lg-4 btn btn-success my-2" href="/tareasdesarrollo">Ir a Tareas Desarrollo</a>
                  <%if (usuario.rol=="Profesor" ){%>
                  <button class="col-12 col-sm-12 col-md-12 col-lg-4 btn btn-success my-2"  type="submit" >Calificar</button>
                  <%}%>
                </div>
              
            </form>
            </div>
            
        
        </div>




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




    </main>
    <%- include("template/footer.ejs")%>
    <script>
      //Editar Nota del Alumno y Observación
      const formEditar = document.querySelector('#editar');
            formEditar.addEventListener('submit', async (e) => {
                e.preventDefault()
                const observaciones = formEditar.elements['observaciones'].value
                const nota = formEditar.elements['nota'].value
                

                const id = formEditar.dataset.id
                const data = await fetch(`/tareasdesarrollo/${id}`, {
                    method: 'PUT',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ nota,observaciones })
                })
                const res = await data.json()
                if (res.estado) {
                    window.location.href = '/tareasdesarrollo'
                } else {
                    console.log(res)
                }
            })
    </script>
</body>

</html>