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

{% block title %}
  Registrar PersonaJRV
{% endblock title %}

{% block content %}
<div class="container">
  <div class="card card-primary mt-4">
    <div class="card-header">
      <h3 class="card-title">Registro de PersonaJRV</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-6">
            <label for="nombre">Nombre</label>
            <input type="text" class="form-control" id="nombre" name="nombre" 
              value="{{ data.nombre|default:'' }}" required>
          </div>
          <div class="form-group col-md-6">
            <label for="dni">DNI</label>
            <input type="text" class="form-control" id="dni" name="dni" 
              value="{{ data.dni|default:'' }}" required>
          </div>
        </div>

        <hr class="my-3">

        <!-- Fila 2: 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="{{ data.direccion|default:'' }}">
          </div>
          <div class="form-group col-md-6">
            <label for="escolaridad">Escolaridad</label>
            <input type="text" class="form-control" id="escolaridad" name="escolaridad" 
              value="{{ data.escolaridad|default:'' }}">
          </div>
        </div>

        <hr class="my-3">

        <!-- Fila 3: Profesión y Horario Trabajo/Estudio -->
        <div class="row">
          <div class="form-group col-md-6">
            <label for="profesion">Profesión</label>
            <input type="text" class="form-control" id="profesion" name="profesion" 
              value="{{ data.profesion|default:'' }}">
          </div>
          <div class="form-group 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" 
              value="{{ data.horario_trabajo_estudio|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</label>
            <input type="text" class="form-control" id="telefono1" name="telefono1" 
              value="{{ data.telefono1|default:'' }}">
          </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:'' }}">
          </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:'' }}">
          </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:'' }}">
          </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
              </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:'' }}">
          </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:'' }}">
          </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>
            <input type="text" class="form-control" id="centro_votacion" name="centro_votacion" 
              value="{{ data.centro_votacion|default:'' }}">
          </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:'' }}">
          </div>
          <div class="form-group col-md-4">
            <label for="capacitador_id">Capacitador</label>
            <select class="form-control" id="capacitador_id" name="capacitador_id" required>
              {% 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">{{ data.observaciones|default:'' }}</textarea>
          </div>
        </div>

      </div>
      <div class="card-footer text-right">
        <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 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>

<!-- Estilos personalizados para evitar el “doble cuadro” -->
<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",
    });
  });
</script>
{% endblock content %}