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

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

{% block content %}
<div class="mt-4">
  <div class="card">
    <!-- Header con botón "Agregar Voluntario" -->
    <div class="card-header d-flex justify-content-between align-items-center">
      <h3 class="card-title mb-0">Listado de voluntarios</h3>
      <div class="ml-auto">
        <a href="{% url 'registrar_persona' %}" class="btn btn-success btn-sm">
          <i class="fas fa-plus"></i> Agregar Voluntario
        </a>
      </div>
    </div>

    <div class="card-body">
      <div class="table-responsive">
        <!-- Aseguramos el 100% de ancho para scrollX -->
        <table id="tabla_personas" class="table table-hover table-sm align-middle table-borderless rounded-3"
          style="width: 100%;">
          <thead class="text-white" style="background-color: #A3B0C7 !important;">
            <tr>
              <th>ID</th>
              <th>Nombre</th>
              <th>DNI</th>
              <th>Teléfono</th>
              <th>Profesión</th>
              <th>Foto 1</th>
              <th>Foto 2</th>
              <th>Tipo Miembro</th>
              <th>Acciones</th>
            </tr>
          </thead>
          <tbody class="small">
            {% for p in personas %}
            <tr>
              <td>{{ p.id }}</td>
              <td>{{ p.nombre }}</td>
              <td>{{ p.dni }}</td>
              <td>{{ p.telefono1 }}</td>
              <td>{{ p.profesion }}</td>

              <!-- Botón para ver foto 1 (si existe) -->
              <td>
                {% if p.foto_url %}
                <button type="button" class="btn btn-sm btn-link" data-toggle="modal" data-target="#modalVerFoto"
                  data-foto-url="{{ p.foto_url }}">
                  <i class="fas fa-eye"></i>
                </button>
                {% else %}
                <span class="badge badge-secondary">Sin foto</span>
                {% endif %}
              </td>

              <!-- Botón para ver foto 2 (si existe) -->
              <td>
                {% if p.foto_url2 %}
                <button type="button" class="btn btn-sm btn-link" data-toggle="modal" data-target="#modalVerFoto2"
                  data-foto-url2="{{ p.foto_url2 }}">
                  <i class="fas fa-eye"></i>
                </button>
                {% else %}
                <span class="badge badge-secondary">Sin foto</span>
                {% endif %}
              </td>

              <!-- Tipo miembro / rol -->
              <td>
                {{ p.tipo_miembro }}
              </td>

              <td>
                <!-- Botón para subir/actualizar foto (solo primera foto en este ejemplo) -->
                <button type="button" class="btn btn-sm btn-secondary" data-toggle="modal"
                  data-target="#modalAgregarFoto" data-persona-id="{{ p.id }}">
                  <i class="fas fa-camera"></i>
                </button>

                <!-- Ejemplo otros botones: editar, eliminar, etc. -->
                <a href="{% url 'editar_persona' p.id %}" class="btn btn-sm btn-primary">
                  <i class="fas fa-edit"></i>
                </a>
                <button type="button" class="btn btn-sm btn-danger" data-toggle="modal"
                  data-target="#modalBorrarPersona" data-persona-id="{{ p.id }}">
                  <i class="fas fa-trash"></i>
                </button>
                <!-- Si tuvieras más acciones, agrégalas aquí -->
              </td>
            </tr>
            {% endfor %}
          </tbody>
          <tfoot>
            <tr>
              <th>ID</th>
              <th>Nombre</th>
              <th>DNI</th>
              <th>Teléfono</th>
              <th>Profesión</th>
              <th>Foto 1</th>
              <th>Foto 2</th>
              <th>Tipo Miembro</th>
              <th></th>
            </tr>
          </tfoot>
        </table>
      </div><!-- table-responsive -->
    </div><!-- card-body -->
  </div><!-- card -->
</div><!-- container -->

<!-- Modal para ver la foto 1 -->
<div class="modal fade" id="modalVerFoto" tabindex="-1" role="dialog" aria-labelledby="modalVerFotoLabel"
  aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalVerFotoLabel">Vista de Foto</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Cerrar">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body text-center">
        <img id="imagenModal" src="" alt="Foto" class="img-fluid">
      </div>
    </div>
  </div>
</div>

<!-- Modal para ver la foto 2 -->
<div class="modal fade" id="modalVerFoto2" tabindex="-1" role="dialog" aria-labelledby="modalVerFotoLabel2"
  aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalVerFotoLabel2">Vista de Foto 2</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Cerrar">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body text-center">
        <img id="imagenModal2" src="" alt="Foto 2" class="img-fluid">
      </div>
    </div>
  </div>
</div>

<!-- Modal Agregar/Actualizar Foto (SOLO 1 foto para tu vista agregar_foto) -->
<div class="modal fade" id="modalAgregarFoto" tabindex="-1" role="dialog" aria-labelledby="modalAgregarFotoLabel"
  aria-hidden="true">
  <div class="modal-dialog" role="document">
    <!-- Importante: method="post", y {% csrf_token %} para no tener error 403 -->
    <form id="formAgregarFoto" method="post" enctype="multipart/form-data">
      {% csrf_token %}
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="modalAgregarFotoLabel">Agregar/Actualizar Foto</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Cerrar">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <!-- Input oculto para asociar la persona -->
          <input type="hidden" name="persona_id" id="foto_persona_id" value="">

          <!-- Controles para subir/tomar la foto (solo 1) -->
          <div class="form-group">
            <label for="foto_archivo">Foto</label>
            <div class="btn-group mb-2" role="group">
              <!-- Al hacer clic, for="foto_archivo" abre el diálogo de archivos -->
              <label for="foto_archivo" class="btn btn-outline-primary btn-sm"
                onclick="document.getElementById('foto_archivo').setAttribute('capture', 'environment');">
                Tomar Foto
              </label>
              <label for="foto_archivo" class="btn btn-outline-primary btn-sm"
                onclick="document.getElementById('foto_archivo').removeAttribute('capture');">
                Subir desde Galería
              </label>
            </div>
            <input type="file" name="foto_archivo" id="foto_archivo" class="form-control" accept="image/*"
              style="display: none;">
          </div>
          <div class="form-group">
            <label>Foto 2</label>
            <div class="btn-group mb-2" role="group">
              <label for="foto_archivo2" class="btn btn-outline-primary btn-sm"
                onclick="document.getElementById('foto_archivo2').setAttribute('capture', 'environment');">
                Tomar Foto
              </label>
              <label for="foto_archivo2" class="btn btn-outline-primary btn-sm"
                onclick="document.getElementById('foto_archivo2').removeAttribute('capture');">
                Subir desde Galería
              </label>
            </div>
            <input type="file" name="foto_archivo2" id="foto_archivo2" class="form-control" accept="image/*"
              style="display: none;">
          </div>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-primary">Guardar Foto</button>
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
        </div>
      </div>
    </form>
  </div>
</div>

<!-- Modal para confirmar eliminación de persona -->
<div class="modal fade" id="modalBorrarPersona" tabindex="-1" role="dialog" aria-labelledby="modalBorrarPersonaLabel"
  aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalBorrarPersonaLabel">Confirmar eliminación</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Cerrar">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ¿Estás seguro que deseas borrar esta persona?
        <input type="hidden" id="persona_borrar_id" value="">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" id="confirmBorrarPersona">
          <i class="fas fa-trash"></i> Borrar
        </button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
      </div>
    </div>
  </div>
</div>
{% endblock content %}

{% block scripts %}


<script>
  $(document).ready(function () {
    // Inicializar DataTable (opcional, si así lo deseas)
    $('#tabla_personas').DataTable({
      autoWidth: false,
      scrollX: true,
      scrollY: '300px',
      scrollCollapse: true,
      pageLength: 50,
      dom: 'Brftip',
      orderCellsTop: true,  // Permite filtros en el `tfoot`
      buttons: [
        { extend: 'copy', className: 'btn btn-secondary btn-sm', text: '<i class="fas fa-copy"></i>' },
        { extend: 'excel', className: 'btn btn-success btn-sm', text: '<i class="fas fa-file-excel"></i>', attr: { style: 'background-color: #218838; border-color: #218838;' } },
        { extend: 'pdf', className: 'btn btn-danger btn-sm', text: '<i class="fas fa-file-pdf"></i>' },
        { extend: 'print', className: 'btn btn-info btn-sm', text: '<i class="fas fa-print"></i>' },
        {
          extend: 'colvis',
          text: '<i class="fas fa-eye"></i>',
          className: 'btn btn-primary btn-sm'
        }
      ],
      initComplete: function () {
        // **Filtros en el tfoot**
        this.api().columns().every(function () {
          var column = this;
          var title = $(column.footer()).text().trim();

          if (title !== "Acciones" && title !== "") {  // Evita filtros en la columna de Acciones
            var input = $('<input class="form-control form-control-sm filterControl" type="text" placeholder="Filtrar ' + title + '" />')
              .appendTo($(column.footer()).empty())
              .on("keyup change clear", function () {
                if (column.search() !== this.value) {
                  column.search(this.value).draw();
                }
              });
          }
        });
      },
      fixedColumns: { rightColumns: 1 }
    });

    // Modal para ver foto 1
    $('#modalVerFoto').on('show.bs.modal', function (event) {
      var button = $(event.relatedTarget);
      var fotoUrl = button.data('foto-url');
      $('#imagenModal').attr('src', fotoUrl);
    });

    // Modal para ver foto 2
    $('#modalVerFoto2').on('show.bs.modal', function (event) {
      var button = $(event.relatedTarget);
      var fotoUrl2 = button.data('foto-url2');
      $('#imagenModal2').attr('src', fotoUrl2);
    });

    // Al abrir modal Agregar/Actualizar Foto
    $('#modalAgregarFoto').on('show.bs.modal', function (event) {
      var button = $(event.relatedTarget);
      var personaId = button.data('persona-id');

      // Poner el id de la persona en el hidden input
      $('#foto_persona_id').val(personaId);

      // Limpiar el input file
      $('#foto_archivo').val('');
      // Si tuvieras el segundo input file activo, lo limpias también:
      $('#foto_archivo2').val('');
    });

    // Enviar el formulario de foto vía AJAX (una sola foto)
    $('#formAgregarFoto').on('submit', function (e) {
      e.preventDefault();
      var personaId = $('#foto_persona_id').val();
      // Recoger la primera foto
      var file_data = $('#foto_archivo').prop('files')[0];
      // Recoger la segunda foto
      var file_data2 = $('#foto_archivo2').prop('files')[0];

      if (!file_data && !file_data2) {
        Swal.fire({
          icon: 'warning',
          title: 'Atención',
          text: 'Por favor, selecciona al menos una imagen.'
        });
        return;
      }

      var formData = new FormData();
      if (file_data) {
        formData.append('foto_archivo', file_data);
      }
      if (file_data2) {
        formData.append('foto_archivo2', file_data2);
      }

      // Agregar CSRF token
      formData.append('csrfmiddlewaretoken', '{{ csrf_token }}');

      // Construir la URL usando el id de la persona
      var url = "{% url 'agregar_foto' 0 %}".replace("0", personaId);

      $.ajax({
        url: url,
        type: 'POST',
        data: formData,
        contentType: false,
        processData: false,
        success: function (response) {
          if (response.status === 'ok') {
            Swal.fire({
              icon: 'success',
              title: 'Foto actualizada',
              text: response.msg,
              timer: 2000,
              showConfirmButton: false
            }).then(() => {
              $('#modalAgregarFoto').modal('hide');
              location.reload();
            });
          } else {
            Swal.fire({
              icon: 'error',
              title: 'Error',
              text: response.msg
            });
          }
        },
        error: function (xhr) {
          Swal.fire({
            icon: 'error',
            title: 'Error',
            text: 'Error al actualizar la foto'
          });
        }
      });

    });

    // Modal para borrar persona
    $('#modalBorrarPersona').on('show.bs.modal', function (event) {
      var button = $(event.relatedTarget);
      var personaId = button.data('persona-id');
      $('#persona_borrar_id').val(personaId);
    });

    // Confirmar borrado de persona
    $('#confirmBorrarPersona').on('click', function () {
      var personaId = $('#persona_borrar_id').val();
      $.ajax({
        url: "{% url 'borrar_persona' 0 %}".replace("0", personaId),
        type: 'POST',
        data: {
          csrfmiddlewaretoken: '{{ csrf_token }}'
        },
        dataType: "json",
        success: function (response) {
          if (response.success) {
            Swal.fire({
              icon: 'success',
              title: 'Éxito',
              text: 'Persona eliminada correctamente.',
              timer: 2000,
              showConfirmButton: false
            }).then(() => {
              location.reload();
            });
          } else {
            Swal.fire({
              icon: 'error',
              title: 'Error',
              text: response.error || 'No se pudo borrar la persona.'
            });
          }
        },
        error: function (xhr) {
          Swal.fire({
            icon: 'error',
            title: 'Error',
            text: 'Error al borrar la persona.'
          });
        }
      });
    });
  });
</script>
{% endblock scripts %}