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

{% block title %}
  Registrar Asistencia
{% endblock title %}

{% block content %}
<div class="container">
  <div class="card card-primary mt-4">
    <div class="card-header">
      <h3 class="card-title">Registro de Asistencia</h3>
    </div>
    <form method="POST" action="{% url 'registrar_asistencia' %}">
      {% csrf_token %}
      <div class="card-body">
        <!-- Fila 1: Capacitación y Nombre Miembro -->
        <div class="row">
          <!-- Mostrar la capacitación en modo lectura -->
          <div class="form-group col-md-6">
            <label for="capacitacion_name">Capacitación</label>
            <!-- Select deshabilitado para mostrar el nombre -->
            <select id="capacitacion_name" class="form-control" disabled>
              {% if data.capacitacion_id and data.capacitacion_nombre %}
                <option>{{ data.capacitacion_nombre }}</option>
              {% else %}
                <option>No especificado</option>
              {% endif %}
            </select>
            <!-- Campo hidden para enviar el ID real -->
            <input type="hidden" name="capacitacion_id" value="{{ data.capacitacion_id|default:'' }}">
          </div>

          <div class="form-group col-md-6">
            <label for="nombre_miembro">Nombre Miembro</label>
            <!-- Quitar form-control/form-select para que Tom Select maneje el estilo -->
            <select id="nombre_miembro" 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">

        <!-- Fila 2: Entrega Manual, Duración y Estado de Asistencia -->
        <div class="row">
          <div class="form-group col-md-4">
            <label for="entrega_manual">Entrega Manual</label>
            <div class="form-check">
              <input type="checkbox" class="form-check-input" id="entrega_manual" name="entrega_manual"
                     {% if data.entrega_manual %}checked{% endif %}>
              <label class="form-check-label" for="entrega_manual">Entregado</label>
            </div>
          </div>
          <div class="form-group col-md-4">
            <label for="duracion">Duración</label>
            <input type="text" class="form-control" id="duracion" name="duracion"
                   value="{{ data.duracion|default:'' }}">
          </div>
          <div class="form-group col-md-4">
            <label for="estado_asistencia">Estado de Asistencia</label>
            <input type="text" class="form-control" id="estado_asistencia" name="estado_asistencia"
                   value="{{ data.estado_asistencia|default:'' }}" required>
          </div>
        </div>

        <hr class="my-3">

        <!-- Fila 3: 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 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>

<script>
  document.addEventListener("DOMContentLoaded", function() {
    // Inicializar Tom Select para buscar personas JRV (miembros)
    new TomSelect("#nombre_miembro", {
      valueField: "id",
      labelField: "label",
      searchField: "label",
      load: function(query, callback) {
        if (!query.length) return callback();
        fetch("{% url 'get_persona_jrv' %}?term=" + encodeURIComponent(query))
          .then(response => response.json())
          .then(callback)
          .catch(() => callback());
      },
      placeholder: "Buscar miembro (por nombre o DNI)",
    });
  });
</script>

<script>
  {% 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>
{% endblock content %}