{% extends 'inc/base.html.twig' %}
{% block body %}
<div class="container">
    <div class="row">
        <div class="col-md-12 text-center">
<h3>Aprendices</h3>
</div>
</div>
<input id="codemp" type="hidden" name="codemp" value="{{ codemp.cod }}">
</div>
<table id='tabla00' 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'>C&eacute;dula</th>
    <th class='col text-center'>Aprendices</th>
    <th class='col text-center'>Sexo</th>
    <th class='col text-center'>Edad</th>
    <th class='col text-center'>&nbsp;</th>
    <th class='col text-center'>Cursos</th>
    <th class='col text-center'>Estado</th>
    <th class='col text-center'>&nbsp;</th>
    </tr>
  </thead>
  <tbody>

{% for educado in aprendices %}
    <tr class="d-flex">
      <td class='col text-center'>{{ educado.cedula }}</td>
      <td class='col text-left'>{{ educado.aprendiz }}</td>
      <td class='col text-center'>{{ educado.sexo }}</td>
      <td class='col text-center'>{{ educado.edad }}</td>
      <td class='col text-center'>
          <a class="dropdown-item" href='#' data-toggle="modal" data-target="#FotoModal" data-placement="top"  data-ced="{{ educado.aprendiz }}"  data-foto="{{ educado.documento }}">
          <!--<img src="{{ constant('URLROOTI') }}tmp_1708182085-DESCARGA000.JPG" alt="" width="50px">   -->
          <img src="{{ constant('URLROOTI') }}foto.jpg" alt="" width="25px"><br>FOTO
          </a>
      </td>
      <td class='col text-center'>{{ educado.descripcion }}</td>
    <td class='col text-center'>
            {% 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'>
    <a onclick="procesando();" class="btn btn-info btn-sm" href="{{ constant('URLROOT2') }}/tableros/detalles_notas/{{ educado.cid }}" data-toggle="tooltip" data-placement="top" title="Notas"><i class="fa fa-file-archive-o"></i></a>&nbsp;&nbsp;
<!--    <a onclick="procesando();" class="btn btn-primary btn-sm" href="{{ constant('URLROOT2') }}/tableros/detalles_doc/{{ educado.cid }}" data-toggle="tooltip" data-placement="top" title="Documentos"><i class="fa fa-book"></i></a>&nbsp;&nbsp;
     <a onclick="procesando();" class="btn btn-warning btn-sm" href="{{ constant('URLROOT2') }}/tableros/detalles_mov/{{ educado.cid }}" data-toggle="tooltip" data-placement="top" title="Movimientos"><i class="fa fa-tasks"></i></a>&nbsp;&nbsp;
 -->
    </td>
    </tr>

{% endfor %}
</tbody>
</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 %}
