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

{% block title %}
  Registrar Capacitador
{% 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 Capacitador</h3>
    </div>
    <form method="POST" action="{% url 'registrar_persona' %}" enctype="multipart/form-data" id="registroForm">
      {% csrf_token %}
      <div class="card-body">
        <!-- Campos para Capacitador (Tipo 2) -->
        <div class="row">
          <div class="form-group col-md-6">
            <label for="nombres_cap">Nombres *</label>
            <input type="text" class="form-control" id="nombres_cap" name="nombres" placeholder="Ingrese los nombres">
          </div>
          <div class="form-group col-md-6">
            <label for="apellidos_cap">Apellidos *</label>
            <input type="text" class="form-control" id="apellidos_cap" 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_cap">DNI *</label>
            <input type="text" class="form-control" id="dni_cap" name="dni" placeholder="Ingrese el DNI">
          </div>
          <div class="form-group col-md-8">
            <label for="direccion_cap">Dirección</label>
            <input type="text" class="form-control" id="direccion_cap" name="direccion" placeholder="Ingrese la dirección">
          </div>
        </div>
        <!-- Escolaridad y Profesión -->
        <div class="row mt-2">
          <div class="form-group col-md-6">
            <label for="catalogo_escolaridad_id_cap">Escolaridad</label>
            <select id="catalogo_escolaridad_id_cap" name="catalogo_escolaridad_id" class="form-control">
              <option value="">Seleccione</option>
              {% for esc in escolaridad_catalogo %}
                <option value="{{ esc.id }}">{{ esc.nombre }}</option>
              {% endfor %}
            </select>
          </div>
          <div class="form-group col-md-6">
            <label for="catalogo_profesion_id_cap">Profesión</label>
            <select id="catalogo_profesion_id_cap" name="catalogo_profesion_id" class="form-control">
              <option value="">Seleccione</option>
              {% for prof in profesiones_catalogo %}
                <option value="{{ prof.id }}">{{ prof.nombre }}</option>
              {% endfor %}
            </select>
          </div>
        </div>
        <!-- Categoría de Confianza -->
        <div class="row mt-2">
          <div class="form-group col-md-6">
            <label for="id_categoria_confianza_cap">Categoría de Confianza *</label>
            <select id="id_categoria_confianza_cap" name="id_categoria_confianza" class="form-control">
              <option value="">Seleccione una categoría</option>
            </select>
          </div>
        </div>
        <!-- Correo y Teléfonos -->
        <div class="row mt-2">
          <div class="form-group col-md-6">
            <label for="correo_electronico_cap">Correo Electrónico *</label>
            <input type="email" class="form-control" id="correo_electronico_cap" name="correo_electronico" placeholder="Ingrese el correo">
          </div>
          <div class="form-group col-md-6">
            <label for="telefono1_cap">Teléfono 1 *</label>
            <input type="text" class="form-control" id="telefono1_cap" name="telefono1" placeholder="Teléfono principal">
          </div>
        </div>
        <div class="row mt-2">
          <div class="form-group col-md-6">
            <label for="telefono2_cap">Teléfono 2</label>
            <input type="text" class="form-control" id="telefono2_cap" name="telefono2" placeholder="Teléfono secundario">
          </div>
          <div class="form-group col-md-6">
            <label for="vehiculo_cap">Vehículo</label>
            <input type="checkbox" class="form-check-input" id="vehiculo_cap" name="vehiculo">
          </div>
        </div>
        <!-- Procesos, Fecha y Horario Texto -->
        <div class="row mt-2">
          <div class="form-group col-md-6">
            <label for="ultimo_proceso_cap">Último Proceso</label>
            <input type="date" class="form-control" id="ultimo_proceso_cap" name="ultimo_proceso">
          </div>
          <div class="form-group col-md-6">
            <label for="fecha_nacimiento_cap">Fecha de Nacimiento</label>
            <input type="date" class="form-control" id="fecha_nacimiento_cap" name="fecha_nacimiento">
          </div>
        </div>
        <div class="row mt-2">
          <div class="form-group col-md-6">
            <label for="horario_texto_cap">Horario (Texto Plano)</label>
            <input type="text" class="form-control" id="horario_texto_cap" name="horario_texto" placeholder="Ej. 8:00 a.m. - 4:00 p.m.">
          </div>
        </div>
        <!-- Asignaciones y Observaciones -->
        <div class="row mt-2">
          <div class="form-group col-md-6">
            <label for="asignaciones_cap">Asignaciones</label>
            <input type="text" class="form-control" id="asignaciones_cap" name="asignaciones" placeholder="Ingrese asignaciones">
          </div>
          <div class="form-group col-md-6">
            <label for="observaciones_cap">Observaciones</label>
            <textarea class="form-control" id="observaciones_cap" 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_cap">Foto 1</label>
            <input type="file" class="form-control" id="foto_url_cap" name="foto_url">
          </div>
          <div class="form-group col-md-6">
            <label for="foto_url_2_cap">Foto 2</label>
            <input type="file" class="form-control" id="foto_url_2_cap" name="foto_url_2">
          </div>
        </div>
        <input type="hidden" name="tipo_miembro_id" value="2">
      </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 Capacitador</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_cap", {
      valueField: "id",
      labelField: "nombre",
      searchField: "nombre",
      placeholder: "Seleccione escolaridad..."
  });
  new TomSelect("#catalogo_profesion_id_cap", {
      valueField: "id",
      labelField: "nombre",
      searchField: "nombre",
      placeholder: "Seleccione profesión..."
  });
  new TomSelect("#id_categoria_confianza_cap", {
      placeholder: "Seleccione categoría de confianza..."
  });
});
</script>
{% endblock content %}