{% extends 'index.html' %}
{% block content %}
{% load static %}
{% load i18n %}
{% load recruitmentfilters horillafilters %}
<style>
  .search-highlight{
    background-color: rgba(255, 68, 0, 0.076);
  }
</style>
<style>
.select2-container{
    width: 100% !important;
}
.select2-container .select2-selection {
    padding: 10px !important;
    height: 50px !important; /* Adjust the height value as needed */
}
.oh-rate {
  height:auto;
}
</style>
{% include 'pipeline/nav.html'%}
<div class="oh-wrapper oh-tabs">

{% include 'pipeline/pipeline_tabs.html' %}
<div id="ohMessages"></div>

<div id="update-message"></div>
{% for rec in recruitment %}
{% if request.user|stage_manages:rec or perms.recruitment.view_recruitment %}
<div class="oh-tabs__content " id="tab_rec_{{rec.id}}">
  <div class="ui-sortable">
    <div class="oh-kanban ui-sortable drop-target">
    {% for stage in rec.stages %}

    <div
      class="oh-kanban__section pipeline_item"
      data-container='candidate'
      id="kanban{{stage.grouper.id}}"
      data-stage-id="{{stage.grouper.id}}"
      data-sequence = "{{stage.grouper.sequence}}"
      data-recruitment-id = "{{rec.id}}"
    >
      <div class="oh-kanban__section-head stage" style="cursor: pointer; {% if request.user.employee_get in stage.grouper.stage_managers.all %} background-color: hsl(38.08deg 100% 50% / 8%); {% endif %}" data-recruitment-id='{{rec.id}}'>
        <div class="d-flex">
          <span class="oh-badge oh-badge--secondary oh-badge--small oh-badge--round ms-2 mr-2" data-rec-stage-badge="{{rec.id}}" id="stageCount{{stage.grouper.id}}" title="{{stage.list|length}} {% trans 'candidates' %}">{{stage.list|length}}</span>
          <span class="oh-kanban__section-title" data-type="label"
          ><input
          class="oh-tabs__movable-title oh-table__editable-input"
          value="{{stage.grouper}}"
          {% if perms.recruitment.change_stage or request.user|recruitment_manages:rec %}
          hx-post="{% url 'stage-title-update' stage.grouper.id %}"
          name='stage'
          {% endif %}
          hx-target = "#update-message"
          style="width: 160px;"
          readonly=""
        />
      </span>
        </div>

        <div class="oh-kanban__head-actions oh-kanban__dropdown" >
          <div class="oh-kanban__head-actions oh-kanban__dropdown">
            <button class="oh-btn oh-btn--small oh-btn--transparent oh-kanban__btn oh-kanban__dropdown-toggle" title = {% trans "Actions" %}>
              <ion-icon name="ellipsis-vertical-sharp" role="img" class="md hydrated" aria-label="ellipsis vertical sharp"></ion-icon>
            </button>
            <div class="oh-dropdown oh-kanban__dropdown-menu d-none">
              <div class="oh-dropdown__menu oh-dropdown__menu--right">
                <ul class="oh-dropdown__items">
                  {% if perms.recruitment.change_stage or request.user|recruitment_manages:rec%}
                  <li class="oh-dropdown__item">
                    <a hx-get='{% url "stage-update-pipeline" stage.grouper.id %}' hx-target='#objectUpdateModalTarget' class="oh-dropdown__link" data-toggle="oh-modal-toggle" data-target="#objectUpdateModal" data-key=".oh-kanban__section">{% trans "Edit" %}</a>
                  </li>
                  {% endif %}
                  {% if perms.recruitment.delete_stage %}
                  <li class="oh-dropdown__item">
                    <form action="{% url 'rec-stage-delete' stage.grouper.id %}" onsubmit="return confirm('{% trans "Are you sure you want to delete this stage?" %}');" method="post">
                      {% csrf_token %}
                      <button class="oh-dropdown__link oh-dropdown__link--danger ">{% trans "Delete" %}</button>
                    </form>
                  </li>
                  {% endif %}
                </ul>
              </div>
            </div>
            {% if perms.recruitment.add_candidate or request.user|is_stagemanager %}
            <div class="oh-dropdown" x-data="{open: false}">
              <a class="" hx-get="{% url 'add-candidate-to-stage' %}?stage_id={{stage.grouper.id}}"
              hx-target="#createTarget"
              data-toggle="oh-modal-toggle"
              data-target="#createModal" @click="open = !open" title="Add Candidates">
                <ion-icon name="add-sharp" role="img" class="md hydrated mt-1" aria-label="add sharp"></ion-icon>
              </a>
            </div>
            {% endif %}
          </div>

        </div>
      </div>

      <div
          class="oh-kanban__section-body ui-sortable candidate-container"
          data-stage-id='{{stage.grouper.id}}'
          data-recruitment-id="{{rec.id}}">

        {% for cand in stage.list %}
        {% if cand.is_active %}
        <div
          class="oh-kanban__card candidate change-cand"
          data-candidate-id="{{cand.id}}"
          data-recruitment-id ="{{rec.id}}"
          id="canididate-{{cand.id}}"
          style="cursor: pointer;overflow: visible;"
          data-candidate = "{{cand.name}}"
          data-job-position ="{{cand.job_position_id}}"
          onclick="window.location.href = `{% url 'candidate-view-individual' cand.id %}`"
        >
          <div class="oh-kanban__card-head align-items-baseline pb-0" {% if cand.is_offer_rejected %}
          style="border-left: solid orangered;"
          {% endif %}>
            <div class="oh-profile oh-profile--md align-items-baseline">
              <div class="oh-profile__avatar mr-2">
                <img
                  src="{{cand.get_avatar}}"
                  class="oh-profile__image d-block mt-3"
                  alt=""
                />
              </div>
              <div>
              <span
                class="oh-profile__name oh-text--dark"
                data-type="label"
                >{{cand}}</span
              >
              {% if request.user|stage_manages:rec or perms.recruitment.add_candidaterating %}
                {% with request.user.employee_get.candidate_rating.all as candidate_ratings  %}
                  {% if candidate_ratings|has_candidate_rating:cand %}
                  <form hx-swap="none" hx-post='{% url "update-candidate-rating" cand.id %}' method="post">
                    {% csrf_token %}
                    <div class="d-block mb-0">
                      <div class="oh-rate" onclick="event.stopPropagation();$(this).parents().closest('form').find('button').click()">
                        {% for i in "54321" %}
                        <input type="radio" id="star{{i}}{{cand.id}}" name="rating" class="rating-radio" value="{{i}}" {% if candidate_ratings|rating:cand == i %} checked {% endif %} />
                        <label for="star{{i}}{{cand.id}}" title="{{i}} Stars">5 {% trans "Stars" %}</label>
                        {% endfor %}
                      </div>
                      <button type="submit"  hidden="true" onclick="event.stopPropagation()"></button>
                      <span id="rating-radio-error"></span>
                    </div>
                  </form>
                  {% else %}
                  <form hx-swap="none" hx-post='{% url "create-candidate-rating" cand.id %}' method="post">
                    {% csrf_token %}
                    <div class="d-block mb-0">
                      <div class="oh-rate" onclick="event.stopPropagation();$(this).parents().closest('form').find('button').click()">
                        {% for i in "54321" %}
                        <input type="radio" id="star{{i}}{{cand.id}}" name="rating" class="rating-radio" value="{{i}}" />
                        <label for="star{{i}}{{cand.id}}" title="{{i}} Stars">5 {% trans "Stars" %}</label>
                        {% endfor %}
                      </div>
                      <button type="submit" hidden="true" onclick="event.stopPropagation()"></button>
                      <span id="rating-radio-error"></span>
                    </div>
                  </form>
                  {% endif %}
                {% endwith %}
              {% endif %}
              </div>
            </div>
            <div class="oh-kanban__card-actions oh-kanban__dropdown" onclick="event.stopPropagation();">
              <button
                class="oh-btn oh-btn--small oh-btn--transparent oh-kanban__btn oh-kanban__dropdown-toggle"
                title={% trans "Actions" %}
                style="
                      width: 25px;
                      height: 25px;"
                >
                <ion-icon
                  name="ellipsis-vertical-sharp"
                  role="img"
                  class="md hydrated"
                  aria-label="ellipsis vertical sharp"
                ></ion-icon>
              </button>

              <div class="oh-dropdown oh-kanban__dropdown-menu d-none">
                <div class="oh-dropdown__menu oh-dropdown__menu--right">
                  <ul class="oh-dropdown__items">
                    {% if perms.recruitment.change_candidate or request.user|is_stagemanager %}
                    <li class="oh-dropdown__item">
                      <a
                        class="oh-dropdown__link oh-dropdown__link--secondary"
                        hx-get='{% url "send-mail" cand.id %}'
                        hx-target='#objectDetailsModalTarget'
                        hx-swap='innerHTML'
                        style="cursor: pointer;"
                        data-toggle='oh-modal-toggle'
                        data-target='#objectDetailsModal'
                        >{% trans "Send Mail" %}</a
                      >
                    </li>
                    {% endif %}
                    {% if perms.recruitment.add_skillzonecandidate or request.user|is_stagemanager %}
                    <li class="oh-dropdown__item">
                      <a
                        class="oh-dropdown__link oh-dropdown__link--secondary oh-activity-sidebar__open"
                        data-toggle="oh-modal-toggle"
                        data-target="#createModal"
                        hx-get="{% url 'to-skill-zone' cand.id %}"
                        hx-target="#createTarget"
                        >{% trans "Add to Sill Zone" %}</a
                      >
                    </li>
                    {% endif %}
                    {% if onboarding|app_installed %}
                      {% if perms.recruitment.add_rejectedcandidate or request.user|is_stagemanager %}
                      <li class="oh-dropdown__item">
                        <a
                          class="oh-dropdown__link oh-dropdown__link--secondary"
                          hx-target="#rejectModalBody"
                            hx-swap="innerHTML"
                            class="oh-btn oh-btn--light"
                            data-toggle="oh-modal-toggle"
                            data-target="#rejectModal"
                            hx-get="{% url 'add-to-rejected-candidates' %}?candidate_id={{cand.id}}"
                            {% if cand.is_offer_rejected %}
                            title="{% trans "Added In Rejected Candidates" %}"
                            {% else %}
                            title="{% trans "Add To Rejected Candidates" %}"
                            {% endif %}
                          >
                          {% if not cand.is_offer_rejected %}
                          {% trans "Add to Rejected" %}
                          {% else %}
                          {% trans "Edit Rejected Candidate" %}
                          {% endif %}
                          </a
                        >
                      </li>
                      {% endif %}
                    {% endif %}
                    {% if perms.view_stagenote or request.user|is_stagemanager %}
                    <li class="oh-dropdown__item">
                      <a
                        class="oh-dropdown__link oh-dropdown__link--secondary oh-activity-sidebar__open"
                        hx-get='{% url "view-note" cand.id %}'
                        hx-target='#activitySidebar'
                        hx-swap="innerHTML"
                        data-target="#activitySidebar"
                        >{% trans "Notes" %}</a
                      >
                    </li>
                    {% endif %}
                    <li class="oh-dropdown__item">
                      <a style="color: inherit;text-decoration: none;" class="oh-dropdown__link oh-dropdown__link--secondary" href="{{cand.resume.url}}" target="_blank"
                        >{% trans "Resume" %}</a>
                    </li>
                    {% if perms.recruitment.change_candidate or request.user|is_stagemanager %}
                    <li class="oh-dropdown__item">
                      <a style="color: inherit;text-decoration: none;" class="oh-dropdown__link oh-dropdown__link--secondary" href="{% url 'rec-candidate-update' cand.id %}" target="_blank"
                        >{% trans "Edit" %}</a>
                    </li>
                    {% endif %}
                    {% if perms.recruitment.delete_candidate %}
                    <li class="oh-dropdown__item">
                      <a href="{% url 'rec-candidate-archive' cand.id %}?is_active=False" class="oh-dropdown__link ">{% trans "Archive" %}</a>
                    </li>
                    {% endif %}
                    {% if perms.recruitment.delete_candidate %}
                    <li class="oh-dropdown__item">
                    <form action="{% url 'rec-candidate-delete' cand.id %}" onsubmit="return confirm('{% trans "Are you sure you want to delete this stage?" %}');" method="post">
                      {% csrf_token %}
                      <button class="oh-dropdown__link oh-dropdown__link--danger ">{% trans "Delete" %}</button>
                    </form>
                  </li>
                  {% endif %}

                  </ul>
                </div>
              </div>
            </div>
          </div>
          <div class="oh-kanban__card-footer"
          {% if cand.is_offer_rejected %}
          style="border-left: solid orangered;"
          {% endif %}
          >
            <span class="oh-kanban__card-footer-text oh-text--light"
              >{{cand.email}}</span
            ></br>

            <span class="oh-kanban__card-footer-text oh-text--light"
              >{{cand.job_position_id}}</span
            >
          </div>
        </div>

        {% endif %}
        {% endfor %}
        {% comment %} {% if stage.list.number %}
            <div class="oh-pagination">
              <nav class="oh-pagination__nav">
                <div class="oh-pagination__input-container me-3">
                <span class="oh-pagination__label me-1">{% trans "Page" %}</span>
                <input
                  type="number"
                  name="{{stage.dynamic_name}}"
                  class="oh-pagination__input"
                  value="{{stage.list.number}}"
                  href="?{{pd}}"
                  min="1"
                />
                <span class="oh-pagination__label"
                  >{% trans "of" %} {{stage.list.paginator.num_pages}}</span
                >
                </div>
                <ul class="oh-pagination__items">
                {% if stage.list.has_previous %}
                <li class="oh-pagination__item oh-pagination__item--wide">
                  <a
                  href="?{{pd}}&{{stage.dynamic_name}}=1"
                  class="oh-pagination__link"
                  >{% trans "First" %}</a
                  >
                </li>
                <li class="oh-pagination__item oh-pagination__item--wide">
                  <a
                  href="?{{pd}}&{{stage.dynamic_name}}={{ stage.list.previous_page_number }}"
                  class="oh-pagination__link"
                  >{% trans "Previous" %}</a
                  >
                </li>
                {% endif %} {% if stage.list.has_next %}
                <li class="oh-pagination__item oh-pagination__item--wide">
                  <a
                  href="?{{pd}}&{{stage.dynamic_name}}={{ stage.list.next_page_number }}"
                  class="oh-pagination__link"
                  >{% trans "Next" %}</a
                  >
                </li>
                <li class="oh-pagination__item oh-pagination__item--wide">
                  <a
                  href="?{{pd}}&{{stage.dynamic_name}}={{ stage.list.paginator.num_pages }}"
                  class="oh-pagination__link"
                  >{% trans "Last" %}</a
                  >
                </li>
                {% endif %}
                </ul>
              </nav>
              </div>
              {% endif %} {% endcomment %}
      </div>

    </div>
    {% endfor %}


    {% if perms.recruitment.add_stage or request.user|recruitment_manages:rec %}
    <div class="oh-kanban__add-container">
      <button class="oh-btn oh-btn--x-small oh-kanban__add-section" data-target="#objectCreateModal" data-toggle="oh-modal-toggle" hx-get="{% url "rec-stage-create" %}?recruitment_id={{rec.id}}" hx-target="#objectCreateModalTarget">
          <ion-icon class="me-1 md hydrated" name="add-outline" role="img" aria-label="add outline"></ion-icon>
          {% trans "Stage" %}
      </button>
    </div>
    {% endif %}
  </div>
</div>
</div>
{% endif %}
{% endfor %}
</div>
<div class="oh-wrapper mb-5">
<!-- Paginator Section -->
<div class="oh-pagination">
  <span
    class="oh-pagination__page"
    data-toggle="modal"
    data-target="#addEmployeeModal"
    >
    {% trans "Page" %} {{ recruitment.number }} {% trans "of" %} {{ recruitment.paginator.num_pages }}.
    </span
  >

  <nav class="oh-pagination__nav">
    <div class="oh-pagination__input-container me-3">
      <span class="oh-pagination__label me-1">{% trans "Page" %}</span>

      <input
        type="number"
        name="page"
        class="oh-pagination__input"
        value="{{recruitment.number}}"
        hx-get="{% url 'recruitment-search' %}?{{pd}}" hx-target="#tab_rec_{{rec.id}}"
        min="1"
      />
      <span class="oh-pagination__label">{% trans "of" %} {{recruitment.paginator.num_pages}}</span>
    </div>

    <ul class="oh-pagination__items">
      {% if recruitment.has_previous %}
      <li class="oh-pagination__item oh-pagination__item--wide">
        <a href="{% url 'pipeline' %}?{{pd}}&page=1" class="oh-pagination__link">{% trans "First" %}</a>
      </li>
      <li class="oh-pagination__item oh-pagination__item--wide">
        <a href="{% url 'pipeline' %}?{{pd}}&page={{ recruitment.previous_page_number }}" class="oh-pagination__link">{% trans "Previous" %}</a>
      </li>
      {% endif %}
      {% if recruitment.has_next %}
      <li class="oh-pagination__item oh-pagination__item--wide">
        <a href="{% url 'pipeline' %}?{{pd}}&page={{ recruitment.next_page_number }}" class="oh-pagination__link">{% trans "Next" %}</a>
      </li>
      <li class="oh-pagination__item oh-pagination__item--wide">
        <a href="{% url 'pipeline' %}?{{pd}}&page={{ recruitment.paginator.num_pages }}" class="oh-pagination__link">{% trans "Last" %}</a>
      </li>
      {% endif %}

    </ul>
  </nav>
</div>

</div>

{% include 'pipeline/footer_components.html' %}
<script src="{% static 'kanban/stageSequence.js' %}"></script>

{% endblock content %}