{% extends "base.html" %}
{% load static %}

{% block title %}Asistencias Masivas - {{ capacitacion.nombre }}{% endblock title %}

{% block content %}
<div class="container mt-4">
  <div class="card">
    <!-- Encabezado con título y botón "Agregar Asistencias" -->
    <div class="card-header d-flex align-items-center">
      <!-- "me-auto" empuja todo lo que sigue hacia el extremo derecho -->
      <h3 class="card-title mb-0 me-auto">Asistencias de {{ capacitacion.nombre }}</h3>
          <div class="ml-auto">  
    <button type="button" class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#modalAgregarAsistencias">
        <i class="fas fa-plus"></i> Agregar Asistencias
      </button>
    </div>
  </div>

    <div class="card-body">
      <!-- Tabla de asistencias con filtros en el header -->
      <div class="table-responsive">
        <table id="tabla_asistencias" class="table table-bordered table-striped dt-responsive">
          <thead>
            <tr>
              <th>ID</th>
              <th>Nombre Miembro</th>
              <th>DNI</th>
              <th>Teléfono</th>
              <th>Acciones</th>
            </tr>
            <!-- Fila para filtros (justo debajo de los títulos) -->
            <tr class="filters">
              <th><input type="text" placeholder="Filtrar ID" class="form-control form-control-sm"></th>
              <th><input type="text" placeholder="Filtrar Nombre" class="form-control form-control-sm"></th>
              <th><input type="text" placeholder="Filtrar DNI" class="form-control form-control-sm"></th>
              <th><input type="text" placeholder="Filtrar Teléfono" class="form-control form-control-sm"></th>
              <th></th> <!-- Sin input para "Acciones" -->
            </tr>
          </thead>
          <tbody>
            {% for a in asistencias %}
            <tr>
              <td>{{ a.id }}</td>
              <td>{{ a.nombre_miembro }}</td>
              <td>{{ a.dni }}</td>
              <td>{{ a.telefono1 }}</td>
              <td class="text-end">
                <!-- Botón para eliminar vía AJAX -->
                <button class="btn btn-sm btn-danger btnBorrarAsistencia" data-id="{{ a.id }}">
                  <i class="fas fa-trash"></i> Eliminar
                </button>
              </td>
            </tr>
            {% empty %}
            <tr>
              <td colspan="5" class="text-center">No hay asistencias registradas.</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<!-- Modal para agregar asistencias masivas -->
<div class="modal fade" id="modalAgregarAsistencias" tabindex="-1" aria-labelledby="modalAgregarAsistenciasLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <form id="formMasivas" method="POST" action="{% url 'asistencias_masivas' capacitacion.id %}">
        {% csrf_token %}
        <div class="modal-header">
          <h5 class="modal-title" id="modalAgregarAsistenciasLabel">Registrar Asistencias Masivas</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
        </div>
        <div class="modal-body">
          <input type="hidden" name="capacitacion_id" value="{{ capacitacion.id }}">
          <table class="table table-bordered">
            <thead>
              <tr>
                <th>ID</th>
                <th>Nombre</th>
                <th>DNI</th>
                <th>Asistió</th>
              </tr>
            </thead>
            <tbody>
              {% for m in miembros %}
              <tr>
                <td>{{ m.id_miembro }}</td>
                <td>{{ m.nombre }}</td>
                <td>{{ m.dni }}</td>
                <td>
                  <input type="checkbox" name="asiste_{{ m.id_miembro }}" class="form-check-input">
                </td>
              </tr>
              {% empty %}
              <tr>
                <td colspan="4" class="text-center">No hay miembros disponibles para registrar asistencia.</td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-primary">Guardar Asistencias</button>
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
        </div>
      </form>
    </div>
  </div>
</div>
{% endblock content %}

{% block scripts %}
<!-- Dependencias (DataTables, jQuery, Bootstrap 5, etc.) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- DataTables CSS/JS -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css"/>
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>

<script>
  $(document).ready(function(){
    // Inicializar DataTable
    var tablaAsistencias = $('#tabla_asistencias').DataTable({
      responsive: true,
      autoWidth: false,
      pageLength: 50,
      order: [[0, 'asc']], // Ordenar por ID de forma ascendente
      dom: "<'row'<'col-md-6'l><'col-md-6 text-end'f>>" +
           "<'row'<'col-sm-12'tr>>" +
           "<'row'<'col-md-6'i><'col-md-6'p>>",
      language: {
        search: "Buscar en general:",
        lengthMenu: "Mostrar _MENU_ registros",
        info: "Mostrando _START_ a _END_ de _TOTAL_ registros",
        paginate: {
          first: "Primero",
          last: "Último",
          next: "Siguiente",
          previous: "Anterior"
        }
      }
    });

    // Filtros columna por columna (fila de filtros)
    $('#tabla_asistencias thead tr.filters th').each(function (index) {
      // La columna "Acciones" (index 4) no lleva filtro
      if (index === 4) return;
      $('input', this).on('keyup change', function () {
        if (tablaAsistencias.column(index).search() !== this.value) {
          tablaAsistencias.column(index).search(this.value).draw();
        }
      });
    });
    
    // Eliminar asistencia vía AJAX
    $(document).on("click", ".btnBorrarAsistencia", function(){
      let asistenciaId = $(this).data("id");
      if(confirm("¿Seguro que deseas eliminar esta asistencia?")){
        $.ajax({
          url: "{% url 'borrar_asistencia' 0 %}".replace("0", asistenciaId),
          method: "POST",
          data: { csrfmiddlewaretoken: "{{ csrf_token }}" },
          success: function(response) {
            if(response.success){
              location.reload();
            } else {
              alert("Error al eliminar asistencia.");
            }
          },
          error: function(){
            alert("Error al eliminar asistencia.");
          }
        });
      }
    });
  });
</script>

<!-- Alertas de Django con SweetAlert2 (opcional) -->
<!--
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
{% if messages %}
  {% for message in messages %}
    <script>
      Swal.fire({
        icon: '{% if message.tags == "success" %}success{% else %}error{% endif %}',
        title: '{{ message }}',
        timer: 5000,
        showConfirmButton: true
      });
    </script>
  {% endfor %}
{% endif %}
-->
{% endblock scripts %}