<link rel="stylesheet" href="/public/css/inscripcion.css" />
<div class="container mt-5">
  <section id="inscripcion">
    <h2 class="mb-4 text-center">Formulario de Inscripción</h2>
  </section>
  <form action="/formok" method="POST" class="p-4 border rounded">
    <!-- Hidden fields -->
    <input type="hidden" name="_captcha" value="false" />
    <input
      type="hidden"
      name="_blacklist"
      value="spammy pattern, banned term, phrase"
    />
    <input type="text" name="_honey" style="display: none" />

    <!-- CAPTCHA basado en CSS -->
    <input type="text" name="honey" id="honey" style="display: none" />

    <input type="hidden" name="_template" value="table" />

    <!-- Form fields -->
    <div class="mb-3">
      <label for="nombre" class="form-label">Nombre:</label>
      <input
        type="text"
        id="nombre"
        name="nombre"
        class="form-control"
        required
      />
    </div>

    <div class="mb-3">
      <label for="apellidos" class="form-label">Apellidos:</label>
      <input
        type="text"
        id="apellidos"
        name="apellidos"
        class="form-control"
        required
      />
    </div>

    <div class="mb-3">
      <label for="carrera" class="form-label">Carrera:</label>
      <select id="carrera" name="carrera" class="form-select" required>
        <option value="">Selecciona una carrera</option>
        <option value="Tecnologías de la Información">
          Tecnologías de la Información
        </option>
        <option value="Mecatrónica">Mecatrónica</option>
        <option value="Energías Renovables">Energías Renovables</option>
        <option value="Innovación de Negocios y Mercadotecnia">
          Innovación de Negocios y Mercadotecnia
        </option>
        <option value="Sistemas Productivos">Sistemas Productivos</option>
        <option value="Química">Química</option>
        <option value="Química Farmacéutica">Química Farmacéutica</option>
        <option value="Mantenimiento Industrial">
          Mantenimiento Industrial
        </option>
        <option value="Ingeniería Civil">Ingeniería Civil</option>
      </select>
    </div>

    <div class="mb-3">
      <label for="numero_de_expediente" class="form-label"
        >Numero de expediente:</label
      >
      <input
        type="number"
        id="numero_de_expediente"
        name="numero_de_expediente"
        class="form-control"
        required
        pattern="\d{10}"
      />
    </div>

    <div class="mb-3">
      <label for="cuatrimestre" class="form-label">Cuatrimestre:</label>
      <select
        id="cuatrimestre"
        name="cuatrimestre"
        class="form-select"
        required
      >
        <option value="">Selecciona un cuatrimestre</option>
        <option value="Primero">Primer cuatrimestre</option>
        <option value="Segundo">Segundo cuatrimestre</option>
        <option value="Tercero">Tercer cuatrimestre</option>
        <option value="Cuarto">Cuarto cuatrimestre</option>
        <option value="Quinto">Quinto cuatrimestre</option>
        <option value="Sexto">Sexto cuatrimestre</option>
        <option value="Séptimo">Séptimo cuatrimestre</option>
        <option value="Octavo">Octavo cuatrimestre</option>
        <option value="Noveno">Noveno cuatrimestre</option>
        <option value="Décimo">Décimo cuatrimestre</option>
        <option value="Onceavo">Onceavo cuatrimestre</option>
      </select>
    </div>

    <div class="mb-3">
      <label for="telefono" class="form-label">Teléfono:</label>
      <input
        type="number"
        id="telefono"
        name="telefono"
        class="form-control"
        required
        pattern="\d{10}"
      />
    </div>

    <div class="mb-3">
      <label for="nivel" class="form-label">Nivel de programación:</label>
      <select id="nivel" name="nivel" class="form-select" required>
        <option value="">Selecciona un nivel</option>
        <option value="Iniciando mi viaje en la programación">
          Iniciando mi viaje en la programación
        </option>
        <option value="Nivel Básico">Nivel Básico</option>
        <option value="Nivel Intermedio">Nivel Intermedio</option>
        <option value="Nivel Avanzado">Nivel Avanzado</option>
      </select>
    </div>

    <!-- CAPTCHA matemático -->
    <div class="mb-3">
      <label for="captcha" class="form-label">
        Resuelve la siguiente operación matemática:
        <span id="captcha-question"><%= captchaQuestion %></span>
      </label>
      <input
        type="text"
        id="captcha"
        name="captcha"
        class="form-control"
        required
      />
    </div>

    <div class="text-center mt-4">
      <button type="submit" class="btn btn-primary">Enviar Formulario</button>
    </div>
  </form>
</div>
<script>
  // Captura la dirección IP del remitente
  fetch("https://api64.ipify.org?format=json")
    .then((response) => response.json())
    .then((data) => {
      const ipAddress = data.ip;
      console.log("Dirección IP del remitente:", ipAddress);

      // Establece el valor de la dirección IP en el campo oculto
      const ipField = document.getElementById("ip_address");
      if (ipField) {
        ipField.value = ipAddress;
      }
    })
    .catch((error) =>
      console.error("Error al obtener la dirección IP:", error)
    );
</script>
