{% extends 'ElVerdaderoHeader.html' %}
{% block head %}
{{MaestroId}} 
{% endblock %}

{% block css %}
<link rel='stylesheet' href ='../../../static/css/estilo.css'>

    
{% endblock %}

{% block body %}

<h1 class = 'text-center text-white bg-dark'>{{el_curso.codigo}}</h1>

<div class ='row'>
 
    <div class ='col-3'></div>
    <div  class = 'col-6'>
       
           <form  method = 'POST' id = 'form'>
           
           
            Tipo: <input type="text"  name = 'tipo'  class="form-control" placeholder="Examen/Asignaci&oacute;n" required>
            Fecha: <input type="date"  name ='Fecha'  class="form-control" required>
            Valor: <input type="text" name = 'valor'  class="form-control" placeholder="100" required>
             <button type='button' onclick="prepareJson()" class = 'btn btn-primary'>Someter</button>
             <br>
             <br>
             <input  type = 'hidden' id ='maestroId' value ="{{MaestroId}}">
             <input type = 'hidden' id = 'ofertaId' value ='{{el_curso}}'>
             <input type = 'hidden' id = 'editar' value = 'Añadir'>
             <button type='button' class = 'btn btn-primary' id ='anadir' style='display:none' onclick='add("anadir")'>Añadir Curso</button>
             <a type = 'button' class ='btn btn-success' href ='/Maestro/{{MaestroId}}/{{el_curso}}/addNotas'>Añadir notas a Estudiantes</a>
    </div>
    
</div>
<br>
<br>

<div class = 'row'>
    <div class ='col'>
        <table class = 'table table-hover' id ="myTable">
            <thead>
                <tr>
                    <th>Evaluaciones</th>
                    <th>Valor</th>
                    <th>Fecha</th>
                    
                    
                </tr>
            </thead>
            <tbody>
                
                    
               
            </tbody>
        </table>
    </div>
</div>
</form>            
<br>
<br>
            <div class='text-right'>
          
           </div>
          
    
        <script>

     


var evaluaciones = jQuery.parseJSON('{{ evaluaciones | tojson | safe }}')

function add(string){

    document.getElementById(string).style.display ='none';
    $(document.getElementsByName('tipo')).removeAttr('value');
    $(document.getElementsByName('Fecha')).removeAttr('value');
    $(document.getElementsByName('valor')).removeAttr('value');


}

function delEval(id){
    $(document.getElementById('editar')).val('Borrar');
    $(document.getElementsByName('tipo')).val(id);
    prepareJson();
}

$(document).ready(function(){
    $.each(evaluaciones, function(key, value){
        var tdNombre = '<td>'+ value.tipo +'</td>';
        var tdValor = '<td>'+ value.Valor.toString()+'</td>';
        var tdFecha = '<td>'+value.fecha+'</td>';
        var tdEditar = "<td><a type = 'button' class ='btn btn-warning' onclick = 'edit("+key+")'>Editar</a></td"
        var tdDelete = "<td><a type = 'button' class ='btn btn-danger'  onclick ='delEval("+key+")'>Borrar</a></td>"

        var total = '<tr>'+tdNombre+tdValor + tdFecha + tdEditar + tdDelete +'</tr>';
        
        $('#myTable > tbody:last-child').append(total);
                    



    })
})

function edit(id){
    var tipo = document.getElementsByName('tipo')
    $(tipo).val(evaluaciones[id].tipo)
    var fecha = document.getElementsByName('Fecha')
    $(fecha).val(evaluaciones[id].fecha)
    
    var valor = document.getElementsByName('valor')
    $(valor).val(evaluaciones[id].Valor)

    $(document.getElementById('editar')).val(id)


}



function prepareJson(){
    var xhr  = new XMLHttpRequest();

    var tipo = $(document.getElementsByName('tipo')).val();
    var fecha = $(document.getElementsByName('Fecha')).val();
    var valor = $(document.getElementsByName('valor')).val();
    var editar = $(document.getElementById('editar')).val();
    var maestro = $(document.getElementById('maestroId')).val();
    var oferta = $(document.getElementById('ofertaId')).val();
    xhr.open('POST', '/Maestro/'+maestro+'/'+oferta+'/addNota', true);
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.send(JSON.stringify(
        {
            'tipo':tipo,
            'Fecha': fecha,
            'valor' : valor,
            'editar': editar
        }
    ))

    location.reload()
}




        </script>
          
</div>
   
{% endblock %}