{% load i18n %}{% load static recruitmentfilters %}
<div
  class="oh-modal"
  id="candidateExport"
  role="dialog"
  aria-labelledby="candidateExport"
  aria-hidden="true"
 >
  <div class="oh-modal__dialog" id="candidateExportModalBody"></div>
</div>
<section
class="oh-wrapper oh-main__topbar"
x-data="{searchShow: false}"
 >
<div class="oh-main__titlebar oh-main__titlebar--left">
  <h1 class="oh-main__titlebar-title fw-bold">
    {% trans "Candidates" %}
  </h1>
  <a
    class="oh-main__titlebar-search-toggle "
    role="button"
    aria-label="Toggle Search"
    @click="searchShow = !searchShow"
    >
    <ion-icon
      name="search-outline"
      class="oh-main__titlebar-serach-icon"
    ></ion-icon>
  </a>
</div>
<form
    hx-get='{% url "search-candidate" %}'
    id="filterForm"
    hx-target="#section"
    class="d-flex"
    onsubmit="event.preventDefault();"
  >

  <div class="oh-main__titlebar oh-main__titlebar--right">

    <div
      class="oh-input-group oh-input__search-group"
      :class="searchShow ? 'oh-input__search-group--show' : ''"
    >
      <ion-icon
        name="search-outline"
        class="oh-input-group__icon oh-input-group__icon--left"
      ></ion-icon>
      <input
        type="text"
        placeholder="{% trans 'Search' %}"
        id="candidate-search"
        name='name'
        class="oh-input oh-input__icon"
        aria-label="Search Input"
        onkeyup="$('.filterButton')[0].click();"
      />
    </div>
    <ul class="oh-view-types ml-2" style="margin-bottom: 0;" id="view-type">
      <li class="oh-view-type candidate-view-type " data-view='list' >
        <a
          id = 'list'
          class="oh-btn oh-btn--view {% if request.GET.view == 'list' %} oh-btn--view-active {% endif %}"
          title ='{% trans "List" %}'
          onclick="$('[name=view]').val('list');$('.filterButton')[0].click();"
          ><ion-icon name="list-outline"></ion-icon
        ></a>
      </li>
      <li class="oh-view-type candidate-view-type" data-view='card'>
        <a
          id="card"
          class="oh-btn oh-btn--view {% if request.GET.view != 'list' %} oh-btn--view-active {% endif %}"
          title = '{% trans "Card" %}'
          onclick="$('[name=view]').val('card');$('.filterButton')[0].click();"
          ><ion-icon name="grid-outline"></ion-icon
        ></a>
      </li>
    </ul>
    <input type="hidden" name="view" id="filterView" value="">
    <div class="oh-main__titlebar-button-container">
      <div class="oh-dropdown" x-data="{open: false}">
        <button class="oh-btn ml-2" @click="open = !open" onclick="event.preventDefault()">
          <ion-icon name="filter" class="mr-1"></ion-icon>{% trans "Filter" %}<div id="filterCount"></div>
        </button>
        <div
          class="oh-dropdown__menu oh-dropdown__menu--right oh-dropdown__filter p-4"
          x-show="open"
          @click.outside="open = false"
          style="display: none;"
        >
        {% include 'candidate/filters.html' %}
        </div>
      </div>

      <div class="oh-dropdown" x-data="{open: false}">
        <button class="oh-btn ml-2" @click="open = !open" onclick="event.preventDefault()">
          <ion-icon name="library-outline" class="mr-1"></ion-icon>{% trans "Group By" %}
          <div id="filterCount"></div>
        </button>
        <div
        class="oh-dropdown__menu oh-dropdown__menu--right oh-dropdown__filter p-4"
        x-show="open"
        @click.outside="open = false"
        style="display: none"
        >
        <div class="oh-accordion">
          <label>{% trans "Group By" %}</label>
            <div class="row">
              <div class="col-sm-12 col-md-12 col-lg-6">
                <div class="oh-input-group">
                  <label class="oh-label">{% trans "Field" %}</label>
                </div>
              </div>
              <div class="col-sm-12 col-md-12 col-lg-6">
                <div class="oh-input-group">
                  <select
                    class="oh-select mt-1 w-100"
                    id="id_field"
                    name="field"
                    class="select2-selection select2-selection--single"
                  >
                    {% for field in gp_fields %}
                    <option value="{{ field.0 }}">{% trans field.1 %}</option>
                    {% endfor %}
                  </select>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      </form>
      <div class="oh-btn-group ml-2">
        <div class="oh-dropdown" x-data="{open: false}">
          <button
            type="button"
            class="oh-btn oh-btn--dropdown oh-btn oh-btn--shadow"
            @click="open = !open"
            @click.outside="open = false"
          >
            {% trans "Actions" %}
          </button>
          <div class="oh-dropdown__menu oh-dropdown__menu--right" x-show="open"
          style="display: none;"
        >
            <ul class="oh-dropdown__items">
              <li class="oh-dropdown__item">
                {% if perms.recruitment.delete_candidates %}
                <a
                  href="#"
                  class="oh-dropdown__link"
                  id="candidate-info-export"
                  data-toggle="oh-modal-toggle"
                  data-target="#candidateExport"
                  hx-get="{% url 'candidate-info-export' %}"
                  hx-target="#candidateExportModalBody"
                  >{% trans "Export" %}</a
                >
                {% endif %}
              </li>
              {% if perms.recruitment.change_candidates or request.user|is_stagemanager %}
              <li class="oh-dropdown__item">
                <a href="#" class="oh-dropdown__link "
                  hx-get='{% url "send-mail" %}?stage_id={{stage.id}}' hx-target="#objectDetailsModalTarget"
                  data-toggle="oh-modal-toggle" data-target="#objectDetailsModal"

                  >{% trans "Bulk mail" %}</a
                >
              </li>
              {% endif %}
              {% if perms.recruitment.add_candidate or request.user|recruitment_manages:rec %}
                <li class="oh-dropdown__item">
                  <a
                    role="button"
                    class="oh-dropdown__link"
                  >{% trans "Resume Shortlisting" %}</a
                  >
                  <form hx-get = "{% url 'view-bulk-resume' %}"
                  hx-target = "#bulkResumeUploadBody">

                  <input type="submit"
                    id="resume_button"
                    hidden
                    data-toggle="oh-modal-toggle"
                    data-target="#bulkResumeUpload" />

                  <select name="rec_id"
                    class="oh-select w-75 mt-2"
                    onclick="event.stopPropagation()"
                    onchange="$('#resume_button').click()"
                  >
                    <option value="">------</option>
                    {% for rec in recruitments %}
                    <option value="{{rec.id}}">{{rec}}</option>
                    {% endfor %}
                  </select>
                </form>

                </li>
              {% endif %}
              {% if perms.recruitment.delete_candidates %}
              <li class="oh-dropdown__item">
                <a href="#" class="oh-dropdown__link " id="archiveCandidates"

                  >{% trans "Archive" %}</a
                >
              </li>
              {% endif %}

              {% if perms.recruitment.delete_candidates %}
              <li class="oh-dropdown__item">
                <a href="#" class="oh-dropdown__link "

                id="unArchiveCandidates"
                  >{% trans "Un-Archive" %}</a
                >
              </li>
              {% endif %}

              {% if perms.recruitment.delete_candidates %}
              <li class="oh-dropdown__item">
                <a
                  href="#"
                  class="oh-dropdown__link oh-dropdown__link--danger"
                  id="deleteCandidates"
                  >{% trans "Delete" %}</a
                >
              </li>
              {% endif %}

            </ul>
          </div>
        </div>
      </div>
      <div class="oh-btn-group ml-2">
        <div class="oh-dropdown" >
          {% if perms.recruitment.add_candidate %}
          <a href="{% url 'candidate-create' %}"
          class='oh-btn oh-btn--secondary'
          >
          <ion-icon name="add-sharp" class="mr-1"></ion-icon>{% trans "Create" %}
        </a>
        {% endif %}
        </div>
      </div>
    </div>
  </div>
</form>


<div
    class="oh-modal"
    id="bulkResumeUpload"
    role="dialog"
    aria-labelledby="bulkResumeUpload"
    aria-hidden="true"
>
    <div class="oh-modal__dialog">
        <div class="oh-modal__dialog-header">
            <h2 class="oh-modal__dialog-title" id="bulkResumeUploadLabel">
                {% trans "Upload Resumes" %}
            </h2>
            <button class="oh-modal__close" aria-label="Close">
                <ion-icon name="close-outline"></ion-icon>
            </button>
            <div
                class="oh-modal__dialog-body mb-4 p-0 pt-2"
                id="bulkResumeUploadBody"
            >
            </div>
        </div>
    </div>
</div>

</section>
<script>
  $(document).ready(function () {
    function candidateFilter(element) {
      var search = $("#candidate-search").val();
      const form = document.querySelector("#filterForm");
      const formData = new FormData(form);
      const queryString = new URLSearchParams(formData).toString();
      const searchParams = new URLSearchParams(queryString);
      const queryObject = Object.fromEntries(searchParams.entries());
      view = $(element).attr("data-view");
      queryObject["search"] = search;
      queryObject["view"] = view;
      stringQueyObject = JSON.stringify(queryObject);
      // $('#list').attr('hx-vals', stringQueyObject);
      // $('#card').attr('hx-vals', stringQueyObject);
    }

    $("#candidate-search").keyup(function (e) {
      $(".candidate-view-type").attr(
        "hx-vals",
        `{"search":"${$(this).val()}"}`
      );
    });
    $(".candidate-view-type").on("click", function (e) {
      let view = $(this).attr("data-view");
      var currentURL = window.location.href;
      if (view != undefined) {
        if (/\?view=[^&]+/.test(currentURL)) {
          newURL = currentURL.replace(/\?view=[^&]+/, "?view=" + view);
        } else {
          var separator = currentURL.includes("?") ? "&" : "?";
          newURL = currentURL + separator + "view=" + view;
        }
        history.pushState({}, "", newURL);
        $("#candidate-search").attr("hx-vals", `{"view":"${view}"}`);
        $("#filterForm").attr("hx-vals", `{"view":"${view}"}`);
        $(".oh-btn--view-active").removeClass("oh-btn--view-active");
        $(this).children("a").addClass("oh-btn--view-active");
      }
    });
    $('#id_field').on('change',function(){
      $('.filterButton')[0].click();
    })
  });
</script>

<script src="{% static '/candidate/bulk.js' %}"></script>