{% extends 'base.html' %} {% block head %}
<link rel="stylesheet" href="../static/vaga.css" />

{% endblock %} {% block conteudo %}

<div id="texto_oculto" class="oculto" style="display: none">
  <ul>
    <li><strong>Cargo: </strong>{{ vaga.cargo }}</li>
    <li><strong>Nível: </strong>{{ vaga.nivel }}</li>
    <br />
    <li><strong>Localização: </strong>{{vaga.local}}</li>
    <br />
    <li><strong>Sobre a vaga: </strong>{{vaga.escopo_vaga}}</li>
    <br />
    <li><strong>Requisitos: </strong>{{vaga.requisitos}}</li>
    <br />
    <li><strong>Qualificações: </strong>{{vaga.qualificacoes}}</li>
    <br />
    {% if vaga.info_adicionais %}
    <li><strong>Informações adicionais: </strong>{{vaga.info_adicionais}}</li>
    {% endif %}
  </ul>
</div>
<main>
  <div class="container-vaga-page" data-vaga-id=" {{ vaga.id }}">
    {% if vaga.status == 'inativo' %}
    <div class="vaga-header-inativo">
      <span id="vaga-inativo">Vaga desativada</span>
    </div>
    {% endif %}
    <section class="grid-vaga">
      <div class="grid-vaga-item">
        <div class="item-vaga">
          <div class="vaga-header">
            <span id="cargo-field">{{vaga.cargo}} {{vaga.nivel}}</span>

            <ul class="vaga-info">
              <li>
                <strong>Data de criação:</strong> <br />
                {{vaga.data_abertura.strftime('%d/%m/%Y')}}
              </li>
              <li>
                <strong>Departamento:</strong><br />
                {{vaga.departamento}}
              </li>
              <li>
                <strong>Localização:</strong> <br />
                {{vaga.local}}
              </li>
              <div class="conteudo-desc">
                <li>
                  <strong>Escopo da vaga:</strong><br />
                  {{vaga.escopo_vaga}}
                </li>
                <li>
                  <strong>Requisitos:</strong><br />
                  {{vaga.requisitos}}
                </li>
                <li>
                  <strong>Qualificações e certificados:</strong><br />
                  {{vaga.qualificacoes}}
                </li>
                {% if vaga.info_adicionais %}
                <li>
                  <strong>Informações adicionais:</strong><br />
                  {{vaga.info_adicionais}}
                </li>
                {% endif %}
              </div>
            </ul>
          </div>
          <span class="ver-mais"
            ><span class="material-symbols-outlined">expand_more</span></span
          >

          <div class="copy-share">
            <div class="buttons-interact">
              <button
                id="new-candidate"
                class="buttons-interact-button"
                title="Novo candidato"
              >
                <i class="bi bi-plus-circle"></i>
              </button>
              <button
                id="edit-job"
                class="buttons-interact-button"
                title="Editar"
              >
                <i class="bi bi-pencil-square"></i>
              </button>
              {% if vaga.status == 'ativo' %}
              <button
                id="pause-job"
                class="buttons-interact-button"
                title="Encerrar vaga"
                data-vaga-id="{{ vaga.id }}"
              >
                <i class="bi bi-pause-fill"></i>
              </button>
              {% else %}
              <button
                id="start-job"
                class="buttons-interact-button"
                title="Ativar vaga"
                data-vaga-id="{{ vaga.id }}"
              >
                <i class="bi bi-play-fill"></i>
              </button>
              {% endif %}
            </div>
            <div class="copy-to-clipboard">
              <i id="copiar" class="bi-cp bi-copy" title="Copiar"></i>
              <span id="copiar-text"
                >Copiar <a href="#">template</a> para área de
                transferência</span
              >
            </div>
            <div class="vaga-publish">
              <div class="vaga-publish-text">
                <span class="publish-text">Publique a vaga</span>
              </div>
              <div class="vaga-publish-buttons">
                <button
                  onclick="openTelegram()"
                  id="enviar-telegram"
                  class="btn-share"
                >
                  <i class="bi-publish bi-telegram" title="Telegram"></i>
                </button>

                <button
                  onclick="openWhatsapp()"
                  id="enviar-whatsapp"
                  class="btn-share"
                >
                  <i class="bi-publish bi-whatsapp" title="Whatsapp"></i>
                </button>

                <button id="enviar-email" class="btn-share">
                  <i class="bi-publish bi-envelope" title="Email"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="grid-vaga-item">
        <div class="bg-funil-contrata">
          <span id="funil-field">Funil de contratação</span>
          <!-- Conteúdo do funil de contratação -->
          <div class="funil-cards">
            <div class="card-candidato">
              <p class="card-text">Currículos enviados</p>
              <p class="card-number">
                {{ count_status(candidatos, 'Currículo enviado') }}
              </p>
            </div>

            <div class="card-candidato">
              <p class="card-text">Background check</p>
              <p class="card-number">
                {{ count_status(candidatos, 'Background check') }}
              </p>
            </div>

            <div class="card-candidato">
              <p class="card-text">Entrevista técnica</p>
              <p class="card-number">
                {{ count_status(candidatos, 'Entrevista técnica') }}
              </p>
            </div>

            <div class="card-candidato">
              <p class="card-text">Aprovados</p>
              <p class="card-number">
                {{ count_status(candidatos, 'Aprovado') }}
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
  {% include 'animation_publish.html' %}
</main>
{% endblock %} {% block finalscript %}
<script>
  $(document).ready(function () {
    var vagaId = $(".container-vaga-page").data("vaga-id");
    vagaId = vagaId.trim();
    $("#pause-job").click(function () {
      window.location.href = "/encerrar_vaga/" + vagaId;
    });

    $("#start-job").click(function () {
      window.location.href = "/reabrir_vaga/" + vagaId;
    });

    $("#edit-job").click(function () {
      window.location.href = "/editar_vaga/" + vagaId;
    });

    $(".card-candidato").click(function () {
      window.location.href = "/candidatos/vaga=" + vagaId;
    });
  });
</script>
<script>
  $(document).ready(function () {
    $(".ver-mais").click(function () {
      var conteudoDesc = $(this).prev(".vaga-header").find(".conteudo-desc");
      var scrollPosition;

      conteudoDesc.toggleClass("expandido");

      if (conteudoDesc.hasClass("expandido")) {
        $(this).html(
          '<span class="material-symbols-outlined">expand_less</span>'
        );
        // Rola a página para baixo um pouco (100 pixels)
        scrollPosition = conteudoDesc.offset().top - 10;
      } else {
        $(this).html(
          '<span class="material-symbols-outlined">expand_more</span>'
        );
        // Rola a página de volta para cima
        scrollPosition = 0;
      }

      $("html, body").animate(
        {
          scrollTop: scrollPosition,
        },
        {
          duration: 100,
          easing: "swing",
          behavior: "smooth",
        }
      ); // Tempo de animação: 500 milissegundos
    });
  });
</script>
<script>
  $(document).ready(function () {
    $("#expandButton").click(function () {
      $("#itemList").animate(
        {
          width: "toggle",
        },
        300
      );
    });
  });
</script>
<script>
  function confirmarExclusao() {
    if (
      confirm(
        "Tem certeza que deseja excluir esta vaga? Essa ação é irreversível!"
      )
    ) {
    } else {
      return false; // Não submeter o formulário se cancelado
    }
  }
</script>
<script>
  $(document).ready(function () {
    $("#enviar-telegram").on("click", function () {
      var url = "https://web.telegram.org/";

      // Calcula as coordenadas para centralizar a nova janela
      var left = (screen.width - 600) / 2;
      var top = (screen.height - 600) / 2;

      window.open(
        url,
        "_blank",
        "width=600,height=600,left=" + left + ",top=" + top
      );
    });
  });
  $(document).ready(function () {
    $("#enviar-whatsapp").on("click", function () {
      var url = "https://web.whatsapp.com/";

      // Calcula as coordenadas para centralizar a nova janela
      var left = (screen.width - 600) / 2;
      var top = (screen.height - 600) / 2;

      window.open(
        url,
        "_blank",
        "width=600,height=600,left=" + left + ",top=" + top
      );
    });
  });
</script>
<script>
  $(document).ready(function () {
    $("#copiar").click(function () {
      // Obtém o texto e o HTML do elemento oculto
      var texto_oculto = $("#texto_oculto").text();
      var html_oculto = $("#texto_oculto").html();
      texto_oculto = texto_oculto.replace(/<br>/g, "\n");

      // Copia o texto e o HTML para a área de transferência
      navigator.clipboard
        .write([
          new ClipboardItem({
            "text/plain": new Blob([texto_oculto], { type: "text/plain" }),
            "text/html": new Blob([html_oculto], { type: "text/html" }),
          }),
        ])
        .then(() => {
          // Mensagem de confirmação (opcional)
          console.log(
            "As informações da vaga foram copiadas para a área de transferência:"
          );
        })
        .catch((err) => {
          console.error("Erro ao copiar para a área de transferência: ", err);
        });
    });
  });
</script>
{% endblock %}