templates/animation_publish.html

<form
  action="/candidatos/vaga={{ vaga.id }}"
  method="POST"
  enctype="multipart/form-data"
  id="uploadForm"
  style="display: none"
>
  <input
    type="file"
    name="file"
    accept="application/pdf"
    id="file"
    style="display: none"
  />
  <button type="submit">Enviar PDF</button>
</form>

<div id="toastBoxInetum"></div>

<style>
  #toastBoxInetum {
    position: absolute;
    bottom: 0;
    right: 1px;
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    overflow: hidden;
    padding: 20px;
    z-index: 9999;
    user-select: none;
  }

  .toastInetum {
    display: flex;
    align-items: center;
    position: relative;
    width: 400px;
    height: 80px;
    background: #fff;
    font-weight: 500;
    margin: 15px 0;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    transform: translateX(100%);
    animation: moveleft 0.4s linear forwards;
  }

  .toastInetum i {
    margin: 0 20px;
    font-size: 35px;
    color: var(--mineral-green);
  }

  .toastInetum.error-proccess i {
    color: var(--primary-red);
  }

  .toastInetum.warning-proccess i {
    color: #cca123;
  }

  .toastInetum::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 5px;
    background: var(--mineral-green);
    animation: anim 6s linear forwards;
  }

  @keyframes moveleft {
    100% {
      transform: translateX(0);
    }
  }

  @keyframes anim {
    100% {
      width: 0;
    }
  }

  .toastInetum.error-proccess::after {
    background: var(--primary-red);
  }

  .toastInetum.warning-proccess::after {
    background: #cca123;
  }
</style>

<script>
  $(document).ready(function () {
    function showToast(msg) {
      let toastBox = document.getElementById("toastBoxInetum");
      let toast = document.createElement("div");
      toast.classList.add("toastInetum");
      toast.innerHTML = msg;
      toastBox.appendChild(toast);

      if (msg.includes("Erro")) {
        toast.classList.add("error-proccess");
        setTimeout(() => {
          toast.style.transition = "opacity 0.5s ease";
          toast.style.opacity = 0;
          setTimeout(() => {
            toast.remove();
          }, 500);
        }, 6000);
      }
      if (msg.includes("Iniciando")) {
        toast.classList.add("warning-proccess");
        setTimeout(() => {
          toast.style.transition = "opacity 0.5s ease";
          toast.style.opacity = 0;
          toast.style.zIndex = 10000;
          setTimeout(() => {
            toast.remove();
          }, 500);
        }, 6000);
      }
      if (msg.includes("cadastrado")) {
        toast.classList.add("success-proccess");
        setTimeout(() => {
          toast.style.transition = "opacity 0.4s ease";
          toast.style.opacity = 0;
          setTimeout(() => {
            toast.remove();
          }, 500);
        }, 6000);
      }
    }

    $("#new-candidate").click(function () {
      $("#file").click();
    });

    $("#file").change(function () {
      $("#uploadForm").submit();
    });
    $("#uploadForm").submit(function (event) {
      event.preventDefault(); // Evita que o formulário seja submetido diretamente
      // Exibe a mensagem de "Iniciando..."
      showToast('<i class="bi bi-hourglass-split"></i> Iniciando...');
      var vagaId = $("#select-vaga").val();
      if (vagaId) {
        // Se o vagaId existe, atualiza o action do formulário com a URL correta
        $("#uploadForm").attr("action", "/candidatos/vaga=" + vagaId);
        $(".page-content").fadeOut(300);
      }
      // Envia a solicitação POST usando jQuery AJAX
      $.ajax({
        url: $(this).attr("action"),
        type: "POST",
        data: new FormData(this),
        processData: false,
        contentType: false,
        success: function (response, textStatus, xhr) {
          // Recupera o cabeçalho 'X-Message' da resposta
          var mensagem = xhr.getResponseHeader("X-Message");

          // Exibe a mensagem se estiver disponível
          if (mensagem) {
            showToast('<i class="bi bi-check-circle-fill"></i> ' + mensagem);
          }
        },
        error: function (xhr, textStatus, errorThrown) {
          console.error("Erro:", errorThrown);
        },
      });
    });
  });
</script>