{% extends 'index.html' %}
{% block content %}
{% load static i18n %}
{% load i18n %}
{% load basefilters %}
{% load mathfilters %}

<style>
  .oh-profile__avatar-limit-height {
    height: 30px !important;
  }
  .oh-profile_name_custom {
    font-size: 13px;
    padding-left: 4px;
  }
  .oh-profile__image_custm {
    width: 26px;
    height: 26px;
  }
  .avatars {
    display: flex;
    padding: 8px 10px 8px 10px;
  }

  .avatars__item {
    background-color: #596376;
    border: 2px solid white;
    border-radius: 100%;
    color: #ffffff;
    display: block;
    font-family: sans-serif;
    font-size: 12px;
    font-weight: 100;
    height: 26px;
    width: 26px;
    line-height: 17px;
    text-align: center;
    transition: margin 0.1s ease-in-out;
    overflow: hidden;
    margin-left: -10px;
  }

  .avatars__item:first-child {
    z-index: 5;
  }

  .avatars__item:nth-child(2) {
    z-index: 4;
  }

  .avatars__item:nth-child(3) {
    z-index: 3;
  }

  .avatars__item:nth-child(4) {
    z-index: 2;
  }

  .avatars__item:nth-child(5) {
    z-index: 1;
  }

  .avatars__item:last-child {
    z-index: 0;
  }

  .avatars__item img {
    width: 100%;
  }

  .avatars:hover .avatars__item {
    margin-right: 10px;
  }
</style>
<div id="message"></div>
<main :class="sidebarOpen ? 'oh-main__sidebar-visible' : ''">

  <div class="oh-wrapper mb-2">
    <div class="oh-card">
      <div class="oh-main__titlebar oh-d-flex-column--resp oh-mb-3--small">
        <h1 class="oh-main__titlebar-title fw-bold">{% trans "Feedback" %}: {{feedback}}</h1>
      </div>

        <div class="align-items-center d-flex justify-content-between">
          <div class="oh-profile oh-profile--md" title="Owner">
            <span class="oh-profile__info-label ">
              <span>{% trans "Owner: " %}</span>
            </span>
            <div class="oh-profile__avatar mr-1">
              <img src="{{feedback.employee_id.get_avatar}}" class="oh-profile__image"
                alt="." />
            </div>
            <span class="oh-profile__info-value"
              >{{feedback.employee_id}}</span>
          </div>
            <div class="oh-main__titlebar oh-main__titlebar--right justify-content-end">
              {% if  perms.pms.change_feedback or request.user|is_reportingmanager %}
                <select id="status" class="oh-select oh-select--sm ms-3" name="feedback_status" title="Status"
                    hx-post="{%url 'feedback-detailed-view-status'  id=feedback.id %}"
                    hx-trigger="change" hx-swap="afterend" >
                      <option value="{{feedback.status}}" selected>
                          {% trans feedback.get_status_display %}
                      </option>
                    {%for value,label in feedback_status %}
                      {% if feedback.status != label %}
                        <option value="{{label}}">{% trans label %}</option>
                      {% endif%}
                    {% endfor %}
                </select>
              {% else %}
                <label id="status" class="oh-select oh-select--sm ms-3" name="feedback_status" title="Status">
                   {% trans feedback.get_status_display %}
                </label>
              {% endif %}
              {% if perms.pms.change_feedback or perms.pms.delete_feedback or request.user|is_reportingmanager  %}
              <div class="oh-btn-group m-2">
                  {% if not feedback_started %}
                    {% if perms.pms.change_feedback or request.user|is_reportingmanager %}
                      <div class="d-flex flex-row-reverse">
                        <button
                          data-toggle="oh-modal-toggle"
                          class="oh-btn oh-btn--light-bkg w-100"
                          data-target="#feedbackModalPopup"
                          hx-get="{% url 'feedback-update' id=feedback.id %}"
                          hx-target="#feedbackModalTarget">
                          <ion-icon name="create-outline" class="me-1" ></ion-icon>
                        </button>
                      </div>
                    {% endif %}
                  {% endif %}
                  {% if perms.pms.delete_feedback or request.user|is_reportingmanager %}
                    <form action="{% url 'feedback-archive' id=feedback.id %}" method="post" onsubmit="return confirm('{% trans "Do you want archive this Feedback ?" %}')" >
                      <button class="oh-btn  w-100 "  title="{% trans 'Archive' %}" style="background-color: white;!important">
                        {% csrf_token %}
                        <ion-icon name="archive-sharp" type="submit"></ion-icon>
                      </button>
                    </form>
                    {% if not feedback.feedback_answer.all %}
                      <form action="{% url 'feedback-delete' id=feedback.id %}" method="post" onsubmit="return confirm('{% trans "Do you want Delete this Feedback ?" %}')">
                        {% csrf_token %}
                        <button  class="oh-btn oh-btn--danger-outline  w-100" title="{% trans 'Delete' %}" style="background-color: white;!important">
                            <ion-icon name="trash-outline" role="img" class="md hydrated" aria-label="trash outline"></ion-icon>
                        </button>
                      </form>
                    {% endif %}
                  {% endif %}
              </div>
              {% endif %}
            </div>
        </div>
        <div class="align-items-center d-flex" style="min-height: 40px;">
          <span class="oh-profile__info-label ">{% trans "Start date: " %}</span>
          <span class="oh-profile__info-value">{{feedback.start_date}}</span>
        </div>
        <div class="align-items-center d-flex" style="min-height: 40px;">
          <span class="oh-profile__info-label ">{% trans "Due on: " %}</span>
          <span class="oh-profile__info-value">{{feedback.end_date}}</span>
          <span class='d-flex justify-content-between align-items-center ml-1 mb-2'
          >
              <span title = 'due  {% if feedback.end_date == today %} today {% else %}in {{feedback.end_date|sub:today}}{% endif %}'>
                  <ion-icon
                      class="text-{% if feedback.end_date < today %}danger {% elif feedback.end_date == today %}warning {% else %}success{% endif %}"
                      name="time-sharp"
                  >
                  </ion-icon>
              </span>
          </span>
        </div>
        <div class="align-items-center d-flex" style="min-height: 40px;">
          <span class="oh-profile__info-label ">{% trans "Answered employees: " %}</span>
          <div class="d-flex justify-content-between custom-scroll">
            <div class="avatars" id="avatarsContainer">
              {% for employee in employee_statics.yes %}
              <a
                href="{% url 'employee-view-individual' employee.id %}"
                class="avatars__item"
                title="{{employee}}"
                ><img class="avatar" src="{{employee.get_avatar}}" alt=""
              /></a>
              {% endfor %}
            </div>
          </div>
        </div>
        <div class="align-items-center d-flex" style="min-height: 40px;">
          <span class="oh-profile__info-label ">{% trans "Employees not answerd yet: " %}</span>
          <div class="d-flex justify-content-between custom-scroll">
            <div class="avatars" id="avatarsContainer">
              {% for employee in employee_statics.no %}
              <a
                href="{% url 'employee-view-individual' employee.id %}"
                class="avatars__item"
                title="{{employee}}"
                ><img class="avatar" src="{{employee.get_avatar}}" alt=""
              /></a>
              {% endfor %}
            </div>
          </div>
        </div>
        {% if perms.pms.view_feedback %}
          {% if feedback.cyclic_feedback %}
            <div class="align-items-center d-flex" style="min-height: 40px;">
              <span class="oh-profile__info-label ">{% trans "Cyclic feedback period: " %}</span>
              <span class="oh-profile__info-value">
                {{feedback.cyclic_feedback_days_count}} {{feedback.get_cyclic_feedback_period_display}}
              </span>
            </div>
            <div class="align-items-center d-flex" style="min-height: 40px;">
              <span class="oh-profile__info-label ">{% trans "Next feedback on: " %}</span>
              <span class="oh-profile__info-value">
                {{feedback.cyclic_next_start_date}}-{{feedback.cyclic_next_end_date}}
              </span>
            </div>
          {% endif %}
        {% endif %}


      <!-- checking userlevel   -->

    </div>
  </div>

  <div class="oh-wrapper mb-2">
    <div class="oh-tabs" >
      <ul class="oh-tabs__tablist" >
        <li class="oh-tabs__tab oh-tabs__tab--active" onclick="switchTab(event);" data-target="#feedback-answers">
          {% trans "Feedback Answers" %}
        </li>
        <li class="oh-tabs__tab" onclick="switchTab(event);$('#feedback-overview-button').click()" data-target="#feedback-overview">
          {% trans "Feedback Overview" %}
        </li>
      </ul>
      <div class="oh-tabs__contents">
        <!-- feddback answers -->
        <div class="oh-tabs__content oh-tabs__content--active" id="feedback-answers">
          <div class="oh-card p-4">

          <div class="row">
            <div class="col-12 col-sm-12 col-md-12 col-lg-12">
              <div class="m-2">
                <div class="oh-card__body">
                  <div class="oh-sticky-table">
                    <div class="oh-sticky-table__table">
                      <div class="oh-sticky-table__thead">
                        <div class="oh-sticky-table__tr">
                          <div class="oh-sticky-table__th">{% trans "Employee" %}</div>
                          <div class="oh-sticky-table__th">{% trans "Status" %}</div>
                          <div class="oh-sticky-table__th"></div>
                        </div>
                      </div>
                      <div class="oh-sticky-table__tbody">
                        <div class="oh-sticky-table__tr">
                          <div class="oh-sticky-table__sd">
                            <ul class="oh-sticky-table___profile-list">
                              <li class="oh-sticky-table__profile-item">
                                <div class="oh-profile oh-profile--md">
                                  <div class="oh-profile__avatar mr-1">
                                    <img src="{{feedback.employee_id.get_avatar}}"
                                      class="oh-profile__image" alt="{{feedback.employee_id}}" />
                                  </div>
                                  <span class="oh-profile__name oh-text--dark"> {{feedback.employee_id}}</span>
                                </div>
                              </li>
                            </ul>
                          </div>
                          <div class="oh-sticky-table__td">
                            <div class="d-flex align-items-center">
                              <span class=""></span><span class="feedback-status" x-data-feedback-id="{{feedback.id}}" x-data-employee-id="{{feedback.employee_id.id}}"> </span>
                            </div>
                          </div>
                          <div class="oh-sticky-table__td"><button
                            class="oh-btn  oh-btn--secondary oh-activity-sidebar__open"
                            data-target="#answerViewAccordion" hx-post="{%url 'feedback-detailed-view-answer' id=feedback.id emp_id=feedback.employee_id.id %}" hx-target="#answerView">{% trans "Answer View" %}
                            </button>
                          </div>
                      </div>
                      </div>
                    </div>
                  </div>
                </div>

              </div>
            </div>
          </div>

          <!-- manager section -->

          <div class="row">
            <div class="col-12 col-sm-12 col-md-12 col-lg-12">
              <div class="m-2">
                <div class="oh-card__body">
                  <div class="oh-sticky-table">
                    <div class="oh-sticky-table__table">
                      <div class="oh-sticky-table__thead">
                        <div class="oh-sticky-table__tr">
                          <div class="oh-sticky-table__th">{% trans "Manager" %}</div>
                          <div class="oh-sticky-table__th">{% trans "Status" %}</div>
                          <div class="oh-sticky-table__th"></div>
                        </div>
                      </div>
                      <div class="oh-sticky-table__tbody">
                        <div class="oh-sticky-table__tr">
                          <div class="oh-sticky-table__sd">
                            <ul class="oh-sticky-table___profile-list">
                              <li class="oh-sticky-table__profile-item">
                                <div class="oh-profile oh-profile--md">
                                  <div class="oh-profile__avatar mr-1">
                                    <img src="{{feedback.manager_id.get_avatar}}"
                                      class="oh-profile__image" alt="{{feedback.employee_id}}" />
                                  </div>
                                  <span class="oh-profile__name oh-text--dark"> {{feedback.manager_id}}</span>
                                </div>
                              </li>
                            </ul>
                          </div>
                          <div class="oh-sticky-table__td">
                            <div class="d-flex align-items-center">
                              <span class=""></span><span class="feedback-status" x-data-feedback-id="{{feedback.id}}" x-data-employee-id="{{feedback.manager_id.id}}"></span>
                            </div>
                          </div>
                          <div class="oh-sticky-table__td"><button
                            class="oh-btn  oh-btn--secondary oh-activity-sidebar__open"
                            data-target="#answerViewAccordion" hx-post="{%url 'feedback-detailed-view-answer' id=feedback.id emp_id=feedback.manager_id.id %}" hx-target="#answerView">{% trans "Answer View" %}
                            </button></div>
                      </div>
                      <!-- manager answer off canvas -->
                      <div class="oh-activity-sidebar" id="managerAnswer">
                        <div class="oh-activity-sidebar__header">
                          <ion-icon name="chevron-back-outline"
                            class="oh-activity-sidebar__header-icon me-2 oh-activity-sidebar__close"
                            data-target="#managerAnswer"></ion-icon>
                          <span class="oh-activity-sidebar__title"> {% trans "Answers" %}</span>
                        </div>
                        <div class="oh-activity-sidebar__body">
                          <ol class="oh-activity-sidebar__qa-list" role="list">
                            {% for answer in manager_answers %}
                            {% include 'feedback/feedback_detailed_view_answer.html' %}
                            {%endfor %}
                          </ol>
                        </div>
                      </div>
                        <!-- endof  manager answer off canvas -->
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- subordinate section -->

          <div class="row">
            <div class="col-12 col-sm-12 col-md-12 col-lg-12">
              <div class="m-2">
                <div class="oh-card__body">
                  <div class="oh-sticky-table">
                    <div class="oh-sticky-table__table">
                      <div class="oh-sticky-table__thead">
                        <div class="oh-sticky-table__tr">
                          <div class="oh-sticky-table__th">{% trans "Subordinates" %}</div>
                          <div class="oh-sticky-table__th">{% trans "Status" %}</div>
                          <div class="oh-sticky-table__th"></div>
                        </div>
                      </div>
                      <div class="oh-sticky-table__tbody">
                        {% for employee in feedback.subordinate_id.all %}
                        <div class="oh-sticky-table__tr">
                          <div class="oh-sticky-table__sd">
                            <ul class="oh-sticky-table___profile-list">
                              <li class="oh-sticky-table__profile-item">
                                <div class="oh-profile oh-profile--md">
                                  <div class="oh-profile__avatar mr-1">
                                    <img src="{{employee.get_avatar}}"
                                      class="oh-profile__image" alt="" />
                                  </div>
                                  <span class="oh-profile__name oh-text--dark"> {{employee}}</span>
                                </div>
                              </li>
                            </ul>
                          </div>
                          <div class="oh-sticky-table__td">
                            <div class="d-flex align-items-center">
                              <span class=""></span ><span class="feedback-status" x-data-feedback-id="{{feedback.id}}" x-data-employee-id="{{employee.id}}"></span>
                            </div>
                          </div>
                          <div class="oh-sticky-table__td"><button
                              class="oh-btn  oh-btn--secondary oh-activity-sidebar__open"
                              data-target="#answerViewAccordion" hx-post="{%url 'feedback-detailed-view-answer' id=feedback.id emp_id=employee.id %}" hx-target="#answerView">{% trans "Answer View" %}
                              </button></div>
                        </div>
                        {% endfor %}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        <!-- end of subordinate section -->

          <!-- Colleague section -->

          <div class="row">
            <div class="col-12 col-sm-12 col-md-12 col-lg-12">
              <div class="m-2">
                <div class="oh-card__body">
                  <div class="oh-sticky-table">
                    <div class="oh-sticky-table__table">
                      <div class="oh-sticky-table__thead">
                        <div class="oh-sticky-table__tr">
                          <div class="oh-sticky-table__th">{% trans "Colleague" %}</div>
                          <div class="oh-sticky-table__th">{% trans "Status" %}</div>
                          <div class="oh-sticky-table__th"></div>
                        </div>
                      </div>
                      <div class="oh-sticky-table__tbody">
                        {% for employee in feedback.colleague_id.all %}
                        <div class="oh-sticky-table__tr">
                          <div class="oh-sticky-table__sd">
                            <ul class="oh-sticky-table___profile-list">
                              <li class="oh-sticky-table__profile-item">
                                <div class="oh-profile oh-profile--md">
                                  <div class="oh-profile__avatar mr-1">
                                    <img src="{{employee.get_avatar}}"
                                      class="oh-profile__image" alt="" />
                                  </div>
                                  <span class="oh-profile__name oh-text--dark"> {{employee}}</span>
                                </div>
                              </li>
                            </ul>
                          </div>
                          <div class="oh-sticky-table__td">
                            <div class="d-flex align-items-center">
                              <span class=""></span><span class="feedback-status" x-data-feedback-id="{{feedback.id}}" x-data-employee-id="{{employee.id}}"></span>
                            </div>
                          </div>
                          <div class="oh-sticky-table__td"><button
                              class="oh-btn  oh-btn--secondary oh-activity-sidebar__open"
                              data-target="#answerViewAccordion" hx-post="{%url 'feedback-detailed-view-answer' id=feedback.id emp_id=employee.id %}" hx-target="#answerView">{% trans "Answer View" %}
                              </button></div>
                        </div>
                        {% endfor %}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        </div>
        <!-- endof colleague section -->
      </div>
      <div class="oh-tabs__content" id="feedback-overview">
        <div id="feedback_overview_div">
          <button hx-get="{% url 'get-feedback-overview' feedback.id %}"
              hx-target="#feedback-overview" id="feedback-overview-button" hidden>
          </button>
      </div>
      </div>
    </div>
</div>
</main>

  <!-- answer off canvas -->
  <div class="oh-activity-sidebar" id="answerViewAccordion" style="z-index:1000">
    <div class="oh-activity-sidebar__header">
      <span id="closanswer" style="cursor: pointer;" title="{% trans 'Close' %}">
        <ion-icon
          name="chevron-back-outline"
          class="oh-activity-sidebar__header-icon me-2 oh-activity-sidebar__close"
          id="close"
          data-target="#activitySidebar"
          style="font-size: 24px;"
        ></ion-icon>
      <span class="oh-activity-sidebar__title"> {% trans "Answers" %}</span>
    </div>
    <div class="oh-activity-sidebar__body">
      <ol class="oh-activity-sidebar__qa-list" role="list" id="answerView">
      </ol>
    </div>
  </div>

  <!-- update modal  -->
  <div class="oh-modal" id="feedbackModalPopup" role="dialog" aria-labelledby="" aria-hidden="true">
    <div class="oh-modal__dialog" style="max-width:885px;" id="">
      <div class="oh-modal__dialog-header">
        <span class="oh-modal__dialog-title" id="addEmployeeObjectiveModalLabel">{% trans "Update Feedback" %}</span>
        <button type="button" class="oh-modal__close reloadButton" aria-label="Close">
            <ion-icon name="close-outline"></ion-icon>
        </button>
      </div>
      <div class="oh-modal__dialog-body" id="feedbackModalTarget">
      </div>
    </div>
</div>

<script src="{% static 'src/feedback/feedback_answer.js' %}"></script>
<script src="{% static 'src/feedback/feedback_detailed_view.js' %}"></script>

<script>
  $(document).ready(function () {
    $("#close").attr(
      "class",
      "oh-activity-sidebar__header-icon me-2 oh-activity-sidebar__close md hydrated"
    );
  });
  $("#closanswer").click(function (e) {
    $("#answerViewAccordion").removeClass("oh-activity-sidebar--show");
  });

  function get_collegues(element) {
      var employee_id = $(element).val();

      // Check if the employee_id is valid
      if (employee_id) {
          // Dynamically set the hx-vals attribute for the manager button
          $('#managerButton').attr('hx-vals', JSON.stringify({ employee_id: employee_id, data: 'manager' })).click();
          // Dynamically set the hx-vals attribute for the colleagues button
          $('#colleguesButton').attr('hx-vals', JSON.stringify({ employee_id: employee_id, data: 'colleagues' })).click();
          // Dynamically set the hx-vals attribute for the subordinates button
          $('#subordinatesButton').attr('hx-vals', JSON.stringify({ employee_id: employee_id, data: 'subordinates' })).click();
          // Dynamically set the hx-vals attribute for the keyresult button
          $('#keyresultButtton').attr('hx-vals', JSON.stringify({ employee_id: employee_id, data: 'keyresults' })).click();
      } else {
          console.error('Invalid employee_id');
      }
  }
  function changeCyclicFeedback(element) {
    if (element.checked) {
        $("#cyclic_feedback_period").show();
        $("#id_cyclic_feedback_days_count").attr("required", true);
        $("#id_cyclic_feedback_period").attr("required", true);
    } else {
        $("#cyclic_feedback_period").hide();
        $("#id_cyclic_feedback_days_count").attr("required", false);
        $("#id_cyclic_feedback_period").attr("required", false);
    }
  }
</script>

{% endblock %}