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

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

{% block content %}
<div class="container 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-bordered table-striped nowrap" style="width:100%">
          <thead>
            <tr>
              <th>ID</th>
              <th>Nombre</th>
              <th>DNI</th>
              <th>Teléfono</th>
              <th>Profesión</th>
              <th>Centro Votación</th>
              <th>Foto</th>
              <th>Foto 2</th>
              <th>Rol Asignado</th>
              <th>Acciones</th>
            </tr>
          </thead>
          <tbody>
            {% 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>
              <td>{{ p.centro_votacion }}</td>
              <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>
              <td>
                {% if p.foto_url2 %}
                <button type="button" class="btn btn-sm btn-link" data-toggle="modal" data-target="#modalVerFoto2" data-foto-url="{{ p.foto_url2 }}">
                  <i class="fas fa-eye"></i>
                </button>
                {% else %}
                <span class="badge badge-secondary">Sin foto</span>
                {% endif %}
              </td>
              <td>
                {{ p.rol_asignado }}
                {% if p.jrv_codigo and p.jrv_codigo != 'N/A' %}
                  - {{ p.jrv_codigo }}
                {% endif %}
              </td>
              <td>
                <button type="button" class="btn btn-sm btn-info" data-toggle="modal" data-target="#modalAsignarRolJRV" data-persona-id="{{ p.id }}">
                  <i class="fas fa-user-cog"></i>
                </button>
                <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>
                <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>
                <!-- Botones para procesar solicitud pendiente (solo para administradores) -->
                {% if p.solicitud_id and p.token %}
                <button type="button" class="btn btn-sm btn-success btn-autorizar-solicitud" data-solicitud-id="{{ p.solicitud_id }}" data-token="{{ p.token }}">
                  <i class="fas fa-check"></i>
                </button>
                <button type="button" class="btn btn-sm btn-danger btn-rechazar-solicitud" data-solicitud-id="{{ p.solicitud_id }}" data-token="{{ p.token }}">
                  <i class="fas fa-times"></i>
                </button>
                {% endif %}
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
      <!-- Contenedor para mostrar el resultado de la acción de aprobación/rechazo -->
      <div id="resultadoSolicitud"></div>
    </div>
  </div>
</div>

<!-- 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 para Asignar Rol a JRV -->
<div class="modal fade" id="modalAsignarRolJRV" tabindex="-1" role="dialog" aria-labelledby="modalAsignarRolJRVLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <form id="formAsignarRolJRV" method="post">
      {% csrf_token %}
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="modalAsignarRolJRVLabel">Asignar Rol a voluntario</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Cerrar">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <!-- Campo oculto para la persona -->
          <input type="hidden" name="persona_id" id="asignacion_persona_id" value="">
          <div class="form-group">
            <label for="jrv_select">JRV</label>
            <select id="jrv_select" name="jrv_id" class="form-control">
              <option value="">-- Selecciona JRV --</option>
            </select>
          </div>
          <div class="form-group">
            <label for="rol_jrv_select">Rol</label>
            <select id="rol_jrv_select" name="rol_jrv_id" class="form-control">
              <option value="">-- Selecciona Rol --</option>
            </select>
          </div>
          <div class="form-group">
            <label for="fecha_asignacion">Fecha Asignación</label>
            <input type="date" id="fecha_asignacion" name="fecha_asignacion" class="form-control" required>
          </div>
          <div class="form-group">
            <label for="observaciones">Observaciones</label>
            <textarea id="observaciones" name="observaciones" class="form-control" rows="3"></textarea>
          </div>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-primary">Asignar</button>
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
        </div>
      </div>
    </form>
  </div>
</div>

<!-- Modal Agregar Foto -->
<div class="modal fade" id="modalAgregarFoto" tabindex="-1" role="dialog" aria-labelledby="modalAgregarFotoLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <form id="formAgregarFoto" enctype="multipart/form-data">
      <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 type="hidden" name="persona_id" id="foto_persona_id" value="">
          <div class="form-group">
            <label for="foto_archivo">Seleccionar foto</label>
            <input type="file" name="foto_archivo" id="foto_archivo" class="form-control" accept="image/*">
          </div>
          <div class="form-group">
            <label for="foto_archivo2">Seleccionar foto 2</label>
            <input type="file" name="foto_archivo2" id="foto_archivo2" class="form-control" accept="image/*">
          </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 %}
<!-- DataTables con Bootstrap4 CSS/JS -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap4.min.css"/>
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap4.min.js"></script>

<!-- FixedColumns Extension (CSS/JS) -->
<link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/4.0.1/css/fixedColumns.bootstrap4.min.css"/>
<script src="https://cdn.datatables.net/fixedcolumns/4.0.1/js/dataTables.fixedColumns.min.js"></script>

<!-- Botones (para export) -->
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.7.1/css/buttons.bootstrap4.min.css"/>
<script src="https://cdn.datatables.net/buttons/1.7.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.bootstrap4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.print.min.js"></script>

<!-- Select2 CSS/JS -->
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<script>
$(document).ready(function () {
  // Inicialización de DataTable con scroll horizontal, desactivando Responsive y fijando la última columna ("Acciones")
  var table = $('#tabla_personas').DataTable({
    scrollX: true,
    responsive: false,
    autoWidth: false,
    pageLength: 50,
    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>>",
    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' }
    ],
    language: {
      search: "Buscar:",
      lengthMenu: "Mostrar _MENU_ registros",
      info: "Mostrando _START_ a _END_ de _TOTAL_ registros",
      paginate: {
        first: "Primero",
        last: "Último",
        next: "Siguiente",
        previous: "Anterior"
      }
    },
    fixedColumns: {
      rightColumns: 1  // Fija la última columna ("Acciones")
    }
  });

  // 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-url');
    $('#imagenModal2').attr('src', fotoUrl2);
  });

  // Modal Asignar Rol + JRV
  $('#modalAsignarRolJRV').on('shown.bs.modal', function (event) {
    var button = $(event.relatedTarget);
    var personaId = button.data('persona-id');
    $('#asignacion_persona_id').val(personaId);

    // Cargar JRV
    $.ajax({
      url: "{% url 'get_jrv' %}",
      type: 'GET',
      success: function (response) {
        var jrvList = response.jrv || [];
        var $jrvSelect = $('#jrv_select');
        $jrvSelect.empty().append('<option value="">-- Selecciona JRV --</option>');
        jrvList.forEach(function (item) {
          $jrvSelect.append('<option value="' + item.id + '">' + item.codigo + ' - ' + item.ubicacion + '</option>');
        });
        $jrvSelect.select2({
          width: '100%',
          placeholder: '-- Selecciona JRV --',
          allowClear: true
        });
      },
      error: function () { alert('Error al obtener JRV'); }
    });

    // Cargar Roles
    $.ajax({
      url: "{% url 'get_roles' %}",
      type: 'GET',
      success: function (response) {
        var roles = response.roles || [];
        var $rolSelect = $('#rol_jrv_select');
        $rolSelect.empty().append('<option value="">-- Selecciona Rol --</option>');
        roles.forEach(function (item) {
          $rolSelect.append('<option value="' + item.id + '">' + item.nombre_rol + '</option>');
        });
        $rolSelect.select2({
          width: '100%',
          placeholder: '-- Selecciona Rol --',
          allowClear: true
        });
      },
      error: function () { alert('Error al obtener roles'); }
    });
  });

  $('#formAsignarRolJRV').on('submit', function (e) {
    e.preventDefault();
    var personaId = $('#asignacion_persona_id').val();
    var formData = $(this).serialize();
    var asignarRolUrl = "{% url 'asignar_rol' 0 %}".replace("0", personaId);
    $.ajax({
      url: asignarRolUrl,
      type: 'POST',
      data: formData,
      success: function (response) {
        Swal.fire({
          icon: 'success',
          title: 'Actualización exitosa',
          text: 'El rol se actualizó con éxito.',
          timer: 2000,
          showConfirmButton: false
        }).then(() => {
          $('#modalAsignarRolJRV').modal('hide');
          location.reload();
        });
      },
      error: function (xhr) {
        Swal.fire({ icon: 'error', title: 'Error', text: 'Error al solicitar la asignación del rol en JRV' });
      }
    });
  });

  // Modal Agregar Foto
  $('#modalAgregarFoto').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget);
    var personaId = button.data('persona-id');
    $('#foto_persona_id').val(personaId);
    $('#foto_archivo').val('');
    $('#foto_archivo2').val('');
  });

  $('#formAgregarFoto').on('submit', function (e) {
    e.preventDefault();
    var personaId = $('#foto_persona_id').val();
    var file_data = $('#foto_archivo').prop('files')[0];
    var file_data2 = $('#foto_archivo2').prop('files')[0];
    if (!file_data && !file_data2) {
      Swal.fire({ icon: 'warning', title: 'Atención', text: 'Por favor, selecciona ambas imágenes.' });
      return;
    }
    var formData = new FormData();
    formData.append('foto_archivo', file_data);
    formData.append('foto_archivo2', file_data2);
    formData.append('csrfmiddlewaretoken', '{{ csrf_token }}');
    $.ajax({
      url: `/votaciones/personas/agregar-foto/${personaId}/`,
      type: 'POST',
      data: formData,
      contentType: false,
      processData: false,
      success: function (response) {
        $('#modalAgregarFoto').modal('hide');
        Swal.fire({
          icon: 'success',
          title: 'Fotos actualizadas',
          text: response.msg,
          timer: 2000,
          showConfirmButton: false
        }).then(() => { location.reload(); });
      },
      error: function (xhr) {
        Swal.fire({ icon: 'error', title: 'Error', text: 'Error al actualizar las fotos' });
      }
    });
  });

  // 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);
  });

  $('#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.' });
      }
    });
  });

  // Función para procesar la solicitud pendiente de asignación de rol (autorización o rechazo)
  function procesarSolicitudPendiente(solicitudId, accion, token) {
    $.ajax({
      url: `/votaciones/asignacion/pendiente/${solicitudId}/${accion}/${token}/`,
      type: 'GET',
      success: function(response) { $('#resultadoSolicitud').html(response); },
      error: function(xhr, status, error) { alert('Error al procesar la solicitud: ' + error); }
    });
  }

  // Manejadores de clic para botones de autorización y rechazo
  $(document).on('click', '.btn-autorizar-solicitud', function(e) {
    e.preventDefault();
    var solicitudId = $(this).data('solicitud-id');
    var token = $(this).data('token');
    procesarSolicitudPendiente(solicitudId, 'authorize', token);
  });

  $(document).on('click', '.btn-rechazar-solicitud', function(e) {
    e.preventDefault();
    var solicitudId = $(this).data('solicitud-id');
    var token = $(this).data('token');
    procesarSolicitudPendiente(solicitudId, 'reject', token);
  });

  // Asignar capacitador (opcional)
  window.asignarCapacitador = function(personaId) {
    if (!confirm("¿Seguro que deseas asignar como capacitador a la persona con ID " + personaId + "?")) { return; }
    $.ajax({
      url: `/personas/asignar-capacitador/${personaId}/`,
      type: 'POST',
      data: { 'csrfmiddlewaretoken': '{{ csrf_token }}' },
      success: function (response) { alert(response.msg); },
      error: function (xhr) { alert('Error al asignar capacitador'); }
    });
  }
});
</script>
{% endblock scripts %}