{% 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'>Asistencia</h1>
<div class ='row'>
   
    <div class="col">
    <form action="/dashboard/{{MaestroId}}/{{ofertaId}}/addAsistencia" method="POST"></form>
    <label for="Fecha">Fecha (Deje en blanco si la asistencia es de hoy):</label>
        <input type="date" id="Fecha" name="Fecha" value = '{{fecha}}' onchange ='changeFecha(event, {{MaestroId}} , {{ofertaId}});'> 
       
    <table class='table table-bordered table-hover'>
            <thead>
                <tr>
                    <th class ='w-50'>Estudiantes</th>
                    <th>Presente</th>
                    <th>Tarde</th>
                    <th>Ausente</th>
                    <th>Excusado</th>
                </tr>
            </thead>
            <tbody>
            {% set count = namespace(value=0) %}
            {% for estud in estudiantes %}
                <tr data-value = {{estud.matricula}}>
                     <td>{{estud.apellidos}} {{estud.nombres}}</td>
                     
                     <td> <div class = "form-check form-check-inline"><input class="form-check-input" type="radio" name="Asistencia[{{count.value}}]" onchange = 'changeAsistencia("Asistencia[{{count.value}}]", "{{estud.matricula}}", 0, {{MaestroId}}, {{ofertaId}})' id="0"></div> </td>
                     <td> <div class = "form-check form-check-inline"><input class="form-check-input" type="radio" name="Asistencia[{{count.value}}]" onchange = 'changeAsistencia("Asistencia[{{count.value}}]", "{{estud.matricula}}", 1, {{MaestroId}}, {{ofertaId}})' id="1"></div> </td>
                     <td> <div class = "form-check form-check-inline"><input class="form-check-input" type="radio" name="Asistencia[{{count.value}}]" onchange = 'changeAsistencia("Asistencia[{{count.value}}]", "{{estud.matricula}}", 2, {{MaestroId}}, {{ofertaId}})' id="2"></div> </td>
                     <td> <div class = "form-check form-check-inline"><input class="form-check-input" type="radio" name="Asistencia[{{count.value}}]" onchange = 'changeAsistencia("Asistencia[{{count.value}}]", "{{estud.matricula}}", 3, {{MaestroId}}, {{ofertaId}})' id="3"></div> </td>
                     
                </tr>
                {% set count.value = count.value + 1 %}
            {% endfor %}
            </tbody>
        </table>
        <button type='submit' class='btn btn-success'>Someter</button>
    </div>
    

    </form>
    
            
        </div>

        <script>

            function changeFecha(e, maestro, oferta){
               

                
                

                location.replace('/Maestro/'+maestro+'/'+oferta+'/addAsistencia/'+e.target.value);

                

            }
        
            var asistenciaCompleta = jQuery.parseJSON('{{dictList | tojson | safe }}');

            $(document).ready(function(){
                
                $('tr').each(function(){

                    var student = $(this).data('value');
                    student = parseInt(student);
                    var tr = $(this);
                    
                    tr.children('td').each(function(){
                        var td = $(this);
                        td.children('div').each(function(){
                            var div = $(this)
                            div.children('input').each(function(){

                                if(typeof(asistenciaCompleta[student])!='undefined' && $(this).attr('id') == asistenciaCompleta[student].Asistencia){
                                $(this).prop('checked', true);
                                }

                            })
                            
                            
                            }
                        )
                    })

                })
            })

            function changeAsistencia(nameInput, matricula, valor, maestro, oferta){


                
                var fecha = document.getElementById('Fecha');
                fecha = $(fecha).val()

                matricula = parseInt(matricula);

                var xhr = new XMLHttpRequest();

                xhr.open("POST",'/Maestro/'+maestro+'/'+oferta+'/addAsistencia/'+fecha, true);

                xhr.setRequestHeader('Content-Type', 'application/json');
                xhr.send(JSON.stringify(
                    {
                        'Matricula': matricula,
                        'Asistencia':valor,
                        'Fecha': fecha
                    }
                    
                ));
            }
        </script>
          

          
{% endblock %}