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

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

{% block content %}
<div class="mt-4">
  <div class="card">
    <!-- Encabezado con título y botón "Agregar Persona Confiable" -->
    <div class="card-header d-flex align-items-center">
      <h3 class="card-title mb-0">Listado de Personas Confiables</h3>
      <div class="ml-auto">
        <button type="button" class="btn btn-success btn-sm" data-toggle="modal" data-target="#modalRegistrarPersonaConfiable">
          <i class="fas fa-plus"></i> Agregar Persona Confiable
        </button>
      </div>
    </div>

    <div class="card-body">
      <!-- Tabla de personas confiables con filtros en el header -->
      <div class="table-responsive">
        <table id="tabla_personas_confiables" class="table table-bordered table-striped dt-responsive nowrap">
          <thead>
            <!-- Fila de filtros -->
            <tr>
              <th><input type="text" placeholder="Buscar ID" class="form-control form-control-sm"></th>
              <th><input type="text" placeholder="Buscar Nombre Miembro" class="form-control form-control-sm"></th>
              <th><input type="text" placeholder="Buscar DNI" class="form-control form-control-sm"></th>
              <th><input type="text" placeholder="Buscar Teléfono" class="form-control form-control-sm"></th>
              <th><input type="text" placeholder="Buscar Dirección" class="form-control form-control-sm"></th>
              <th><input type="text" placeholder="Buscar Sexo" class="form-control form-control-sm"></th>
              <th><input type="text" placeholder="Buscar Tipo" class="form-control form-control-sm"></th>
              <th></th>
            </tr>
            <!-- Fila de encabezados -->
            <tr>
              <th>ID</th>
              <th>Nombre Miembro</th>
              <th>Identidad (DNI)</th>
              <th>Teléfono</th>
              <th>Dirección</th>
              <th>Sexo</th>
              <th>Tipo</th>
              <th>Acciones</th>
            </tr>
          </thead>
          <tbody>
            {% for p in personas_confiables %}
            <tr>
              <td>{{ p.id }}</td>
              <td>{{ p.nombre_miembro }}</td>
              <td>{{ p.dni }}</td>
              <td>{{ p.telefono1 }}</td>
              <td>{{ p.direccion }}</td>
              <td>{{ p.sexo }}</td>
              <td>{{ p.tipo_nombre }}</td>
              <td class="text-right">
                <!-- Botón Borrar (borrado suave) -->
                <button type="button" class="btn btn-sm btn-danger btnBorrarPersonaConfiable" data-id="{{ p.id }}">
                  <i class="fas fa-trash"></i> Eliminar
                </button>
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<!-- Modal Registrar Persona Confiable -->
<div class="modal fade" id="modalRegistrarPersonaConfiable" tabindex="-1" role="dialog" aria-labelledby="modalRegistrarPersonaConfiableLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <form id="formRegistrarPersonaConfiable" method="POST" action="{% url 'registrar_persona_confiable' %}">
      {% csrf_token %}
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="modalRegistrarPersonaConfiableLabel">Registrar Persona Confiable</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Cerrar">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <!-- Seleccionar la persona (miembro) con Tom Select -->
          <div class="form-group">
            <label for="rpc_persona_jrv_id">Nombre Miembro</label>
            <select id="rpc_persona_jrv_id" name="persona_jrv_id" required></select>
          </div>
          <!-- Mostrar datos adicionales en solo lectura -->
          <div class="form-group">
            <label for="rpc_identidad">Identidad (DNI)</label>
            <input type="text" class="form-control" id="rpc_identidad" readonly>
          </div>
          <div class="form-group">
            <label for="rpc_telefono1">Teléfono</label>
            <input type="text" class="form-control" id="rpc_telefono1" readonly>
          </div>
          <div class="form-group">
            <label for="rpc_direccion">Dirección</label>
            <input type="text" class="form-control" id="rpc_direccion" readonly>
          </div>
          <div class="form-group">
            <label for="rpc_sexo">Sexo</label>
            <input type="text" class="form-control" id="rpc_sexo" readonly>
          </div>
          <!-- Seleccionar el tipo de persona confiable usando Select2 -->
          <div class="form-group">
            <label for="rpc_tipo_id">Tipo de Persona Confiable</label>
            <select id="rpc_tipo_id" name="tipo_id" class="form-control" required></select>
          </div>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-primary">Guardar</button>
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
        </div>
      </div>
    </form>
  </div>
</div>

<!-- Modal para Confirmar Borrado de Persona Confiable -->
<div class="modal fade" id="modalBorrarPersonaConfiable" tabindex="-1" role="dialog" aria-labelledby="modalBorrarPersonaConfiableLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalBorrarPersonaConfiableLabel">Confirmar Borrado</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á seguro que desea borrar esta persona confiable?
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
        <button type="button" id="confirmBorrarPersonaConfiable" class="btn btn-danger">Borrar</button>
      </div>
    </div>
  </div>
</div>
{% endblock content %}

{% block scripts %}
<!-- Dependencias CSS -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css"/>
<link href="https://cdn.jsdelivr.net/npm/tom-select/dist/css/tom-select.css" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"/>
<!-- Select2 CSS -->
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />

<!-- Dependencias JS -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- Tom Select (para el select de miembros) -->
<script src="https://cdn.jsdelivr.net/npm/tom-select/dist/js/tom-select.complete.min.js"></script>
<!-- Select2 JS (para el select de tipos) -->
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<script>
document.addEventListener("DOMContentLoaded", function() {
  // Inicializar Tom Select para el select de personas (miembros)
  var rcSelect = new TomSelect("#rpc_persona_jrv_id", {
    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)"
  });

  // Rellenar campos de solo lectura al seleccionar un miembro
  rcSelect.on('change', function(value) {
    if (!value) return;
    let opt = this.options[value];
    $("#rpc_identidad").val(opt.dni || "");
    $("#rpc_telefono1").val(opt.telefono1 || "");
    $("#rpc_direccion").val(opt.direccion || "");
    $("#rpc_sexo").val(opt.sexo || "");
  });

  // Inicializar Select2 para el select del tipo de persona confiable
  $("#rpc_tipo_id").select2({
    placeholder: "Seleccione un tipo",
    ajax: {
      url: "{% url 'get_tipo_personal_confiable' %}",
      dataType: 'json',
      delay: 250,
      processResults: function (data) {
        // Se espera que 'data' sea un arreglo de objetos con 'id' y 'text'
        return { results: data };
      },
      cache: true
    },
    minimumInputLength: 0
  });
});

$(document).ready(function(){
  // Inicializar DataTable para personas confiables
  var table = $('#tabla_personas_confiables').DataTable({
    responsive: true,
    dom: "<'row'<'col-md-6'l><'col-md-6 text-right'f>>" +
         "<'row'<'col-sm-12'tr>>" +
         "<'row'<'col-md-6'i><'col-md-6'p>>",
    pageLength: 50,
    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"
      }
    }
  });

  // Agregar filtros por columna en el header
  $('#tabla_personas_confiables thead tr:first-child th').each(function (i) {
      $('input', this).on('keyup change', function () {
          if (table.column(i).search() !== this.value) {
              table.column(i).search(this.value).draw();
          }
      });
  });
  
  // Modal de Borrado para Persona Confiable
  let personaConfiableToDelete = null;
  $(".btnBorrarPersonaConfiable").on("click", function(){
    personaConfiableToDelete = $(this).data("id");
    $("#modalBorrarPersonaConfiable").modal("show");
  });

  $("#confirmBorrarPersonaConfiable").on("click", function(){
    if(personaConfiableToDelete) {
      $.ajax({
        url: "{% url 'borrar_persona_confiable' 0 %}".replace("0", personaConfiableToDelete),
        method: "POST",
        data: { csrfmiddlewaretoken: "{{ csrf_token }}" },
        success: function(response){
          if(response.success){
            $("#modalBorrarPersonaConfiable").modal("hide");
            Swal.fire({
              icon: "success",
              title: "Borrado",
              text: "La persona confiable fue borrada exitosamente."
            }).then(() => {
              location.reload();
            });
          } else {
            Swal.fire({
              icon: "error",
              title: "Error",
              text: response.error || "No se pudo borrar la persona confiable."
            });
          }
        },
        error: function(){
          Swal.fire({
            icon: "error",
            title: "Error",
            text: "Error al enviar la solicitud."
          });
        }
      });
    }
  });
});
</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 %}