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

{% block title %}
  Registrar Logística
{% 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 Logística</h3>
    </div>
    <form method="POST" action="{% url 'registrar_persona' %}" enctype="multipart/form-data" id="registroForm">
      {% csrf_token %}
      <div class="card-body">
        <!-- Campos para Logística (Tipo 4) -->
        <div class="row">
          <div class="form-group col-md-6">
            <label for="nombres_log">Nombres *</label>
            <input type="text" class="form-control" id="nombres_log" name="nombres" placeholder="Ingrese los nombres">
          </div>
          <div class="form-group col-md-6">
            <label for="apellidos_log">Apellidos *</label>
            <input type="text" class="form-control" id="apellidos_log" name="apellidos" placeholder="Ingrese los apellidos">
          </div>
        </div>
        <div class="row mt-2">
          <div class="form-group col-md-6">
            <label for="direccion_log">Dirección</label>
            <input type="text" class="form-control" id="direccion_log" name="direccion" placeholder="Ingrese la dirección">
          </div>
          <div class="form-group col-md-6">
            <label for="dni_log">DNI</label>
            <input type="text" class="form-control" id="dni_log" name="dni" placeholder="Ingrese el DNI">
          </div>
        </div>
        <div class="row mt-2">
          <div class="form-group col-md-6">
            <label for="catalogo_profesion_id_log">Profesión *</label>
            <select id="catalogo_profesion_id_log" 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 class="form-group col-md-6">
            <label for="correo_electronico_log">Correo Electrónico</label>
            <input type="email" class="form-control" id="correo_electronico_log" name="correo_electronico" placeholder="Ingrese el correo">
          </div>
        </div>
        <div class="row mt-2">
          <div class="form-group col-md-6">
            <label for="telefono_log">Teléfono *</label>
            <input type="text" class="form-control" id="telefono_log" name="telefono1" placeholder="Ingrese el teléfono">
          </div>
        </div>
        <input type="hidden" name="tipo_miembro_id" value="4">
      </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 Logística</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_profesion_id_log", {
      valueField: "id",
      labelField: "nombre",
      searchField: "nombre",
      placeholder: "Seleccione profesión..."
  });
});
</script>
{% endblock content %}