{% extends 'inc/base.html.twig' %}
{% block body %}
<div class="container">
<form method="post" action="{{ constant('URLROOT2') }}/tableros/asistencia_nueva/">
<div class="row mt-4 mb-4">

<div class="col-md-12 text-center">
<h3>Asistencia en la Empresa</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">
Mes000:
<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-1 text-center">
Selecciona el d&iacute;a:
<select data-placeholder="Seleccione..." class="form-control" id="coddia" name="coddia" tabindex="1">
{% for i in 1..codemp.dias %}
<option value="{{ i }}">{{ i }}</option>
{% endfor %}
</select>
</div>

<div class="col-md-1 text-center">
Selecciona la semana:
<select data-placeholder="Seleccione..." class="form-control" id="coddia" name="coddia" tabindex="1">
{% for i in 1..codemp.dias %}
<option value="{{ i }}">{{ i }}</option>
{% endfor %}
</select>
</div>


<div class="col-md-4 text-left pt-4">
<input type="submit" class="btn btn-info" value="Cargar asistencia del d&iacute;a" >&nbsp;&nbsp;&nbsp;
<a href="{{ constant('URLROOT2') }}/tableros/asistencia_empresa_rpt/" target="_blank" class="btn btn-dark" > Imprimir Mes</a>

</div>
<!--<div class="col-md-1 text-center">&nbsp;</div>             -->

</div>
</form>

</div>

<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 class="table table-striped table-bordered table-hover table-sm" style="width:100%;font-size: 10pt;borde: 1px ">

    <tr  style=" background-color: #4E73DF;color:#FFFFFF;">
    <th class='col-1 text-center'>C&eacute;dula</th>
    <th class='text-center'>Aprendices</th>
{% for i in 1..codemp.dias %}
<!--<option value="{{ i }}">{{ i }}</option> -->
<th class='text-center'>{{ i }}</th>
{% endfor %}
  </tr>


{% for educado in aprendices %}
    <tr>
      <td class='text-center'>{{ educado.cedula }}</td>
      <td class='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='text-center'>{{ educado.dias.d1 }}</td>
<td class='text-center'>{{ educado.dias.d2 }}</td>
<td class=' text-center'>{{ educado.dias.d3 }}</td>
<td class=' text-center'>{{ educado.dias.d4 }}</td>
<td class=' text-center'>{{ educado.dias.d5 }}</td>
<td class=' text-center'>{{ educado.dias.d6 }}</td>
<td class=' text-center'>{{ educado.dias.d7 }}</td>
<td class=' text-center'>{{ educado.dias.d8 }}</td>
<td class=' text-center'>{{ educado.dias.d9 }}</td>
<td class=' text-center'>{{ educado.dias.d10 }}</td>
<td class=' text-center'>{{ educado.dias.d11 }}</td>
<td class=' text-center'>{{ educado.dias.d12 }}</td>
<td class=' text-center'>{{ educado.dias.d13 }}</td>
<td class=' text-center'>{{ educado.dias.d14 }}</td>
<td class=' text-center'>{{ educado.dias.d15 }}</td>
<td class=' text-center'>{{ educado.dias.d16 }}</td>
<td class=' text-center'>{{ educado.dias.d17 }}</td>
<td class=' text-center'>{{ educado.dias.d18 }}</td>
<td class=' text-center'>{{ educado.dias.d19 }}</td>
<td class=' text-center'>{{ educado.dias.d20 }}</td>
<td class=' text-center'>{{ educado.dias.d21 }}</td>
<td class=' text-center'>{{ educado.dias.d22 }}</td>
<td class=' text-center'>{{ educado.dias.d23 }}</td>
<td class=' text-center'>{{ educado.dias.d24 }}</td>
<td class=' text-center'>{{ educado.dias.d25 }}</td>
<td class=' text-center'>{{ educado.dias.d26 }}</td>
<td class=' text-center'>{{ educado.dias.d27 }}</td>
<td class=' text-center'>{{ educado.dias.d28 }}</td>
<td class=' text-center'>{{ educado.dias.d29 }}</td>
<td class=' text-center'>{{ educado.dias.d30 }}</td>
<td class=' text-center'>{{ educado.dias.d31 }}</td>
</tr>

{% endfor %}
    <tr  style=" background-color: #4E73DF;color:#FFFFFF;">
    <th class='col-1 text-center'>C&eacute;dula</th>
    <th class='text-center'>Aprendices</th>
{% for i in 1..codemp.dias %}
<!--<option value="{{ i }}">{{ i }}</option> -->
<th class='text-center'>{{ i }}</th>
{% endfor %}
  </tr>

</table>

<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>
$('#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();
</script>
{% endblock %}
