{% extends 'base.html' %} {% block head %}
<link rel="stylesheet" href="../static/candidatos.css" />
{% endblock %} {% block conteudo %}
<div class="page-content">
  <div class="modal-choose-vaga">
    <span id="choose-vaga-modal">Selecione a vaga</span>
    <select name="choose-vaga-select" id="select-vaga">
      <option value="" disabled selected hidden></option>
      {% for vaga in vagas %}
      <option value="{{vaga.id}}">{{vaga.cargo}}</option>
      {% endfor %}
    </select>
    <i id="new-candidate" class="bi bi-filetype-pdf"></i>
  </div>
</div>
<main class="page">
  <div class="container-candidatos">
    <div class="header-page-candidatos">
      <span id="header-field">Candidatos</span>
    </div>
    <div class="card-column">
      <ul id="filter-head" class="filter-head">
        <li>
          <div class="icons-filter-add">
            <i
              class="bi-nc bi-person-plus"
              id="add-candidato"
              title="Adicionar candidato"
            ></i>
          </div>
        </li>
        <div class="filter-content">
          <li class="dropdown">
            <i class="bi-fnl bi-funnel" id="view-filter"></i>
            <span class="dropdown-funnel">Filtrar por</span>
            <ul class="dropdown-menu">
              <li>Departamento</li>
              <li>Data de cadastro</li>
              <li>Fase</li>
            </ul>
          </li>
          <select id="status-dropdown">
            <option value=""></option>
          </select>
        </div>
        <li>
          <div class="icons-filter">
            <i
              id="ordenar-az"
              class="bi-sort bi-sort-alpha-down"
              data-sort-by="nome"
            ></i>
            <i data-info="hide" class="bi bi-eye-slash-fill"></i>
          </div>
        </li>
        <li>
          <div class="container-input">
            <input
              type="text"
              placeholder="Pesquisar"
              name="text"
              class="input-search"
            />
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="16"
              height="16"
              fill="#000000"
              class="bi bi-search"
              viewBox="0 0 16 16"
            >
              <path
                d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"
              />
            </svg>
          </div>
        </li>
      </ul>
    </div>
    {% if candidatos|length == 0 %}
    <div class="no-cards-available">
      <i class="bi bi-emoji-frown"></i>
      <span>Nenhum candidato disponível</span>
    </div>
    {% endif %}
    <div class="card-container">
      {% for candidato in candidatos %}{% if candidato.nome != none %}

      <div class="card-content {{candidato.vaga.departamento}}">
        <div
          class="status-bar {{ candidato.status  | replace(' ', '_') }}"
          data-category="{{candidato.status}}"
        ></div>
        <a href="/candidatos/{{candidato.id}}">
          <div class="card-avaliacao">
            <span>{{candidato.avaliacao_ia}}</span>
          </div>
          <div class="div-card-title">
            <p id="card-nome">{{candidato.nome}}</p>
            <p class="card-vaga-cargo">{{candidato.vaga.cargo}}</p>
            <p class="card-email">{{candidato.email}}</p>
            <p class="card-telefone">{{candidato.telefone}}</p>
          </div>
          <div class="div-card-body">
            <p class="card-data-cadastro">
              Cadastrado em {{candidato.data_cadastro.strftime('%d/%m/%Y ')}}
            </p>

            <div
              class="card-departamento"
              data-category="{{candidato.vaga.departamento}}"
            >
              <a href="/vagas/{{candidato.vaga.id}}">
                {{candidato.vaga.departamento}}
              </a>
            </div>
          </div>
        </a>
      </div>

      {% endif %}{% endfor %}
    </div>
  </div>
</main>
{% include 'animation_publish.html' %} {% endblock %} {% block finalscript %}
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
<script>
  $(document).ready(function () {
    // Adiciona um ouvinte de evento para o clique em um item do menu dropdown
    $(".dropdown-menu li").click(function () {
      // Encontra o texto da opção selecionada
      var selectedText = $(this).text();
      // Atualiza o texto do span .dropdown-funnel com o texto da opção selecionada
      $(this).closest(".dropdown").find(".dropdown-funnel").text(selectedText);
      $(this)
        .closest(".dropdown")
        .find("#view-filter")
        .removeClass()
        .addClass("bi-funnel-fill")
        .attr("title", "Limpar filtros");
      // Fecha o menu dropdown
      $(this).closest(".dropdown").find(".dropdown-menu").slideUp();
    });

    // Adiciona um ouvinte de evento para o clique no link dropdown
    $(".dropdown-funnel").click(function () {
      // Encontra o menu dropdown correspondente
      var dropdownMenu = $(this).next(".dropdown-menu");
      // Alterna a visibilidade do menu dropdown
      dropdownMenu.slideToggle();
      $("#status-dropdown").empty();
    });

    function limparFiltros() {
      $(".dropdown-funnel").text("Filtrar por");
      $("#status-dropdown").empty();
      $("#view-filter").removeClass().addClass("bi-funnel");
    }

    // Evento de clique no botão de limpar filtro
    $("#view-filter").click(function () {
      limparFiltros();
    });
  });
</script>
<script>
  $(document).ready(function () {
    $(".dropdown-menu li").click(function () {
      $(".card-candidatos").show();
      var opcaoSelecionada = $(this).text().toLowerCase();

      // Atualiza o texto do span para refletir a opção selecionada
      $(".dropdown-funnel").text(
        opcaoSelecionada.charAt(0).toUpperCase() + opcaoSelecionada.slice(1)
      );

      // Atualiza o valor do select com base no filtro selecionado
      if (opcaoSelecionada === "departamento") {
        // Preencha o select com departamentos
        var departamentos = [];

        $(".card-departamento").each(function () {
          var departamento = $(this).text().trim();
          if (!departamentos.includes(departamento)) {
            departamentos.push(departamento);
          }
        });

        // Limpa o select
        $("#status-dropdown").empty();

        // Adiciona as opções ao select
        departamentos.forEach(function (departamento) {
          $("#status-dropdown").append(
            '<option data-filter=".' +
              departamento +
              '" value="' +
              departamento +
              '">' +
              departamento +
              "</option>"
          );
          $("#status-dropdown").val("");
        });
      } else if (opcaoSelecionada === "data de cadastro") {
        var datas = ["15 dias", "30 dias", "45 dias"];
        $("#status-dropdown").empty();
        datas.forEach(function (data) {
          $("#status-dropdown").append(
            '<option data-filter=".' +
              data.trim() +
              ' " value="' +
              data.trim() +
              '">' +
              data.trim() +
              "</option>"
          );
          $("#status-dropdown").val("");
        });
      } else if (opcaoSelecionada === "fase") {
        var statusList = [];

        $(".status-bar").each(function () {
          var status = $(this).attr("class").split(" ")[1]; // Remove a classe "status-bar" e espaços em branco
          if (!statusList.includes(status)) {
            statusList.push(status);
          }
        });

        // Limpa o select
        $("#status-dropdown").empty();

        // Adiciona as opções ao select
        statusList.forEach(function (status) {
          $("#status-dropdown").append(
            '<option data-filter=".' +
              status +
              '" value="' +
              status +
              '">' +
              status.replace("_", " ") +
              "</option>"
          );
          $("#status-dropdown").val("");
        });
      }
    });
  });
</script>
<script>
  $(document).ready(function () {
    var $listing = $(".card-container").isotope({
      layoutMode: "fitRows",
      fitRows: {
        gutter: 5,
      },

      getSortData: {
        nome: "#card-nome",
      },
    });

    $("#status-dropdown").change(function () {
      var opcaoSelecionada = $(".dropdown-funnel").text();
      var filterValue = $(this)
        .children("option:selected")
        .attr("data-filter")
        .trim();
      if (opcaoSelecionada === "Departamento") {
        $listing.isotope({ filter: filterValue });
      } else if (opcaoSelecionada === "Data de cadastro") {
        var hoje = new Date();
        var filtroDias;

        if (filterValue === ".15 dias") {
          filtrarPorData(15);
        } else if (filterValue === ".30 dias") {
          filtrarPorData(30);
        } else if (filterValue === ".45 dias") {
          filtrarPorData(45);
        } else {
          // Se nenhuma opção for selecionada, exibe todos os itens
          $listing.isotope({ filter: "*" });
        }
      } else if (opcaoSelecionada === "Fase") {
        var faseSelecionada = $(this).children("option:selected").attr("value");
        filtrarPorFase(faseSelecionada);
      }
    });

    function filtrarPorFase(faseSelecionada) {
      $listing.isotope({
        filter: function () {
          // Verifica se o candidato atual tem a classe de status correspondente à fase selecionada
          var statusCandidato = $(this)
            .find(".status-bar")
            .attr("class")
            .split(" ")[1];

          // Retorna true se a fase selecionada estiver presente nas classes de status do candidato atual
          return statusCandidato === faseSelecionada;
        },
      });
    }
    function filtrarPorData(filtroDias) {
      var hoje = new Date();
      var dataCorte = new Date(hoje);
      dataCorte.setDate(hoje.getDate() - filtroDias);
      $listing.isotope({
        filter: function () {
          var dataPublicacaoStr = $(this)
            .find(".card-data-cadastro")
            .text()
            .trim();
          dataPublicacaoStr = dataPublicacaoStr.replace(
            /^Cadastrado\s+em\s+/i,
            ""
          );
          var partesData = dataPublicacaoStr.split("/");
          var dia = parseInt(partesData[0], 10); // Converte o dia para número inteiro
          var mes = parseInt(partesData[1], 10) - 1; // Converte o mês para número inteiro (0-based)
          var ano = parseInt(partesData[2], 10);
          var dataTexto = new Date(ano, mes, dia);
          return dataTexto >= dataCorte;
        },
      });
    }

    $("#view-filter").click(function () {
      $listing.isotope({ filter: "*" });
    });

    $("#ordenar-az").click(function () {
      var $biSort = $("#ordenar-az");
      if ($biSort.hasClass("bi-sort-alpha-down")) {
        $biSort.removeClass().addClass("bi-sort-alpha-up-alt");
        $listing.isotope({ sortBy: "vaga", sortAscending: false });
      } else {
        $biSort.removeClass().addClass("bi-sort-alpha-down");
        $listing.isotope({ sortBy: "vaga", sortAscending: true });
      }
    });
    $(".input-search").on("input", function () {
      var searchText = $(this).val().toLowerCase();
      $listing.isotope({
        filter: function () {
          // Obtém o texto do nome do card atual
          var cardNome = $(this).find("#card-nome").text().toLowerCase();
          // Retorna true se o texto do nome do card contiver o texto de pesquisa
          return cardNome.includes(searchText);
        },
      });
    });
  });
</script>
<script>
  $(document).ready(function () {
    $("#candidatos-navbar-a").toggleClass("active");
  });
</script>
<script>
  $(document).ready(function () {
    $("#header-field").click(function () {
      location.reload(); // Atualiza a página
    });
  });
</script>
<script>
  $(document).ready(function () {
    $(".icons-filter-add").click(function () {
      $(".page-content").fadeIn(300);
    });
  });
</script>
<script>
  $(document).ready(function () {
    // Função para fechar o modal ao clicar fora dele
    $(document).mouseup(function (e) {
      var container = $(".modal-choose-vaga");
      var pageContent = $(".page-content");
      // Verifica se o clique foi fora do modal ou no ícone do PDF
      if (
        !container.is(e.target) &&
        container.has(e.target).length === 0 &&
        !$("#upload-pdf").is(e.target)
      ) {
        pageContent.hide(); // Esconde o page content
      }
    });
  });
</script>

{%endblock %}