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

{% block title %}
  Registrar Miembro
{% endblock title %}

{% block content %}
<div class="container my-4">
  <a href="{% url 'listar_personas' %}" class="btn btn-secondary mb-3">
    <i class="fas fa-arrow-left"></i> Volver
  </a>
  <div class="card">
    <div class="card-header">
      <h3 class="card-title">Registro de Miembro</h3>
    </div>
    <form method="POST" action="{% url 'registrar_persona' %}" enctype="multipart/form-data" id="registroForm">
      {% csrf_token %}
      <div class="card-body">
        <!-- Campos para Miembro (Tipo 1) -->
        <div class="row">
          <div class="form-group col-md-6">
            <label for="nombres">Nombres *</label>
            <input type="text" class="form-control" id="nombres" name="nombres" placeholder="Ingrese los nombres">
          </div>
          <div class="form-group col-md-6">
            <label for="apellidos">Apellidos *</label>
            <input type="text" class="form-control" id="apellidos" name="apellidos" placeholder="Ingrese los apellidos">
          </div>
        </div>
        <!-- DNI y Dirección -->
        <div class="row mt-2">
          <div class="form-group col-md-4">
            <label for="dni">DNI *</label>
            <input type="text" class="form-control" id="dni" name="dni" placeholder="Ingrese el DNI">
          </div>
          <div class="form-group col-md-8">
            <label for="direccion">Dirección</label>
            <input type="text" class="form-control" id="direccion" name="direccion" placeholder="Ingrese la dirección">
          </div>
        </div>
        <!-- Fecha de Nacimiento, Escolaridad y Sexo -->
        <div class="row mt-2">
          <div class="form-group col-md-4">
            <label for="fecha_nacimiento">Fecha de Nacimiento</label>
            <input type="date" class="form-control" id="fecha_nacimiento" name="fecha_nacimiento">
          </div>
          <div class="form-group col-md-4">
            <label for="catalogo_escolaridad_id">Escolaridad *</label>
            <select id="catalogo_escolaridad_id" name="catalogo_escolaridad_id" class="form-control">
              <option value="">Seleccione un nivel</option>
              {% for esc in escolaridad_catalogo %}
                <option value="{{ esc.id }}">{{ esc.nombre }}</option>
              {% endfor %}
            </select>
          </div>
          <div class="form-group col-md-4">
            <label for="sexo">Sexo *</label>
            <select class="form-control" id="sexo" name="sexo">
              <option value="">Seleccione</option>
              <option value="femenino">Femenino</option>
              <option value="masculino">Masculino</option>
            </select>
          </div>
        </div>
        <!-- Profesión y Horario -->
        <div class="row mt-2">
          <div class="form-group col-md-6">
            <label for="catalogo_profesion_id">Profesión *</label>
            <select id="catalogo_profesion_id" name="catalogo_profesion_id" class="form-control">
              <option value="">Seleccione una profesión</option>
              {% for prof in profesiones_catalogo %}
                <option value="{{ prof.id }}">{{ prof.nombre }}</option>
              {% endfor %}
            </select>
          </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" placeholder="Ej. Matutino, Vespertino, etc.">
          </div>
        </div>
        <!-- Teléfonos -->
        <div class="row mt-2">
          <div class="form-group col-md-6">
            <label for="telefono1">Teléfono 1 *</label>
            <input type="text" class="form-control" id="telefono1" name="telefono1" placeholder="Ingrese el teléfono principal">
          </div>
          <div class="form-group col-md-6">
            <label for="telefono2">Teléfono 2</label>
            <input type="text" class="form-control" id="telefono2" name="telefono2" placeholder="Ingrese el teléfono secundario">
          </div>
        </div>
        <!-- Disponibilidad y Horario Texto -->
        <div class="row mt-2">
          <div class="form-group col-md-6">
            <label for="disponibilidad_capacitacion">Disponibilidad para Capacitación</label>
            <input type="datetime-local" class="form-control" id="disponibilidad_capacitacion" name="disponibilidad_capacitacion">
          </div>
          <div class="form-group col-md-6">
            <label for="horario_texto">Horario (Texto Plano)</label>
            <input type="text" class="form-control" id="horario_texto" name="horario_texto" placeholder="Ej. 8:00 a.m. - 4:00 p.m.">
          </div>
        </div>
        <!-- Checkboxes -->
        <div class="row mt-2">
          <div class="form-group col-md-3">
            <div class="form-check">
              <input type="checkbox" class="form-check-input" id="ha_participado" name="ha_participado_procesos_electorales">
              <label class="form-check-label" for="ha_participado">Participó en Procesos</label>
            </div>
          </div>
          <div class="form-group col-md-3">
            <div class="form-check">
              <input type="checkbox" class="form-check-input" id="ha_sido_mer" name="ha_sido_miembro_mer">
              <label class="form-check-label" for="ha_sido_mer">Miembro MER</label>
            </div>
          </div>
          <div class="form-group col-md-3">
            <div class="form-check">
              <input type="checkbox" class="form-check-input" id="uso_computador" name="uso_manejo_computador">
              <label class="form-check-label" for="uso_computador">Uso Computador</label>
            </div>
          </div>
          <div class="form-group col-md-3">
            <div class="form-check">
              <input type="checkbox" class="form-check-input" id="lo_basico" name="lo_basico">
              <label class="form-check-label" for="lo_basico">Conocimientos Básicos</label>
            </div>
          </div>
        </div>
        <div class="row mt-2">
          <div class="form-group col-md-3">
            <div class="form-check">
              <input type="checkbox" class="form-check-input" id="tiene_experiencia" name="tiene_experiencia_trep">
              <label class="form-check-label" for="tiene_experiencia">Experiencia TREP</label>
            </div>
          </div>
          <div class="form-group col-md-3">
            <div class="form-check">
              <input type="checkbox" class="form-check-input" id="entrega_materiales" name="entrega_materiales">
              <label class="form-check-label" for="entrega_materiales">Entrega Materiales</label>
            </div>
          </div>
          <div class="form-group col-md-6">
            <label for="ultimo_proceso">Último Proceso</label>
            <input type="date" class="form-control" id="ultimo_proceso" name="ultimo_proceso">
          </div>
        </div>
        <!-- Categoría de Confianza -->
        <div class="row mt-2">
          <div class="form-group col-md-6">
            <label for="id_categoria_confianza_miembro">Categoría de Confianza *</label>
            <select id="id_categoria_confianza_miembro" name="id_categoria_confianza" class="form-control">
              <option value="">Seleccione una categoría</option>
            </select>
          </div>
        </div>
        <!-- Referente -->
        <div class="row mt-2">
          <div class="form-group col-md-6">
            <label for="referido_id">Referente</label>
            <select id="referido_id" name="referido_id" class="form-control">
              <option value="">Seleccione un referente</option>
              {% for ref in referentes %}
                <option value="{{ ref.id }}">{{ ref.nombre }}</option>
              {% endfor %}
            </select>
          </div>
        </div>
        <!-- Observaciones y Fotos -->
        <div class="row mt-2">
          <div class="form-group col-md-12">
            <label for="observaciones">Observaciones</label>
            <textarea class="form-control" id="observaciones" name="observaciones" rows="3" placeholder="Observaciones"></textarea>
          </div>
        </div>
        <div class="row mt-2">
          <div class="form-group col-md-6">
            <label for="foto_url">Foto 1</label>
            <input type="file" class="form-control" id="foto_url" name="foto_url">
          </div>
          <div class="form-group col-md-6">
            <label for="foto_url_2">Foto 2</label>
            <input type="file" class="form-control" id="foto_url_2" name="foto_url_2">
          </div>
        </div>
        <input type="hidden" name="tipo_miembro_id" value="1">
      </div>
      <div class="card-footer text-end">
        <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 Miembro</button>
      </div>
    </form>
  </div>
</div>

<!-- Dependencias CSS y JS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
<link href="https://cdn.jsdelivr.net/npm/tom-select/dist/css/tom-select.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://cdn.jsdelivr.net/npm/tom-select/dist/js/tom-select.complete.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
  new TomSelect("#catalogo_escolaridad_id", {
      valueField: "id",
      labelField: "nombre",
      searchField: "nombre",
      placeholder: "Seleccione escolaridad..."
  });
  new TomSelect("#catalogo_profesion_id", {
      valueField: "id",
      labelField: "nombre",
      searchField: "nombre",
      placeholder: "Seleccione profesión..."
  });
  new TomSelect("#referido_id", {
      valueField: "id",
      labelField: "nombre",
      searchField: "nombre",
      placeholder: "Seleccione un referente..."
  });
  new TomSelect("#id_categoria_confianza_miembro", {
      placeholder: "Seleccione categoría de confianza..."
  });
});
</script>
{% endblock content %}