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

{% block css %}
<link rel='stylesheet' href ='../../../static/css/estilo.css'>
{% endblock %}
{% block body %}
<div class = 'row'>
<div class ='col-3'></div>
<div class="col-6">
    <form action ='/addOferta' method = 'POST'>
    Año: <input type="text" name = 'academico' class="form-control" placeholder="20xx-20xx">
    Horario:  <input type="text" name = 'horario' class="form-control" placeholder="9:00am - 10:00am">
    
    <label class="mr-sm-2" for="inlineFormCustomSelect">Curso</label>
    <select class="custom-select mr-sm-2" id="inlineFormCustomSelect" name= 'curso'>
      <option selected>Choose...</option>
        {% for curso  in cursos %}
            <option value ='{{curso.id}}'>{{curso.codigo}}</option>
        {% endfor %}
    </select>
<div id='maestros'>
    <label class="mr-sm-2" for="inlineFormCustomSelect">Maestrx</label>
    <select class="custom-select mr-sm-2" id = 'todosMaestros' name= 'Maestro[0]'>
      
          <option selected>Choose...</option>
      
        {% for maestro  in maestros %}
            <option value ='{{maestro.user_id}}'>{{maestro.apellidos}}, {{maestro.nombres}}</option>
        {% endfor %}
      
    </select>
</div>

    <div id = 'maestro'>

    </div>
    <input type = 'hidden' id = 'count' name = 'countRow' value = 1>
    <button type ='button' class ='btn btn-success' onclick ='javascript : myFunction("maestro")'>Añade Maestro</button>
    <button type ='submit' class ='btn btn-primary'>Someter</button>
</form>
</div>
</div>
<br>
<br>

<div class ='row'>
    <div class = 'col'>
<table class='table table-hover'>
    <thead>
        <tr>
            <th>Curso</th>
            <th>Codigo</th>
            <th>horario</th>
            <th>Cantidad de maestrxs</th>
            <th>Año académico</th>

        </tr>

    </thead>
    <tbody>
        
            {% for oferta in ofertas %}
            <tr>
            <td>{{oferta.titulo}}</td>
            <td>{{oferta.codigo}}</td>
            <td>{{oferta.horario}}</td>
            <td>{{oferta.cantidadMaestros}}</td>
            <td>{{oferta.semestre}}</td>
            <td><a type='button' class = 'btn btn-primary' href='/addMatricula/{{oferta.oferta_id}}'>Añadir estudiantes</a></td>
             </tr>


            {% endfor %}
        
    </tbody>
</table>
  </div>
  </div>

  <script>
      var index = 1
      function myFunction(string){
        var maestro =document.getElementById(string);

        var node = document.createElement("div");
            
        var input = document.getElementById('count');
        var todosMaestros = document.getElementById('todosMaestros')
        
                
        var newForm = document.getElementById(string+'s')
        
        node.innerHTML = '<label class="mr-sm-2" for="inlineFormCustomSelect">Maestrx</label>' +' <select class="custom-select mr-sm-2"  name= "Maestro['+index+']">' + todosMaestros.innerHTML+' </select>';

      index +=1;
        maestro.appendChild(node)

        
        input.value = parseInt(input.value) + 1;



        }


      
  </script>
  {% endblock %}