{% extends 'base.html' %}
{% 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-6">
              <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-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">
            {# 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>
          <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">
                  <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 otros selects
  $("#catalogo_escolaridad_id").select2();
  $("#catalogo_profesion_id").select2();
  $("#catalogo_escolaridad_id_capacitador, #catalogo_profesion_id_capacitador, #catalogo_escolaridad_id_candidato, #catalogo_profesion_id_candidato, #catalogo_profesion_id_logistica").select2();
});
</script>
{% endblock content %}