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

{% block title %}
  Registrar Capacitador
{% endblock title %}

{% block content %}
<div class="container">
  <div class="card card-primary mt-4">
    <div class="card-header">
      <h3 class="card-title">Registro de Capacitador</h3>
    </div>
    <form method="POST" action="{% url 'registrar_capacitador' %}">
      {% csrf_token %}
      <div class="card-body">
        <!-- Fila 1: Persona JRV -->
        <div class="row">
          <div class="form-group col-md-6">
            <label for="persona_jrv_id">Persona JRV</label>
            <select class="form-control" id="persona_jrv_id" name="persona_jrv_id" required>
              {% if data.persona_jrv_id and data.nombre_miembro %}
                <option value="{{ data.persona_jrv_id }}" selected>{{ data.nombre_miembro }}</option>
              {% endif %}
            </select>
          </div>
        </div>

        <hr class="my-3">
      </div>
      <div class="card-footer text-right">
        <button type="submit" class="btn btn-primary">Guardar</button>
      </div>
    </form>
  </div>
</div>

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

<!-- Incluir Select2 CSS y JS -->
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<script>
  $(document).ready(function(){
    $("#persona_jrv_id").select2({
      ajax: {
        url: "{% url 'get_persona_jrv' %}",  // Reutilizando la misma vista
        dataType: 'json',
        delay: 250,
        data: function (params) {
          return {
            term: params.term  // Parámetro de búsqueda (nombre o DNI)
          };
        },
        processResults: function (data) {
          return {
            results: $.map(data, function (item) {
              return {
                id: item.id,
                text: item.label + " (" + item.dni + ")"  // Muestra "Nombre (DNI)"
              };
            })
          };
        },
        cache: true
      },
      minimumInputLength: 2,
      placeholder: "Buscar persona por nombre o DNI",
      allowClear: true
    });
  });
</script>
{% endblock content %}