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

{% endblock %} {% block conteudo %}
<dialog id="modalPageCandidato">
  <div id="modal-content-page-candidato"></div>
</dialog>
<!-- Elemento de carregamento -->
<div id="loading" style="display: none">
  <svg id="spinner" viewBox="25 25 50 50">
    <circle id="loading-circle" r="20" cy="50" cx="50"></circle>
  </svg>
</div>

<div class="page-content">
  <div class="buttons-editing-mode">
    <button id="cancel-edit">Cancelar</button>
    <button id="confirm-edit">Confirmar</button>
  </div>
</div>
<main>
  <div class="container-candidato-id-page">
    <div class="card-candidato-id-page">
      <div class="card-header-candidato-id-page">
        <span id="header-field">Candidato</span>
      </div>
      <div class="candidato-div-resumo" data-candidato-id="{{ candidato.id }}">
        <div class="info-buttons-div">
          <div class="candidato-info">
            <span
              id="candidato-status-id"
              data-candidato-status="{{ candidato.status }}"
              class="status-enviado"
              >{{ candidato.status }}</span
            >
            <i id="candidato-icon" class="bi bi-person-workspace"></i>
            <span id="candidato-nome">{{ candidato.nome }}</span>
            <span id="candidato-vaga">
              <a href="/vagas/{{ candidato.vaga_id}}"
                >{{ candidato.vaga.cargo | upper }}</a
              ></span
            >
            <span id="candidato-localizacao"></span>

            <span id="candidato-telefone">{{ candidato.telefone }}</span>
            <span id="candidato-email">{{ candidato.email }}</span>
          </div>
          <div class="buttons-candidato">
            <span id="edit" class="buttons-candidato-span"
              >Editar candidato</span
            >
            <span id="aprove" class="buttons-candidato-span"
              >Aprovar para próxima fase</span
            >
            <span id="return" class="buttons-candidato-span"
              >Voltar à fase anterior</span
            >
            <span id="reject" class="buttons-candidato-span"
              >Reprovar candidato</span
            >
          </div>
        </div>
        <div class="container-candidato-tabs">
          <div class="tab_trigger">
            <ul>
              <li>Experiência</li>
              <li>Ensino</li>
              <li>Certificados/Conhecimentos</li>
              <li>Resumo</li>
            </ul>
          </div>

          <div class="tab_container">
            <div class="tab_content_box">
              {% for exp in candidato.experiencia %}
              <div class="candidato-content">
                <p class="candidato-content-title">Cargo</p>
                <span class="candidato-content-info" data-field="Cargo"
                  >{{ exp['Cargo'] }}</span
                >
                <p class="candidato-content-title">Empresa</p>
                <span class="candidato-content-info" data-field="Empresa"
                  >{{ exp['Empresa'] }}</span
                >
                <p class="candidato-content-title">Data de início</p>
                <span class="candidato-content-info" data-field="Data de Início"
                  >{{ exp['Data de Início']}}</span
                >
                <p class="candidato-content-title">Data de término</p>
                <span
                  class="candidato-content-info"
                  data-field="Data de Término"
                  >{{ exp['Data de Término'] }}</span
                >
                <p class="candidato-content-title">Descrição</p>
                <span class="candidato-content-info" data-field="Descrição"
                  >{{ exp['Descrição'] }}</span
                >
              </div>
              {% endfor %}
            </div>
            <div class="tab_content_box">
              {% for formacao in candidato.educacao %}
              <div class="candidato-content">
                <p class="candidato-content-title">Formação</p>
                <span class="candidato-content-info" data-field="Formação"
                  >{{ formacao['Formação'] }}</span
                >
                <p class="candidato-content-title">Instituição</p>
                <span class="candidato-content-info" data-field="Instituição"
                  >{{ formacao['Instituição'] }}</span
                >
                <p class="candidato-content-title">Data de Conclusão</p>
                <span
                  class="candidato-content-info"
                  data-field="Data de Conclusão"
                  >{{ formacao['Data de Conclusão'] }}</span
                >
              </div>

              {% endfor %}
            </div>
            <div class="tab_content_box">
              {% for hab in candidato.habilidades %}
              <div class="candidato-content">
                <p class="candidato-content-title">Skill</p>
                <span class="candidato-content-info" data-field="Certificação"
                  >{{ hab['Conhecimento'] }}</span
                >
              </div>

              {% endfor %}
            </div>
            <div class="tab_content_box">
              {% if candidato.resumo_ia %}
              <div class="candidato-resumo-ia-content">
                {{ candidato.resumo_ia }}
                <br />
                <span>Avaliação: {{ candidato.avaliacao_ia }}</span>
              </div>
              {% else %}
              <div class="candidato-resumo-ia">
                <span>Clique para gerar o resumo</span>
                <i id="candidato-robot" class="bi bi-robot"></i>
              </div>
              {% endif %}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</main>

{% endblock %} {% block finalscript %}
<script src="https://rawgit.com/jackmoore/autosize/master/dist/autosize.min.js"></script>
<script>
  $(".tab_trigger ul li").click(function (event) {
    index = $(this).index();
    $(".tab_trigger ul li").removeClass("active");
    $(this).addClass("active");
    $(".tab_content_box").eq(index).show().fadeIn(500).siblings().hide();
    localStorage.setItem("TabCount", index);
  });
  getTabCount = localStorage.getItem("TabCount");
  $(".tab_trigger ul li").eq(getTabCount).addClass("active");
  $(".tab_content_box").eq(getTabCount).show().fadeIn(500).siblings().hide();
  $(".tab_content_box").addClass("active");
</script>
<script>
  $(document).ready(function () {
    $(".tab_content_box ul").each(function () {
      if ($(this).children("li").length > 1) {
        $(this).css("column-count", "2");
      }
    });
  });
</script>
<script>
  $(document).ready(function () {
    $("#header-field").click(function () {
      location.reload();
    });
  });
</script>
<script>
  $(document).ready(function () {
    $("#aprove").click(function () {
      atualizarFase("avancar");
    });
    $("#return").click(function () {
      atualizarFase("retroceder");
    });

    function atualizarFase(acao) {
      var candidato_id = $(".candidato-div-resumo").data("candidato-id");
      var candidato_span = $("#candidato-status-id");
      var audioFile =
        acao === "avancar"
          ? "../static/sounds/level-up.mp3"
          : "../static/sounds/level-down.mp3";
      $.ajax({
        url: "/candidatos/" + candidato_id,
        method: "POST",
        data: { acao_fase: acao },
        success: function (response) {
          // Atualize o status do candidato na página
          candidato_span.text(response.novoStatus);
          candidato_span.attr("data-candidato-status", response.novoStatus);
          candidato_span.removeClass();
          switch (response.novoStatus) {
            case "Currículo enviado":
              $("#candidato-status-id").addClass("status-enviado");
              break;
            case "Background check":
              $("#candidato-status-id").addClass("status-background");
              break;
            case "Rejeitado":
              $("#candidato-status-id").addClass("status-rejeitado");
              break;
            case "Entrevista técnica":
              $("#candidato-status-id").addClass("status-entrevista");
              break;
            case "Aprovado":
              $("#candidato-status-id").addClass("status-aprovado");

              break;
            // Adicione mais casos conforme necessário para outros status
          }
          var audio = new Audio(audioFile);
          audio.play();
        },
        error: function (xhr, status, error) {
          console.error("Erro ao avançar para próxima fase:", error);
        },
      });
    }
  });
</script>
<script>
  $(document).ready(function () {
    // Seleciona todos os elementos <span> com o ID "candidato-status-id"
    $("#candidato-status-id").each(function () {
      // Obtém o valor do atributo "data-candidato-status"
      var status = $(this).data("candidato-status");

      // Remove classes de status anteriores
      $(this).removeClass();

      // Adiciona a classe correspondente ao status atual
      switch (status) {
        case "Currículo enviado":
          $(this).addClass("status-enviado");
          break;
        case "Background check":
          $(this).addClass("status-background");
          break;
        case "Rejeitado":
          $(this).addClass("status-rejeitado");
          break;
        case "Entrevista técnica":
          $(this).addClass("status-entrevista");
          break;
        case "Aprovado":
          $(this).addClass("status-aprovado");
          break;
        // Adicione mais casos conforme necessário para outros status
      }
    });
  });
</script>
<script>
  $(document).ready(function () {
    $("#edit").click(function () {
      $(".candidato-div-resumo")
        .find(".candidato-content-info")
        .each(function (index) {
          $(this).data("original-text", $(this).text());
          var valor = $(this).text();
          var textarea = $("<textarea>").text(valor);
          textarea.addClass("form-text-area");
          $(this).empty().append(textarea);
          autosize(document.getElementsByClassName("form-text-area"));
        });

      $(".candidato-info")
        .find("span:not(#candidato-status-id, #candidato-vaga)")
        .each(function (index) {
          $(this).data("original-text-info", $(this).text());
          $(this).attr("contenteditable", "true");
        });

      $(".page-content").fadeIn(300);
      $(".container-candidato-tabs").css("z-index", "1").fadeIn(600);
      $(".candidato-info").css("z-index", "1").fadeIn(600);
    });

    $("#cancel-edit").click(function () {
      $(".candidato-content")
        .find(".candidato-content-info")
        .each(function () {
          var originalText = $(this).data("original-text");
          $(this).empty().text(originalText);
        });

      $(".candidato-info")
        .find("span:not(#candidato-status-id, #candidato-vaga)")
        .each(function () {
          var originalText = $(this).data("original-text-info");
          $(this).empty().text(originalText);
          $(this).removeAttr("contenteditable");
        });

      $(".page-content").fadeOut(300);
    });

    $("#confirm-edit").click(function () {
      var nome = $("#candidato-nome").text();
      var telefone = $("#candidato-telefone").text();
      var email = $("#candidato-email").text();
      var localizacao = $("#candidato-localizacao").text();
      var experiencia = [];
      var educacao = [];
      var habilidades = [];
      $(".tab_content_box:nth-child(1) .candidato-content").each(function () {
        var cargo = $(this)
          .find(".candidato-content-info[data-field='Cargo'] textarea")
          .val();
        var empresa = $(this)
          .find(".candidato-content-info[data-field='Empresa'] textarea")
          .val();
        var inicio = $(this)
          .find(".candidato-content-info[data-field='Data de Início'] textarea")
          .val();
        var termino = $(this)
          .find(
            ".candidato-content-info[data-field='Data de Término'] textarea"
          )
          .val();
        var descricao = $(this)
          .find(".candidato-content-info[data-field='Descrição'] textarea")
          .val();

        var experienciaData = {
          Cargo: cargo,
          Empresa: empresa,
          "Data de Início": inicio,
          "Data de Término": termino,
          Descrição: descricao,
        };

        experiencia.push(experienciaData);
      });
      $(".tab_content_box:nth-child(2) .candidato-content").each(function () {
        var formacao = $(this)
          .find(".candidato-content-info[data-field='Formação'] textarea")
          .val();
        var instituicao = $(this)
          .find(".candidato-content-info[data-field='Instituição'] textarea")
          .val();
        var conclusao = $(this)
          .find(
            ".candidato-content-info[data-field='Data de Conclusão'] textarea"
          )
          .val();

        var educacaoData = {
          Formação: formacao,
          Instituição: instituicao,
          "Data de Conclusão": conclusao,
        };

        educacao.push(educacaoData);
      });
      $(".tab_content_box:nth-child(3) .candidato-content").each(function () {
        var certificacao = $(this)
          .find(".candidato-content-info[data-field='Certificação'] textarea")
          .val();
        var instituicao = $(this)
          .find(".candidato-content-info[data-field='Instituição'] textarea")
          .val();
        var conclusao = $(this)
          .find(
            ".candidato-content-info[data-field='Data de Conclusão'] textarea"
          )
          .val();

        var habilidadesData = {
          Certificação: certificacao,
          Instituição: instituicao,
          "Data de Conclusão": conclusao,
        };

        habilidades.push(habilidadesData);
      });
      var dataToSend = {
        nome: nome,
        telefone: telefone,
        email: email,
        localizacao: localizacao,
        experiencia: experiencia,
        educacao: educacao,
        habilidades: habilidades,
      };
      var jsonData = JSON.stringify(dataToSend);
      var candidatoId = $(".candidato-div-resumo").data("candidato-id");
      var url = "/candidatos/" + candidatoId + "/atualizar";
      $("#loading").show();

      $.ajax({
        url: url,
        method: "POST",
        contentType: "application/json",
        data: jsonData,
        dataType: "json",
        success: function (response) {
          $(".candidato-content").each(function () {
            $(this)
              .find(".candidato-content-info")
              .each(function () {
                var textareaValue = $(this).find("textarea").val();
                $(this).text(textareaValue);
              });
            $(".candidato-info")
              .find("span:not(#candidato-status-id, #candidato-vaga)")
              .each(function () {
                var newText = $(this).text();
                $(this).text(newText);
                $(this).removeAttr("contenteditable");
              });
            $("#loading").hide();
          });

          $(".page-content").fadeOut(300);
          var dialog = $("#modalPageCandidato");
          var modalContent = $("#modal-content-page-candidato");
          modalContent.text("Dados atualizados com sucesso");
          dialog.fadeIn();

          setTimeout(function () {
            dialog.animate({ opacity: 0, top: "-130px" }, 1400, function () {
              dialog.hide();
              dialog.animate({ opacity: 1, top: "14%" }, 1400);
            });
          }, 1000);
          dialog.fadeIn();
        },
        error: function (xhr, status, error) {},
      });
    });
    $(document).click(function (event) {
      // Fecha o modal ao clicar em qualquer parte da página
      if (!$(event.target).closest("#modalPageCandidato").length) {
        $("#modalPageCandidato").fadeOut(300);
      }
    });
  });
</script>
<script>
  $(document).ready(function () {
    $("#candidato-robot").click(function () {
      var candidato_id = $(".candidato-div-resumo").data("candidato-id");
      /* Obtenha o ID do candidato de alguma forma */
      $.ajax({
        type: "POST",
        url: "/candidatos/" + candidato_id + "/resumo",
        success: function (resumo_ia) {
          // Manipule a resposta do servidor aqui, se necessário
          console.log(resumo_ia);
        },
        error: function () {
          // Manipule o erro aqui, se necessário
          console.log("Erro ao enviar requisição AJAX");
        },
      });
    });
  });
</script>

{% endblock %}