{% extends 'inc/base.html.twig' %}
{% block body %}
<div class="container">

<form method="post" action="{{ constant('URLROOT2') }}/tableros/asistencia_grabar/" autocomplete="off">
<div class="row mt-4 mb-4">
<div class="col-md-12 text-center">
<h3>Asistencia del d&iacute;a</h3>
</div>

<div class="col-md-2 text-center">
<input id="codemp" type="hidden" name="codemp" value="{{ codemp.cod }}">&nbsp;
</div>
<div class="col-md-2 text-center">
D&iacute;a:
<input class="form-control text-center" id="coddia" type="text" name="coddia" value="{{ codemp.dias }}" readonly>
</div>
<div class="col-md-2 text-center">
Mes:
<input class="form-control text-center" id="codmes" type="text" name="codmes" value="{{ codemp.mes }}" readonly>
</div>
<div class="col-md-2 text-center">
A&ntilde;o:
<input class="form-control text-center" id="codanho" type="text" name="codanho" value="{{ codemp.anho }}" readonly>
</div>
<div class="col-md-3 text-left pt-4">
<input type="submit" class="text-center btn btn-success" value="Grabar Asistencia" >&nbsp;&nbsp;&nbsp;
<a href="{{ constant('URLROOT2') }}/tableros/asistencia_empresa/" class="btn btn-danger">Regresar</a>
</div>
<div class="col-md-1 text-center">&nbsp;</div>

</div>

<table align="center" style="font-size: 12px;" bgcolor="#8CC6FF" width="100%" cellpadding="0" cellspacing="0" border="1" bordercolor="#9393FF">
  <tr>
   <td colspan="7" width='90%' align='center'  bgcolor="#FFCC33"><b><u>IMPORTANTE</u>:  La asistencia se registra por las horas laboradas en la empresa.</b></td>
  </tr>
  <tr>
   <td width='25%' align='center' bgcolor="#FFFF00"><b>LEYENDA</b></td>
   <td width='15%' align='center'><b>1 al 8: Asistencia</b></td>
    <td width='15%' align='center'><b>I: Inasistencia</b></td>
    <td width='15%' align='center'><b>J: Inasistencia Justificada</b></td>
    <td width='15%' align='center'><b>R: Retardo</b></td>
    <td width='15%' align='center'><b>P: Permiso</b></td>
  </tr>
</table>
<table class="table table-striped table-hover table-sm" style="width:100%;font-size: 10pt; ">
<thead style=" background-color: #4E73DF;color:#FFFFFF;">
    <tr class="d-flex">
    <th class='col text-center'>No.</th>
    <th class='col text-center'>C&eacute;dula</th>
    <th class='col text-center'>Aprendices</th>
    <th class='col text-center'>&nbsp;</th>
    <th class='col text-center'>&nbsp;</th>
    </tr>
  </thead>
  <tbody>
{% set n=1 %}
{% set x=1 %}
{% for educado in aprendices %}
    <tr class="d-flex">
    <td class='col text-center'>{{ n }}</td>
    <td class='col text-center'>{{ educado.cedula }}</td>
    <td class='col-4 text-left'>{{ educado.aprendiz }}
            {% if educado.estatus=='ACTIVO' %}
            <span class="badge badge-success">{{ educado.estatus }}</span>
            {% else %}
            <span class="badge badge-danger">{{ educado.estatus }}<br>{{ educado.f_tag| date('d/m/Y') }}</span>
            {% endif %}
      </td>
    <td class='col text-center'>
    <input type="hidden" name="asist_ced[]" value="{{ educado.cedula }}" >
        {% if educado.estatus=='ACTIVO' %}
        {% set x=x+1 %}
        <input tabindex="{{ x }}" class="form-control text-center" id="id{{ educado.cedula }}" maxlength="1" type="text" name="asist_dia[]" value="{{ educado.dias.dia }}" onkeyup="verificar(this.id,this.value);" >

        {% else %}
        <input class="form-control text-center" id="id{{ educado.cedula }}" type="text" name="asist_dia[]" value="" readonly >
        {% endif %}
    </td>
    <td class='col text-center'>&nbsp;</td>
    </tr>

{% set n=n+1 %}
{% endfor %}
</tbody>
</table>
</form>


<table align="center" style="font-size: 12px;" bgcolor="#8CC6FF" width="100%" cellpadding="0" cellspacing="0" border="1" bordercolor="#9393FF">

  <tr>
   <td width='25%' align='center' bgcolor="#FFFF00"><b>LEYENDA</b></td>
   <td width='15%' align='center'><b>1 al 8: Asistencia</b></td>
    <td width='15%' align='center'><b>I: Inasistencia</b></td>
    <td width='15%' align='center'><b>J: Inasistencia Justificada</b></td>
    <td width='15%' align='center'><b>R: Retardo</b></td>
    <td width='15%' align='center'><b>P: Permiso</b></td>
  </tr>
</table>

<table width="100%" cellpadding="0" cellspacing="0">
<tr><td width='100%'>&nbsp;</td> </tr>
<tr><td width='100%'>&nbsp;</td> </tr>
<tr><td width='100%'>&nbsp;</td> </tr>
<tr><td width='100%'>&nbsp;</td> </tr>
</table>
</div>
<div class="modal fade" id="FotoModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Foto Aprendiz</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="foto_ced"></div>
                    <div id="foto_ver"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
              </div>
        </div>
    </div>
</div>

{% endblock %}
{% block javascripts %}
<script>
function verificar(idElemento,valor){
console.log(idElemento)
let arreglo = ["1","2","3","4","5","6","7","8","I","J","R","P"];
let result = valor.toUpperCase();
let incluyeVeinte = arreglo.includes(result);
if(incluyeVeinte===false){
    //
    document.getElementById(idElemento).value="";
    document.getElementById(idElemento).select();
    return false;

}
document.getElementById(idElemento).value=result;
console.log(incluyeVeinte) // true
}

$('#ModalSabana').on('show.bs.modal', function (event) {
          var button = $(event.relatedTarget) // Botón que activó el modal
                    var id = button.data('curso') // Extraer la información de atributos de datos

                    var modal = $(this)
                //    modal.find('.modal-title').text('Modificar país: '+nombre)
                    modal.find('.modal-body #id_curso').val(id)

})

$('#FotoModal').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget) // Button that triggered the modal
    var foto = button.data('foto') // Extract info from data-* attributes
    var ced = button.data('ced')

    var modal = $(this)
    const ver_fotos="{{ constant('URLROOTI') }}"+foto;
    console.log(ver_fotos)
let foto_img='<img src="'+ver_fotos+'" width="75%" alt="">'
document.getElementById('foto_ver').innerHTML=foto_img;
document.getElementById('foto_ced').innerHTML=ced;
})

function session(){
    const cod=document.getElementById('codemp').value;
    localStorage.setItem("com", cod);
}
session();


$('input').on('keydown', function(e){
                // Solo nos importa si la tecla presionada fue ENTER... (Para ver el código de otras teclas: http://www.webonweboff.com/tips/js/event_key_codes.aspx)
                if(e.keyCode === 13)
                {
                        // Obtenemos el número del tabindex del campo actual
                        var currentTabIndex = $(this).attr('tabindex');
                        console.log(currentTabIndex)
                        // Le sumamos 1 :P
                        var nextTabIndex    = parseInt(currentTabIndex) + 1;
                        // Obtenemos (si existe) el siguiente elemento usando la variable nextTabIndex
                        var nextField       = $('[tabindex='+nextTabIndex+']');
                        // Si se encontró un elemento:
                        if(nextField.length > 0)
                        {
                                // Hacerle focus / seleccionarlo
                                nextField.focus();
                                // Ignorar el funcionamiento predeterminado (enviar el formulario)

                                e.preventDefault();
                        }
                }
});

</script>
{% endblock %}
