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

{% block title %}
Registrar 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">Registro de Miembros</h3>
    </div>
    <form method="POST" action="{% url 'registrar_persona' %}" enctype="multipart/form-data" id="registroForm">
      {% csrf_token %}
      <!-- Input hidden global para el tipo de miembro -->
      <input type="hidden" id="tipo_miembro_id_global" name="tipo_miembro_id" value="1">

      <div class="card-body">
        <!-- Pestañas para cada tipo de miembro -->
        <ul class="nav nav-tabs" id="memberTabs" role="tablist">
          <li class="nav-item" role="presentation">
            <button class="nav-link active" id="miembro-tab" data-bs-toggle="tab" data-bs-target="#miembro"
              type="button" role="tab" aria-controls="miembro" aria-selected="true">Miembro</button>
          </li>
          <li class="nav-item" role="presentation">
            <button class="nav-link" id="capacitador-tab" data-bs-toggle="tab" data-bs-target="#capacitador"
              type="button" role="tab" aria-controls="capacitador" aria-selected="false">Capacitador</button>
          </li>
          <li class="nav-item" role="presentation">
            <button class="nav-link" id="candidato-tab" data-bs-toggle="tab" data-bs-target="#candidato" type="button"
              role="tab" aria-controls="candidato" aria-selected="false">Referido</button>
          </li>
          <li class="nav-item" role="presentation">
            <button class="nav-link" id="logistica-tab" data-bs-toggle="tab" data-bs-target="#logistica" type="button"
              role="tab" aria-controls="logistica" aria-selected="false">Logística</button>
          </li>
        </ul>

        <div class="tab-content mt-3" id="memberTabsContent">
          <!-- TAB Miembro -->
          <div class="tab-pane fade show active" id="miembro" role="tabpanel" aria-labelledby="miembro-tab">
            <!-- Datos Personales -->
            <div class="row">
              <div class="form-group col-12 col-md-6">
                <label for="nombres">Nombres *</label>
                <input type="text" class="form-control" id="nombres" name="nombres" placeholder="Ingrese los nombres">
              </div>
              <div class="form-group col-12 col-md-6">
                <label for="apellidos">Apellidos *</label>
                <input type="text" class="form-control" id="apellidos" name="apellidos"
                  placeholder="Ingrese los apellidos">
              </div>
            </div>
            <div class="row mt-2">
              <div class="form-group col-12 col-md-4">
                <label for="dni">DNI *</label>
                <input type="text" class="form-control" id="dni" name="dni" placeholder="Ingrese el DNI">
              </div>
              <div class="form-group col-12 col-md-8">
                <label for="direccion">Dirección</label>
                <input type="text" class="form-control" id="direccion" name="direccion"
                  placeholder="Ingrese la dirección">
              </div>
            </div>
            <div class="row mt-2">
              <div class="form-group col-12 col-md-4">
                <label for="fecha_nacimiento">Fecha de Nacimiento</label>
                <input type="date" class="form-control" id="fecha_nacimiento" name="fecha_nacimiento">
              </div>
              <div class="form-group col-12 col-md-4">
                <label for="catalogo_escolaridad_id">Escolaridad</label>
                <select id="catalogo_escolaridad_id" name="catalogo_escolaridad_id" class="form-control">
                  <option value="">Seleccione un nivel</option>
                  {% for esc in escolaridad_catalogo %}
                  <option value="{{ esc.id }}">{{ esc.nombre }}</option>
                  {% endfor %}
                </select>
              </div>
              <div class="form-group col-12 col-md-4">
                <label for="sexo">Sexo</label>
                <select class="form-control" id="sexo" name="sexo">
                  <option value="">Seleccione</option>
                  <option value="femenino">Femenino</option>
                  <option value="masculino">Masculino</option>
                </select>
              </div>
            </div>
            <div class="row mt-2">
              <div class="form-group col-12 col-md-6">
                <label for="catalogo_profesion_id">Profesión</label>
                <select id="catalogo_profesion_id" name="catalogo_profesion_id" class="form-control">
                  <option value="">Seleccione una profesión</option>
                  {% for prof in profesiones_catalogo %}
                  <option value="{{ prof.id }}">{{ prof.nombre }}</option>
                  {% endfor %}
                </select>
              </div>
              <div class="form-group col-12 col-md-6">
                <label for="horario_trabajo_estudio">Horario Trabajo/Estudio</label>
                <input type="text" class="form-control" id="horario_trabajo_estudio" name="horario_trabajo_estudio"
                  placeholder="Ej. Matutino, Vespertino, etc.">
              </div>
            </div>
            <div class="row mt-2">
              <div class="form-group col-12 col-md-6">
                <label for="telefono1">Teléfono 1 *</label>
                <input type="text" class="form-control" id="telefono1" name="telefono1"
                  placeholder="Ingrese el teléfono principal">
              </div>
              <div class="form-group col-12 col-md-6">
                <label for="telefono2">Teléfono 2</label>
                <input type="text" class="form-control" id="telefono2" name="telefono2"
                  placeholder="Ingrese el teléfono secundario">
              </div>
            </div>
            <div class="row mt-2">
              <div class="form-group col-12 col-md-6">
                <label for="disponibilidad_capacitacion">Disponibilidad para Capacitación</label>
                <input type="datetime-local" class="form-control" id="disponibilidad_capacitacion"
                  name="disponibilidad_capacitacion">
              </div>
              <div class="form-group col-12 col-md-6">
                <label for="ultimo_proceso">Último Proceso</label>
                <input type="date" class="form-control" id="ultimo_proceso" name="ultimo_proceso">
              </div>
            </div>
            <!-- Checkboxes de opciones -->
            <div class="row mt-2">
              <div class="col-12">
                <div class="form-check form-check-inline">
                  <input type="checkbox" class="form-check-input" id="ha_participado_procesos_electorales"
                    name="ha_participado_procesos_electorales">
                  <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" class="form-check-input" id="ha_sido_miembro_mer" name="ha_sido_miembro_mer">
                  <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" class="form-check-input" id="uso_manejo_computador"
                    name="uso_manejo_computador">
                  <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" class="form-check-input" id="lo_basico" name="lo_basico">
                  <label class="form-check-label" for="lo_basico">Conocimientos Básicos</label>
                </div>
                <div class="form-check form-check-inline">
                  <input type="checkbox" class="form-check-input" id="tiene_experiencia_trep"
                    name="tiene_experiencia_trep">
                  <label class="form-check-label" for="tiene_experiencia_trep">Experiencia TREP</label>
                </div>
                <div class="form-check form-check-inline">
                  <input type="checkbox" class="form-check-input" id="entrega_materiales" name="entrega_materiales">
                  <label class="form-check-label" for="entrega_materiales">Entrega de Materiales</label>
                </div>
              </div>
            </div>
            <!-- Nuevo select para Referencia -->
            <div class="row mt-2">
              <div class="form-group col-12 col-md-6">
                <label for="referido_id">Referencia</label>
                <select class="form-control" id="referido_id" name="referido_id">
                  <option value="">Seleccione un referente</option>
                  {% for ref in referentes %}
                  <option value="{{ ref.id }}">{{ ref.nombre }}</option>
                  {% endfor %}
                </select>
              </div>
              <div class="form-group col-12 col-md-6">
                <label for="id_categoria_confianza_miembro">Categoría de Confianza</label>
                <select id="id_categoria_confianza_miembro" name="id_categoria_confianza" class="form-control">
                  <!-- Se cargarán los datos vía AJAX -->
                </select>
              </div>
            </div>
            <!-- Observaciones y Fotos -->
            <div class="row mt-2">
              <div class="form-group col-12">
                <label for="observaciones">Observaciones</label>
                <textarea class="form-control" id="observaciones" name="observaciones" rows="3"
                  placeholder="Ingrese observaciones"></textarea>
              </div>
            </div>
            <!-- Select box para Categoría de Confianza (se carga vía AJAX) -->
            <div class="row mt-2">

            </div>
            <!-- Botón de envío para Miembro -->
            <div class="mt-3">
              <button type="submit" name="miembro_submit" class="btn btn-primary">Guardar Miembro</button>
            </div>
          </div>
          <!-- FIN TAB Miembro -->

          <!-- TAB Capacitador -->
          <div class="tab-pane fade" id="capacitador" role="tabpanel" aria-labelledby="capacitador-tab">
            <h5 class="mb-3">Datos de Capacitador</h5>

            <form>
              <!-- Fila 1: Nombres y Apellidos -->
              <div class="row mb-3">
                <div class="col-md-6">
                  <label for="nombres_capacitador">Nombres *</label>
                  <input type="text" class="form-control" id="nombres_capacitador" name="nombres"
                    placeholder="Ingrese los nombres">
                </div>
                <div class="col-md-6">
                  <label for="apellidos_capacitador">Apellidos *</label>
                  <input type="text" class="form-control" id="apellidos_capacitador" name="apellidos"
                    placeholder="Ingrese los apellidos">
                </div>
              </div>

              <!-- Fila 2: DNI y Dirección -->
              <div class="row mb-3">
                <div class="col-md-6">
                  <label for="dni_capacitador">DNI *</label>
                  <input type="text" class="form-control" id="dni_capacitador" name="dni" placeholder="Ingrese el DNI">
                </div>
                <div class="col-md-6">
                  <label for="direccion_capacitador">Dirección</label>
                  <input type="text" class="form-control" id="direccion_capacitador" name="direccion"
                    placeholder="Ingrese la dirección">
                </div>
              </div>

              <!-- Fila 3: Profesión y Teléfono 1 -->
              <div class="row mb-3">
                <div class="col-md-6">
                  <label for="catalogo_profesion_id_capacitador">Profesión</label>
                  <select id="catalogo_profesion_id_capacitador" name="catalogo_profesion_id" class="form-control">
                    <option value="">Seleccione una profesión</option>
                    {% for prof in profesiones_catalogo %}
                    <option value="{{ prof.id }}">{{ prof.nombre }}</option>
                    {% endfor %}
                  </select>
                </div>
                <div class="col-md-6">
                  <label for="telefono1_capacitador">Teléfono 1 *</label>
                  <input type="text" class="form-control" id="telefono1_capacitador" name="telefono1"
                    placeholder="Ingrese el teléfono">
                </div>
              </div>

              <!-- Fila 4: Teléfono 2 y Fecha de Nacimiento -->
              <div class="row mb-3">
                <div class="col-md-6">
                  <label for="telefono2_capacitador">Teléfono 2</label>
                  <input type="text" class="form-control" id="telefono2_capacitador" name="telefono2"
                    placeholder="Ingrese el teléfono secundario">
                </div>
                <div class="col-md-6">
                  <label for="fecha_nacimiento_capacitador">Fecha de Nacimiento</label>
                  <input type="date" class="form-control" id="fecha_nacimiento_capacitador" name="fecha_nacimiento">
                </div>
              </div>

              <!-- Fila 5: Escolaridad y Sexo -->
              <div class="row mb-3">
                <div class="col-md-6">
                  <label for="catalogo_escolaridad_id_capacitador">Escolaridad</label>
                  <select id="catalogo_escolaridad_id_capacitador" name="catalogo_escolaridad_id" class="form-control">
                    <option value="">Seleccione un nivel</option>
                    {% for esc in escolaridad_catalogo %}
                    <option value="{{ esc.id }}">{{ esc.nombre }}</option>
                    {% endfor %}
                  </select>
                </div>
                <div class="col-md-6">
                  <label for="sexo_capacitador">Sexo</label>
                  <select class="form-control" id="sexo_capacitador" name="sexo">
                    <option value="">Seleccione</option>
                    <option value="femenino">Femenino</option>
                    <option value="masculino">Masculino</option>
                  </select>
                </div>
              </div>

              <!-- Fila 6: Último Proceso y Categoría de Confianza -->
              <div class="row mb-3">
                <div class="col-md-6">
                  <label for="ultimo_proceso_capacitador">Último Proceso</label>
                  <input type="date" class="form-control" id="ultimo_proceso_capacitador" name="ultimo_proceso">
                </div>
                <div class="col-md-6">
                  <label for="id_categoria_confianza_capacitador">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>

              <!-- Fila 7: Checkboxes de opciones -->
              <div class="row mb-3">
                <div class="col-md-12">
                  <div class="form-check form-check-inline">
                    <input type="checkbox" class="form-check-input" id="ha_participado_procesos_electorales_capacitador"
                      name="ha_participado_procesos_electorales">
                    <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" class="form-check-input" id="ha_sido_miembro_mer_capacitador"
                      name="ha_sido_miembro_mer">
                    <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" class="form-check-input" id="entrega_materiales_capacitador"
                      name="entrega_materiales">
                    <label class="form-check-label" for="entrega_materiales_capacitador">
                      Entrega de Materiales
                    </label>
                  </div>
                <div class="form-check form-check-inline">
                    <input type="checkbox" class="form-check-input" id="vehiculo"
                      name="vehiculo">
                    <label class="form-check-label" for="vehiculo">
                      Posee Vehiculo
                    </label>
                  </div>
                </div>
              </div>

              <!-- Fila 8: Observaciones -->
              <div class="row mb-3">
                <div class="col-md-12">
                  <label for="observaciones_capacitador">Observaciones</label>
                  <textarea class="form-control" id="observaciones_capacitador" name="observaciones" rows="3"
                    placeholder="Ingrese observaciones"></textarea>
                </div>
              </div>

              <!-- Fila 9: Botón de Guardar -->
              <div class="row">
                <div class="col-md-12">
                  <button type="submit" name="capacitador_submit" class="btn btn-primary">
                    Guardar Capacitador
                  </button>
                </div>
              </div>
            </form>
          </div>
          <!-- FIN TAB Capacitador -->



          <!-- TAB Candidato (Referido) -->
          <div class="tab-pane fade" id="candidato" role="tabpanel" aria-labelledby="candidato-tab">
            <h5 class="mb-3">Datos de Referido</h5>

            <div class="row">
              <div class="form-group col-12 col-md-6">
                <label for="nombres_candidato">Nombres *</label>
                <input type="text" class="form-control" id="nombres_candidato" name="nombres"
                  placeholder="Ingrese los nombres">
              </div>
              <div class="form-group col-12 col-md-6">
                <label for="apellidos_candidato">Apellidos *</label>
                <input type="text" class="form-control" id="apellidos_candidato" name="apellidos"
                  placeholder="Ingrese los apellidos">
              </div>
            </div>
            <div class="row mt-2">
              <div class="form-group col-12">
                <label for="direccion_candidato">Dirección</label>
                <input type="text" class="form-control" id="direccion_candidato" name="direccion"
                  placeholder="Ingrese la dirección">
              </div>
            </div>
            <div class="row mt-2">
              <div class="form-group col-12 col-md-4">
                <label for="dni_candidato">DNI *</label>
                <input type="text" class="form-control" id="dni_candidato" name="dni" placeholder="Ingrese el DNI">
              </div>
              <div class="form-group col-12 col-md-4">
                <label for="catalogo_profesion_id_candidato">Profesión</label>
                <select id="catalogo_profesion_id_candidato" name="catalogo_profesion_id" class="form-control">
                  <option value="">Seleccione una profesión</option>
                  {% for prof in profesiones_catalogo %}
                  <option value="{{ prof.id }}">{{ prof.nombre }}</option>
                  {% endfor %}
                </select>
              </div>
              <div class="form-group col-12 col-md-4">
                <label for="correo_electronico_candidato">Correo</label>
                <input type="email" class="form-control" id="correo_electronico_candidato" name="correo_electronico"
                  placeholder="Ingrese el correo">
              </div>
            </div>
            <div class="row mt-2">
              <div class="form-group col-12 col-md-6">
                <label for="telefono_candidato">Teléfono *</label>
                <input type="text" class="form-control" id="telefono_candidato" name="telefono1"
                  placeholder="Ingrese el teléfono">
              </div>
            </div>
            <!-- Checkbox para indicar "Es Candidato" -->
            <div class="row mt-2">
              <div class="form-group col-12">
                <div class="form-check">
                  <input type="checkbox" class="form-check-input" id="es_candidato" name="es_candidato">
                  <label class="form-check-label" for="es_candidato">Es Candidato</label>
                </div>
              </div>
            </div>
            <!-- Select para Categoría de Confianza -->
            <div class="row mt-2">
              <div class="form-group col-12 col-md-6">
                <label for="id_categoria_confianza_candidato">Categoría de Confianza</label>
                <select id="id_categoria_confianza_candidato" name="id_categoria_confianza" class="form-control">
                  <!-- Se cargarán vía AJAX -->
                </select>
              </div>
            </div>
            <div class="mt-3">
              <button type="submit" name="candidato_submit" class="btn btn-primary">Guardar Referido</button>
            </div>
          </div>
          <!-- FIN TAB Candidato -->

          <!-- TAB Logística -->
          <div class="tab-pane fade" id="logistica" role="tabpanel" aria-labelledby="logistica-tab">
            <h5 class="mb-3">Datos de Logística</h5>
            <div class="row">
              <div class="form-group col-12 col-md-6">
                <label for="nombres_logistica">Nombres *</label>
                <input type="text" class="form-control" id="nombres_logistica" name="nombres"
                  placeholder="Ingrese los nombres">
              </div>
              <div class="form-group col-12 col-md-6">
                <label for="apellidos_logistica">Apellidos *</label>
                <input type="text" class="form-control" id="apellidos_logistica" name="apellidos"
                  placeholder="Ingrese los apellidos">
              </div>
            </div>
            <div class="row mt-2">
              <div class="form-group col-12">
                <label for="direccion_logistica">Dirección</label>
                <input type="text" class="form-control" id="direccion_logistica" name="direccion"
                  placeholder="Ingrese la dirección">
              </div>
            </div>
            <div class="row mt-2">
              <div class="form-group col-12 col-md-4">
                <label for="dni_logistica">DNI</label>
                <input type="text" class="form-control" id="dni_logistica" name="dni" placeholder="Ingrese el DNI">
              </div>
              <div class="form-group col-12 col-md-4">
                <label for="catalogo_profesion_id_logistica">Profesión</label>
                <select id="catalogo_profesion_id_logistica" name="catalogo_profesion_id" class="form-control">
                  <option value="">Seleccione una profesión</option>
                  {% for prof in profesiones_catalogo %}
                  <option value="{{ prof.id }}">{{ prof.nombre }}</option>
                  {% endfor %}
                </select>
              </div>
              <div class="form-group col-12 col-md-4">
                <label for="correo_electronico_logistica">Correo</label>
                <input type="email" class="form-control" id="correo_electronico_logistica" name="correo_electronico"
                  placeholder="Ingrese el correo">
              </div>
            </div>
            <div class="row mt-2">
              <div class="form-group col-12 col-md-6">
                <label for="telefono_logistica">Teléfono</label>
                <input type="text" class="form-control" id="telefono_logistica" name="telefono1"
                  placeholder="Ingrese el teléfono">
              </div>
            </div>
            <!-- Select para Categoría de Confianza -->
            <div class="row mt-2">
              <div class="form-group col-12 col-md-6">
                <label for="id_categoria_confianza_logistica">Categoría de Confianza</label>
                <select id="id_categoria_confianza_logistica" name="id_categoria_confianza" class="form-control">
                  <!-- Se cargarán vía AJAX -->
                </select>
              </div>
            </div>
            <div class="mt-3">
              <button type="submit" name="logistica_submit" class="btn btn-primary">Guardar Logística</button>
            </div>
          </div>
          <!-- FIN TAB Logística -->
        </div>
      </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 () {
    // 1) 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) {
      $("#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 según el tipo de miembro
      {% 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);
    });

    // 2) Inicializar select2 para Escolaridad y Profesión
    $("#catalogo_escolaridad_id, #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();

    // 3) Actualizar el input hidden global según la pestaña activa
    const tipoMapping = {
      "miembro": 1,
      "capacitador": 2,
      "candidato": 3,
      "logistica": 4
    };
    document.querySelectorAll('[data-bs-toggle="tab"]').forEach(function (tabBtn) {
      tabBtn.addEventListener("shown.bs.tab", function (event) {
        const targetId = event.target.getAttribute("data-bs-target").substring(1);
        const valor = tipoMapping[targetId];
        $("#tipo_miembro_id_global").val(valor);
        console.log("Tipo de miembro actualizado a:", valor);
      });
    });

    // 4) Enviar el formulario vía AJAX
    // En el manejador de envío del formulario
$("#registroForm").on("submit", function (e) {
  e.preventDefault();
  console.log("Enviando formulario de registro");

  // Deshabilitar inputs de las pestañas inactivas
  $('.tab-pane:not(.active) :input').prop('disabled', true);

  // Validación básica en cliente: campos obligatorios
  // Se seleccionan únicamente los inputs habilitados (de la pestaña activa)
  var nombres   = $("input[name='nombres']:enabled").val().trim();
  var apellidos = $("input[name='apellidos']:enabled").val().trim();
  var dni       = $("input[name='dni']:enabled").val().trim();
  var telefono  = $("input[name='telefono1']:enabled").val().trim();

  if (!nombres || !apellidos || !dni || !telefono) {
    Swal.fire({
      icon: "error",
      title: "Campos obligatorios vacíos",
      text: "Nombres, Apellidos, DNI y Teléfono son requeridos.",
      showConfirmButton: true
    });
    // Rehabilitar inputs para que el usuario pueda corregirlos
    $('.tab-pane :input').prop('disabled', false);
    return;
  }

  // Si pasa la validación, se arma el FormData y se envía vía AJAX
  var formData = new FormData(this);
  for (var pair of formData.entries()) {
    console.log(pair[0] + ": " + pair[1]);
  }

  $.ajax({
    url: $(this).attr("action"),
    type: "POST",
    data: formData,
    processData: false,
    contentType: false,
    success: function (response) {
      console.log("Respuesta del servidor:", response);
      if (response.success) {
        Swal.fire({
          icon: "success",
          title: response.message,
          timer: 5000,
          showConfirmButton: true
        });
        $("#registroForm")[0].reset();
        $("#catalogo_escolaridad_id, #catalogo_profesion_id, #catalogo_escolaridad_id_capacitador, #catalogo_profesion_id_candidato, #catalogo_escolaridad_id_logistica").val(null).trigger("change");
      } else {
        Swal.fire({
          icon: "error",
          title: response.message,
          timer: 5000,
          showConfirmButton: true
        });
      }
      $('.tab-pane :input').prop('disabled', false);
    },
    error: function (xhr, status, error) {
      console.error("Error en la petición AJAX:", error);
      Swal.fire({
        icon: "error",
        title: "Error en la solicitud AJAX",
        text: "Ocurrió un error al enviar el formulario.",
        showConfirmButton: true
      });
      $('.tab-pane :input').prop('disabled', false);
    }
  });
});

  });
</script>
{% endblock content %}