{% extends 'base.html' %} {% block head %}
<link rel="stylesheet" href="../static/vagas.css" />
{% endblock %} {% block conteudo %}
<main class="page">
  <div class="container-vagas">
    <div class="header-page-vagas">
      <span id="header-field">Central de vagas</span>
    </div>
    <div class="card-column">
      <ul id="filter-head" class="filter-head">
        <li>
          <a href="{{ url_for('nova_vaga') }}">
            <i
              class="bi bi-door-open"
              title="Criar vaga"
              style="cursor: pointer"
            ></i>
          </a>
        </li>
        <div class="filter-content">
          <li class="dropdown">
            <i id="view-filter" class="bi-fnl bi-funnel"></i>
            <span class="dropdown-funnel">Filtrar por</span>
            <ul class="dropdown-menu">
              <li>Departamento</li>
              <li>Data de publicação</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"></i>
            <i id="show-hide" 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>
    <div class="card-container">
      <!-- Itere sobre as vagas para exibir os cards -->
      {% for vaga in vagas %}

      <div
        class="card-content {{vaga.departamento}}"
        data-vaga-id="{{ vaga.id }}"
      >
        <div id="status-bar-color" class="status-bar {{ vaga.status }}"></div>
        <div class="div-card-title">
          <h5 class="card-title">{{vaga.cargo}} | {{vaga.nivel}}</h5>
          <p class="card-departamento">{{vaga.departamento}}</p>
        </div>
        <p class="card-data-publicacao">
          Publicado em {{vaga.data_abertura.strftime('%d/%m/%Y')}}
        </p>
      </div>

      {% endfor %}
    </div>
  </div>
</main>

{% endblock %} {% block finalscript %}
<script src="https://cdn.datatables.net/2.0.3/js/dataTables.min.js"></script>
<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();
      $(".card-content").each(function () {
        var status = $("#status-bar-color").hasClass("ativo")
          ? "ativo"
          : "inativo";
        if (status === "ativo") {
          $(this).show();
        }
      });
      $("#view-filter").removeClass().addClass("bi-fnl 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-content").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("");
          $(".card-content .status-bar.inativo").parent().hide();
        });
      } else if (opcaoSelecionada === "data de publicação") {
        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("");
        });
      }
    });
  });
</script>
<script>
  $(document).ready(function () {
    var $listing = $(".card-container").isotope({
      itemSelector: ".card-content",
      layoutMode: "fitRows",
      percentPosition: true,
      fitRows: {
        gutter: 30,
      },
      transitionDuration: "0.3s",

      getSortData: {
        vaga: ".card-title",
        departamento: "[value]",
        data_publicacao: "[value]",
      },
    });

    $("#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: "*" });
        }
      }
    });

    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 () {
          var cardNome = $(this).find(".card-title").text().toLowerCase();
          return cardNome.includes(searchText);
        },
      });
    });
  });
</script>

<script>
  $("#vagas-link").toggleClass("active");
</script>

<script>
  $(document).on("click", ".card-content", function () {
    var vagaId = $(this).data("vaga-id");
    window.location.href = "/vagas/" + vagaId;
  });
</script>
<script>
  $(document).ready(function () {
    $(".bi-nc").click(function () {
      window.location.href = "/nova_vaga";
    });
  });
</script>

<script>
  $(document).ready(function () {
    // Ocultar inicialmente os cards com a classe "inativo" na barra de status
    $(".card-content .status-bar.inativo").parent().hide();
    var icon = $("#show-hide");
    icon.click(function () {
      $(".card-content").each(function () {
        var statusBar = $("#status-bar-color");
        var status = statusBar.hasClass("ativo") ? "ativo" : "inativo";
        var icon = $("#view-filter");

        if (status === "ativo") {
          $(this).show();
        } else {
          $(this).toggle();
        }
      });

      if (icon.hasClass("bi bi-eye-fill")) {
        icon.removeClass("bi bi-eye-fill").addClass("bi bi-eye-slash-fill");
        icon.attr("data-info", "hide");
      } else {
        icon.removeClass("bi bi-eye-slash-fill").addClass("bi bi-eye-fill");
        icon.attr("data-info", "show");
      }
    });
  });
</script>
<script>
  $(document).ready(function () {
    $("#header-field").click(function () {
      location.reload(); // Atualiza a página
    });
  });
</script>
{% endblock %}