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

{% block title %}
  Editar Miembro
{% endblock title %}

{% block content %}
<div class="container my-4">
  <a href="{% url 'listar_personas' %}" class="btn btn-secondary mb-3">
    <i class="fas fa-arrow-left"></i> Volver
  </a>
  
  <div class="card">
    <div class="card-header">
      <h3 class="card-title">
        Editar Miembro (ID: {{ miembro.id_miembro }}) 
        <small class="text-muted">Tipo: {{ miembro.tipo_miembro }}</small>
      </h3>
    </div>

    <!-- El action se dirige a la URL de edición con el ID del miembro -->
    <form method="POST" action="{% url 'editar_persona' miembro.id_miembro %}" enctype="multipart/form-data" id="editForm">
      {% csrf_token %}
      <!-- Campo hidden para mantener el tipo; este no se podrá editar -->
      <input type="hidden" name="tipo_miembro_id" value="{{ miembro.tipo_miembro_id }}">

      <div class="card-body">
        {% comment %} Mostrar formulario según el tipo de miembro {% endcomment %}
        
        {% if miembro.tipo_miembro_id == 1 %}
          {# Formulario para Miembro #}
          <h5 class="mb-3">Datos Generales - Miembro</h5>
          <div class="row">
            <div class="form-group col-md-6">
              <label>Nombres *</label>
              <input type="text" name="nombres" class="form-control" value="{{ miembro.nombres }}" placeholder="Ingrese los nombres">
            </div>
            <div class="form-group col-md-6">
              <label>Apellidos *</label>
              <input type="text" name="apellidos" class="form-control" value="{{ miembro.apellidos }}" placeholder="Ingrese los apellidos">
            </div>
          </div>
          <div class="row mt-2">
            <div class="form-group col-md-4">
              <label>DNI *</label>
              <input type="text" name="dni" class="form-control" value="{{ miembro.dni }}" placeholder="Ingrese el DNI">
            </div>
            <div class="form-group col-md-8">
              <label>Dirección</label>
              <input type="text" name="direccion" class="form-control" value="{{ miembro.direccion }}" placeholder="Ingrese la dirección">
            </div>
          </div>
          <div class="row mt-2">
            <div class="form-group col-md-4">
              <label>Fecha de Nacimiento</label>
              <input type="date" name="fecha_nacimiento" class="form-control" value="{% if miembro.fecha_nacimiento %}{{ miembro.fecha_nacimiento|date:'Y-m-d' }}{% endif %}">
            </div>
            <div class="form-group col-md-4">
              <label>Escolaridad *</label>
              <select name="catalogo_escolaridad_id" class="form-control" id="catalogo_escolaridad_id">
                <option value="">Seleccione un nivel</option>
                {% for esc in escolaridad_catalogo %}
                  <option value="{{ esc.id }}" {% if esc.id == miembro.catalogo_escolaridad_id %}selected{% endif %}>{{ esc.nombre }}</option>
                {% endfor %}
              </select>
            </div>
            <div class="form-group col-md-4">
              <label>Sexo *</label>
              <select name="sexo" class="form-control" id="sexo">
                <option value="">Seleccione</option>
                <option value="femenino" {% if miembro.sexo|lower == "femenino" %}selected{% endif %}>Femenino</option>
                <option value="masculino" {% if miembro.sexo|lower == "masculino" %}selected{% endif %}>Masculino</option>
              </select>
            </div>
          </div>
          <div class="row mt-2">
            <div class="form-group col-md-6">
              <label>Profesión *</label>
              <select name="catalogo_profesion_id" class="form-control" id="catalogo_profesion_id">
                <option value="">Seleccione una profesión</option>
                {% for prof in profesiones_catalogo %}
                  <option value="{{ prof.id }}" {% if prof.id == miembro.catalogo_profesion_id %}selected{% endif %}>{{ prof.nombre }}</option>
                {% endfor %}
              </select>
            </div>
            <div class="form-group col-md-6">
              <label>Horario Trabajo/Estudio</label>
              <input type="text" name="horario_trabajo_estudio" class="form-control" value="{{ miembro.horario_trabajo_estudio }}" placeholder="Ej. Matutino, Vespertino, etc.">
            </div>
          </div>
          <div class="row mt-2">
            <div class="form-group col-md-6">
              <label>Teléfono 1 *</label>
              <input type="text" name="telefono1" class="form-control" value="{{ miembro.telefono1 }}" placeholder="Teléfono principal">
            </div>
            <div class="form-group col-md-6">
              <label>Teléfono 2</label>
              <input type="text" name="telefono2" class="form-control" value="{{ miembro.telefono2 }}" placeholder="Teléfono secundario">
            </div>
          </div>
          <div class="row mt-2">
            <div class="form-group col-md-4">
              <label>Disponibilidad para Capacitación</label>
              <input type="datetime-local" name="disponibilidad_capacitacion" class="form-control" value="{% if miembro.disponibilidad_capacitacion %}{{ miembro.disponibilidad_capacitacion|date:'Y-m-d\\TH:i' }}{% endif %}">
            </div>
            <div class="form-group col-md-4">
              <label>Último Proceso</label>
              <input type="date" name="ultimo_proceso" class="form-control" value="{% if miembro.ultimo_proceso %}{{ miembro.ultimo_proceso|date:'Y-m-d' }}{% endif %}">
            </div>
            <div class="form-group col-md-4">
              <label for="referido_id">Posible rol</label>
              <select class="form-control" id="id_posible_rol" name="id_posible_rol">
                <option value="">Seleccione un posible rol</option>
                {% for ref in roles %}
                  <option value="{{ ref.id }}" {% if ref.id == miembro.id_posible_rol %}selected{% endif %}>{{ ref.nombre }}</option>
                {% endfor %}
              </select>
            </div>
          </div>
          <div class="row mt-2">
            {# Checkboxes para opciones generales #}
            <div class="col-12">
              <div class="form-check form-check-inline">
                <input type="checkbox" name="ha_participado_procesos_electorales" class="form-check-input" id="ha_participado_procesos_electorales" {% if miembro.ha_participado_procesos_electorales %}checked{% endif %}>
                <label class="form-check-label" for="ha_participado_procesos_electorales">Participó en procesos electorales</label>
              </div>
              <div class="form-check form-check-inline">
                <input type="checkbox" name="ha_sido_miembro_mer" class="form-check-input" id="ha_sido_miembro_mer" {% if miembro.ha_sido_miembro_mer %}checked{% endif %}>
                <label class="form-check-label" for="ha_sido_miembro_mer">Ha sido miembro MER</label>
              </div>
              <div class="form-check form-check-inline">
                <input type="checkbox" name="uso_manejo_computador" class="form-check-input" id="uso_manejo_computador" {% if miembro.uso_manejo_computador %}checked{% endif %}>
                <label class="form-check-label" for="uso_manejo_computador">Uso/Manejo de Computador</label>
              </div>
              <div class="form-check form-check-inline">
                <input type="checkbox" name="lo_basico" class="form-check-input" id="lo_basico" {% if miembro.lo_basico %}checked{% endif %}>
                <label class="form-check-label" for="lo_basico">Conocimientos Básicos</label>
              </div>
              <div class="form-check form-check-inline">
                <input type="checkbox" name="tiene_experiencia_trep" class="form-check-input" id="tiene_experiencia_trep" {% if miembro.tiene_experiencia_trep %}checked{% endif %}>
                <label class="form-check-label" for="tiene_experiencia_trep">Experiencia TREP</label>
              </div>
              <div class="form-check form-check-inline">
                <input type="checkbox" name="entrega_materiales" class="form-check-input" id="entrega_materiales" {% if miembro.entrega_materiales %}checked{% endif %}>
                <label class="form-check-label" for="entrega_materiales">Entrega de Materiales</label>
              </div>
            </div>
          </div>
          <div class="row mt-2">
            <div class="form-group col-12">
              <label>Observaciones</label>
              <textarea name="observaciones" class="form-control" rows="3">{{ miembro.observaciones }}</textarea>
            </div>
          </div>
          <div class="row mt-2">
            <div class="form-group col-12 col-md-6">
              <label>Categoría de Confianza</label>
              <select id="id_categoria_confianza_miembro" name="id_categoria_confianza" class="form-control">
                <!-- Se cargarán vía AJAX -->
              </select>
            </div>
          </div>

          <!-- NUEVO: Select para escoger la capacitación -->
          <div class="row mt-2">
            <div class="form-group col-12">
              <label for="capacitacion_id">Seleccionar Capacitación (Asistencia)</label>
              <select name="capacitacion_id" id="capacitacion_id" class="form-control"></select>
            </div>
          </div>
          <!-- FIN NUEVO -->

          <div class="row mt-3">
            <div class="col text-end">
              <button type="submit" class="btn btn-primary">Guardar Cambios</button>
            </div>
          </div>

        {% elif miembro.tipo_miembro_id == 2 %}
          {# Formulario para Capacitador #}
          <h5 class="mb-3">Datos de Capacitador</h5>
          <div class="row">
            <div class="form-group col-md-6">
              <label>Nombres *</label>
              <input type="text" name="nombres" class="form-control" value="{{ miembro.nombres }}" placeholder="Ingrese los nombres">
            </div>
            <div class="form-group col-md-6">
              <label>Apellidos *</label>
              <input type="text" name="apellidos" class="form-control" value="{{ miembro.apellidos }}" placeholder="Ingrese los apellidos">
            </div>
          </div>
          <div class="row mt-2">
            <div class="form-group col-md-4">
              <label>DNI *</label>
              <input type="text" name="dni" class="form-control" value="{{ miembro.dni }}" placeholder="Ingrese el DNI">
            </div>
            <div class="form-group col-md-8">
              <label>Dirección</label>
              <input type="text" name="direccion" class="form-control" value="{{ miembro.direccion }}" placeholder="Ingrese la dirección">
            </div>
          </div>
          <div class="row mt-2">
            <div class="form-group col-md-6">
              <label>Profesión *</label>
              <select name="catalogo_profesion_id" class="form-control" id="catalogo_profesion_id_capacitador">
                <option value="">Seleccione una profesión</option>
                {% for prof in profesiones_catalogo %}
                  <option value="{{ prof.id }}" {% if prof.id == miembro.catalogo_profesion_id %}selected{% endif %}>{{ prof.nombre }}</option>
                {% endfor %}
              </select>
            </div>
            <div class="form-group col-md-6">
              <label>Teléfono 1</label>
              <input type="text" name="telefono1" class="form-control" value="{{ miembro.telefono1 }}" placeholder="Teléfono principal">
            </div>
          </div>
          <div class="row mt-2">
            <div class="form-group col-md-6">
              <label>Teléfono 2</label>
              <input type="text" name="telefono2" class="form-control" value="{{ miembro.telefono2 }}" placeholder="Teléfono secundario">
            </div>
            <div class="form-group col-md-6">
              <label>Correo Electrónico</label>
              <input type="email" name="correo_electronico" class="form-control" value="{{ miembro.correo_electronico }}" placeholder="Ingrese el correo">
            </div>
          </div>
          <div class="row mt-2">
            <div class="form-group col-md-4">
              <label>Fecha de Nacimiento</label>
              <input type="date" name="fecha_nacimiento" class="form-control" value="{% if miembro.fecha_nacimiento %}{{ miembro.fecha_nacimiento|date:'Y-m-d' }}{% endif %}">
            </div>
            <div class="form-group col-md-4">
              <label>Escolaridad *</label>
              <select name="catalogo_escolaridad_id" class="form-control" id="catalogo_escolaridad_id_capacitador">
                <option value="">Seleccione un nivel</option>
                {% for esc in escolaridad_catalogo %}
                  <option value="{{ esc.id }}" {% if esc.id == miembro.catalogo_escolaridad_id %}selected{% endif %}>{{ esc.nombre }}</option>
                {% endfor %}
              </select>
            </div>
            <div class="form-group col-md-4">
              <label>Género</label>
              <select name="sexo" class="form-control" id="sexo_capacitador">
                <option value="">Seleccione</option>
                <option value="femenino" {% if miembro.sexo|lower == "femenino" %}selected{% endif %}>Femenino</option>
                <option value="masculino" {% if miembro.sexo|lower == "masculino" %}selected{% endif %}>Masculino</option>
              </select>
            </div>
          </div>
          <div class="row mt-2">
            <div class="form-group col-md-6">
              <label>Último Proceso</label>
              <input type="date" name="ultimo_proceso" class="form-control" value="{% if miembro.ultimo_proceso %}{{ miembro.ultimo_proceso|date:'Y-m-d' }}{% endif %}">
            </div>
          </div>
          <div class="row mt-2">
            {# Opciones específicas para capacitador #}
            <div class="col-12">
              <div class="form-check form-check-inline">
                <input type="checkbox" name="ha_participado_procesos_electorales" class="form-check-input" id="ha_participado_procesos_electorales_capacitador" {% if miembro.ha_participado_procesos_electorales %}checked{% endif %}>
                <label class="form-check-label" for="ha_participado_procesos_electorales_capacitador">Participó en procesos electorales</label>
              </div>
              <div class="form-check form-check-inline">
                <input type="checkbox" name="ha_sido_miembro_mer" class="form-check-input" id="ha_sido_miembro_mer_capacitador" {% if miembro.ha_sido_miembro_mer %}checked{% endif %}>
                <label class="form-check-label" for="ha_sido_miembro_mer_capacitador">Ha sido miembro MER</label>
              </div>
              <div class="form-check form-check-inline">
                <input type="checkbox" name="entrega_materiales" class="form-check-input" id="entrega_materiales_capacitador" {% if miembro.entrega_materiales %}checked{% endif %}>
                <label class="form-check-label" for="entrega_materiales_capacitador">Entrega de Materiales</label>
              </div>
            </div>
          </div>
          <div class="row mt-2">
            <div class="form-group col-md-6">
              <label>Observaciones</label>
              <textarea name="observaciones" class="form-control" rows="3">{{ miembro.observaciones }}</textarea>
            </div>
          </div>
          <div class="row mt-2">
            <div class="form-group col-12">
              <label>Categoría de Confianza</label>
              <select id="id_categoria_confianza_capacitador" name="id_categoria_confianza" class="form-control">
                <!-- Se cargarán vía AJAX -->
              </select>
            </div>
          </div>
          <div class="row mt-3">
            <div class="col text-end">
              <button type="submit" name="capacitador_submit" class="btn btn-primary">Guardar Capacitador</button>
            </div>
          </div>

        {% elif miembro.tipo_miembro_id == 3 or miembro.tipo_miembro_id == 4 %}
          {# Formulario para Candidato/Logística #}
          <h5 class="mb-3">Datos de {{ miembro.tipo_miembro }}</h5>
          <div class="row">
            <div class="form-group col-md-6">
              <label>Nombres *</label>
              <input type="text" name="nombres" class="form-control" value="{{ miembro.nombres }}" placeholder="Ingrese los nombres">
            </div>
            <div class="form-group col-md-6">
              <label>Apellidos *</label>
              <input type="text" name="apellidos" class="form-control" value="{{ miembro.apellidos }}" placeholder="Ingrese los apellidos">
            </div>
          </div>
          <div class="row mt-2">
            <div class="form-group col-md-4">
              <label>DNI *</label>
              <input type="text" name="dni" class="form-control" value="{{ miembro.dni }}" placeholder="Ingrese el DNI">
            </div>
            <div class="form-group col-md-8">
              <label>Dirección</label>
              <input type="text" name="direccion" class="form-control" value="{{ miembro.direccion }}" placeholder="Ingrese la dirección">
            </div>
          </div>
          <div class="row mt-2">
            <div class="form-group col-md-6">
              <label>Profesión *</label>
              <select name="catalogo_profesion_id" class="form-control" id="catalogo_profesion_id_candidato">
                <option value="">Seleccione una profesión</option>
                {% for prof in profesiones_catalogo %}
                  <option value="{{ prof.id }}" {% if prof.id == miembro.catalogo_profesion_id %}selected{% endif %}>{{ prof.nombre }}</option>
                {% endfor %}
              </select>
            </div>
            <div class="form-group col-md-6">
              <label>Correo</label>
              <input type="email" name="correo_electronico" class="form-control" value="{{ miembro.correo_electronico }}" placeholder="Ingrese el correo">
            </div>
          </div>
          <div class="row mt-2">
            <div class="form-group col-md-4">
              <label>Teléfono</label>
              <input type="text" name="telefono1" class="form-control" value="{{ miembro.telefono1 }}" placeholder="Ingrese el teléfono">
            </div>
            <div class="form-group col-md-4">
              <label>Categoría de Confianza</label>
              <select id="id_categoria_confianza_candidato" name="id_categoria_confianza" class="form-control">
              </select>
            </div>
            {% if miembro.tipo_miembro_id == 3 %}
              <div class="form-group col-md-4">
                <div class="form-check mt-4">
                  <input type="checkbox" class="form-check-input" id="es_candidato" name="es_candidato" {% if miembro.es_candidato %}checked{% endif %}>
                  <label class="form-check-label" for="es_candidato">Es Candidato</label>
                </div>
              </div>
            {% endif %}
          </div>
          <div class="row mt-3">
            <div class="col text-end">
              <button type="submit" name="candidato_submit" class="btn btn-primary">Guardar {{ miembro.tipo_miembro }}</button>
            </div>
          </div>
        {% endif %}

      </div>
    </form>
  </div>
</div>

<!-- Dependencias CSS y JS -->
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>

<script>
$(document).ready(function() {
  // Cargar Categorías de Confianza vía AJAX y preseleccionar en cada select
  $.ajax({
    url: "{% url 'get_categorias_confianza' %}",
    method: "GET",
    dataType: "json"
  }).done(function(data) {
    // Para cada select de categoría, inicializamos Select2
    $("#id_categoria_confianza_miembro, #id_categoria_confianza_capacitador, #id_categoria_confianza_candidato, #id_categoria_confianza_logistica").select2({
      placeholder: "Seleccione categoría de confianza...",
      data: data
    });
    // Preseleccionar para el formulario correspondiente (según tipo)
    {% if miembro.id_categoria_confianza %}
      {% if miembro.tipo_miembro_id == 1 %}
        $("#id_categoria_confianza_miembro").val("{{ miembro.id_categoria_confianza }}").trigger("change");
      {% elif miembro.tipo_miembro_id == 2 %}
        $("#id_categoria_confianza_capacitador").val("{{ miembro.id_categoria_confianza }}").trigger("change");
      {% elif miembro.tipo_miembro_id == 3 or miembro.tipo_miembro_id == 4 %}
        $("#id_categoria_confianza_candidato").val("{{ miembro.id_categoria_confianza }}").trigger("change");
      {% endif %}
    {% endif %}
  }).fail(function(error) {
    console.error("Error al cargar Categoría de Confianza:", error);
  });

  // Inicializar select2 para escolaridad y profesión (ya lo tenías en tu código)
  $("#catalogo_escolaridad_id, #catalogo_profesion_id").select2();
  $("#catalogo_escolaridad_id_capacitador, #catalogo_profesion_id_capacitador, #catalogo_profesion_id_candidato, #catalogo_profesion_id_logistica").select2();

  // NUEVO: Select2 AJAX para cargar las capacitaciones
  $('#capacitacion_id').select2({
    placeholder: 'Seleccione una capacitación',
    minimumInputLength: 1,
    allowClear: true,
    ajax: {
      url: '{% url "get_capacitaciones" %}',
      dataType: 'json',
      delay: 250,
      data: function (params) {
        return {
          term: params.term
        };
      },
      processResults: function (data) {
        return {
          results: $.map(data, function (item) {
            // item.id, item.label, item.lugar
            return {
              id: item.id,
              text: item.label  // Lo que se mostrará
            };
          })
        };
      }
    }
  });

  // Interceptar el submit para guardar y luego registrar asistencia
  $('#editForm').on('submit', function(e) {
    e.preventDefault();
    let form = $(this);
    let formData = new FormData(this);

    // Primero: guardar o actualizar los datos del miembro
    $.ajax({
      url: form.attr('action'),
      method: form.attr('method'),
      data: formData,
      processData: false,
      contentType: false,
      success: function(response) {
        // Si se guardó con éxito el miembro, hacemos la asistencia
        let selectedCapacitacion = $('#capacitacion_id').val();
        if (selectedCapacitacion) {
          // Hacemos el registro de asistencia vía AJAX
          $.ajax({
            url: "{% url 'registrar_asistencia' %}",
            method: "POST",
            data: {
              'capacitacion_id': selectedCapacitacion,
              'id_miembro': '{{ miembro.id_miembro }}',  // ID del miembro
              'estado_asistencia': '1',                      // Ejemplo, lo puedes cambiar
              'entrega_manual': '0',                         // Ejemplo
              'firma': '',
              'duracion': '',
              'observaciones': '',
              'csrfmiddlewaretoken': '{{ csrf_token }}'
            },
            success: function(data) {
              if (data.success) {
                Swal.fire(
                  '¡Éxito!',
                  'El registro se guardó correctamente (incluyendo la asistencia).',
                  'success'
                ).then((result) => {
                  // Redirigir o lo que necesites
                  window.location.href = "{% url 'listar_personas' %}";
                });
              } else {
                Swal.fire(
                  'Error',
                  'Ocurrió un error al registrar la asistencia.',
                  'error'
                );
              }
            },
            error: function(err) {
              Swal.fire(
                'Error',
                'Ocurrió un error en el servidor al guardar la asistencia.',
                'error'
              );
            }
          });
        } else {
          // Si no se seleccionó capacitación, simplemente redirigir o mostrar éxito
          Swal.fire(
            '¡Éxito!',
            'Datos del miembro guardados. (Sin asistencia a capacitación)',
            'success'
          ).then((result) => {
            window.location.href = "{% url 'listar_personas' %}";
          });
        }
      },
      error: function(xhr) {
        Swal.fire(
          'Error',
          'No se pudo guardar la información del miembro.',
          'error'
        );
      }
    });
  });
});
</script>
{% endblock content %}