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

{% block title %}Listado de Asistencias{% endblock title %}

{% block content %}
<div class="container mt-4">
  <div class="card shadow-sm">
    <!-- Encabezado -->
    <div class="card-header d-flex flex-wrap justify-content-between align-items-center bg-primary text-white">
      <h3 class="card-title mb-2 mb-md-0">Asistencias - Capacitación: {{ capacitacion.nombre }}</h3>
      <div class="btn-group ml-auto">
        <a href="{% url 'listar_capacitaciones' %}" class="btn btn-secondary">
          <i class="fas fa-arrow-left"></i> Volver a Capacitaciones
        </a>
        <button type="button" class="btn btn-success" id="btnAbrirModalAsistencia">
          <i class="fas fa-plus"></i> Crear Asistencia
        </button>
      </div>
    </div>
    <div class="card-body">
      <!-- Tabla de Asistencias -->
      <div class="table-responsive">
        <table id="tabla_asistencias" class="table table-bordered table-striped dt-responsive nowrap">
          <thead>
            <tr>
              <th>ID</th>
              <th>Nombre Miembro</th>
              <th>DNI</th>
              <th>Estado Asistencia</th>
              <th>Entrega Manual</th>
              <th>Duración</th>
              <th>Observaciones</th>
              <th>Acciones</th>
            </tr>
            <!-- Fila de filtros por columna -->
            <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 Estado" class="form-control form-control-sm" /></th>
              <th><input type="text" placeholder="Filtrar Entrega" class="form-control form-control-sm" /></th>
              <th><input type="text" placeholder="Filtrar Duración" class="form-control form-control-sm" /></th>
              <th><input type="text" placeholder="Filtrar Observaciones" class="form-control form-control-sm" /></th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {% for a in asistencias %}
            <tr data-id="{{ a.id }}"
                data-capacitacion-nombre="{{ capacitacion.nombre }}"
                data-capacitacion-id="{{ capacitacion.id }}"
                data-miembro-nombre="{{ a.nombre_miembro }}">
              <td>{{ a.id }}</td>
              <td>{{ a.nombre_miembro }}</td>
              <td>{{ a.dni }}</td>
              <td>{{ a.estado_asistencia }}</td>
              <td>{% if a.entrega_manual %}Sí{% else %}No{% endif %}</td>
              <td>{{ a.duracion }}</td>
              <td>{{ a.observaciones }}</td>
              <td class="text-center">
                <button class="btn btn-warning btnEditarAsistencia" data-id="{{ a.id }}">
                  <i class="fas fa-edit"></i>
                </button>
                <button class="btn btn-danger btnBorrarAsistencia" data-id="{{ a.id }}">
                  <i class="fas fa-trash"></i>
                </button>
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<!-- Modal para Registrar Asistencia -->
<div class="modal fade" id="modalRegistrarAsistencia" tabindex="-1" role="dialog" aria-labelledby="modalRegistrarAsistenciaLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <form id="formRegistrarAsistencia" method="POST">
        {% csrf_token %}
        <div class="modal-header">
          <h5 class="modal-title" id="modalRegistrarAsistenciaLabel">Registro de Asistencia</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Cerrar">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <!-- Fila 1: Capacitación y Nombre Miembro -->
          <div class="row">
            <div class="form-group col-md-6">
              <label for="capacitacion_name">Capacitación</label>
              <select id="capacitacion_name" class="form-control" disabled>
                <option>{{ capacitacion.nombre }}</option>
              </select>
              <input type="hidden" name="capacitacion_id" value="{{ capacitacion.id }}">
            </div>
            <div class="form-group col-md-6">
              <label for="nombre_miembro">Nombre Miembro</label>
              <select id="nombre_miembro" name="persona_jrv_id" required>
                <!-- Opciones cargadas vía Tom Select -->
              </select>
            </div>
          </div>
          <hr class="my-3">
          <!-- Fila 2: Entrega Manual, Duración y Estado de Asistencia -->
          <div class="row">
            <div class="form-group col-md-4">
              <label for="entrega_manual">Entrega Manual</label>
              <div class="form-check">
                <input type="checkbox" class="form-check-input" id="entrega_manual" name="entrega_manual">
                <label class="form-check-label" for="entrega_manual">Entregado</label>
              </div>
            </div>
            <div class="form-group col-md-4">
              <label for="duracion">Duración</label>
              <input type="text" class="form-control" id="duracion" name="duracion">
            </div>
            <div class="form-group col-md-4">
              <label for="estado_asistencia">Estado de Asistencia</label>
              <input type="text" class="form-control" id="estado_asistencia" name="estado_asistencia" required>
            </div>
          </div>
          <hr class="my-3">
          <!-- Fila 3: Observaciones -->
          <div class="row">
            <div class="form-group col-md-12">
              <label for="observaciones">Observaciones</label>
              <textarea class="form-control" id="observaciones" name="observaciones" rows="3"></textarea>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
          <button type="submit" class="btn btn-primary">Guardar</button>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- Modal para Editar Asistencia -->
<div class="modal fade" id="modalEditarAsistencia" tabindex="-1" role="dialog" aria-labelledby="modalEditarAsistenciaLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <form id="formEditarAsistencia" method="POST">
        {% csrf_token %}
        <div class="modal-header">
          <h5 class="modal-title" id="modalEditarAsistenciaLabel">Editar Asistencia</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Cerrar">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <!-- Fila 1: Capacitación y Nombre Miembro (solo lectura) -->
          <div class="row">
            <div class="form-group col-md-6">
              <label for="edit_capacitacion_name">Capacitación</label>
              <select id="edit_capacitacion_name" class="form-control" disabled></select>
              <input type="hidden" id="edit_capacitacion_id" name="capacitacion_id">
            </div>
            <div class="form-group col-md-6">
              <label for="edit_nombre_miembro">Nombre Miembro</label>
              <select id="edit_nombre_miembro" class="form-control" disabled></select>
              <input type="hidden" id="edit_persona_jrv_id" name="persona_jrv_id">
            </div>
          </div>
          <hr class="my-3">
          <!-- Fila 2: Entrega Manual, Duración y Estado de Asistencia -->
          <div class="row">
            <div class="form-group col-md-4">
              <label for="edit_entrega_manual">Entrega Manual</label>
              <div class="form-check">
                <input type="checkbox" class="form-check-input" id="edit_entrega_manual" name="entrega_manual">
                <label class="form-check-label" for="edit_entrega_manual">Entregado</label>
              </div>
            </div>
            <div class="form-group col-md-4">
              <label for="edit_duracion">Duración</label>
              <input type="text" class="form-control" id="edit_duracion" name="duracion">
            </div>
            <div class="form-group col-md-4">
              <label for="edit_estado_asistencia">Estado de Asistencia</label>
              <input type="text" class="form-control" id="edit_estado_asistencia" name="estado_asistencia" required>
            </div>
          </div>
          <hr class="my-3">
          <!-- Fila 3: Observaciones -->
          <div class="row">
            <div class="form-group col-md-12">
              <label for="edit_observaciones">Observaciones</label>
              <textarea class="form-control" id="edit_observaciones" name="observaciones" rows="3"></textarea>
            </div>
          </div>
          <input type="hidden" id="edit_asistencia_id" name="asistencia_id">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
          <button type="submit" class="btn btn-primary">Guardar Cambios</button>
        </div>
      </form>
    </div>
  </div>
</div>
{% endblock content %}

{% block scripts %}
<!-- Dependencias: jQuery, DataTables, SweetAlert2, Tom Select, Bootstrap -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<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>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<link href="https://cdn.jsdelivr.net/npm/tom-select/dist/css/tom-select.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/tom-select/dist/js/tom-select.complete.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<script>
$(document).ready(function(){
  // Inicializar DataTable con search a la derecha y cantidad de registros a la izquierda, en español
  var table = $('#tabla_asistencias').DataTable({
    responsive: true,
    dom: "<'row'<'col-sm-6'l><'col-sm-6 text-right'f>>" +
         "B" +
         "<'row'<'col-sm-12'tr>>" +
         "<'row'<'col-sm-5'i><'col-sm-7'p>>",
    pageLength: 50,
    language: {
      search: "Buscar:",
      lengthMenu: "Mostrar _MENU_ registros",
      info: "Mostrando _START_ a _END_ de _TOTAL_ registros",
      paginate: {
        first: "Primero",
        last: "Último",
        next: "Siguiente",
        previous: "Anterior"
      }
    },
    columnDefs: [
      { targets: -1, responsivePriority: 1 },
      { targets: -2, responsivePriority: 2 }
    ],
    buttons: [
      { extend: 'copy', text: '<i class="far fa-copy"></i> Copiar' },
      { extend: 'excelHtml5', text: '<i class="far fa-file-excel"></i> Excel' },
      { extend: 'csvHtml5', text: '<i class="fas fa-file-csv"></i> CSV' },
      { extend: 'pdfHtml5', text: '<i class="far fa-file-pdf"></i> PDF', orientation: 'landscape', pageSize: 'LEGAL' },
      { extend: 'print', text: '<i class="fas fa-print"></i> Imprimir' }
    ]
  });

  // Filtros por columna (fila de filtros en thead)
  $('#tabla_asistencias thead tr.filters th').each(function(index) {
    if(index === 7) return; // No se agrega filtro a la columna de acciones
    $('input', this).on('keyup change', function(){
      table.column(index).search(this.value).draw();
    });
  });

  // Abrir modal de registrar asistencia
  $("#btnAbrirModalAsistencia").on("click", function(){
    $('#formRegistrarAsistencia')[0].reset();
    $("#modalRegistrarAsistencia").modal("show");
  });

  // Inicializar Tom Select para "nombre_miembro" en el modal de registro
  new TomSelect("#nombre_miembro", {
    valueField: "id",
    labelField: "label",
    searchField: "label",
    load: function(query, callback) {
      if (!query.length) return callback();
      fetch("{% url 'get_persona_jrv' %}?term=" + encodeURIComponent(query))
        .then(response => response.json())
        .then(callback)
        .catch(() => callback());
    },
    placeholder: "Buscar miembro (por nombre o DNI)"
  });

  // Enviar formulario de registro vía AJAX
  $("#formRegistrarAsistencia").on("submit", function(e){
    e.preventDefault();
    var formData = $(this).serialize();
    $.ajax({
      url: "{% url 'registrar_asistencia' %}",
      method: "POST",
      data: formData,
      headers: { "X-Requested-With": "XMLHttpRequest" },
      success: function(response){
        if(response.success){
          $("#modalRegistrarAsistencia").modal("hide");
          Swal.fire({ icon: "success", title: "Éxito", text: "Asistencia registrada exitosamente." });
          location.reload();
        } else {
          Swal.fire({ icon: "error", title: "Error", text: response.error || "No se pudo registrar la asistencia." });
        }
      },
      error: function(){
        Swal.fire({ icon: "error", title: "Error", text: "Error al enviar el formulario." });
      }
    });
  });

  // Editar asistencia: abrir modal y rellenar datos
  $(".btnEditarAsistencia").on("click", function(){
    let id = $(this).data("id");
    let row = $(this).closest("tr");
    let estado = row.find("td:nth-child(4)").text().trim();
    let entrega = row.find("td:nth-child(5)").text().trim();
    let duracion = row.find("td:nth-child(6)").text().trim();
    let observaciones = row.find("td:nth-child(7)").text().trim();
    let capacitacionNombre = row.data("capacitacion-nombre");
    let capacitacionId = row.data("capacitacion-id");
    let miembroNombre = row.data("miembro-nombre");
    let miembroId = row.data("miembro-id");

    $("#edit_asistencia_id").val(id);
    $("#edit_estado_asistencia").val(estado);
    $("#edit_entrega_manual").prop("checked", entrega === "Sí");
    $("#edit_duracion").val(duracion);
    $("#edit_observaciones").val(observaciones);
    $("#edit_capacitacion_name").html('<option>'+capacitacionNombre+'</option>');
    $("#edit_capacitacion_id").val(capacitacionId);
    $("#edit_nombre_miembro").html('<option>'+miembroNombre+'</option>');
    $("#edit_persona_jrv_id").val(miembroId);

    $("#modalEditarAsistencia").modal("show");
  });

  // Enviar formulario de edición vía AJAX
  $("#formEditarAsistencia").on("submit", function(e){
    e.preventDefault();
    let id = $("#edit_asistencia_id").val();
    $.ajax({
      url: "{% url 'editar_asistencia' 0 %}".replace("0", id),
      method: "POST",
      data: $(this).serialize(),
      headers: { "X-Requested-With": "XMLHttpRequest" },
      success: function(response){
        if(response.success){
          $("#modalEditarAsistencia").modal("hide");
          Swal.fire({ icon: "success", title: "Éxito", text: "Asistencia actualizada exitosamente." });
          location.reload();
        } else {
          Swal.fire({ icon: "error", title: "Error", text: response.error || "No se pudo actualizar la asistencia." });
        }
      },
      error: function(){
        Swal.fire({ icon: "error", title: "Error", text: "Error al enviar el formulario." });
      }
    });
  });

  // Borrar asistencia vía AJAX
  $(".btnBorrarAsistencia").on("click", function(){
    let id = $(this).data("id");
    Swal.fire({
      title: "¿Estás seguro?",
      text: "Se realizará un borrado suave de esta asistencia.",
      icon: "warning",
      showCancelButton: true,
      confirmButtonText: "Sí, borrar",
      cancelButtonText: "Cancelar"
    }).then((result) => {
      if(result.isConfirmed){
        $.ajax({
          url: "{% url 'borrar_asistencia' 0 %}".replace("0", id),
          method: "POST",
          headers: { "X-Requested-With": "XMLHttpRequest" },
          data: { csrfmiddlewaretoken: "{{ csrf_token }}" },
          success: function(response){
            if(response.success){
              Swal.fire({ icon: "success", title: "Borrado", text: "La asistencia fue borrada exitosamente." });
              location.reload();
            } else {
              Swal.fire({ icon: "error", title: "Error", text: response.error || "No se pudo borrar la asistencia." });
            }
          },
          error: function(){
            Swal.fire({ icon: "error", title: "Error", text: "Error al borrar la asistencia." });
          }
        });
      }
    });
  });
});
</script>

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