{% extends "base.html" %}

{% block titulo %} Personal {% endblock %}

{% block seccion %}
<div class="content-header">
  <div class="container-fluid">
    <div class="row mb-2">
      <div class="col-sm-6">
        <h5 class="m-0">Panel de Personal</h5>
      </div>
      <div class="col-sm-6">
        <ol class="breadcrumb float-sm-right">
          <li class="breadcrumb-item"><a href="#">Lista</a></li>
          <li class="breadcrumb-item active">PDF</li>
          <li class="breadcrumb-item active">Personas</li>
        </ol>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block contenido %}
<div class="card card-dark card-outline">
  <div class="card-header">
    <div class="d-flex justify-content-between">
      <form action="{% url 'pdf_uno' %}" method="get">
        <div class="row">
          <div class="col-12">
            <div class="input-group">
              <select class="form-control" name="year" id="year">
              </select>
              <div class="input-group-append ">
               <button type="submit" class="btn btn-danger" target="_blank"><i class="fas fa-file-pdf"></i></button>
              </div>
            </div>
          </div>
        </div>
      </form>
      <div class="form-group col-md-2 text-right">
      {% if perms.seajb.add_personas %}
      <a href="#" class="btn btn-success" data-toggle="modal" data-target="#exampleModal"><i class="fas fa-plus-square"></i>
        Nuevo</a>
      {% endif %}
      </div>
    </div>
  </div>
  <div class="card-body">
    <table id="example1" class="table table-bordered table-striped  table-hover-blue">
      <thead class="table-dark">
        <tr>
          <th>N°</th>
          <th>FECHA</th>
          <th>CODIGO</th>
          <th>GRADO</th>
          <th>CATEGORIA</th>
          <th>NOMBRES Y APELLIDOS</th>
          <th>CEDULA</th>
          <th>AÑO</th>
          <th>ACCIONES</th>
        </tr>
      </thead>
      <tbody>
        {% for datos in personas %}
        <tr>
          <td>{{forloop.counter}}</td>
          <td>{{datos.fecha|date:"d/m/Y"}}</td>
          <td>{{datos.code}}</td>
          <td>{{datos.grado}}</td>
          <td>{{datos.categoria}}</td>
          <td>{{datos.datos}} </td>
          <td>{{datos.cedula}} </td>
          <td>{{datos.anio}} </td>
          <td>
          {% if perms.seajb.view_personas %}
            <a href="{% url 'informacion' datos.id %}" class="btn btn-success btn-sm"><i class="fas fa-solid fa-eye"></i></a> |
            {% endif %}

            {% if perms.seajb.change_personas %}
            <a href="{% url 'personas_editar'  datos.id %}" class="btn btn-info btn-sm"><i class="fas fa-solid fa-marker"></i></a> |
              {% endif %}

            {% if perms.seajb.view_personas %}
            <a href="{{datos.img.url}}" class="btn btn-warning btn-sm" target="_blank"><i class="fas fa-download"></i></a>
              
            {% endif %}
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
</div>

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <div class="modal-header bg-dark ">
        <h5 class="modal-title" id="exampleModalLabel">Formulario de Personas</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        {% include "personas/persona_formulario.html" %}
      </div>
    </div>
  </div>
  {% endblock %}

  
  {% block js %}
  <script>
  function ComboAno() {
      var d = new Date();
      var n = d.getFullYear();
      var select = document.getElementById("year");
      for (var i = n; i >= 1980; i--) {
        var opc = document.createElement("option");
        opc.text = i;
        opc.value = i;
        select.add(opc);
      }
    }

    window.onload = ComboAno;

  </script>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    var yearSelect = document.getElementById('anio');
    var currentYear = new Date().getFullYear();
    for (var year = 1970; year <= currentYear; year++) {
      var option = document.createElement('option');
      option.value = year;
      option.text = year;
      yearSelect.appendChild(option);
    }
  });
</script>

  {% endblock%}