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

{% block title %}
  Registrar Voluntarios
{% 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">Registro de Voluntarios</h3>
    </div>
    <form method="POST" action="{% url 'registrar_persona' %}">
      {% 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="{{ data.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="{{ data.dni|default:'' }}" placeholder="Ingrese el numero de identidad sin guiones" required>
          </div>
          <div class="form-group col-md-4">
            <label for="genero">Sexo <span class="text-danger">*</span></label>
            <select class="form-control" id="sexo" name="sexo" required>
              <option value="">Seleccione</option>
              <option value="femenino" {% if data.genero == "femenino" %}selected{% endif %}>Femenino</option>
              <option value="masculino" {% if data.genero == "masculino" %}selected{% endif %}>Masculino</option>
            </select>
          </div>
        </div>
        <hr class="my-3">

        <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="{{ data.direccion|default:'' }}">
          </div>
          <div class="form-group col-md-6">
            <label for="escolaridad_catalogo">Escolaridad</label>
            <select id="escolaridad" name="escolaridad" required>
              <option value="">Seleccione un nivel</option>
              {% for escolaridad in escolaridad_catalogo  %}
                <option value="{{ escolaridad.id }}" {% if data.escolaridad|default:'' == centro.id|stringformat:"s" %}selected{% endif %}>{{ escolaridad.nombre }}</option>
              {% endfor %}
            </select>
          </div>
        </div>

        <hr class="my-3">

        <!-- Fila 3: Profesión y Horario Trabajo/Estudio -->
        <div class="row">
          <div class="form-group col-md-4">
            <label for="profesion">Profesión</label>
            <select id="profesion" name="profesion" required>
              <option value="">Seleccione una profesión</option>
              {% for prof in profesiones_catalogo %}
                <option value="{{ prof.id }}" {% if data.profesion|default:'' == prof.id|stringformat:"s" %}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 data.horario_trabajo_estudio == "Matutino" %}selected{% endif %}>Matutino</option>
              <option value="Vespertino" {% if data.horario_trabajo_estudio == "Vespertino" %}selected{% endif %}>Vespertino</option>
              <option value="Nocturno" {% if data.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 en texto plano" value="{{ data.horario_texto|default:'' }}">
			</div>
        </div>

        <hr class="my-3">

        <!-- Fila 4: 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="{{ data.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="{{ data.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="{{ data.telefono3|default:'' }}" placeholder="Teléfono alternativo">
          </div>
        </div>

        <hr class="my-3">

        <!-- Fila 5: 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="{{ data.disponibilidad_capacitacion|default:'' }}" placeholder="Seleccione fecha y hora">
          </div>
        </div>

        <hr class="my-3">

        <!-- Fila 6: Grupo 1 - Procesos electorales, Miembro MER y Último Proceso -->
        <div class="row align-items-center">
          <div class="form-group col-md-4">
            <div class="form-check">
              <input type="checkbox" class="form-check-input" id="ha_participado_procesos_electorales" 
                     name="ha_participado_procesos_electorales"
                     {% if data.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">
            <div class="form-check">
              <input type="checkbox" class="form-check-input" id="ha_sido_miembro_mer" 
                     name="ha_sido_miembro_mer"
                     {% if data.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="{{ data.ultimo_proceso|default:'' }}">
          </div>
        </div>

        <hr class="my-3">

        <!-- Fila 7: Grupo 2 - Uso de Computador, Conocimientos Básicos y Experiencia TREP -->
        <div class="row align-items-center">
          <div class="form-group col-md-4">
            <div class="form-check">
              <input type="checkbox" class="form-check-input" id="uso_manejo_computador" 
                     name="uso_manejo_computador"
                     {% if data.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">
            <div class="form-check">
              <input type="checkbox" class="form-check-input" id="lo_basico" 
                     name="lo_basico"
                     {% if data.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">
            <div class="form-check">
              <input type="checkbox" class="form-check-input" id="tiene_experiencia_trep" 
                     name="tiene_experiencia_trep"
                     {% if data.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 8: Grupo 3 - 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="{{ data.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="{{ data.referido|default:'' }}" placeholder="Nombre de quien lo refirió">
          </div>
        </div>

        <hr class="my-3">

        <!-- Fila 10: Grupo 5 - Centro de Votación y Teléfono -->
        <div class="row">
          <div class="form-group col-md-4">
            <label for="centro_votacion">Centro de Votación</label>
            <select id="centro_votacion" name="centro_votacion" required>
              <option value="">Seleccione un centro</option>
              {% for centro in centros %}
                <option value="{{ centro.id }}" {% if data.centro_votacion|default:'' == centro.id|stringformat:"s" %}selected{% endif %}>{{ centro.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="{{ data.telefono|default:'' }}" placeholder="Ingrese el teléfono de contacto">
          </div>
          <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>
                {% if data.capacitador_id and data.capacitador_nombre %}
                  <option value="{{ data.capacitador_id }}" selected>{{ data.capacitador_nombre }}</option>
                {% endif %}
            </select>
          </div>
        </div>

        <hr class="my-3">

        <!-- Fila 11: Grupo 6 - 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">{{ data.observaciones|default:'' }}</textarea>
          </div>
        </div>
      </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; /* Espaciado entre los grupos de campos */
  }
  /* Ajustar la apariencia de Tom Select */
  .ts-control {
    border: 1px solid #ced4da;    /* Borde claro al estilo Bootstrap */
    border-radius: 4px;           /* Bordes ligeramente redondeados */
    background-color: #fff;       /* Fondo blanco */
    min-height: 38px;             /* Altura mínima parecida a form-control */
    box-shadow: none;             /* Quitar sombra excesiva */
  }
  .ts-dropdown {
    border-radius: 0 0 4px 4px;   /* Borde redondeado solo en la parte inferior */
    border: 1px solid #ced4da;    
    margin-top: -1px;            /* Encima de la ts-control */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }
</style>

<script>
  // Mostrar mensajes con SweetAlert2
  {% 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>


<script>
  document.addEventListener("DOMContentLoaded", function() {
    // Inicializar Tom Select para buscar capacitaciones
    new TomSelect("#capacitador_id", {
      valueField: "id",
      labelField: "label",
      searchField: "label",
      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",
    });

    new TomSelect("#escolaridad", {
      valueField: "id",
      labelField: "nombre",
      searchField: "nombre",
      placeholder: "Buscar escolaridad...",
    });

    new TomSelect("#profesion", {
      valueField: "id",
      labelField: "nombre",
      searchField: "nombre",
      placeholder: "Buscar profesión...",
    });

    new TomSelect("#centro_votacion", {
      valueField: "id",
      labelField: "nombre",
      searchField: "nombre",
      placeholder: "Buscar centro de votación...",
    });

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