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

{% block title %}
  Editar Voluntario
{% endblock title %}

{% block content %}
<div class="container">
  <a href="{% url 'listar_personas' %}" class="btn btn-secondary">
    <i class="fas fa-arrow-left"></i> Volver
  </a>
  <div class="card card-primary mt-4">
    <div class="card-header">
      <h3 class="card-title">Editar Voluntario: {{ persona.nombre|default:"" }}</h3>
    </div>
    <form method="POST" action="{% url 'editar_persona' persona.id %}">
      {% csrf_token %}
      <div class="card-body">
        <!-- Fila 1: Nombre y DNI -->
        <div class="row">
          <div class="form-group col-md-4">
            <label for="nombre">Nombre <span class="text-danger">*</span></label>
            <input type="text" class="form-control" id="nombre" name="nombre" 
                   value="{{ persona.nombre|default:'' }}" placeholder="Ingrese el nombre completo" required>
          </div>
          <div class="form-group col-md-4">
            <label for="dni">DNI <span class="text-danger">*</span></label>
            <input type="text" class="form-control" id="dni" name="dni" 
                   value="{{ persona.dni|default:'' }}" placeholder="Ingrese el número de identidad sin guiones" required>
          </div>
          <div class="form-group col-md-4">
            <label for="sexo">Sexo</label>
            <select id="sexo" name="sexo" class="form-control">
              <option value="">Seleccione un sexo</option>
              <option value="Masculino" {% if persona.sexo == "masculino" %}selected{% endif %}>Masculino</option>
              <option value="Femenino" {% if persona.sexo == "femenino" %}selected{% endif %}>Femenino</option>
            </select>
          </div>
        </div>

        <hr class="my-3">
        
        <!-- Fila 3: Dirección y Escolaridad -->
        <div class="row">
          <div class="form-group col-md-6">
            <label for="direccion">Dirección</label>
            <input type="text" class="form-control" id="direccion" name="direccion" 
                   value="{{ persona.direccion|default:'' }}">
          </div>
          <div class="form-group col-md-6">
            <label for="catalogo_escolaridad_id">Escolaridad</label>
            <select id="catalogo_escolaridad_id" name="catalogo_escolaridad_id">
              <option value="">Seleccione escolaridad</option>
              {% for esc in escolaridades %}
                <option value="{{ esc.id }}" {% if persona.catalogo_escolaridad_id == esc.id %}selected{% endif %}>
                  {{ esc.nivel }}
                </option>
              {% endfor %}
            </select>
          </div>
        </div>

        <hr class="my-3">

        <!-- Fila 4: Profesión y Horario Trabajo/Estudio -->
        <div class="row">
          <!-- Select para Profesión -->
          <div class="form-group col-md-4">
            <label for="catalogo_profesion_id">Profesión</label>
            <select id="catalogo_profesion_id" name="catalogo_profesion_id" >
              <option value="">Seleccione una profesión</option>
              {% for prof in profesiones %}
                <option value="{{ prof.id }}" {% if persona.catalogo_profesion_id == prof.id %}selected{% endif %}>
                  {{ prof.nombre }}
                </option>
              {% endfor %}
            </select>
          </div>
          <div class="form-group col-md-4">
            <label for="horario_trabajo_estudio">Horario Trabajo/Estudio</label>
            <select class="form-control" id="horario_trabajo_estudio" name="horario_trabajo_estudio" required>
              <option value="">Seleccione un horario</option>
              <option value="Matutino" {% if persona.horario_trabajo_estudio == "Matutino" %}selected{% endif %}>Matutino</option>
              <option value="Vespertino" {% if persona.horario_trabajo_estudio == "Vespertino" %}selected{% endif %}>Vespertino</option>
              <option value="Nocturno" {% if persona.horario_trabajo_estudio == "Nocturno" %}selected{% endif %}>Nocturno</option>
            </select>
          </div>
        	<div class="form-group col-md-4">
  <label for="horario_texto">Horario</label>
  <input type="text" class="form-control" id="horario_texto" name="horario_texto" placeholder="Ingrese el horario" value="{{ persona.horario_texto|default:'' }}">
</div>

        </div>

        <hr class="my-3">
        
        <!-- Fila 5: Teléfonos -->
        <div class="row">
          <div class="form-group col-md-4">
            <label for="telefono1">Teléfono 1 <span class="text-danger">*</span></label>
            <input type="text" class="form-control" id="telefono1" name="telefono1" 
                   value="{{ persona.telefono1|default:'' }}" placeholder="Teléfono principal" required>
          </div>
          <div class="form-group col-md-4">
            <label for="telefono2">Teléfono 2</label>
            <input type="text" class="form-control" id="telefono2" name="telefono2" 
                   value="{{ persona.telefono2|default:'' }}" placeholder="Teléfono secundario">
          </div>
          <div class="form-group col-md-4">
            <label for="telefono3">Teléfono 3</label>
            <input type="text" class="form-control" id="telefono3" name="telefono3" 
                   value="{{ persona.telefono3|default:'' }}" placeholder="Teléfono alternativo">
          </div>
        </div>
        
        <hr class="my-3">
        
        <!-- Fila 6: Disponibilidad para Capacitación -->
        <div class="row">
          <div class="form-group col-md-12">
            <label for="disponibilidad_capacitacion">Disponibilidad para Capacitación</label>
            <input type="datetime-local" class="form-control" id="disponibilidad_capacitacion" 
                   name="disponibilidad_capacitacion" 
                   value="{% if persona.disponibilidad_capacitacion %}{{ persona.disponibilidad_capacitacion|date:'Y-m-d\\TH:i' }}{% endif %}" 
                   placeholder="Seleccione fecha y hora">
          </div>
        </div>
        
        <hr class="my-3">
        
        <!-- Fila 7: Procesos electorales, Miembro MER y Último Proceso -->
        <div class="row align-items-center">
          <div class="form-group col-md-4">
            <input type="hidden" name="ha_participado_procesos_electorales" value="0">
            <div class="form-check">
              <input type="checkbox" class="form-check-input" id="ha_participado_procesos_electorales" 
                     name="ha_participado_procesos_electorales" value="1"
                     {% if persona.ha_participado_procesos_electorales %} checked {% endif %}>
              <label class="form-check-label" for="ha_participado_procesos_electorales">
                Participó en Procesos Electorales
              </label>
            </div>
          </div>
          <div class="form-group col-md-4">
            <input type="hidden" name="ha_sido_miembro_mer" value="0">
            <div class="form-check">
              <input type="checkbox" class="form-check-input" id="ha_sido_miembro_mer" 
                     name="ha_sido_miembro_mer" value="1"
                     {% if persona.ha_sido_miembro_mer %} checked {% endif %}>
              <label class="form-check-label" for="ha_sido_miembro_mer">
                Miembro MER
              </label>
            </div>
          </div>
          <div class="form-group col-md-4">
            <label for="ultimo_proceso">Último Proceso</label>
            <input type="date" class="form-control" id="ultimo_proceso" name="ultimo_proceso" 
                   value="{% if persona.ultimo_proceso %}{{ persona.ultimo_proceso|date:'Y-m-d' }}{% endif %}">
          </div>
        </div>
        
        <hr class="my-3">
        
        <!-- Fila 8: Uso de Computador, Conocimientos Básicos y Experiencia TREP -->
        <div class="row align-items-center">
          <div class="form-group col-md-4">
            <input type="hidden" name="uso_manejo_computador" value="0">
            <div class="form-check">
              <input type="checkbox" class="form-check-input" id="uso_manejo_computador" 
                     name="uso_manejo_computador" value="1"
                     {% if persona.uso_manejo_computador %} checked {% endif %}>
              <label class="form-check-label" for="uso_manejo_computador">
                Uso/Manejo de Computador
              </label>
            </div>
          </div>
          <div class="form-group col-md-4">
            <input type="hidden" name="lo_basico" value="0">
            <div class="form-check">
              <input type="checkbox" class="form-check-input" id="lo_basico" 
                     name="lo_basico" value="1"
                     {% if persona.lo_basico %} checked {% endif %}>
              <label class="form-check-label" for="lo_basico">
                Conocimientos Básicos en Computadoras
              </label>
            </div>
          </div>
          <div class="form-group col-md-4">
            <input type="hidden" name="tiene_experiencia_trep" value="0">
            <div class="form-check">
              <input type="checkbox" class="form-check-input" id="tiene_experiencia_trep" 
                     name="tiene_experiencia_trep" value="1"
                     {% if persona.tiene_experiencia_trep %} checked {% endif %}>
              <label class="form-check-label" for="tiene_experiencia_trep">
                Experiencia TREP
              </label>
            </div>
          </div>
        </div>
        
        <hr class="my-3">
        
        <!-- Fila 9: Grupo y Referido -->
        <div class="row">
          <div class="form-group col-md-6">
            <label for="grupo">Grupo</label>
            <input type="text" class="form-control" id="grupo" name="grupo" 
                   value="{{ persona.grupo|default:'' }}" placeholder="Ingrese el grupo">
          </div>
          <div class="form-group col-md-6">
            <label for="referido">Referido</label>
            <input type="text" class="form-control" id="referido" name="referido" 
                   value="{{ persona.referido|default:'' }}" placeholder="Nombre de quien lo refirió">
          </div>
        </div>
        
        <hr class="my-3">
        
        <!-- Fila 10: Centro de Votación, Teléfono y Capacitador -->
        <div class="row">
          <!-- Select para Centro de Votación -->
          <div class="form-group col-md-4">
            <label for="centro_votacion_id">Centro de Votación</label>
            <select id="centro_votacion_id" name="centro_votacion_id" >
              <option value="">Seleccione un centro</option>
              {% for c in centros %}
                <option value="{{ c.id }}" {% if persona.centro_votacion_id == c.id %}selected{% endif %}>
                  {{ c.nombre }}
                </option>
              {% endfor %}
            </select>
          </div>
          <div class="form-group col-md-4">
            <label for="telefono">Teléfono</label>
            <input type="text" class="form-control" id="telefono" name="telefono" 
                   value="{{ persona.telefono|default:'' }}" placeholder="Ingrese el teléfono de contacto">
          </div>
          <!-- Select para Capacitador con Tom Select -->
          <div class="form-group col-md-4">
            <label for="capacitador_id">Capacitador</label>
            <select id="capacitador_id" name="capacitador_id">
              <option value="">Seleccione un capacitador</option>
              {% for cap in capacitadores %}
                <option value="{{ cap.id }}" {% if persona.capacitador_id == cap.id %}selected{% endif %}>
                  {{ cap.nombre }}
                </option>
              {% endfor %}
            </select>
          </div>
        </div>
        
        <hr class="my-3">
        
        <!-- Fila 11: Observaciones -->
        <div class="row">
          <div class="form-group col-md-12">
            <label for="observaciones">Observaciones</label>
            <textarea class="form-control" id="observaciones" name="observaciones" rows="3" placeholder="Escriba observaciones, si aplica">{{ persona.observaciones|default:'' }}</textarea>
          </div>
        </div>
        
        <hr class="my-3">
      
        
      </div>
      
      <div class="card-footer text-right">
        <a href="{% url 'listar_personas' %}" class="btn btn-secondary">
          <i class="fas fa-arrow-left"></i> Volver
        </a>
        <button type="submit" class="btn btn-primary">Guardar</button>
      </div>
    </form>
  </div>
</div>

<!-- Incluir SweetAlert2 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<!-- Incluir jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- Incluir Tom Select CSS y JS -->
<link href="https://cdn.jsdelivr.net/npm/tom-select/dist/css/tom-select.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/tom-select/dist/js/tom-select.complete.min.js"></script>

<style>
  .form-group {
    margin-bottom: 15px;
  }
  .ts-control {
    border: 1px solid #ced4da;
    border-radius: 4px;
    background-color: #fff;
    min-height: 38px;
    box-shadow: none;
  }
  .ts-dropdown {
    border-radius: 0 0 4px 4px;
    border: 1px solid #ced4da;
    margin-top: -1px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }
</style>

<script>
  document.addEventListener("DOMContentLoaded", function() {
    // Inicializar Tom Select para el select de Capacitador
    new TomSelect("#capacitador_id", {
      valueField: "id",
      labelField: "nombre",
      searchField: "nombre",
      load: function(query, callback) {
        if (!query.length) return callback();
        fetch("{% url 'get_capacitadores' %}?term=" + encodeURIComponent(query))
          .then(response => response.json())
          .then(callback)
          .catch(() => callback());
      },
      placeholder: "Buscar capacitador...",
      allowEmptyOption: true,
    });

    // Inicializar Tom Select para el select de Profesión (búsqueda local)
    new TomSelect("#catalogo_profesion_id", {
      valueField: "id",
      labelField: "nombre",
      searchField: "nombre",
      placeholder: "Buscar profesión..."
    });

    // Inicializar Tom Select para el select de Centro de Votación (búsqueda local)
    new TomSelect("#centro_votacion_id", {
      valueField: "id",
      labelField: "nombre",
      searchField: "nombre",
      placeholder: "Buscar centro de votación..."
    });

    // Inicializar Tom Select para el select de Escolaridad (opcional)
    new TomSelect("#catalogo_escolaridad_id", {
      valueField: "id",
      labelField: "nivel",
      searchField: "nivel",
      placeholder: "Buscar escolaridad..."
    });
  });
</script>
{% endblock content %}